js_api: basic timeseries widget working :) (be2b6f97) · Commits · github_fork / Clip

doc/js-api-example.html

0 → 100644

+31 −0

Original line number	Diff line number	Diff line
		<!DOCTYPE html>
		<html>
		<head>
		<title>FnordMetric</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
		</head>
		<body>

		<div
		data-fnordmetric="timeseries"
		data-style="area"
		data-time-range="36000"
		data-autoupdate="10"
		data-gauges="user_logins,user_logins_failed"
		data-colors="#00ff00,#ff0000"
		style="width:700px; border:2px solid #ccc;"></div>

		<script src='http://localhost:8080/js/fnordmetric.ext.js' type='text/javascript'></script>

		<script>
		FnordMetric.setup({
		"address": "localhost:8080",
		"namespace": "loveos"
		});
		</script>

		</body>
		</html>

web/js/fnordmetric.js_api.js

+43 −34

Original line number	Diff line number	Diff line
		@@ -9,60 +9,69 @@ FnordMetric.js_api = (function(){
		$("div[data-fnordmetric]").each(function(n, e){
		var elem = $(e);

		if (elem.attr("data-fnordmetric") == "timeseries") {
		var widget = FnordMetric.widgets.timeseriesWidget();
		var gauges = elem.attr("data-gauges").split(",");
		var colors = elem.attr("data-colors");
		if (colors) { colors = colors.split(",") } else { colors = []; }
		var series = [];

		var wstyle = elem.attr("data-style");
		if (!wstyle) { wstlye = "line"; }

		var wupdate = elem.attr("data-autoupdate");
		if (!wupdate) { wupdate = 60; }
		wupdate = parseInt(wupdate, 10);

		var wrange = elem.attr("data-time-range");
		if (!wrange) { wrange = 3600; }
		wrange = parseInt(wrange, 10);

		$(gauges).each(function(i, gname){
		var gcolor = colors[i];
		if (!gcolor) { gcolor = "#4572a7"; }
		series.push(
		{ "color": gcolor, "data": [{x:0, y:0}], name: gname });
		});

		widget.render({
		elem: elem,
		async_chart: true,
		autoupdate: 1,
		default_cardinal: false,
		default_style: "line",
		end_timestamp: 1360281926,
		include_current: true,
		klass: "TimelineWidget",
		gauges: ["user_logins"],
		series: [
		{ "color": "#4572a7", "data": [{x:0, y:0}], name: "user_logins" }
		],
		start_timestamp: 1360263926,
		tick: 60,
		title: "Login and Signup",
		widget_key: "loginandsignup",
		width: 100,
		xticks: 300,
		ext: true
		ext: true,
		gauges: gauges,
		series: series,
		default_cardinal: false,
		default_style: wstyle,
		autoupdate: wupdate,
		trange: wrange,
		widget_key: "loginandsignup",
		});

		widgets.push(widget);
		}

		});
		}

		function socketOpen(){
		console.log("[FnordMetric] connected...");
		init();
		timer = window.setInterval(poll, update_interval);
		}

		function socketClose(){
		console.log("[FnordMetric] socket closed");
		if (timer) window.clearInterval(timer);
		timer = null;
		window.setTimeout(FnordMetric.connect, 1000);
		}

		function socketMessage(raw){
		var evt = JSON.parse(raw.data);

		console.log("[FnordMetric] socket msg");
		console.log(evt);
		for (n = 0; n < widgets.length; n++)
		widgets[n].announce(evt);
		}

		function poll() {
		console.log("yeah");
		}

		return {
		init: init,
		socketOpen: socketOpen,

web/js/fnordmetric.timeseries_widget.js

+8 −3

Original line number	Diff line number	Diff line
		@@ -15,7 +15,6 @@ FnordMetric.widgets.timeseriesWidget = function(){
		var xticks = 30;

		function render(_opts){
		console.log(_opts);
		opts = _opts;

		if(opts.default_style == "areaspline"){ opts.default_style = 'area'; }
		@@ -352,12 +351,18 @@ FnordMetric.widgets.timeseriesWidget = function(){
		}

		function updateRange(force){
		var _now = parseInt(new Date().getTime() / 1000);

		if (opts.ext) {
		opts.end_timestamp = _now;
		opts.start_timestamp = _now - opts.trange;
		return;
		}

		if(!opts.tick){
		opts.tick = opts.ticks[0];
		}

		var _now = parseInt(new Date().getTime() / 1000);

		if((opts.autoupdate) &&
		((_now - opts.end_timestamp) < ((opts.tick*(opts.autoupdate+1)) + 5))){
		force = true;

Admin message