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

Language HTML Lines 155
MD5 Hash c25743113ca84ea524785edea4f0bfd8
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
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<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 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'});

        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() {
                   m = plot1.collection.get(i);
                   m.set({y:2*i});
          }, i * 1000);
        })

        var series2 = new DataSeries();

        var plot2 = new Backbone.d3.Canned.Bar.View(series2, {div:'#plot2', scrolling:true});
        series2.reset([
          new DataPoint({x:1, y:5, id:1}),
          new DataPoint({x:2, y:4, id:2}),
          new DataPoint({x:3, y:3, id:3}),
          new DataPoint({x:4, y:2, id:4}),
          new DataPoint({x:5, y:1, id:5})
        ]);
        // evolve the dataset
        _.each(_.range(1,6), function(i, ii, l) {
          setTimeout(function() {
                   plot2.collection.add(new DataPoint({x:i+5, y:i*2, id:i}));
          }, i * 1000);
        })

        var series3 = new DataSeries();
        var caption = "**figure 3:** caption on the view using some markdown to describe this *sweet plot*, yo";
        var plot3 = new Backbone.d3.Canned.Bar.View(series3, {div:'#plot3', scrolling:true, caption:caption});
        series3.reset([
          new DataPoint({x:1, y:5, id:1}),
          new DataPoint({x:2, y:4, id:2}),
          new DataPoint({x:3, y:3, id:3}),
          new DataPoint({x:4, y:2, id:4}),
          new DataPoint({x:5, y:1, id:5})
        ]);
        // evolve the dataset
        _.each(_.range(1,6), function(i, ii, l) {
          setTimeout(function() {
                   plot3.collection.add(new DataPoint({x:i+5, y:i*2, id:i}));
          }, i * 1000);
        })

        var caption = "**figure 4:** caption on the collection using some markdown to describe this *sweet plot*, yo";
        var series4 = new DataSeries([], {caption:caption});
        var plot4 = new Backbone.d3.Canned.Bar.View(series4, {div:'#plot4', scrolling:true});
        series4.reset([
          new DataPoint({x:1, y:5, id:1}),
          new DataPoint({x:2, y:4, id:2}),
          new DataPoint({x:3, y:3, id:3}),
          new DataPoint({x:4, y:2, id:4}),
          new DataPoint({x:5, y:1, id:5})
        ]);
        // evolve the dataset
        _.each(_.range(1,6), function(i, ii, l) {
          setTimeout(function() {
                   plot4.collection.add(new DataPoint({x:i+5, y:i*2, id:i}));
          }, i * 1000);
        })
      });

    </script>
  </head>
  <body>
    <div id="container">
      <h1>Bar charts</h1>
      <p>Backbone-d3 currently supports two classes of bar chart; static and
        scrolling. They only differ in how they behave when the collection is
        updated. Static bar charts will update in place and are good for when
        x-axis data is fixed. Scrolling bar charts are good for time series
        data - new data will appear on the right hand side and old will
        "drop-off" on the left.</p>
      <hr/>
      <table width="100%">
        <tr>
          <td width="25%" align="center" valign="top">
            <h3>Static plot</h3>
          </td>
          <td width="25%" align="center" valign="top">
            <h3>Scrolling plot</h3>
          </td>
          <td width="25%" align="center" valign="top">
            <h3>Captioned view</h3>
          </td>
          <td width="25%" align="center" valign="top">
            <h3>Captioned collection</h3>
          </td>
        </tr>
        <tr>
          <td width="25%" align="center" valign="top">
            <div class="chartcontainer">
              <div id="plot1"></div>
            </div>
          </td>
          <td width="25%" align="center" valign="top">
            <div class="chartcontainer">
              <div id="plot2"></div>
            </div>
          </td>
          <td width="25%" align="center" valign="top">
            <div class="chartcontainer">
              <div id="plot3"></div>
            </div>
          </td>
          <td width="25%" align="center" valign="top">
            <div class="chartcontainer">
              <div id="plot4"></div>
            </div>
          </td>
        </tr>
      </table>
	    <div id="footer"></div>
    </div>
  </body>
</html>
Back to Top