charts/canvas/examples/01-line-chart/line-chart-with-zooming.html

   1 <!DOCTYPE HTML>\r
   2 <html>\r
   3 <head>\r
   4         <script type="text/javascript">\r
   5   window.onload = function () {\r
   6 \r
   7     var chart = new CanvasJS.Chart("chartContainer",\r
   8     {\r
   9       zoomEnabled: true,\r
  10       title:{\r
  11         text: "Try Zooming And Panning"\r
  12       },\r
  13       axisY:{\r
  14         includeZero: false\r
  15       },\r
  16       data: data,  // random generator below\r
  17 \r
  18    });\r
  19 \r
  20     chart.render();\r
  21   }\r
  22 \r
  23    var limit = 1000;    //increase number of dataPoints by increasing this\r
  24 \r
  25     var y = 0;\r
  26     var data = []; var dataSeries = { type: "line" };\r
  27     var dataPoints = [];\r
  28     for (var i = 0; i < limit; i += 1) {\r
  29         y += (Math.random() * 10 - 5);\r
  30          dataPoints.push({\r
  31           x: i - limit / 2,\r
  32           y: y\r
  33            });\r
  34         }\r
  35      dataSeries.dataPoints = dataPoints;\r
  36      data.push(dataSeries);\r
  37 \r
  38         </script>\r
  39         <script src="../../canvasjs.min.js"></script>\r
  40         <title>CanvasJS Example</title>\r
  41 </head>\r
  42 <body>\r
  43         <div id="chartContainer" style="height: 400px; width: 100%;">\r
  44         </div>\r
  45 </body>\r
  46 </html>