Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | jQuery(document).ready(function() { |
| 2 | // HIGHCHARTS DEMOS |
||
| 3 | |||
| 4 | // LINE CHART 1 |
||
| 5 | $('#highchart_1').highcharts({ |
||
| 6 | chart : { |
||
| 7 | style: { |
||
| 8 | fontFamily: 'Open Sans' |
||
| 9 | } |
||
| 10 | }, |
||
| 11 | title: { |
||
| 12 | text: 'Monthly Average Temperature', |
||
| 13 | x: -20 //center |
||
| 14 | }, |
||
| 15 | subtitle: { |
||
| 16 | text: 'Source: WorldClimate.com', |
||
| 17 | x: -20 |
||
| 18 | }, |
||
| 19 | xAxis: { |
||
| 20 | categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', |
||
| 21 | 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] |
||
| 22 | }, |
||
| 23 | yAxis: { |
||
| 24 | title: { |
||
| 25 | text: 'Temperature (°C)' |
||
| 26 | }, |
||
| 27 | plotLines: [{ |
||
| 28 | value: 0, |
||
| 29 | width: 1, |
||
| 30 | color: '#808080' |
||
| 31 | }] |
||
| 32 | }, |
||
| 33 | tooltip: { |
||
| 34 | valueSuffix: '°C' |
||
| 35 | }, |
||
| 36 | legend: { |
||
| 37 | layout: 'vertical', |
||
| 38 | align: 'right', |
||
| 39 | verticalAlign: 'middle', |
||
| 40 | borderWidth: 0 |
||
| 41 | }, |
||
| 42 | series: [{ |
||
| 43 | name: 'Tokyo', |
||
| 44 | data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] |
||
| 45 | }, { |
||
| 46 | name: 'New York', |
||
| 47 | data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] |
||
| 48 | }, { |
||
| 49 | name: 'Berlin', |
||
| 50 | data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] |
||
| 51 | }, { |
||
| 52 | name: 'London', |
||
| 53 | data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] |
||
| 54 | }] |
||
| 55 | }); |
||
| 56 | |||
| 57 | // LINE CHART 2 |
||
| 58 | $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) { |
||
| 59 | |||
| 60 | $('#highchart_2').highcharts({ |
||
| 61 | chart: { |
||
| 62 | zoomType: 'x', |
||
| 63 | style: { |
||
| 64 | fontFamily: 'Open Sans' |
||
| 65 | } |
||
| 66 | }, |
||
| 67 | title: { |
||
| 68 | text: 'USD to EUR exchange rate over time' |
||
| 69 | }, |
||
| 70 | subtitle: { |
||
| 71 | text: document.ontouchstart === undefined ? |
||
| 72 | 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in' |
||
| 73 | }, |
||
| 74 | xAxis: { |
||
| 75 | type: 'datetime' |
||
| 76 | }, |
||
| 77 | yAxis: { |
||
| 78 | title: { |
||
| 79 | text: 'Exchange rate' |
||
| 80 | } |
||
| 81 | }, |
||
| 82 | legend: { |
||
| 83 | enabled: false |
||
| 84 | }, |
||
| 85 | plotOptions: { |
||
| 86 | area: { |
||
| 87 | fillColor: { |
||
| 88 | linearGradient: { |
||
| 89 | x1: 0, |
||
| 90 | y1: 0, |
||
| 91 | x2: 0, |
||
| 92 | y2: 1 |
||
| 93 | }, |
||
| 94 | stops: [ |
||
| 95 | [0, Highcharts.getOptions().colors[0]], |
||
| 96 | [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] |
||
| 97 | ] |
||
| 98 | }, |
||
| 99 | marker: { |
||
| 100 | radius: 2 |
||
| 101 | }, |
||
| 102 | lineWidth: 1, |
||
| 103 | states: { |
||
| 104 | hover: { |
||
| 105 | lineWidth: 1 |
||
| 106 | } |
||
| 107 | }, |
||
| 108 | threshold: null |
||
| 109 | } |
||
| 110 | }, |
||
| 111 | |||
| 112 | series: [{ |
||
| 113 | type: 'area', |
||
| 114 | name: 'USD to EUR', |
||
| 115 | data: data |
||
| 116 | }] |
||
| 117 | }); |
||
| 118 | }); |
||
| 119 | |||
| 120 | // AREA CHART |
||
| 121 | $('#highchart_3').highcharts({ |
||
| 122 | chart: { |
||
| 123 | type: 'area', |
||
| 124 | style: { |
||
| 125 | fontFamily: 'Open Sans' |
||
| 126 | } |
||
| 127 | }, |
||
| 128 | title: { |
||
| 129 | text: 'Historic and Estimated Worldwide Population Growth by Region' |
||
| 130 | }, |
||
| 131 | subtitle: { |
||
| 132 | text: 'Source: Wikipedia.org' |
||
| 133 | }, |
||
| 134 | xAxis: { |
||
| 135 | categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'], |
||
| 136 | tickmarkPlacement: 'on', |
||
| 137 | title: { |
||
| 138 | enabled: false |
||
| 139 | } |
||
| 140 | }, |
||
| 141 | yAxis: { |
||
| 142 | title: { |
||
| 143 | text: 'Billions' |
||
| 144 | }, |
||
| 145 | labels: { |
||
| 146 | formatter: function () { |
||
| 147 | return this.value / 1000; |
||
| 148 | } |
||
| 149 | } |
||
| 150 | }, |
||
| 151 | tooltip: { |
||
| 152 | shared: true, |
||
| 153 | valueSuffix: ' millions' |
||
| 154 | }, |
||
| 155 | plotOptions: { |
||
| 156 | area: { |
||
| 157 | stacking: 'normal', |
||
| 158 | lineColor: '#666666', |
||
| 159 | lineWidth: 1, |
||
| 160 | marker: { |
||
| 161 | lineWidth: 1, |
||
| 162 | lineColor: '#666666' |
||
| 163 | } |
||
| 164 | } |
||
| 165 | }, |
||
| 166 | series: [{ |
||
| 167 | name: 'Asia', |
||
| 168 | data: [502, 635, 809, 947, 1402, 3634, 5268] |
||
| 169 | }, { |
||
| 170 | name: 'Africa', |
||
| 171 | data: [106, 107, 111, 133, 221, 767, 1766] |
||
| 172 | }, { |
||
| 173 | name: 'Europe', |
||
| 174 | data: [163, 203, 276, 408, 547, 729, 628] |
||
| 175 | }, { |
||
| 176 | name: 'America', |
||
| 177 | data: [18, 31, 54, 156, 339, 818, 1201] |
||
| 178 | }, { |
||
| 179 | name: 'Oceania', |
||
| 180 | data: [2, 2, 2, 6, 13, 30, 46] |
||
| 181 | }] |
||
| 182 | }); |
||
| 183 | |||
| 184 | // BAR CHART |
||
| 185 | // Age categories |
||
| 186 | var categories = ['0-4', '5-9', '10-14', '15-19', |
||
| 187 | '20-24', '25-29', '30-34', '35-39', '40-44', |
||
| 188 | '45-49', '50-54', '55-59', '60-64', '65-69', |
||
| 189 | '70-74', '75-79', '80-84', '85-89', '90-94', |
||
| 190 | '95-99', '100 + ']; |
||
| 191 | |||
| 192 | $('#highchart_4').highcharts({ |
||
| 193 | chart: { |
||
| 194 | type: 'bar', |
||
| 195 | style: { |
||
| 196 | fontFamily: 'Open Sans' |
||
| 197 | } |
||
| 198 | }, |
||
| 199 | title: { |
||
| 200 | text: 'Population pyramid for Germany, 2015' |
||
| 201 | }, |
||
| 202 | subtitle: { |
||
| 203 | text: 'Source: <a href="http://populationpyramid.net/germany/2015/">Population Pyramids of the World from 1950 to 2100</a>' |
||
| 204 | }, |
||
| 205 | xAxis: [{ |
||
| 206 | categories: categories, |
||
| 207 | reversed: false, |
||
| 208 | labels: { |
||
| 209 | step: 1 |
||
| 210 | } |
||
| 211 | }, { // mirror axis on right side |
||
| 212 | opposite: true, |
||
| 213 | reversed: false, |
||
| 214 | categories: categories, |
||
| 215 | linkedTo: 0, |
||
| 216 | labels: { |
||
| 217 | step: 1 |
||
| 218 | } |
||
| 219 | }], |
||
| 220 | yAxis: { |
||
| 221 | title: { |
||
| 222 | text: null |
||
| 223 | }, |
||
| 224 | labels: { |
||
| 225 | formatter: function () { |
||
| 226 | return Math.abs(this.value) + '%'; |
||
| 227 | } |
||
| 228 | } |
||
| 229 | }, |
||
| 230 | |||
| 231 | plotOptions: { |
||
| 232 | series: { |
||
| 233 | stacking: 'normal' |
||
| 234 | } |
||
| 235 | }, |
||
| 236 | |||
| 237 | tooltip: { |
||
| 238 | formatter: function () { |
||
| 239 | return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' + |
||
| 240 | 'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0); |
||
| 241 | } |
||
| 242 | }, |
||
| 243 | |||
| 244 | series: [{ |
||
| 245 | name: 'Male', |
||
| 246 | data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2, |
||
| 247 | -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4, |
||
| 248 | -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0] |
||
| 249 | }, { |
||
| 250 | name: 'Female', |
||
| 251 | data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9, |
||
| 252 | 3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9, |
||
| 253 | 1.8, 1.2, 0.6, 0.1, 0.0] |
||
| 254 | }] |
||
| 255 | }); |
||
| 256 | |||
| 257 | // DONUT CHART |
||
| 258 | var colors = Highcharts.getOptions().colors, |
||
| 259 | categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'], |
||
| 260 | data = [{ |
||
| 261 | y: 56.33, |
||
| 262 | color: colors[0], |
||
| 263 | drilldown: { |
||
| 264 | name: 'MSIE versions', |
||
| 265 | categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', 'MSIE 10.0', 'MSIE 11.0'], |
||
| 266 | data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13], |
||
| 267 | color: colors[0] |
||
| 268 | } |
||
| 269 | }, { |
||
| 270 | y: 10.38, |
||
| 271 | color: colors[1], |
||
| 272 | drilldown: { |
||
| 273 | name: 'Firefox versions', |
||
| 274 | categories: ['Firefox v31', 'Firefox v32', 'Firefox v33', 'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'], |
||
| 275 | data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02], |
||
| 276 | color: colors[1] |
||
| 277 | } |
||
| 278 | }, { |
||
| 279 | y: 24.03, |
||
| 280 | color: colors[2], |
||
| 281 | drilldown: { |
||
| 282 | name: 'Chrome versions', |
||
| 283 | categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0', 'Chrome v33.0', 'Chrome v34.0', |
||
| 284 | 'Chrome v35.0', 'Chrome v36.0', 'Chrome v37.0', 'Chrome v38.0', 'Chrome v39.0', 'Chrome v40.0', 'Chrome v41.0', 'Chrome v42.0', 'Chrome v43.0' |
||
| 285 | ], |
||
| 286 | data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45], |
||
| 287 | color: colors[2] |
||
| 288 | } |
||
| 289 | }, { |
||
| 290 | y: 4.77, |
||
| 291 | color: colors[3], |
||
| 292 | drilldown: { |
||
| 293 | name: 'Safari versions', |
||
| 294 | categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'], |
||
| 295 | data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56], |
||
| 296 | color: colors[3] |
||
| 297 | } |
||
| 298 | }, { |
||
| 299 | y: 0.91, |
||
| 300 | color: colors[4], |
||
| 301 | drilldown: { |
||
| 302 | name: 'Opera versions', |
||
| 303 | categories: ['Opera v12.x', 'Opera v27', 'Opera v28', 'Opera v29'], |
||
| 304 | data: [0.34, 0.17, 0.24, 0.16], |
||
| 305 | color: colors[4] |
||
| 306 | } |
||
| 307 | }, { |
||
| 308 | y: 0.2, |
||
| 309 | color: colors[5], |
||
| 310 | drilldown: { |
||
| 311 | name: 'Proprietary or Undetectable', |
||
| 312 | categories: [], |
||
| 313 | data: [], |
||
| 314 | color: colors[5] |
||
| 315 | } |
||
| 316 | }], |
||
| 317 | browserData = [], |
||
| 318 | versionsData = [], |
||
| 319 | i, |
||
| 320 | j, |
||
| 321 | dataLen = data.length, |
||
| 322 | drillDataLen, |
||
| 323 | brightness; |
||
| 324 | |||
| 325 | |||
| 326 | // Build the data arrays |
||
| 327 | for (i = 0; i < dataLen; i += 1) { |
||
| 328 | |||
| 329 | // add browser data |
||
| 330 | browserData.push({ |
||
| 331 | name: categories[i], |
||
| 332 | y: data[i].y, |
||
| 333 | color: data[i].color |
||
| 334 | }); |
||
| 335 | |||
| 336 | // add version data |
||
| 337 | drillDataLen = data[i].drilldown.data.length; |
||
| 338 | for (j = 0; j < drillDataLen; j += 1) { |
||
| 339 | brightness = 0.2 - (j / drillDataLen) / 5; |
||
| 340 | versionsData.push({ |
||
| 341 | name: data[i].drilldown.categories[j], |
||
| 342 | y: data[i].drilldown.data[j], |
||
| 343 | color: Highcharts.Color(data[i].color).brighten(brightness).get() |
||
| 344 | }); |
||
| 345 | } |
||
| 346 | } |
||
| 347 | |||
| 348 | // Create the chart |
||
| 349 | $('#highchart_5').highcharts({ |
||
| 350 | chart: { |
||
| 351 | type: 'pie', |
||
| 352 | style: { |
||
| 353 | fontFamily: 'Open Sans' |
||
| 354 | } |
||
| 355 | }, |
||
| 356 | title: { |
||
| 357 | text: 'Browser market share, January, 2015 to May, 2015' |
||
| 358 | }, |
||
| 359 | subtitle: { |
||
| 360 | text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>' |
||
| 361 | }, |
||
| 362 | yAxis: { |
||
| 363 | title: { |
||
| 364 | text: 'Total percent market share' |
||
| 365 | } |
||
| 366 | }, |
||
| 367 | plotOptions: { |
||
| 368 | pie: { |
||
| 369 | shadow: false, |
||
| 370 | center: ['50%', '50%'] |
||
| 371 | } |
||
| 372 | }, |
||
| 373 | tooltip: { |
||
| 374 | valueSuffix: '%' |
||
| 375 | }, |
||
| 376 | series: [{ |
||
| 377 | name: 'Browsers', |
||
| 378 | data: browserData, |
||
| 379 | size: '60%', |
||
| 380 | dataLabels: { |
||
| 381 | formatter: function () { |
||
| 382 | return this.y > 5 ? this.point.name : null; |
||
| 383 | }, |
||
| 384 | color: '#ffffff', |
||
| 385 | distance: -30 |
||
| 386 | } |
||
| 387 | }, { |
||
| 388 | name: 'Versions', |
||
| 389 | data: versionsData, |
||
| 390 | size: '80%', |
||
| 391 | innerSize: '60%', |
||
| 392 | dataLabels: { |
||
| 393 | formatter: function () { |
||
| 394 | // display only if larger than 1 |
||
| 395 | return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null; |
||
| 396 | } |
||
| 397 | } |
||
| 398 | }] |
||
| 399 | }); |
||
| 400 | |||
| 401 | |||
| 402 | |||
| 403 | }); |