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

Language HTML Lines 98
MD5 Hash 4cdf20fda906f97ecd5a971309e6beac
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<html>
	<head>
	  <title>Backbone.d3 - Bar charts</title>

	  <link rel="stylesheet" href="style.css" type="text/css" />

    <script src="loader.js" type="text/javascript"></script>
    <script src="../visualisations/bar.js" type="text/javascript"></script>
    <script src="../visualisations/scatter.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function() {
        var DataPoint = Backbone.Model.extend({
          initialize: function(point) {
            this.set({
              id: point.id,
              x: point.x,
              y: point.y
            });
          }
        });

        var DataSeries = Backbone.d3.PlotCollection.extend({
          model : DataPoint,
          url : "bardata.json",
          // Needed for scolling plots
          fetch: function(){
            // No op
            console.log('fetching is a no op in this example');
          }
        });

        var series1 = new DataSeries();
        var plot1 = new Backbone.d3.Canned.Bar.View(series1, {div:'#plot1'});
        var caption = "inverse of data";
        var plot2 = new Backbone.d3.Canned.Bar.View(series1, {div:'#plot2', scrolling:true, caption:caption});
        plot2.plotdata = function(){
          var data = [];
          this.collection.forEach(function(datapoint) {
              data.push({x:datapoint.get('x'), y:1/datapoint.get('y')});
            }
          )
          // Needed for scolling plots
          if (data.length > this.size){
            return _.last(data, this.size);
          } else {
            return data;
          }
        };

        series1.reset([
          new DataPoint({x:1, y:6, id:1}),
          new DataPoint({x:2, y:4, id:2}),
          new DataPoint({x:3, y:2, id:3}),
          new DataPoint({x:4, y:4, id:4}),
          new DataPoint({x:5, y:6, id:5})
        ]);

        // evolve the dataset
        _.each(_.range(1,6), function(i, ii, l) {
          setTimeout(function() {
            series1.add(new DataPoint({x:i+5, y:i*2, id:i}));
          }, i * 1000);
        })
      });

    </script>
  </head>
  <body>
    <div id="container">
      <h1>Multi charts</h1>
      <p>Since the visualisation is defined by the view collection reuse is
        possible and sometimes very useful. For instance you may want a pie
        chart (to show the breakdown of the data) and a time series of the
        build up of the data.</p>
      <hr/>
      <table width="100%">
        <tr>
          <td width="50%" align="center" valign="top">
            <h3>Bar plot</h3>
          </td>
          <td width="50%" align="center" valign="top">
            <h3>Scatter plot</h3>
          </td>
        </tr>
        <tr>
          <td width="50%" align="center" valign="top">
            <div id="plot1"></div>
          </td>
          <td width="50%" align="center" valign="top">
            <div id="plot2"></div>
          </td>
        </tr>
      </table>
	    <div id="footer"></div>
    </div>
  </body>
</html>
Back to Top