Skip to content

Instantly share code, notes, and snippets.

@2git4git

2git4git/gist:4699743

Created February 2, 2013 23:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save 2git4git/4699743 to your computer and use it in GitHub Desktop.
Save 2git4git/4699743 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!doctype>
<head>
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
<link type="text/css" rel="stylesheet" href="../src/css/detail.css">
<link type="text/css" rel="stylesheet" href="../src/css/legend.css">
<link type="text/css" rel="stylesheet" href="css/extensions.css">
<script src="../vendor/d3.v2.js"></script>
<script src="../src/js/Rickshaw.js"></script>
<script src="../src/js/Rickshaw.Class.js"></script>
<script src="../src/js/Rickshaw.Compat.ClassList.js"></script>
<script src="../src/js/Rickshaw.Graph.js"></script>
<script src="../src/js/Rickshaw.Graph.Renderer.js"></script>
<script src="../src/js/Rickshaw.Graph.Renderer.Stack.js"></script>
<script src="../src/js/Rickshaw.Graph.Renderer.Line.js"></script>
<script src="../src/js/Rickshaw.Graph.Renderer.Area.js"></script>
<script src="../src/js/Rickshaw.Graph.RangeSlider.js"></script>
<script src="../src/js/Rickshaw.Graph.HoverDetail.js"></script>
<script src="../src/js/Rickshaw.Graph.Annotate.js"></script>
<script src="../src/js/Rickshaw.Graph.Legend.js"></script>
<script src="../src/js/Rickshaw.Graph.Axis.Time.js"></script>
<script src="../src/js/Rickshaw.Graph.Behavior.Series.Toggle.js"></script>
<script src="../src/js/Rickshaw.Graph.Behavior.Series.Order.js"></script>
<script src="../src/js/Rickshaw.Graph.Behavior.Series.Highlight.js"></script>
<script src="../src/js/Rickshaw.Graph.Smoother.js"></script>
<script src="../src/js/Rickshaw.Graph.Unstacker.js"></script>
<script src="../src/js/Rickshaw.Fixtures.Time.js"></script>
<script src="../src/js/Rickshaw.Fixtures.RandomData.js"></script>
<script src="../src/js/Rickshaw.Fixtures.Color.js"></script>
<script src="../src/js/Rickshaw.Color.Palette.js"></script>
<script src="../src/js/Rickshaw.Series.js"></script>
<script src="../src/js/Rickshaw.Series.FixedDuration.js"></script>
</head>
<body>
<div id="content">
<div id="chart"></div>
</div>
<script>
var tv = 250;
var dp = 60;
var now = new Date().getTime();
var tempdata = new Array();
for (var t = dp; t >= 0; t--) {
var xaxis = now - t;
var random = Math.floor(Math.random() * 100);
var dataentry = '{ x: '+xaxis+', y: '+random+' }';
tempdata.push(dataentry);
}
var histdata = eval('[ '+tempdata.join()+' ]');
// instantiate our graph!
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 900,
height: 500,
renderer: 'line',
series: new Rickshaw.Series.FixedDuration([{ name: 'one', data: histdata }], undefined, {
timeInterval: tv,
maxDataPoints: dp,
timeBase: new Date().getTime() / 1000
})
} );
graph.render();
// add some data every so often
var i = 0;
var iv = setInterval( function() {
var data = { one: Math.floor(Math.random() * 40) + 120 };
var randInt = Math.floor(Math.random()*100);
data.two = (Math.sin(i++ / 40) + 4) * (randInt + 400);
data.three = randInt + 300;
graph.series.addData(data);
graph.render();
}, tv );
</script>
</body>
@bitmage
Copy link

bitmage commented May 20, 2013

The way you're using eval adds unnecessary complexity. Most coding guides for Javascript recommend against the use of eval for various reasons. This would be a simpler way to do the same thing:

var histdata = [];

for (var t = dp; t >= 0; t--) {
    var xaxis = now - t;
    var random = Math.floor(Math.random() * 100);
    histdata.push({ x: xaxis, y: random});
}

Also if you change the filename of this gist to .js it will add syntax highlighting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment