charts/canvas/examples/10-stacked-bar-chart/stacked-bar-chart-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: "Cost Of Pancake Ingredients, 2011"\r
  10                                 },\r
  11                                 animationEnabled: true,\r
  12                                 axisX: {\r
  13                                         interval: 1,\r
  14                                         labelFontSize: 10,\r
  15                                         lineThickness: 0\r
  16                                 },\r
  17                                 axisY2: {\r
  18                                         valueFormatString: "$ 0",\r
  19                                         lineThickness: 0\r
  20                                 },\r
  21                                 toolTip: {\r
  22                                         shared: true\r
  23                                 },\r
  24                                 legend: {\r
  25                                         verticalAlign: "top",\r
  26                                         horizontalAlign: "center"\r
  27                                 },\r
  28 \r
  29                                 data: [{\r
  30                                         type: "stackedBar",\r
  31                                         showInLegend: true,\r
  32                                         name: "Butter (500gms)",\r
  33                                         axisYType: "secondary",\r
  34                                         color: "#7E8F74",\r
  35                                         dataPoints: [\r
  36                                                 { y: 3, label: "India" },\r
  37                                                 { y: 5, label: "US" },\r
  38                                                 { y: 3, label: "Germany" },\r
  39                                                 { y: 6, label: "Brazil" },\r
  40                                                 { y: 7, label: "China" },\r
  41                                                 { y: 5, label: "Australia" },\r
  42                                                 { y: 5, label: "France" },\r
  43                                                 { y: 7, label: "Italy" },\r
  44                                                 { y: 9, label: "Singapore" },\r
  45                                                 { y: 8, label: "Switzerland" },\r
  46                                                 { y: 12, label: "Japan" }\r
  47                                         ]\r
  48                                 },\r
  49                                 {\r
  50                                         type: "stackedBar",\r
  51                                         showInLegend: true,\r
  52                                         name: "Flour (1kg)",\r
  53                                         axisYType: "secondary",\r
  54                                         color: "#F0E6A7",\r
  55                                         dataPoints: [\r
  56                                                 { y: .5, label: "India" },\r
  57                                                 { y: 1.5, label: "US" },\r
  58                                                 { y: 1, label: "Germany" },\r
  59                                                 { y: 2, label: "Brazil" },\r
  60                                                 { y: 2, label: "China" },\r
  61                                                 { y: 2.5, label: "Australia" },\r
  62                                                 { y: 1.5, label: "France" },\r
  63                                                 { y: 1, label: "Italy" },\r
  64                                                 { y: 2, label: "Singapore" },\r
  65                                                 { y: 2, label: "Switzerland" },\r
  66                                                 { y: 3, label: "Japan" }\r
  67                                         ]\r
  68                                 },\r
  69                                 {\r
  70                                         type: "stackedBar",\r
  71                                         showInLegend: true,\r
  72                                         name: "Milk (2l)",\r
  73                                         axisYType: "secondary",\r
  74                                         color: "#EBB88A",\r
  75                                         dataPoints: [\r
  76                                                 { y: 2, label: "India" },\r
  77                                                 { y: 3, label: "US" },\r
  78                                                 { y: 3, label: "Germany" },\r
  79                                                 { y: 3, label: "Brazil" },\r
  80                                                 { y: 4, label: "China" },\r
  81                                                 { y: 3, label: "Australia" },\r
  82                                                 { y: 4.5, label: "France" },\r
  83                                                 { y: 4.5, label: "Italy" },\r
  84                                                 { y: 6, label: "Singapore" },\r
  85                                                 { y: 3, label: "Switzerland" },\r
  86                                                 { y: 6, label: "Japan" }\r
  87                                         ]\r
  88                                 },\r
  89                                 {\r
  90                                         type: "stackedBar",\r
  91                                         showInLegend: true,\r
  92                                         name: "Eggs (20)",\r
  93                                         axisYType: "secondary",\r
  94                                         color: "#DB9079",\r
  95                                         indexLabel: "$#total",\r
  96                                         indexLabelPlacement: "outside",\r
  97                                         dataPoints: [\r
  98                                                 { y: 2, label: "India" },\r
  99                                                 { y: 3, label: "US" },\r
 100                                                 { y: 6, label: "Germany" },\r
 101                                                 { y: 4, label: "Brazil" },\r
 102                                                 { y: 4, label: "China" },\r
 103                                                 { y: 8, label: "Australia" },\r
 104                                                 { y: 8, label: "France" },\r
 105                                                 { y: 8, label: "Italy" },\r
 106                                                 { y: 4, label: "Singapore" },\r
 107                                                 { y: 11, label: "Switzerland" },\r
 108                                                 { y: 6, label: "Japan" }\r
 109                                         ]\r
 110                                 }\r
 111                                 ]\r
 112                         });\r
 113                         chart.render();\r
 114                 }\r
 115         </script>\r
 116         <script src="../../canvasjs.min.js"></script>\r
 117         <title>CanvasJS Example</title>\r
 118 </head>\r
 119 <body>\r
 120         <div id="chartContainer" style="height: 400px; width: 100%;"></div>\r
 121 </body>\r
 122 \r
 123 </html>\r