charts/canvas/examples/10-stacked-bar-chart/basic-stacked-bar-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: "Evening Sales of a Restaurant"\r
  10       },\r
  11 \r
  12       data: [\r
  13       {\r
  14         type: "stackedBar",\r
  15          dataPoints: [\r
  16         { x: new Date(2012, 01, 1), y: 71 },\r
  17         { x: new Date(2012, 02, 1), y: 55},\r
  18         { x: new Date(2012, 03, 1), y: 50 },\r
  19         { x: new Date(2012, 04, 1), y: 65 },\r
  20         { x: new Date(2012, 05, 1), y: 95 }\r
  21 \r
  22         ]\r
  23       },\r
  24         {\r
  25         type: "stackedBar",\r
  26          dataPoints: [\r
  27         { x: new Date(2012, 01, 1), y: 71 },\r
  28         { x: new Date(2012, 02, 1), y: 55},\r
  29         { x: new Date(2012, 03, 1), y: 50 },\r
  30         { x: new Date(2012, 04, 1), y: 65 },\r
  31         { x: new Date(2012, 05, 1), y: 95 }\r
  32 \r
  33         ]\r
  34       },\r
  35         {\r
  36         type: "stackedBar",\r
  37          dataPoints: [\r
  38         { x: new Date(2012, 01, 1), y: 71 },\r
  39         { x: new Date(2012, 02, 1), y: 55},\r
  40         { x: new Date(2012, 03, 1), y: 50 },\r
  41         { x: new Date(2012, 04, 1), y: 65 },\r
  42         { x: new Date(2012, 05, 1), y: 95 }\r
  43 \r
  44         ]\r
  45       },\r
  46 \r
  47         {\r
  48         type: "stackedBar",\r
  49          dataPoints: [\r
  50         { x: new Date(2012, 01, 1), y: 61 },\r
  51         { x: new Date(2012, 02, 1), y: 75},\r
  52         { x: new Date(2012, 03, 1), y: 80 },\r
  53         { x: new Date(2012, 04, 1), y: 85 },\r
  54         { x: new Date(2012, 05, 1), y: 105 }\r
  55 \r
  56         ]\r
  57       },\r
  58         {\r
  59         type: "stackedBar",\r
  60          dataPoints: [\r
  61         { x: new Date(2012, 01, 1), y: 20 },\r
  62         { x: new Date(2012, 02, 1), y: 35},\r
  63         { x: new Date(2012, 03, 1), y: 30 },\r
  64         { x: new Date(2012, 04, 1), y: 45 },\r
  65         { x: new Date(2012, 05, 1), y: 25 }\r
  66 \r
  67         ]\r
  68       }\r
  69 \r
  70       ]\r
  71     });\r
  72 \r
  73     chart.render();\r
  74   }\r
  75         </script>\r
  76         <script src="../../canvasjs.min.js"></script>\r
  77         <title>CanvasJS Example</title>\r
  78 </head>\r
  79 <body>\r
  80         <div id="chartContainer" style="height: 400px; width: 100%;">\r
  81         </div>\r
  82 </body>\r
  83 </html>