charts/canvas/examples/12-scatter-chart/basic-scatter-chart.html

   1 <!DOCTYPE HTML>\r
   2 <html>\r
   3 <head>\r
   4         <script type="text/javascript">\r
   5                 window.onload = function () {\r
   6                         var chart = new CanvasJS.Chart("chartContainer", {\r
   7                                 title: {\r
   8                                         text: "Basic Scatter Chart"\r
   9                                 },\r
  10                                 data: [{\r
  11                                         type: "scatter",\r
  12                                         dataPoints: [\r
  13                                         { x: 100, y: 110 },\r
  14                                         { x: 110, y: 120 },\r
  15                                         { x: 130, y: 125 },\r
  16                                         { x: 150, y: 128 },\r
  17                                         { x: 180, y: 160 },\r
  18                                         { x: 200, y: 220 },\r
  19                                         { x: 207, y: 220 },\r
  20                                         { x: 210, y: 220 },\r
  21                                         { x: 245, y: 220 },\r
  22                                         { x: 265, y: 253 },\r
  23                                         { x: 285, y: 304 },\r
  24                                         { x: 300, y: 403 },\r
  25                                         { x: 304, y: 304 },\r
  26                                         { x: 306, y: 406 },\r
  27                                         { x: 310, y: 404 },\r
  28                                         { x: 315, y: 510 },\r
  29                                         { x: 319, y: 420 },\r
  30                                         { x: 344, y: 303 },\r
  31                                         { x: 374, y: 302 },\r
  32                                         { x: 400, y: 821 },\r
  33                                         { x: 405, y: 804 },\r
  34                                         { x: 405, y: 906 },\r
  35                                         { x: 423, y: 830 },\r
  36                                         { x: 441, y: 930 },\r
  37                                         { x: 452, y: 630 },\r
  38                                         { x: 454, y: 990 },\r
  39                                         { x: 466, y: 420 },\r
  40                                         { x: 485, y: 820 },\r
  41                                         { x: 500, y: 904 },\r
  42                                         { x: 503, y: 920 },\r
  43                                         { x: 507, y: 702 },\r
  44                                         { x: 530, y: 904 },\r
  45                                         { x: 533, y: 903 },\r
  46                                         { x: 567, y: 1010 },\r
  47                                         { x: 587, y: 402 },\r
  48                                         { x: 600, y: 1020 },\r
  49                                         { x: 604, y: 1010 },\r
  50                                         { x: 604, y: 1040 },\r
  51                                         { x: 609, y: 940 },\r
  52                                         { x: 610, y: 940 },\r
  53                                         { x: 640, y: 900 },\r
  54                                         { x: 641, y: 1060 },\r
  55                                         { x: 644, y: 1040 },\r
  56                                         { x: 660, y: 1240 },\r
  57                                         { x: 664, y: 1340 },\r
  58                                         { x: 704, y: 1040 },\r
  59                                         { x: 732, y: 1060 },\r
  60                                         { x: 763, y: 1100 },\r
  61                                         { x: 781, y: 1200 },\r
  62                                         { x: 785, y: 1300 },\r
  63                                         { x: 809, y: 1040 },\r
  64                                         { x: 905, y: 1340 }\r
  65                                         ]\r
  66                                 }]\r
  67                         });\r
  68                         chart.render();\r
  69                 }\r
  70         </script>\r
  71         <script src="../../canvasjs.min.js"></script>\r
  72         <title>CanvasJS Example</title>\r
  73 </head>\r
  74 \r
  75 <body>\r
  76         <div id="chartContainer" style="height: 400px; width: 100%;"></div>\r
  77 </body>\r
  78 \r
  79 </html>