charts/canvas/examples/01-line-chart/line-chart-with-xy-zoom-type.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 \r
   8     var chart = new CanvasJS.Chart("chartContainer",\r
   9     {\r
  10       zoomEnabled: true,\r
  11       zoomType: "xy",\r
  12       title:{\r
  13         text: "Enable Zooming on X & Y Axis"\r
  14       },\r
  15       legend: {\r
  16         horizontalAlign: "right",\r
  17         verticalAlign: "center"\r
  18       },\r
  19       axisY:{\r
  20         includeZero: false\r
  21       },\r
  22       data: data,  // random generator below\r
  23 \r
  24    });\r
  25 \r
  26     chart.render();\r
  27   }\r
  28 \r
  29    var limit = 1000;    //increase number of dataPoints by increasing this\r
  30 \r
  31     var y = 0;\r
  32     var data = []; var dataSeries = { type: "line" };\r
  33     var dataPoints = [];\r
  34     for (var i = 0; i < limit; i += 1) {\r
  35         y += (Math.random() * 10 - 5);\r
  36          dataPoints.push({\r
  37           x: i - limit / 2,\r
  38           y: y\r
  39            });\r
  40         }\r
  41      dataSeries.dataPoints = dataPoints;\r
  42      data.push(dataSeries);\r
  43 \r
  44         </script>\r
  45         <script src="../../canvasjs.min.js"></script>\r
  46         <title>CanvasJS Example</title>\r
  47 </head>\r
  48 <body>\r
  49         <div id="chartContainer" style="height: 400px; width: 100%;">\r
  50         </div>\r
  51 </body>\r
  52 </html>