charts/canvas/examples/25 -jquery-plugin/multiple-charts-in-one-page.html

   1 <!DOCTYPE HTML>\r
   2 <html>\r
   3 <head>\r
   4         <title>CanvasJS Example - jQuery Line Chart</title>\r
   5         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>\r
   6         <script src="../../jquery.canvasjs.min.js"></script>\r
   7         <script type="text/javascript">\r
   8                 $(function () {\r
   9                         //Better to construct options first and then pass it as a parameter\r
  10                         var options = {\r
  11                                 zoomEnabled: true,\r
  12                                 animationEnabled: true,\r
  13                                 title: {\r
  14                                         text: "Fertility Rate Vs Life Expectancy in different countries - 2009"\r
  15                                 },\r
  16                                 axisX: {\r
  17                                         title: "Life Expectancy",\r
  18                                         maximum: 85\r
  19                                 },\r
  20                                 axisY: {\r
  21                                         title: "Fertility Rate"\r
  22 \r
  23                                 },\r
  24 \r
  25                                 legend: {\r
  26                                         verticalAlign: "bottom",\r
  27                                         horizontalAlign: "left"\r
  28 \r
  29                                 },\r
  30                                 data: [\r
  31                                 {\r
  32                                         type: "bubble",\r
  33                                         legendText: "Size of Bubble Represents Population",\r
  34                                         showInLegend: true,\r
  35                                         legendMarkerType: "circle",\r
  36                                         legendMarkerColor: "grey",\r
  37                                         toolTipContent: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span><br/><strong>Life Exp</strong> {x} yrs<br/> <strong>Fertility Rate</strong> {y}<br/> <strong>Population</strong> {z}mn",\r
  38 \r
  39                                         dataPoints: [\r
  40                                          { x: 78.1, y: 2.00, z: 306.77, name: "US" },\r
  41                                          { x: 68.5, y: 2.15, z: 237.414, name: "Indonesia" },\r
  42                                          { x: 72.5, y: 1.86, z: 193.24, name: "Brazil" },\r
  43                                          { x: 76.5, y: 2.36, z: 112.24, name: "Mexico" },\r
  44                                          { x: 50.9, y: 5.56, z: 154.48, name: "Nigeria" },\r
  45                                          { x: 68.6, y: 1.54, z: 141.91, name: "Russia" },\r
  46                                          { x: 82.9, y: 1.37, z: 127.55, name: "Japan" },\r
  47                                          { x: 79.8, y: 1.36, z: 81.90, name: "Australia" },\r
  48                                          { x: 72.7, y: 2.78, z: 79.71, name: "Egypt" },\r
  49                                          { x: 80.1, y: 1.94, z: 61.81, name: "UK" },\r
  50                                          { x: 55.8, y: 4.76, z: 39.24, name: "Kenya" },\r
  51                                          { x: 81.5, y: 1.93, z: 21.95, name: "Australia" },\r
  52                                          { x: 68.1, y: 4.77, z: 31.09, name: "Iraq" },\r
  53                                          { x: 47.9, y: 6.42, z: 33.42, name: "Afganistan" },\r
  54                                          { x: 50.3, y: 5.58, z: 18.55, name: "Angola" }\r
  55 \r
  56 \r
  57                                         ]\r
  58                                 }\r
  59                                 ]\r
  60                         };\r
  61                         $("#chartContainer1").CanvasJSChart(options);\r
  62                 });\r
  63 \r
  64                 $(function () {\r
  65                         //Better to construct options first and then pass it as a parameter\r
  66                         var options = {\r
  67                                 title: {\r
  68                                         text: "Email Analysis"\r
  69                                 },\r
  70                                 animationEnabled: true,\r
  71                                 axisX: {\r
  72                                         interval: 3\r
  73                                 },\r
  74                                 axisY: {\r
  75                                         title: "Number of Messages"\r
  76                                 },\r
  77                                 legend: {\r
  78                                         verticalAlign: "bottom",\r
  79                                         horizontalAlign: "center"\r
  80                                 },\r
  81 \r
  82                                 data: [{\r
  83                                         name: "received",\r
  84                                         showInLegend: true,\r
  85                                         legendMarkerType: "square",\r
  86                                         type: "area",\r
  87                                         color: "rgba(40,175,101,0.6)",\r
  88                                         markerSize: 0,\r
  89 \r
  90                                         dataPoints: [\r
  91                                         { x: new Date(2013, 0, 1, 00, 00), label: "midnight", y: 7 },\r
  92                                         { x: new Date(2013, 0, 1, 01, 00), y: 8 },\r
  93                                         { x: new Date(2013, 0, 1, 02, 00), y: 5 },\r
  94                                         { x: new Date(2013, 0, 1, 03, 00), y: 7 },\r
  95                                         { x: new Date(2013, 0, 1, 04, 00), y: 6 },\r
  96                                         { x: new Date(2013, 0, 1, 05, 00), y: 8 },\r
  97                                         { x: new Date(2013, 0, 1, 06, 00), y: 12 },\r
  98                                         { x: new Date(2013, 0, 1, 07, 00), y: 24 },\r
  99                                         { x: new Date(2013, 0, 1, 08, 00), y: 36 },\r
 100                                         { x: new Date(2013, 0, 1, 09, 00), y: 35 },\r
 101                                         { x: new Date(2013, 0, 1, 10, 00), y: 37 },\r
 102                                         { x: new Date(2013, 0, 1, 11, 00), y: 29 },\r
 103                                         { x: new Date(2013, 0, 1, 12, 00), y: 34, label: "noon" },\r
 104                                         { x: new Date(2013, 0, 1, 13, 00), y: 38 },\r
 105                                         { x: new Date(2013, 0, 1, 14, 00), y: 23 },\r
 106                                         { x: new Date(2013, 0, 1, 15, 00), y: 31 },\r
 107                                         { x: new Date(2013, 0, 1, 16, 00), y: 34 },\r
 108                                         { x: new Date(2013, 0, 1, 17, 00), y: 29 },\r
 109                                         { x: new Date(2013, 0, 1, 18, 00), y: 14 },\r
 110                                         { x: new Date(2013, 0, 1, 19, 00), y: 12 },\r
 111                                         { x: new Date(2013, 0, 1, 20, 00), y: 10 },\r
 112                                         { x: new Date(2013, 0, 1, 21, 00), y: 8 },\r
 113                                         { x: new Date(2013, 0, 1, 22, 00), y: 13 },\r
 114                                         { x: new Date(2013, 0, 1, 23, 00), y: 11 }\r
 115                                         ]\r
 116                                 },\r
 117                                 {\r
 118                                         name: "sent",\r
 119                                         showInLegend: true,\r
 120                                         legendMarkerType: "square",\r
 121                                         type: "area",\r
 122                                         color: "rgba(0,75,141,0.7)",\r
 123                                         markerSize: 0,\r
 124                                         label: "",\r
 125                                         dataPoints: [\r
 126 \r
 127                                         { x: new Date(2013, 0, 1, 00, 00), label: "midnight", y: 12 },\r
 128                                         { x: new Date(2013, 0, 1, 01, 00), y: 10 },\r
 129                                         { x: new Date(2013, 0, 1, 02, 00), y: 3 },\r
 130                                         { x: new Date(2013, 0, 1, 03, 00), y: 5 },\r
 131                                         { x: new Date(2013, 0, 1, 04, 00), y: 2 },\r
 132                                         { x: new Date(2013, 0, 1, 05, 00), y: 1 },\r
 133                                         { x: new Date(2013, 0, 1, 06, 00), y: 3 },\r
 134                                         { x: new Date(2013, 0, 1, 07, 00), y: 6 },\r
 135                                         { x: new Date(2013, 0, 1, 08, 00), y: 14 },\r
 136                                         { x: new Date(2013, 0, 1, 09, 00), y: 15 },\r
 137                                         { x: new Date(2013, 0, 1, 10, 00), y: 21 },\r
 138                                         { x: new Date(2013, 0, 1, 11, 00), y: 24 },\r
 139                                         { x: new Date(2013, 0, 1, 12, 00), y: 28, label: "noon" },\r
 140                                         { x: new Date(2013, 0, 1, 13, 00), y: 26 },\r
 141                                         { x: new Date(2013, 0, 1, 14, 00), y: 17 },\r
 142                                         { x: new Date(2013, 0, 1, 15, 00), y: 23 },\r
 143                                         { x: new Date(2013, 0, 1, 16, 00), y: 28 },\r
 144                                         { x: new Date(2013, 0, 1, 17, 00), y: 22 },\r
 145                                         { x: new Date(2013, 0, 1, 18, 00), y: 10 },\r
 146                                         { x: new Date(2013, 0, 1, 19, 00), y: 9 },\r
 147                                         { x: new Date(2013, 0, 1, 20, 00), y: 6 },\r
 148                                         { x: new Date(2013, 0, 1, 21, 00), y: 4 },\r
 149                                         { x: new Date(2013, 0, 1, 22, 00), y: 12 },\r
 150                                         { x: new Date(2013, 0, 1, 23, 00), y: 14 }\r
 151                                         ]\r
 152                                 }\r
 153                                 ]\r
 154                         };\r
 155                         $("#chartContainer2").CanvasJSChart(options);\r
 156                 });\r
 157 \r
 158                 $(function () {\r
 159                         //Better to construct options first and then pass it as a parameter\r
 160                         var options = {\r
 161                                 title: {\r
 162                                         text: "Cumulative App downloads on iTunes And Play Store"\r
 163                                 },\r
 164                                 animationEnabled: true,\r
 165                                 axisY: {\r
 166                                         includeZero: false,\r
 167                                         maximum: 110000,\r
 168                                         valueFormatString: "#0,.",\r
 169                                         suffix: " k"\r
 170                                 },\r
 171                                 axisX: {\r
 172                                         title: "Months After Launch"\r
 173                                 },\r
 174                                 toolTip: {\r
 175                                         shared: true,\r
 176                                         content: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span> {y}"\r
 177                                 },\r
 178 \r
 179                                 data: [\r
 180                                 {\r
 181                                         type: "splineArea",\r
 182                                         showInLegend: true,\r
 183                                         name: "iOS",\r
 184                                         dataPoints: [\r
 185                                         { x: 1, y: 3000 },\r
 186                                         { x: 2, y: 7000 },\r
 187                                         { x: 3, y: 10000 },\r
 188                                         { x: 4, y: 14000 },\r
 189                                         { x: 5, y: 23000 },\r
 190                                         { x: 6, y: 31000 },\r
 191                                         { x: 7, y: 42000 },\r
 192                                         { x: 8, y: 56000 },\r
 193                                         { x: 9, y: 64000 },\r
 194                                         { x: 10, y: 81000 },\r
 195                                         { x: 11, y: 105000 }\r
 196                                         ]\r
 197                                 },\r
 198                                 {\r
 199                                         type: "splineArea",\r
 200                                         name: "Android",\r
 201                                         showInLegend: true,\r
 202                                         dataPoints: [\r
 203                                         { x: 4, y: 4000 },\r
 204                                         { x: 5, y: 6000 },\r
 205                                         { x: 6, y: 9000 },\r
 206                                         { x: 7, y: 14000 },\r
 207                                         { x: 8, y: 21000 },\r
 208                                         { x: 9, y: 31000 },\r
 209                                         { x: 10, y: 46000 },\r
 210                                         { x: 11, y: 61000 }\r
 211 \r
 212                                         ]\r
 213                                 }\r
 214                                 ]\r
 215                         };\r
 216                         $("#chartContainer3").CanvasJSChart(options);\r
 217                 });\r
 218 \r
 219                 $(function () {\r
 220                         //Better to construct options first and then pass it as a parameter\r
 221                         var options = {\r
 222                                 title: {\r
 223                                         text: "Gaming Consoles Sold in 2012"\r
 224                                 },\r
 225                                 animationEnabled: true,\r
 226                                 legend: {\r
 227                                         verticalAlign: "bottom",\r
 228                                         horizontalAlign: "center"\r
 229                                 },\r
 230                                 data: [\r
 231                                 {\r
 232                                         type: "pie",\r
 233                                         showInLegend: true,\r
 234                                         toolTipContent: "{y} - <strong>#percent%</strong>",\r
 235                                         dataPoints: [\r
 236                                                 { y: 4181563, legendText: "PS 3", indexLabel: "PlayStation 3" },\r
 237                                                 { y: 2175498, legendText: "Wii", indexLabel: "Wii" },\r
 238                                                 { y: 3125844, legendText: "360", exploded: true, indexLabel: "Xbox 360" },\r
 239                                                 { y: 1176121, legendText: "DS", indexLabel: "Nintendo DS" },\r
 240                                                 { y: 1727161, legendText: "PSP", indexLabel: "PSP" },\r
 241                                                 { y: 4303364, legendText: "3DS", indexLabel: "Nintendo 3DS" },\r
 242                                                 { y: 1717786, legendText: "Vita", indexLabel: "PS Vita" }\r
 243                                         ]\r
 244                                 }\r
 245                                 ]\r
 246                         };\r
 247                         $("#chartContainer4").CanvasJSChart(options);\r
 248                 });\r
 249         </script>\r
 250 </head>\r
 251 <body>\r
 252         <div id="chartContainer1" style="width: 45%; height: 400px;display: inline-block;"></div>\r
 253         <div id="chartContainer2" style="width: 45%; height: 400px;display: inline-block;"></div><br />\r
 254         <div id="chartContainer3" style="width: 45%; height: 400px;display: inline-block;"></div>\r
 255         <div id="chartContainer4" style="width: 45%; height: 400px;display: inline-block;"></div>\r
 256 </body>\r
 257 </html>