Last active
August 29, 2015 14:05
-
-
Save hbin/64ac19b8d05a2c6f43dc to your computer and use it in GitHub Desktop.
Rickshaw real-time chart example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class DashboardController < ApplicationController | |
| def index | |
| end | |
| def status | |
| failed = rand(100) | |
| processed = rand(100) + 500 | |
| render json: { | |
| Total: failed + processed, | |
| Failed: failed | |
| } | |
| end | |
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"> | |
| <link type="text/css" rel="stylesheet" href="/assets/detail.css"> | |
| <link type="text/css" rel="stylesheet" href="/assets/graph.css"> | |
| <link type="text/css" rel="stylesheet" href="/assets/legend.css"> | |
| <link type="text/css" rel="stylesheet" href="/assets/lines.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script> | |
| <script src="/assets/d3.v3.js" type="text/javascript" charset="utf-8"></script> | |
| <script src="/assets/rickshaw.js" type="text/javascript" charset="utf-8"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div id="chart_container"> | |
| <div id="chart"></div> | |
| </div> | |
| <div id="legend"></div> | |
| <script type="text/javascript" charset="utf-8"> | |
| var timeInterval = 2000; | |
| var url = "http://localhost:3000/dashboard/status.json"; | |
| // instantiate our graph! | |
| var graph = new Rickshaw.Graph({ | |
| element: document.getElementById("chart"), | |
| width: 900, | |
| height: 500, | |
| renderer: 'line', | |
| series: new Rickshaw.Series.FixedDuration([{ name: 'Failed', color: '#B1003E' }, { name: 'Total', color: '#006f68' }], undefined, { | |
| timeInterval: timeInterval, | |
| maxDataPoints: 100, | |
| }) | |
| }); | |
| graph.render(); | |
| var ticksTreatment = 'glow'; | |
| var xAxis = new Rickshaw.Graph.Axis.Time( { | |
| graph: graph, | |
| ticksTreatment: ticksTreatment, | |
| timeFixture: new Rickshaw.Fixtures.Time.Local() | |
| } ); | |
| xAxis.render(); | |
| var yAxis = new Rickshaw.Graph.Axis.Y({ | |
| graph: graph, | |
| ticksTreatment: ticksTreatment, | |
| tickFormat: Rickshaw.Fixtures.Number.formatKMBT | |
| }); | |
| yAxis.render(); | |
| var hoverDetail = new Rickshaw.Graph.HoverDetail({ | |
| graph: graph, | |
| xFormatter: function(x) { return new Date(x * 1000).toString() }, | |
| yFormatter: function(y) { return Math.floor(y) } | |
| }); | |
| var legend = new Rickshaw.Graph.Legend( { | |
| graph: graph, | |
| element: document.getElementById('legend') | |
| } ); | |
| var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( { | |
| graph: graph, | |
| legend: legend | |
| } ); | |
| var order = new Rickshaw.Graph.Behavior.Series.Order( { | |
| graph: graph, | |
| legend: legend | |
| } ); | |
| var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( { | |
| graph: graph, | |
| legend: legend | |
| } ); | |
| // add some data every so often | |
| var i = 0; | |
| var iv = setInterval(function() { | |
| $.getJSON(url, function(data) { | |
| graph.series.addData(data); | |
| graph.render(); | |
| }); | |
| }, timeInterval); | |
| </script> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment