charts/canvas/examples/22-stacked-area-100-chart/stacked-area-100-with-index-label.html

   1 <!DOCTYPE HTML>\r
   2 <html>\r
   3 \r
   4 <head>\r
   5         <script type="text/javascript">\r
   6                 window.onload = function () {\r
   7                         var chart = new CanvasJS.Chart("chartContainer",\r
   8                         {\r
   9                                 title: {\r
  10                                         text: "Products Sold by ABC ltd. in 2011"\r
  11                                 },\r
  12                                 animationEnabled: true,\r
  13                                 axisY: {\r
  14                                         title: "Sales"\r
  15                                 },\r
  16                                 axisX: {\r
  17                                         title: "Seasons"\r
  18                                 },\r
  19                                 toolTip: {\r
  20                                         shared: true\r
  21                                 },\r
  22                                 data: [\r
  23                                 {\r
  24                                         type: "stackedArea100",\r
  25                                         name: "Mosquito Repellents",\r
  26                                         showInLegend: "true",\r
  27                                         dataPoints: [\r
  28                                         { y: 83450, label: "spring" },\r
  29                                         { y: 51240, label: "summer" },\r
  30                                         { y: 64120, label: "fall" },\r
  31                                         { y: 71450, label: "winter" }\r
  32 \r
  33                                         ]\r
  34                                 }, {\r
  35                                         type: "stackedArea100",\r
  36                                         name: "Liquid Soap",\r
  37                                         showInLegend: "true",\r
  38                                         dataPoints: [\r
  39                                         { y: 20140, label: "spring" },\r
  40                                         { y: 30170, label: "summer" },\r
  41                                         { y: 24410, label: "autumn" },\r
  42                                         { y: 38120, label: "fall" }\r
  43 \r
  44                                         ]\r
  45                                 }, {\r
  46                                         type: "stackedArea100",\r
  47                                         name: "Napkins",\r
  48                                         showInLegend: "true",\r
  49                                         dataPoints: [\r
  50                                         { y: 45120, label: "spring" },\r
  51                                         { y: 50350, label: "summer" },\r
  52                                         { y: 48410, label: "autumn" },\r
  53                                         { y: 53120, label: "fall" }\r
  54 \r
  55                                         ]\r
  56                                 }, {\r
  57                                         type: "stackedArea100",\r
  58                                         name: "Sanitizer",\r
  59                                         showInLegend: "true",\r
  60                                         dataPoints: [\r
  61                                         { y: 11050, label: "spring" },\r
  62                                         { y: 16100, label: "summer" },\r
  63                                         { y: 15010, label: "autumn" },\r
  64                                         { y: 23100, label: "fall" }\r
  65 \r
  66                                         ]\r
  67                                 }\r
  68 \r
  69                                 ]\r
  70                         });\r
  71 \r
  72                         chart.render();\r
  73                 }\r
  74         </script>\r
  75         <script src="../../canvasjs.min.js"></script>\r
  76         <title>CanvasJS Example</title>\r
  77 </head>\r
  78 <body>\r
  79         <div id="chartContainer" style="height: 400px; width: 100%;">\r
  80         </div>\r
  81 </body>\r
  82 </html>\r