charts/canvas/examples/23-stacked-bar-100-chart/stacked-bar-100-with-index-label.html

   1 <!DOCTYPE HTML>\r
   2 <html>\r
   3 \r
   4 <!DOCTYPE HTML>\r
   5 <html>\r
   6 \r
   7 <head>\r
   8         <script type="text/javascript">\r
   9                 window.onload = function () {\r
  10                         var chart = new CanvasJS.Chart("chartContainer",\r
  11                         {\r
  12                                 theme: 'theme2',\r
  13                                 title: {\r
  14                                         text: "Time Spent in Holiday Season"\r
  15 \r
  16                                 },\r
  17                                 animationEnabled: true,\r
  18                                 axisY: {\r
  19                                         title: "percent"\r
  20                                 },\r
  21                                 legend: {\r
  22                                         horizontalAlign: 'center',\r
  23                                         verticalAlign: 'bottom'\r
  24                                 },\r
  25                                 toolTip: {\r
  26                                         shared: true\r
  27                                 },\r
  28                                 data: [\r
  29                                 {\r
  30                                         type: "stackedBar100",\r
  31                                         showInLegend: true,\r
  32                                         name: "With Friends",\r
  33                                         indexLabel: "{y}",\r
  34                                         dataPoints: [\r
  35                                         { y: 350, label: "George" },\r
  36                                         { y: 350, label: "Alex" },\r
  37                                         { y: 350, label: "Mike" },\r
  38                                         { y: 374, label: "Jake" },\r
  39                                         { y: 320, label: "Shah" },\r
  40                                         { y: 300, label: "Joe" },\r
  41                                         { y: 400, label: "Fin" },\r
  42                                         { y: 220, label: "Larry" }\r
  43 \r
  44                                         ]\r
  45                                 },\r
  46 \r
  47                                 {\r
  48                                         type: "stackedBar100",\r
  49                                         showInLegend: true,\r
  50                                         name: "Eating Out",\r
  51                                         indexLabel: "{y}",\r
  52                                         dataPoints: [\r
  53                                         { y: 250, label: "George" },\r
  54                                         { y: 280, label: "Alex" },\r
  55                                         { y: 350, label: "Mike" },\r
  56                                         { y: 274, label: "Jake" },\r
  57                                         { y: 320, label: "Shah" },\r
  58                                         { y: 320, label: "Joe" },\r
  59                                         { y: 280, label: "Fin" },\r
  60                                         { y: 420, label: "Larry" }\r
  61 \r
  62                                         ]\r
  63                                 },\r
  64                                 {\r
  65                                         type: "stackedBar100",\r
  66                                         showInLegend: true,\r
  67                                         name: "Reading",\r
  68                                         indexLabel: "{y}",\r
  69                                         dataPoints: [\r
  70                                         { y: 350, label: "George" },\r
  71                                         { y: 350, label: "Alex" },\r
  72                                         { y: 350, label: "Mike" },\r
  73                                         { y: 374, label: "Jake" },\r
  74                                         { y: 120, label: "Shah" },\r
  75                                         { y: 120, label: "Joe" },\r
  76                                         { y: 400, label: "Fin" },\r
  77                                         { y: 120, label: "Larry" }\r
  78 \r
  79                                         ]\r
  80                                 },\r
  81 \r
  82                                 {\r
  83                                         type: "stackedBar100",\r
  84                                         showInLegend: true,\r
  85                                         name: "Shopping",\r
  86                                         indexLabel: "{y}",\r
  87                                         dataPoints: [\r
  88                                         { y: 250, label: "George" },\r
  89                                         { y: 250, label: "Alex" },\r
  90                                         { y: 250, label: "Mike" },\r
  91                                         { y: 274, label: "Jake" },\r
  92                                         { y: 320, label: "Shah" },\r
  93                                         { y: 220, label: "Joe" },\r
  94                                         { y: 100, label: "Fin" },\r
  95                                         { y: 420, label: "Larry" }\r
  96 \r
  97                                         ]\r
  98                                 },\r
  99                                 {\r
 100                                         type: "stackedBar100",\r
 101                                         showInLegend: true,\r
 102                                         name: "Fitness",\r
 103                                         indexLabel: "{y}",\r
 104                                         dataPoints: [\r
 105                                         { y: 150, label: "George" },\r
 106                                         { y: 30, label: "Alex" },\r
 107                                         { y: 45, label: "Mike" },\r
 108                                         { y: 74, label: "Jake" },\r
 109                                         { y: 64, label: "Shah" },\r
 110                                         { y: 40, label: "Joe" },\r
 111                                         { y: 50, label: "Fin" },\r
 112                                         { y: 40, label: "Larry" }\r
 113 \r
 114                                         ]\r
 115                                 },\r
 116 \r
 117                                 {\r
 118                                         type: "stackedBar100",\r
 119                                         showInLegend: true,\r
 120                                         name: "Travel",\r
 121                                         indexLabel: "{y}",\r
 122                                         dataPoints: [\r
 123                                         { y: 150, label: "George" },\r
 124                                         { y: 170, label: "Alex" },\r
 125                                         { y: 150, label: "Mike" },\r
 126                                         { y: 174, label: "Jake" },\r
 127                                         { y: 120, label: "Shah" },\r
 128                                         { y: 160, label: "Joe" },\r
 129                                         { y: 100, label: "Fin" },\r
 130                                         { y: 80, label: "Larry" }\r
 131 \r
 132                                         ]\r
 133                                 },\r
 134 \r
 135                                 {\r
 136                                         type: "stackedBar100",\r
 137                                         showInLegend: true,\r
 138                                         name: "Internet",\r
 139                                         indexLabel: "{y}",\r
 140                                         dataPoints: [\r
 141                                         { y: 160, label: "George" },\r
 142                                         { y: 170, label: "Alex" },\r
 143                                         { y: 50, label: "Mike" },\r
 144                                         { y: 174, label: "Jake" },\r
 145                                         { y: 104, label: "Shah" },\r
 146                                         { y: 120, label: "Joe" },\r
 147                                         { y: 300, label: "Fin" },\r
 148                                         { y: 420, label: "Larry" }\r
 149 \r
 150                                         ]\r
 151                                 },\r
 152 \r
 153                                 {\r
 154                                         type: "stackedBar100",\r
 155                                         showInLegend: true,\r
 156                                         name: "Hobbies",\r
 157                                         indexLabel: "{y}",\r
 158                                         dataPoints: [\r
 159                                         { y: 80, label: "George" },\r
 160                                         { y: 150, label: "Alex" },\r
 161                                         { y: 50, label: "Mike" },\r
 162                                         { y: 74, label: "Jake" },\r
 163                                         { y: 40, label: "Shah" },\r
 164                                         { y: 120, label: "Joe" },\r
 165                                         { y: 100, label: "Fin" },\r
 166                                         { y: 120, label: "Larry" }\r
 167 \r
 168                                         ]\r
 169                                 }\r
 170 \r
 171 \r
 172                                 ]\r
 173 \r
 174                         });\r
 175 \r
 176                         chart.render();\r
 177                 }\r
 178         </script>\r
 179         <script src="../../canvasjs.min.js"></script>\r
 180         <title>CanvasJS Example</title>\r
 181 </head>\r
 182 <body>\r
 183         <div id="chartContainer" style="height: 400px; width: 100%;">\r
 184         </div>\r
 185 </body>\r
 186 </html>\r
 187 \r
 188 </html>\r