charts/canvas/examples/15-step-line-chart/multi-series-step-line-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: "Multi-Series StepLine Chart"\r
   9                                 },\r
  10                                 animationEnabled: true,\r
  11                                 axisY: {\r
  12                                         includeZero: false,\r
  13                                         minimum: 13,\r
  14                                 },\r
  15                                 toolTip: {\r
  16                                         shared: true\r
  17                                 },\r
  18 \r
  19                                 axisY2: {\r
  20                                         includeZero: false,\r
  21                                         minimum: 25,\r
  22                                 },\r
  23 \r
  24                                 data: [\r
  25                                 {\r
  26                                         type: "stepLine",\r
  27                                         dataPoints: [\r
  28 \r
  29                                         { x: new Date(2008, 02), y: 15.00 },\r
  30                                         { x: new Date(2008, 03), y: 14.50 },\r
  31                                         { x: new Date(2008, 04), y: 14.00 },\r
  32                                         { x: new Date(2008, 05), y: 14.50 },\r
  33                                         { x: new Date(2008, 06), y: 14.75 },\r
  34                                         { x: new Date(2008, 07), y: null },\r
  35                                         { x: new Date(2008, 08), y: 15.80 },\r
  36                                         { x: new Date(2008, 09), y: 17.50 }\r
  37 \r
  38 \r
  39                                         ]\r
  40                                 },\r
  41                            {\r
  42                                 type: "stepLine",\r
  43                                 axisYType: "secondary",\r
  44                                 dataPoints: [\r
  45 \r
  46                                 { x: new Date(2008, 02), y: 41.00 },\r
  47                                 { x: new Date(2008, 03), y: 43.50 },\r
  48                                 { x: new Date(2008, 04), y: 41.00 },\r
  49                                 { x: new Date(2008, 05), y: null },\r
  50                                 { x: new Date(2008, 06), y: 47.55 },\r
  51                                 { x: new Date(2008, 07), y: 45.00 },\r
  52                                 { x: new Date(2008, 08), y: 40.70 },\r
  53                                 { x: new Date(2008, 09), y: 37.00 }\r
  54                                 ]\r
  55                            }\r
  56                                 ]\r
  57                         });\r
  58                         chart.render();\r
  59                 }\r
  60         </script>\r
  61         <script src="../../canvasjs.min.js"></script>\r
  62         <title>CanvasJS Example</title>\r
  63 </head>\r
  64 \r
  65 <body>\r
  66         <div id="chartContainer" style="height: 400px; width: 100%;"></div>\r
  67 </body>\r
  68 \r
  69 </html>