charts/canvas/examples/21-range-spline-area-chart/basic-range-spline-area_-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         {\r
   8                 title: {\r
   9                         text: "Basic Range Spline Area Chart"\r
  10                 },\r
  11                 axisX: {\r
  12           interval: 10\r
  13                 },\r
  14                 data: [\r
  15                 {\r
  16                         type: "rangeSplineArea",          \r
  17                         dataPoints: [\r
  18                                 { x: 10, y: [8.86, 50.76] },\r
  19                                 { x: 20, y: [5.95, 38.26] },\r
  20                                 { x: 30, y: [28.27, 52.90] },\r
  21                                 { x: 40, y: [57.65, 78.65] },\r
  22                                 { x: 50, y: [15.50, 31.26] },\r
  23                 { x: 60, y: [18.86, 55.76] },\r
  24                                 { x: 70, y: [55.95, 98.26] },\r
  25                                 { x: 80, y: [48.27, 72.90] },\r
  26                                 { x: 90, y: [67.65, 86.65] },\r
  27                                 { x: 100, y: [25.50, 71.26] }\r
  28                         ]\r
  29                 }               \r
  30                 ]\r
  31         });\r
  32         chart.render();\r
  33 }\r
  34 </script>\r
  35         <script src="../../canvasjs.min.js"></script>\r
  36         <title>CanvasJS Example</title>\r
  37 </head>\r
  38 <body>\r
  39 <div id="chartContainer" style="height: 400px; width: 100%;">\r
  40 </div>\r
  41 </body>\r
  42 </html>