/plugins/visualize/public/examples/line.html
HTML | 70 lines | 65 code | 5 blank | 0 comment | 0 complexity | a1a5b8a46d426c26ec568b3d58c1b477 MD5 | raw file
Possible License(s): Apache-2.0
- <html>
- <head>
- <title>Backbone.d3 - Line charts</title>
- <link rel="stylesheet" href="style.css" type="text/css" />
- <style>
- #line{
- height:200px;
- width: 200px;
- }
- path{
- stroke: steelblue;
- stroke-width: 2px;
- fill: none;
- }
- circle{
- fill:steelblue;
- }
- </style>
- <script src="loader.js" type="text/javascript"></script>
- <script src="../visualisations/line.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function (){
- var DataPoint = Backbone.Model.extend({
- initialize: function(point) {
- this.set({
- x: point.x,
- y: point.y
- });
- }
- });
- var DataSeries = Backbone.d3.PlotCollection.extend({
- model : DataPoint,
- url : "bardata.json",
- fetch: function(){
- // No op
- console.log('fetching is a no op in this example');
- }
- });
- var series1 = new DataSeries();
- var plot1 = new Backbone.d3.Canned.Line.View(series1, {div:'#line'});
- plot1.collection.reset([new DataPoint({x:0, y:0})]);
- _.each(_.range(1,20), function(i, ii, l) {
- setTimeout(function() {
- plot1.collection.add(new DataPoint({y:Math.sin(i/10 * Math.PI), x: i}));
- }, 1 + Math.random() * 10000);
- })
- });
- </script>
- </head>
- <body>
- <div id="container">
- <h1>Line charts</h1>
- <p>Line charts show trends and try to interpolate between data points.
- This gives an indication of how the system behaves between data without
- guarantees that it is correct. Data is ordered, but not necessarily
- uniformly spaced. Adding data may result in the interpolated line being
- redrawn (e.g. by adding a point between n and n+1).</p>
- <hr/>
- <div class="chartcontainer">
- <div id="line"></div>
- </div>
- <div id="footer"></div>
- </div>
- </body>
- </html>