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

Language HTML Lines 92
MD5 Hash 8c582219cf2adf2760b4594f7116e194
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
<html>
	<head>
	  <title>Backbone.d3 - Pie charts</title>

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

    <script src="loader.js" type="text/javascript"></script>
    <script src="../visualisations/pie.js" type="text/javascript"></script>
    <script type="text/javascript">

      $(function() {
        var DataPoint = Backbone.Model.extend({
          initialize: function(value) {
            this.set(value);
          }
        });

        var DataSeries = Backbone.d3.PlotCollection.extend({
          model : DataPoint,
          url : "data",
          plottype: "pie",
          fetch: function(){
            // No op
            console.log('fetching is a no op in this example');
          }
        });

        var series = new DataSeries();
        var plot = new Backbone.d3.Canned.Pie.View(series, {
          div:'#plot1',
          name: 'PLOT1',
          radius: 85
        });

        series.reset([new DataPoint({id: 1, value: 2}),
          new DataPoint({id: 2, value: 1}),
          new DataPoint({id: 3, value: 1}),
          new DataPoint({id: 4, value: 2})]);
        var newValues = [1, 2, 2, 1];
        _.each(_.range(1,5), function(i, ii, l) {
          setTimeout(function() {
             var m = plot.collection.get(i);
             m.set({value: newValues[ii]});
          }, i * 1000);
        })

        var dynamicSeries = new DataSeries();
        var dynamicPlot = new Backbone.d3.Canned.Pie.View(dynamicSeries, {
          div:'#plot2',
          name: 'PLOT2',
          radius: 85
        });
        dynamicSeries.reset([new DataPoint({id: 1, value: 1}),
          new DataPoint({id: 2, value: 2})]);
        setTimeout(function() {
          dynamicSeries.add(new DataPoint({id: 3, value: 4}));
        }, 1000);
        setTimeout(function() {
          dynamicSeries.add(new DataPoint({id: 4, value: 2}));
        }, 2000);
        setTimeout(function() {
          dynamicSeries.remove(3);
        }, 3000);
        setTimeout(function() {
          dynamicSeries.add(new DataPoint({id: 5, value: 1}));
        }, 4000);
      });
    </script>
  </head>
  <body>
    <div id="container">
      <h1>Pie charts</h1>
      <p>Backbone-d3 currently supports simple pie charts with transitions.
         Changing values in a collection causes the pie chart to update to the
         new ratios. Adding a value adds a new segment to the pie chart, and
         removing a value removes that segment.</p>
      <hr/>
      <table width="100%">
        <tr>
          <td width="50%" align="center">
            <h3>Fixed length series<div id="plot1"></div></h3>
          </td>
          <td width="50%" align="center">
            <h3>Variable length series<div id="plot2"></div></h3>
          </td>
        </tr>
      </table>
	    <div id="footer"></div>
    </div>
  </body>
</html>
Back to Top