/plugins/visualize/public/examples/multi.html
HTML | 97 lines | 90 code | 7 blank | 0 comment | 0 complexity | 4cdf20fda906f97ecd5a971309e6beac 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 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>