bar.html | searchcode

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

http://github.com/jspears/bobamo
HTML | 154 lines | 144 code | 10 blank | 0 comment | 0 complexity | c25743113ca84ea524785edea4f0bfd8 MD5 | raw file
Possible License(s): Apache-2.0

<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>