timeseries: proper legend (2dd9a601) · Commits · github_fork / Clip

web/fnordquery.css

+37 −2

Original line number	Diff line number	Diff line
		@@ -197,7 +197,7 @@ background-image: -ms-linear-gradient(top, #f4f4f4, #e9e9e9);
		background-image: -o-linear-gradient(top, #f4f4f4, #e9e9e9);
		background-image: linear-gradient(top, #f4f4f4, #e9e9e9);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f4f4f4', EndColorStr='#e9e9e9');
		padding: 0 15px;
		padding: 0 25px;
		border-bottom: 1px solid #C9C9C9;
		border-top: 1px solid #d0d0d0;
		font-size:13px;
		@@ -238,7 +238,7 @@ text-shadow: 1px 0px 2px rgba(255, 255, 255, 1);

		.headbar .button:active{ background:#ddd; }

		.headbar .btn_group.mr{ margin-right:17px; }
		.headbar .btn_group.mr{ }

		.headbar .btn_group .button{
		border-radius:0;
		@@ -361,3 +361,38 @@ ul.ui_tabs li.active a{
		.rickshaw_graph .x_tick.glow .title, .rickshaw_graph .y_ticks.glow text{
		font-size:14px;
		}

		.rickshaw_legend {
		font-family: Arial;
		font-size: 12px;
		color: #333;
		background: none;
		display: inline-block;
		padding: 12px 5px;
		border-radius: 2px;
		position: relative;
		}

		.rickshaw_legend .ui-sortable {
		margin-left:-10px;
		}

		.rickshaw_legend li.line{
		float:left;
		clear:none;
		padding-right:0;
		}

		.rickshaw_legend a.action{
		margin-right:5px;
		display:none;
		}


		.rickshaw_legend li.line .label{
		font.size:14px;
		margin-left:5px;
		color:#333;
		position:relative;
		top:-1px;
		}
		No newline at end of file

web/src/fnordquery.timeseries_widget.js

+62 −78

Original line number	Diff line number	Diff line
		fnordquery.widgets.timeseries_widget = function(){

		var widget_uid = "fnord-" + parseInt(Math.random()*99990000);
		var width, height, opts;
		var width, height, opts, graph;

		//["#FACE4F", "#42436B", "#CD645A", "#2F635E"]

		function render(_opts){
		opts = _opts;

		draw_layout();

		width = opts.elem.width() - 65;
		height = opts.height \|\| 400;

		//for (ind in opts.series){
		width = opts.elem.width() - 50;
		height = opts.height \|\| 430;


		var graph = new Rickshaw.Graph( {
		graph = new Rickshaw.Graph( {
		element: $('.container', opts.elem)[0],
		width: width,
		height: height,
		@@ -23,56 +22,47 @@ fnordquery.widgets.timeseries_widget = function(){
		interpolation: 'cardinal',
		stroke: true,
		series: opts.series,
		padding: {
		top: 0.1,
		bottom: 0.15
		}
		});

		graph.render();

		var hoverDetail = new Rickshaw.Graph.HoverDetail( {
		graph: graph
		});

		var legend = new Rickshaw.Graph.Legend({
		graph: graph,
		element: document.getElementById('legend')
		element: $('.legend', opts.elem)[0]
		});

		var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
		graph: graph,
		legend: legend
		hoverDetail = new Rickshaw.Graph.HoverDetail( {
		graph: graph
		});

		var order = new Rickshaw.Graph.Behavior.Series.Order( {
		shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
		graph: graph,
		legend: legend
		});

		var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {
		highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
		graph: graph,
		legend: legend
		});

		var smoother = new Rickshaw.Graph.Smoother( {
		graph: graph,
		element: $('#smoother')
		});

		var xAxis = new Rickshaw.Graph.Axis.Time( {
		new Rickshaw.Graph.Axis.Time( {
		graph: graph,
		ticksTreatment: 'glow'
		});
		}).render();

		xAxis.render();

		var yAxis = new Rickshaw.Graph.Axis.Y( {
		new Rickshaw.Graph.Axis.Y( {
		graph: graph,
		tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
		ticksTreatment: 'glow'
		} );

		yAxis.render();

		}).render();
		}

		function change_style(){}

		function draw_layout(){
		$(opts.elem)
		.append(
		@@ -128,29 +118,23 @@ fnordquery.widgets.timeseries_widget = function(){
		)
		)
		)
		.append(
		$('<div></div>')
		.addClass('legend')
		.css({
		margin: '10px 30px 0 30px',
		})
		)
		.append(
		$('<div></div>')
		.addClass('container')
		.css({
		height: opts.height,
		margin: '50px 30px 40px 30px',
		margin: '0 23px 50px 23px',
		})
		);


		// if(opts.ticks){
		// $('.headbar', opts.elem);
		// for(__tick in opts.ticks){
		// var _tick = opts.ticks[__tick];
		// $('.tick_btns', opts.elem)
		// }
		// }
		}

		function change_style(){}



		return {
		render: render
		}

web/test.html

+3 −68

Original line number	Diff line number	Diff line
		@@ -25,71 +25,6 @@
		<div class="mywidget"></div>


		<div id="content">

		<form id="side_panel" style="display:none;">
		<section><div id="legend"></div></section>
		<section>
		<div id="renderer_form" class="toggler">
		<input type="radio" name="renderer" id="area" value="area" checked>
		<label for="area">area</label>
		<input type="radio" name="renderer" id="bar" value="bar">
		<label for="bar">bar</label>
		<input type="radio" name="renderer" id="line" value="line">
		<label for="line">line</label>
		<input type="radio" name="renderer" id="scatter" value="scatterplot">
		<label for="scatter">scatter</label>
		</div>
		</section>
		<section>
		<div id="offset_form">
		<label for="stack">
		<input type="radio" name="offset" id="stack" value="zero" checked>
		<span>stack</span>
		</label>
		<label for="stream">
		<input type="radio" name="offset" id="stream" value="wiggle">
		<span>stream</span>
		</label>
		<label for="pct">
		<input type="radio" name="offset" id="pct" value="expand">
		<span>pct</span>
		</label>
		<label for="value">
		<input type="radio" name="offset" id="value" value="value">
		<span>value</span>
		</label>
		</div>
		<div id="interpolation_form">
		<label for="cardinal">
		<input type="radio" name="interpolation" id="cardinal" value="cardinal" checked>
		<span>cardinal</span>
		</label>
		<label for="linear">
		<input type="radio" name="interpolation" id="linear" value="linear">
		<span>linear</span>
		</label>
		<label for="step">
		<input type="radio" name="interpolation" id="step" value="step-after">
		<span>step</span>
		</label>
		</div>
		</section>
		<section>
		<h6>Smoothing</h6>
		<div id="smoother"></div>
		</section>
		<section></section>
		</form>

		<div id="chart_container">
		<div id="chart"></div>
		<div id="timeline"></div>
		<div id="slider"></div>
		</div>

		</div>

		<div class="widget NumbersWidget" style="margin-bottom: 20px; overflow-x: hidden; overflow-y: hidden; width:1700px;"><div class="headbar small">Realtime Queries</div><div class="numbers_container" rel="Queries" style="width: 380px; "><div class="title">Queries</div><div class="number" rel="3" data="2.6666666666666665"><span class="desc">3sec avg.</span><span class="value">2.67</span></div><div class="number" rel="5" data="3.2"><span class="desc">5sec avg.</span><span class="value">3.20</span></div><div class="number" rel="15" data="3.4000000000000004"><span class="desc">15sec avg.</span><span class="value">3.40</span></div><div class="number" rel="30" data="3.3666666666666667"><span class="desc">30sec avg.</span><span class="value">3.37</span></div></div></div>

		<script>
		@@ -98,8 +33,8 @@
		elem: $('.mywidget'),
		series:[
		{
		color: '#0066CC',
		name: "fnord",
		color: '#CD645A',
		name: "Fnord",
		data: [
		{ x: 1336873946, y: 40 },
		{ x: 1336874946, y: 49 },
		@@ -108,7 +43,7 @@
		{ x: 1336877946, y: 32 } ]
		},
		{
		color: '#66CC00',
		color: '#42436B',
		name: "fnord",
		data: [
		{ x: 1336873946, y: 23 },

Admin message