charts/canvas/examples/11-stacked-area-chart/stacked-area-chart-with-shared-tooltip.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: "Number of Persons involved in Traffic Accidents by Mode of Transport",\r
   9                                         margin: 15\r
  10                                 },\r
  11                                 toolTip: {\r
  12                                         shared: true\r
  13                                 },\r
  14                                 axisX: {\r
  15                                         valueFormatString: "MMM",\r
  16                                         interval: 1,\r
  17                                         intervalType: "month"\r
  18                                 },\r
  19                                 axisY: {\r
  20                                         maximum: 3100,\r
  21                                         interval: 1000\r
  22                                 },\r
  23 \r
  24                                 legend: {\r
  25                                         verticalAlign: "bottom",\r
  26                                         horizontalAlign: "center"\r
  27                                 },\r
  28                                 data: [\r
  29                                 {\r
  30                                         type: "stackedArea",\r
  31                                         name: "cars",\r
  32                                         showInLegend: "true",\r
  33                                         dataPoints: [\r
  34                                         { x: new Date(2012, 00, 1), y: 1100 },\r
  35                                         { x: new Date(2012, 01, 1), y: 1200 },\r
  36                                         { x: new Date(2012, 02, 1), y: 1000 },\r
  37                                         { x: new Date(2012, 03, 1), y: 1200 },\r
  38                                         { x: new Date(2012, 04, 1), y: 1600 },\r
  39                                         { x: new Date(2012, 05, 1), y: 1800 },\r
  40                                         { x: new Date(2012, 06, 1), y: 1400 },\r
  41                                         { x: new Date(2012, 07, 1), y: 1500 },\r
  42                                         { x: new Date(2012, 08, 1), y: 1600 },\r
  43                                         { x: new Date(2012, 09, 1), y: 1800 }\r
  44 \r
  45                                         ]\r
  46                                 },\r
  47                                 {\r
  48                                         type: "stackedArea",\r
  49                                         name: "trucks",\r
  50                                         showInLegend: "true",\r
  51                                         dataPoints: [\r
  52                                         { x: new Date(2012, 00, 1), y: 150 },\r
  53                                         { x: new Date(2012, 01, 1), y: 171 },\r
  54                                         { x: new Date(2012, 02, 1), y: 155 },\r
  55                                         { x: new Date(2012, 03, 1), y: 150 },\r
  56                                         { x: new Date(2012, 04, 1), y: 165 },\r
  57                                         { x: new Date(2012, 05, 1), y: 195 },\r
  58                                         { x: new Date(2012, 06, 1), y: 155 },\r
  59                                         { x: new Date(2012, 07, 1), y: 145 },\r
  60                                         { x: new Date(2012, 08, 1), y: 140 },\r
  61                                         { x: new Date(2012, 09, 1), y: 151 }\r
  62 \r
  63                                         ]\r
  64                                 },\r
  65                                 {\r
  66                                         type: "stackedArea",\r
  67                                         name: "bicycles",\r
  68                                         showInLegend: "true",\r
  69                                         dataPoints: [\r
  70                                         { x: new Date(2012, 00, 1), y: 71 },\r
  71                                         { x: new Date(2012, 01, 1), y: 41 },\r
  72                                         { x: new Date(2012, 02, 1), y: 55 },\r
  73                                         { x: new Date(2012, 03, 1), y: 50 },\r
  74                                         { x: new Date(2012, 04, 1), y: 65 },\r
  75                                         { x: new Date(2012, 05, 1), y: 95 },\r
  76                                         { x: new Date(2012, 06, 1), y: 45 },\r
  77                                         { x: new Date(2012, 07, 1), y: 95 },\r
  78                                         { x: new Date(2012, 08, 1), y: 60 },\r
  79                                         { x: new Date(2012, 09, 1), y: 40 }\r
  80 \r
  81                                         ]\r
  82                                 },\r
  83 \r
  84                                 {\r
  85                                         type: "stackedArea",\r
  86                                         name: "motorcycles",\r
  87                                         showInLegend: "true",\r
  88                                         dataPoints: [\r
  89                                         { x: new Date(2012, 00, 1), y: 861 },\r
  90                                         { x: new Date(2012, 01, 1), y: 761 },\r
  91                                         { x: new Date(2012, 02, 1), y: 775 },\r
  92                                         { x: new Date(2012, 03, 1), y: 680 },\r
  93                                         { x: new Date(2012, 04, 1), y: 785 },\r
  94                                         { x: new Date(2012, 05, 1), y: 374 },\r
  95                                         { x: new Date(2012, 06, 1), y: 365 },\r
  96                                         { x: new Date(2012, 07, 1), y: 455 },\r
  97                                         { x: new Date(2012, 08, 1), y: 657 },\r
  98                                         { x: new Date(2012, 09, 1), y: 659 }\r
  99 \r
 100                                         ]\r
 101                                 },\r
 102                                 {\r
 103                                         type: "stackedArea",\r
 104                                         name: "pedistrians",\r
 105                                         showInLegend: "true",\r
 106                                         dataPoints: [\r
 107                                         { x: new Date(2012, 00, 1), y: 220 },\r
 108                                         { x: new Date(2012, 01, 1), y: 240 },\r
 109                                         { x: new Date(2012, 02, 1), y: 295 },\r
 110                                         { x: new Date(2012, 03, 1), y: 300 },\r
 111                                         { x: new Date(2012, 04, 1), y: 265 },\r
 112                                         { x: new Date(2012, 05, 1), y: 235 },\r
 113                                         { x: new Date(2012, 06, 1), y: 245 },\r
 114                                         { x: new Date(2012, 07, 1), y: 255 },\r
 115                                         { x: new Date(2012, 08, 1), y: 275 },\r
 116                                         { x: new Date(2012, 09, 1), y: 290 }\r
 117 \r
 118                                         ]\r
 119                                 }\r
 120 \r
 121                                 ]\r
 122                         });\r
 123 \r
 124                         chart.render();\r
 125                 }\r
 126         </script>\r
 127         <script src="../../canvasjs.min.js"></script>\r
 128         <title>CanvasJS Example</title>\r
 129 </head>\r
 130 <body>\r
 131         <div id="chartContainer" style="height: 400px; width: 100%;">\r
 132         </div>\r
 133 </body>\r
 134 </html>