PageRenderTime 43ms CodeModel.GetById 19ms RepoModel.GetById 1ms app.codeStats 0ms

/plugins/visualize/public/examples/line.html

http://github.com/jspears/bobamo
HTML | 70 lines | 65 code | 5 blank | 0 comment | 0 complexity | a1a5b8a46d426c26ec568b3d58c1b477 MD5 | raw file
Possible License(s): Apache-2.0
  1. <html>
  2. <head>
  3. <title>Backbone.d3 - Line charts</title>
  4. <link rel="stylesheet" href="style.css" type="text/css" />
  5. <style>
  6. #line{
  7. height:200px;
  8. width: 200px;
  9. }
  10. path{
  11. stroke: steelblue;
  12. stroke-width: 2px;
  13. fill: none;
  14. }
  15. circle{
  16. fill:steelblue;
  17. }
  18. </style>
  19. <script src="loader.js" type="text/javascript"></script>
  20. <script src="../visualisations/line.js" type="text/javascript"></script>
  21. <script type="text/javascript">
  22. $(function (){
  23. var DataPoint = Backbone.Model.extend({
  24. initialize: function(point) {
  25. this.set({
  26. x: point.x,
  27. y: point.y
  28. });
  29. }
  30. });
  31. var DataSeries = Backbone.d3.PlotCollection.extend({
  32. model : DataPoint,
  33. url : "bardata.json",
  34. fetch: function(){
  35. // No op
  36. console.log('fetching is a no op in this example');
  37. }
  38. });
  39. var series1 = new DataSeries();
  40. var plot1 = new Backbone.d3.Canned.Line.View(series1, {div:'#line'});
  41. plot1.collection.reset([new DataPoint({x:0, y:0})]);
  42. _.each(_.range(1,20), function(i, ii, l) {
  43. setTimeout(function() {
  44. plot1.collection.add(new DataPoint({y:Math.sin(i/10 * Math.PI), x: i}));
  45. }, 1 + Math.random() * 10000);
  46. })
  47. });
  48. </script>
  49. </head>
  50. <body>
  51. <div id="container">
  52. <h1>Line charts</h1>
  53. <p>Line charts show trends and try to interpolate between data points.
  54. This gives an indication of how the system behaves between data without
  55. guarantees that it is correct. Data is ordered, but not necessarily
  56. uniformly spaced. Adding data may result in the interpolated line being
  57. redrawn (e.g. by adding a point between n and n+1).</p>
  58. <hr/>
  59. <div class="chartcontainer">
  60. <div id="line"></div>
  61. </div>
  62. <div id="footer"></div>
  63. </div>
  64. </body>
  65. </html>