bobamo /plugins/visualize/public/examples/line.html

Language HTML Lines 71
MD5 Hash a1a5b8a46d426c26ec568b3d58c1b477
Repository git://github.com/jspears/bobamo.git View Raw File
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<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>
Back to Top