charts/canvas/examples/01-line-chart/multiple-charts-in-one-page.html

   1 <!DOCTYPE HTML>\r
   2 <html>\r
   3 <head>\r
   4         <script type="text/javascript">\r
   5                 window.onload = function () {\r
   6                         var chart = new CanvasJS.Chart("chartContainer1", {\r
   7                                 theme: "theme2",\r
   8                                 title: {\r
   9                                         text: "Earthquakes - per month"\r
  10                                 },\r
  11                                 animationEnabled: true,\r
  12                                 axisX: {\r
  13                                         valueFormatString: "MMM",\r
  14                                         interval: 1,\r
  15                                         intervalType: "month"\r
  16 \r
  17                                 },\r
  18                                 axisY: {\r
  19                                         includeZero: false\r
  20 \r
  21                                 },\r
  22                                 data: [{\r
  23                                         type: "line",\r
  24                                         //lineThickness: 3,\r
  25                                         dataPoints: [\r
  26                                         { x: new Date(2012, 00, 1), y: 450 },\r
  27                                         { x: new Date(2012, 01, 1), y: 414 },\r
  28                                         { x: new Date(2012, 02, 1), y: 520, indexLabel: "highest", markerColor: "red", markerType: "triangle" },\r
  29                                         { x: new Date(2012, 03, 1), y: 460 },\r
  30                                         { x: new Date(2012, 04, 1), y: 450 },\r
  31                                         { x: new Date(2012, 05, 1), y: 500 },\r
  32                                         { x: new Date(2012, 06, 1), y: 480 },\r
  33                                         { x: new Date(2012, 07, 1), y: 480 },\r
  34                                         { x: new Date(2012, 08, 1), y: 410, indexLabel: "lowest", markerColor: "DarkSlateGrey", markerType: "cross" },\r
  35                                         { x: new Date(2012, 09, 1), y: 500 },\r
  36                                         { x: new Date(2012, 10, 1), y: 480 },\r
  37                                         { x: new Date(2012, 11, 1), y: 510 }\r
  38                                         ]\r
  39                                 }\r
  40                                 ]\r
  41                         });\r
  42 \r
  43                         chart.render();\r
  44 \r
  45                         var chart = new CanvasJS.Chart("chartContainer2", {\r
  46                                 title: {\r
  47                                         text: "Share Value over a Year"\r
  48                                 },\r
  49                                 theme: "theme2",\r
  50                                 animationEnabled: true,\r
  51                                 axisX: {\r
  52                                         valueFormatString: "MMM"\r
  53                                 },\r
  54                                 axisY: {\r
  55                                         valueFormatString: "#0$"\r
  56                                 },\r
  57                                 data: [{\r
  58                                         type: "line",\r
  59                                         dataPoints: [\r
  60                                         { x: new Date(2012, 01, 1), y: 71, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },\r
  61                                         { x: new Date(2012, 02, 1), y: 55, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 },\r
  62                                         { x: new Date(2012, 03, 1), y: 50, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 },\r
  63                                         { x: new Date(2012, 04, 1), y: 65, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },\r
  64                                         { x: new Date(2012, 05, 1), y: 85, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },\r
  65                                         { x: new Date(2012, 06, 1), y: 68, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 },\r
  66                                         { x: new Date(2012, 07, 1), y: 28, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 },\r
  67                                         { x: new Date(2012, 08, 1), y: 34, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },\r
  68                                         { x: new Date(2012, 09, 1), y: 24, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 }\r
  69                                         ]\r
  70                                 }\r
  71                                 ]\r
  72                         });\r
  73 \r
  74                         chart.render();\r
  75 \r
  76                         var chart = new CanvasJS.Chart("chartContainer3", {\r
  77                                 title: {\r
  78                                         text: "Site Traffic",\r
  79                                         fontSize: 30\r
  80                                 },\r
  81                                 animationEnabled: true,\r
  82                                 axisX: {\r
  83 \r
  84                                         gridColor: "Silver",\r
  85                                         tickColor: "silver",\r
  86                                         valueFormatString: "DD/MMM"\r
  87 \r
  88                                 },\r
  89                                 toolTip: {\r
  90                                         shared: true\r
  91                                 },\r
  92                                 theme: "theme2",\r
  93                                 axisY: {\r
  94                                         gridColor: "Silver",\r
  95                                         tickColor: "silver"\r
  96                                 },\r
  97                                 legend: {\r
  98                                         verticalAlign: "bottom",\r
  99                                         horizontalAlign: "center"\r
 100                                 },\r
 101                                 data: [{\r
 102                                         type: "line",\r
 103                                         showInLegend: true,\r
 104                                         lineThickness: 2,\r
 105                                         name: "Visits",\r
 106                                         markerType: "square",\r
 107                                         color: "#F08080",\r
 108                                         dataPoints: [\r
 109                                         { x: new Date(2010, 0, 3), y: 650 },\r
 110                                         { x: new Date(2010, 0, 5), y: 700 },\r
 111                                         { x: new Date(2010, 0, 7), y: 710 },\r
 112                                         { x: new Date(2010, 0, 9), y: 658 },\r
 113                                         { x: new Date(2010, 0, 11), y: 734 },\r
 114                                         { x: new Date(2010, 0, 13), y: 963 },\r
 115                                         { x: new Date(2010, 0, 15), y: 847 },\r
 116                                         { x: new Date(2010, 0, 17), y: 853 },\r
 117                                         { x: new Date(2010, 0, 19), y: 869 },\r
 118                                         { x: new Date(2010, 0, 21), y: 943 },\r
 119                                         { x: new Date(2010, 0, 23), y: 970 }\r
 120                                         ]\r
 121                                 },\r
 122                                 {\r
 123                                         type: "line",\r
 124                                         showInLegend: true,\r
 125                                         name: "Unique Visits",\r
 126                                         color: "#20B2AA",\r
 127                                         lineThickness: 2,\r
 128 \r
 129                                         dataPoints: [\r
 130                                         { x: new Date(2010, 0, 3), y: 510 },\r
 131                                         { x: new Date(2010, 0, 5), y: 560 },\r
 132                                         { x: new Date(2010, 0, 7), y: 540 },\r
 133                                         { x: new Date(2010, 0, 9), y: 558 },\r
 134                                         { x: new Date(2010, 0, 11), y: 544 },\r
 135                                         { x: new Date(2010, 0, 13), y: 693 },\r
 136                                         { x: new Date(2010, 0, 15), y: 657 },\r
 137                                         { x: new Date(2010, 0, 17), y: 663 },\r
 138                                         { x: new Date(2010, 0, 19), y: 639 },\r
 139                                         { x: new Date(2010, 0, 21), y: 673 },\r
 140                                         { x: new Date(2010, 0, 23), y: 660 }\r
 141                                         ]\r
 142                                 }\r
 143                                 ],\r
 144                         });\r
 145 \r
 146                         chart.render();\r
 147 \r
 148                         var chart = new CanvasJS.Chart("chartContainer4", {\r
 149                                 zoomEnabled: false,\r
 150                                 animationEnabled: true,\r
 151                                 title: {\r
 152                                         text: "Mobile Phone Subscriptions"\r
 153                                 },\r
 154                                 axisY2: {\r
 155                                         valueFormatString: "0.0 bn",\r
 156 \r
 157                                         maximum: 1.2,\r
 158                                         interval: .2,\r
 159                                         interlacedColor: "#F5F5F5",\r
 160                                         gridColor: "#D7D7D7",\r
 161                                         tickColor: "#D7D7D7"\r
 162                                 },\r
 163                                 theme: "theme2",\r
 164                                 toolTip: {\r
 165                                         shared: true\r
 166                                 },\r
 167                                 legend: {\r
 168                                         verticalAlign: "bottom",\r
 169                                         horizontalAlign: "center",\r
 170                                         fontSize: 15,\r
 171                                         fontFamily: "Lucida Sans Unicode"\r
 172                                 },\r
 173                                 data: [{\r
 174                                         type: "line",\r
 175                                         lineThickness: 3,\r
 176                                         axisYType: "secondary",\r
 177                                         showInLegend: true,\r
 178                                         name: "India",\r
 179                                         dataPoints: [\r
 180                                         { x: new Date(2001, 0), y: 0 },\r
 181                                         { x: new Date(2002, 0), y: 0.001 },\r
 182                                         { x: new Date(2003, 0), y: 0.01 },\r
 183                                         { x: new Date(2004, 0), y: 0.05 },\r
 184                                         { x: new Date(2005, 0), y: 0.1 },\r
 185                                         { x: new Date(2006, 0), y: 0.15 },\r
 186                                         { x: new Date(2007, 0), y: 0.22 },\r
 187                                         { x: new Date(2008, 0), y: 0.38 },\r
 188                                         { x: new Date(2009, 0), y: 0.56 },\r
 189                                         { x: new Date(2010, 0), y: 0.77 },\r
 190                                         { x: new Date(2011, 0), y: 0.91 },\r
 191                                         { x: new Date(2012, 0), y: 0.94 }\r
 192                                         ]\r
 193                                 },\r
 194                                 {\r
 195                                         type: "line",\r
 196                                         lineThickness: 3,\r
 197                                         showInLegend: true,\r
 198                                         name: "China",\r
 199                                         axisYType: "secondary",\r
 200                                         dataPoints: [\r
 201                                         { x: new Date(2001, 00), y: 0.18 },\r
 202                                         { x: new Date(2002, 00), y: 0.2 },\r
 203                                         { x: new Date(2003, 0), y: 0.25 },\r
 204                                         { x: new Date(2004, 0), y: 0.35 },\r
 205                                         { x: new Date(2005, 0), y: 0.42 },\r
 206                                         { x: new Date(2006, 0), y: 0.5 },\r
 207                                         { x: new Date(2007, 0), y: 0.58 },\r
 208                                         { x: new Date(2008, 0), y: 0.67 },\r
 209                                         { x: new Date(2009, 0), y: 0.78 },\r
 210                                         { x: new Date(2010, 0), y: 0.88 },\r
 211                                         { x: new Date(2011, 0), y: 0.98 },\r
 212                                         { x: new Date(2012, 0), y: 1.04 }\r
 213                                         ]\r
 214                                 },\r
 215                                 {\r
 216                                         type: "line",\r
 217                                         lineThickness: 3,\r
 218                                         showInLegend: true,\r
 219                                         name: "USA",\r
 220                                         axisYType: "secondary",\r
 221                                         dataPoints: [\r
 222                                         { x: new Date(2001, 00), y: 0.16 },\r
 223                                         { x: new Date(2002, 0), y: 0.17 },\r
 224                                         { x: new Date(2003, 0), y: 0.18 },\r
 225                                         { x: new Date(2004, 0), y: 0.19 },\r
 226                                         { x: new Date(2005, 0), y: 0.20 },\r
 227                                         { x: new Date(2006, 0), y: 0.23 },\r
 228                                         { x: new Date(2007, 0), y: 0.261 },\r
 229                                         { x: new Date(2008, 0), y: 0.289 },\r
 230                                         { x: new Date(2009, 0), y: 0.3 },\r
 231                                         { x: new Date(2010, 0), y: 0.31 },\r
 232                                         { x: new Date(2011, 0), y: 0.32 },\r
 233                                         { x: new Date(2012, 0), y: 0.33 }\r
 234                                         ]\r
 235                                 }\r
 236                                 ],\r
 237                                 legend: {\r
 238                                         cursor: "pointer",\r
 239                                         itemclick: function (e) {\r
 240                                                 if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {\r
 241                                                         e.dataSeries.visible = false;\r
 242                                                 }\r
 243                                                 else {\r
 244                                                         e.dataSeries.visible = true;\r
 245                                                 }\r
 246                                                 chart.render();\r
 247                                         }\r
 248                                 }\r
 249                         });\r
 250 \r
 251                         chart.render();\r
 252                 }\r
 253         </script>\r
 254         <script src="../../canvasjs.min.js"></script>\r
 255         <title>CanvasJS Example</title>\r
 256 </head>\r
 257 \r
 258 <body>\r
 259         <div id="chartContainer1" style="width: 45%; height: 300px;display: inline-block;"></div>\r
 260         <div id="chartContainer2" style="width: 45%; height: 300px;display: inline-block;"></div>\r
 261         <br />\r
 262         <div id="chartContainer3" style="width: 45%; height: 300px;display: inline-block;"></div>\r
 263         <div id="chartContainer4" style="width: 45%; height: 300px;display: inline-block;"></div>\r
 264 </body>\r
 265 \r
 266 </html>