charts/canvas/examples/19-range-column-chart/range-column-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: "Temperature Comparison of Two Cities",\r
  11                 },                      \r
  12                 exportEnabled: true,\r
  13                 axisY: {\r
  14                         includeZero:false,          \r
  15                         suffix: "°C",\r
  16                 },     \r
  17                 axisX: {\r
  18                         interval:1,\r
  19                         intervalType: "month",\r
  20                         valueFormatString: "MMM",\r
  21                 },\r
  22                 toolTip: {\r
  23                         shared: true,           \r
  24                 },\r
  25                 data: [\r
  26                 {\r
  27                         type: "rangeColumn",                    \r
  28                         name: "City 1",\r
  29                 indexLabel: "{y[#index]}",\r
  30                         indexLabelFontSize: 12,\r
  31                         yValueFormatString: "#0.## °C",\r
  32                         showInLegend: true,\r
  33                         dataPoints: [   \r
  34                                 {x: new Date(2013,00,01), y: [08, 20]}, \r
  35                                 {x: new Date(2013,01,01), y: [10, 24]}, \r
  36                                 {x: new Date(2013,02,01), y: [16, 29]}, \r
  37                                 {x: new Date(2013,03,01), y: [21, 36]}, \r
  38                                 {x: new Date(2013,04,01), y: [26, 39]}, \r
  39                                 {x: new Date(2013,05,01), y: [22, 39]}, \r
  40                                 {x: new Date(2013,06,01), y: [20, 35]},         \r
  41                                 {x: new Date(2013,07,01), y: [20, 34]},         \r
  42                                 {x: new Date(2013,08,01), y: [20, 34]}, \r
  43                                 {x: new Date(2013,09,01), y: [19, 33]}, \r
  44                                 {x: new Date(2013,10,01), y: [13, 28]}, \r
  45                                 {x: new Date(2013,11,01), y: [09, 23]}\r
  46                         ]\r
  47                 },\r
  48                 {\r
  49                         type: "rangeColumn",\r
  50                         showInLegend: true,\r
  51                         name: "City 2",\r
  52                 indexLabel: "{y[#index]}",\r
  53                         indexLabelFontSize: 12,\r
  54                         yValueFormatString: "#0.## °C",                        \r
  55                         dataPoints: [   \r
  56                                 {x: new Date(2013,00,01), y: [16, 28]}, \r
  57                                 {x: new Date(2013,01,01), y: [18, 31]}, \r
  58                                 {x: new Date(2013,02,01), y: [20, 33]}, \r
  59                                 {x: new Date(2013,03,01), y: [22, 34]}, \r
  60                                 {x: new Date(2013,04,01), y: [22, 33]}, \r
  61                                 {x: new Date(2013,05,01), y: [20, 29]}, \r
  62                                 {x: new Date(2013,06,01), y: [20, 28]}, \r
  63                                 {x: new Date(2013,07,01), y: [20, 28]},         \r
  64                                 {x: new Date(2013,08,01), y: [20, 28]},         \r
  65                                 {x: new Date(2013,09,01), y: [20, 28]},         \r
  66                                 {x: new Date(2013,10,01), y: [14, 27]}, \r
  67                                 {x: new Date(2013,11,01), y: [11, 26]}\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%;"></div>\r
  80 </body>\r
  81 \r
  82 \r
  83 </html>\r