charts/canvas/examples/24-stacked-column-100-chart/stacked-column-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                                 title: {\r
   9                                         text: "Composition of Internet Traffic in North America",\r
  10                                         horizontalAlign: "right"\r
  11                                 },\r
  12                                 axisX: {\r
  13                                         tickThickness: 0,\r
  14                                         interval: 1,\r
  15                                         intervalType: "year"\r
  16                                 },\r
  17                                 animationEnabled: true,\r
  18                                 toolTip: {\r
  19                                         shared: true\r
  20                                 },\r
  21                                 axisY: {\r
  22                                         lineThickness: 0,\r
  23                                         tickThickness: 0,\r
  24                                         interval: 20\r
  25                                 },\r
  26                                 legend: {\r
  27                                         verticalAlign: "center",\r
  28                                         horizontalAlign: "left"\r
  29                                 },\r
  30 \r
  31                                 data: [\r
  32                                 {\r
  33                                         name: "Real-Time",\r
  34                                         showInLegend: true,\r
  35                                         type: "stackedColumn100",\r
  36                                         color: "#004B8D ",\r
  37                                         indexLabel: "{y}",\r
  38                                         dataPoints: [\r
  39                                         { x: new Date(2009, 0), y: 30 },\r
  40                                         { x: new Date(2010, 0), y: 40 },\r
  41                                         { x: new Date(2011, 0), y: 50 },\r
  42                                         { x: new Date(2012, 0), y: 60 },\r
  43                                         { x: new Date(2013, 0), y: 40 },\r
  44                                         { x: new Date(2014, 0), y: 50 }\r
  45                                         ]\r
  46                                 },\r
  47                                 {\r
  48                                         name: "Web Browsing",\r
  49                                         showInLegend: true,\r
  50                                         type: "stackedColumn100",\r
  51                                         color: "#0074D9 ",\r
  52                                         indexLabel: "{y}",\r
  53                                         dataPoints: [\r
  54                                         { x: new Date(2009, 0), y: 40 },\r
  55                                         { x: new Date(2010, 0), y: 28 },\r
  56                                         { x: new Date(2011, 0), y: 18 },\r
  57                                         { x: new Date(2012, 0), y: 18 },\r
  58                                         { x: new Date(2013, 0), y: 18 },\r
  59                                         { x: new Date(2014, 0), y: 18 }\r
  60                                         ]\r
  61                                 },\r
  62                                 {\r
  63                                         name: "File Sharing",\r
  64                                         showInLegend: true,\r
  65                                         type: "stackedColumn100",\r
  66                                         color: "#4192D9 ",\r
  67                                         indexLabel: "{y}",\r
  68                                         dataPoints: [\r
  69                                         { x: new Date(2009, 0), y: 15 },\r
  70                                         { x: new Date(2010, 0), y: 15 },\r
  71                                         { x: new Date(2011, 0), y: 12 },\r
  72                                         { x: new Date(2012, 0), y: 10 },\r
  73                                         { x: new Date(2013, 0), y: 12 },\r
  74                                         { x: new Date(2014, 0), y: 10 }\r
  75                                         ]\r
  76                                 },\r
  77                                 {\r
  78                                         name: "Other",\r
  79                                         showInLegend: true,\r
  80                                         type: "stackedColumn100",\r
  81                                         color: "#7ABAF2 ",\r
  82                                         indexLabel: "{y}",\r
  83                                         dataPoints: [\r
  84                                         { x: new Date(2009, 0), y: 15 },\r
  85                                         { x: new Date(2010, 0), y: 17 },\r
  86                                         { x: new Date(2011, 0), y: 20 },\r
  87                                         { x: new Date(2012, 0), y: 18 },\r
  88                                         { x: new Date(2013, 0), y: 20 },\r
  89                                         { x: new Date(2014, 0), y: 17 }\r
  90                                         ]\r
  91                                 }\r
  92 \r
  93                                 ]\r
  94                         });\r
  95 \r
  96                         chart.render();\r
  97                 }\r
  98         </script>\r
  99         <script src="../../canvasjs.min.js"></script>\r
 100         <title>CanvasJS Example</title>\r
 101 </head>\r
 102 <body>\r
 103         <div id="chartContainer" style="height: 400px; width: 100%;">\r
 104         </div>\r
 105 </body>\r
 106 </html>\r