| @ -1,84 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| #container, #sliders { | |||||
| min-width: 310px; | |||||
| max-width: 800px; | |||||
| margin: 0 auto; | |||||
| } | |||||
| #container { | |||||
| height: 400px; | |||||
| } | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| // Set up the chart | |||||
| var chart = new Highcharts.Chart({ | |||||
| chart: { | |||||
| renderTo: 'container', | |||||
| type: 'column', | |||||
| margin: 75, | |||||
| options3d: { | |||||
| enabled: true, | |||||
| alpha: 15, | |||||
| beta: 15, | |||||
| depth: 50, | |||||
| viewDistance: 25 | |||||
| } | |||||
| }, | |||||
| title: { | |||||
| text: 'Chart rotation demo' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Test options by dragging the sliders below' | |||||
| }, | |||||
| plotOptions: { | |||||
| column: { | |||||
| depth: 25 | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] | |||||
| }] | |||||
| }); | |||||
| function showValues() { | |||||
| $('#R0-value').html(chart.options.chart.options3d.alpha); | |||||
| $('#R1-value').html(chart.options.chart.options3d.beta); | |||||
| } | |||||
| // Activate the sliders | |||||
| $('#R0').on('change', function () { | |||||
| chart.options.chart.options3d.alpha = this.value; | |||||
| showValues(); | |||||
| chart.redraw(false); | |||||
| }); | |||||
| $('#R1').on('change', function () { | |||||
| chart.options.chart.options3d.beta = this.value; | |||||
| showValues(); | |||||
| chart.redraw(false); | |||||
| }); | |||||
| showValues(); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-3d.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container"></div> | |||||
| <div id="sliders"> | |||||
| <table> | |||||
| <tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr> | |||||
| <tr><td>Beta Angle</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr> | |||||
| </table> | |||||
| </div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,64 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| #container { | |||||
| height: 400px; | |||||
| min-width: 310px; | |||||
| max-width: 800px; | |||||
| margin: 0 auto; | |||||
| } | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'column', | |||||
| margin: 75, | |||||
| options3d: { | |||||
| enabled: true, | |||||
| alpha: 10, | |||||
| beta: 25, | |||||
| depth: 70 | |||||
| } | |||||
| }, | |||||
| title: { | |||||
| text: '3D chart with null values' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Notice the difference between a 0 value and a null point' | |||||
| }, | |||||
| plotOptions: { | |||||
| column: { | |||||
| depth: 25 | |||||
| } | |||||
| }, | |||||
| xAxis: { | |||||
| categories: Highcharts.getOptions().lang.shortMonths | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: null | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Sales', | |||||
| data: [2, 3, null, 4, 0, 5, 1, 4, 6, 3] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-3d.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="height: 400px"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,92 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| #container { | |||||
| height: 400px; | |||||
| min-width: 310px; | |||||
| max-width: 800px; | |||||
| margin: 0 auto; | |||||
| } | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'column', | |||||
| options3d: { | |||||
| enabled: true, | |||||
| alpha: 15, | |||||
| beta: 15, | |||||
| viewDistance: 25, | |||||
| depth: 40 | |||||
| }, | |||||
| marginTop: 80, | |||||
| marginRight: 40 | |||||
| }, | |||||
| title: { | |||||
| text: 'Total fruit consumption, grouped by gender' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] | |||||
| }, | |||||
| yAxis: { | |||||
| allowDecimals: false, | |||||
| min: 0, | |||||
| title: { | |||||
| text: 'Number of fruits' | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| headerFormat: '<b>{point.key}</b><br>', | |||||
| pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}' | |||||
| }, | |||||
| plotOptions: { | |||||
| column: { | |||||
| stacking: 'normal', | |||||
| depth: 40 | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'John', | |||||
| data: [5, 3, 4, 7, 2], | |||||
| stack: 'male' | |||||
| }, { | |||||
| name: 'Joe', | |||||
| data: [3, 4, 4, 2, 5], | |||||
| stack: 'male' | |||||
| }, { | |||||
| name: 'Jane', | |||||
| data: [2, 5, 6, 2, 1], | |||||
| stack: 'female' | |||||
| }, { | |||||
| name: 'Janet', | |||||
| data: [3, 0, 4, 4, 3], | |||||
| stack: 'female' | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-3d.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="height: 400px"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,59 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'pie', | |||||
| options3d: { | |||||
| enabled: true, | |||||
| alpha: 45 | |||||
| } | |||||
| }, | |||||
| title: { | |||||
| text: 'Contents of Highsoft\'s weekly fruit delivery' | |||||
| }, | |||||
| subtitle: { | |||||
| text: '3D donut in Highcharts' | |||||
| }, | |||||
| plotOptions: { | |||||
| pie: { | |||||
| innerSize: 100, | |||||
| depth: 45 | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Delivered amount', | |||||
| data: [ | |||||
| ['Bananas', 8], | |||||
| ['Kiwi', 3], | |||||
| ['Mixed nuts', 1], | |||||
| ['Oranges', 6], | |||||
| ['Apples', 8], | |||||
| ['Pears', 4], | |||||
| ['Clementines', 4], | |||||
| ['Reddish (bag)', 1], | |||||
| ['Grapes (bunch)', 1] | |||||
| ] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-3d.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="height: 400px"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,68 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'pie', | |||||
| options3d: { | |||||
| enabled: true, | |||||
| alpha: 45, | |||||
| beta: 0 | |||||
| } | |||||
| }, | |||||
| title: { | |||||
| text: 'Browser market shares at a specific website, 2014' | |||||
| }, | |||||
| tooltip: { | |||||
| pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' | |||||
| }, | |||||
| plotOptions: { | |||||
| pie: { | |||||
| allowPointSelect: true, | |||||
| cursor: 'pointer', | |||||
| depth: 35, | |||||
| dataLabels: { | |||||
| enabled: true, | |||||
| format: '{point.name}' | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| type: 'pie', | |||||
| name: 'Browser share', | |||||
| data: [ | |||||
| ['Firefox', 45.0], | |||||
| ['IE', 26.8], | |||||
| { | |||||
| name: 'Chrome', | |||||
| y: 12.8, | |||||
| sliced: true, | |||||
| selected: true | |||||
| }, | |||||
| ['Safari', 8.5], | |||||
| ['Opera', 6.2], | |||||
| ['Others', 0.7] | |||||
| ] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-3d.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="height: 400px"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,134 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| #container { | |||||
| height: 400px; | |||||
| min-width: 310px; | |||||
| max-width: 800px; | |||||
| margin: 0 auto; | |||||
| } | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| // Give the points a 3D feel by adding a radial gradient | |||||
| Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) { | |||||
| return { | |||||
| radialGradient: { | |||||
| cx: 0.4, | |||||
| cy: 0.3, | |||||
| r: 0.5 | |||||
| }, | |||||
| stops: [ | |||||
| [0, color], | |||||
| [1, Highcharts.Color(color).brighten(-0.2).get('rgb')] | |||||
| ] | |||||
| }; | |||||
| }); | |||||
| // Set up the chart | |||||
| var chart = new Highcharts.Chart({ | |||||
| chart: { | |||||
| renderTo: 'container', | |||||
| margin: 100, | |||||
| type: 'scatter', | |||||
| options3d: { | |||||
| enabled: true, | |||||
| alpha: 10, | |||||
| beta: 30, | |||||
| depth: 250, | |||||
| viewDistance: 5, | |||||
| frame: { | |||||
| bottom: { size: 1, color: 'rgba(0,0,0,0.02)' }, | |||||
| back: { size: 1, color: 'rgba(0,0,0,0.04)' }, | |||||
| side: { size: 1, color: 'rgba(0,0,0,0.06)' } | |||||
| } | |||||
| } | |||||
| }, | |||||
| title: { | |||||
| text: 'Draggable box' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Click and drag the plot area to rotate in space' | |||||
| }, | |||||
| plotOptions: { | |||||
| scatter: { | |||||
| width: 10, | |||||
| height: 10, | |||||
| depth: 10 | |||||
| } | |||||
| }, | |||||
| yAxis: { | |||||
| min: 0, | |||||
| max: 10, | |||||
| title: null | |||||
| }, | |||||
| xAxis: { | |||||
| min: 0, | |||||
| max: 10, | |||||
| gridLineWidth: 1 | |||||
| }, | |||||
| zAxis: { | |||||
| min: 0, | |||||
| max: 10, | |||||
| showFirstLabel: false | |||||
| }, | |||||
| legend: { | |||||
| enabled: false | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Reading', | |||||
| colorByPoint: true, | |||||
| data: [[1, 6, 5], [8, 7, 9], [1, 3, 4], [4, 6, 8], [5, 7, 7], [6, 9, 6], [7, 0, 5], [2, 3, 3], [3, 9, 8], [3, 6, 5], [4, 9, 4], [2, 3, 3], [6, 9, 9], [0, 7, 0], [7, 7, 9], [7, 2, 9], [0, 6, 2], [4, 6, 7], [3, 7, 7], [0, 1, 7], [2, 8, 6], [2, 3, 7], [6, 4, 8], [3, 5, 9], [7, 9, 5], [3, 1, 7], [4, 4, 2], [3, 6, 2], [3, 1, 6], [6, 8, 5], [6, 6, 7], [4, 1, 1], [7, 2, 7], [7, 7, 0], [8, 8, 9], [9, 4, 1], [8, 3, 4], [9, 8, 9], [3, 5, 3], [0, 2, 4], [6, 0, 2], [2, 1, 3], [5, 8, 9], [2, 1, 1], [9, 7, 6], [3, 0, 2], [9, 9, 0], [3, 4, 8], [2, 6, 1], [8, 9, 2], [7, 6, 5], [6, 3, 1], [9, 3, 1], [8, 9, 3], [9, 1, 0], [3, 8, 7], [8, 0, 0], [4, 9, 7], [8, 6, 2], [4, 3, 0], [2, 3, 5], [9, 1, 4], [1, 1, 4], [6, 0, 2], [6, 1, 6], [3, 8, 8], [8, 8, 7], [5, 5, 0], [3, 9, 6], [5, 4, 3], [6, 8, 3], [0, 1, 5], [6, 7, 3], [8, 3, 2], [3, 8, 3], [2, 1, 6], [4, 6, 7], [8, 9, 9], [5, 4, 2], [6, 1, 3], [6, 9, 5], [4, 8, 2], [9, 7, 4], [5, 4, 2], [9, 6, 1], [2, 7, 3], [4, 5, 4], [6, 8, 1], [3, 4, 0], [2, 2, 6], [5, 1, 2], [9, 9, 7], [6, 9, 9], [8, 4, 3], [4, 1, 7], [6, 2, 5], [0, 4, 9], [3, 5, 9], [6, 9, 1], [1, 9, 2]] | |||||
| }] | |||||
| }); | |||||
| // Add mouse events for rotation | |||||
| $(chart.container).bind('mousedown.hc touchstart.hc', function (e) { | |||||
| e = chart.pointer.normalize(e); | |||||
| var posX = e.pageX, | |||||
| posY = e.pageY, | |||||
| alpha = chart.options.chart.options3d.alpha, | |||||
| beta = chart.options.chart.options3d.beta, | |||||
| newAlpha, | |||||
| newBeta, | |||||
| sensitivity = 5; // lower is more sensitive | |||||
| $(document).bind({ | |||||
| 'mousemove.hc touchdrag.hc': function (e) { | |||||
| // Run beta | |||||
| newBeta = beta + (posX - e.pageX) / sensitivity; | |||||
| chart.options.chart.options3d.beta = newBeta; | |||||
| // Run alpha | |||||
| newAlpha = alpha + (e.pageY - posY) / sensitivity; | |||||
| chart.options.chart.options3d.alpha = newAlpha; | |||||
| chart.redraw(false); | |||||
| }, | |||||
| 'mouseup touchend': function () { | |||||
| $(document).unbind('.hc'); | |||||
| } | |||||
| }); | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-3d.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="height: 400px"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,90 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'area' | |||||
| }, | |||||
| title: { | |||||
| text: 'US and USSR nuclear stockpiles' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' + | |||||
| 'thebulletin.metapress.com</a>' | |||||
| }, | |||||
| xAxis: { | |||||
| allowDecimals: false, | |||||
| labels: { | |||||
| formatter: function () { | |||||
| return this.value; // clean, unformatted number for year | |||||
| } | |||||
| } | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Nuclear weapon states' | |||||
| }, | |||||
| labels: { | |||||
| formatter: function () { | |||||
| return this.value / 1000 + 'k'; | |||||
| } | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}' | |||||
| }, | |||||
| plotOptions: { | |||||
| area: { | |||||
| pointStart: 1940, | |||||
| marker: { | |||||
| enabled: false, | |||||
| symbol: 'circle', | |||||
| radius: 2, | |||||
| states: { | |||||
| hover: { | |||||
| enabled: true | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'USA', | |||||
| data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640, | |||||
| 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126, | |||||
| 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662, | |||||
| 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605, | |||||
| 24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, | |||||
| 22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, | |||||
| 10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104] | |||||
| }, { | |||||
| name: 'USSR/Russia', | |||||
| data: [null, null, null, null, null, null, null, null, null, null, | |||||
| 5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322, | |||||
| 4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478, | |||||
| 15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049, | |||||
| 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000, | |||||
| 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000, | |||||
| 21000, 20000, 19000, 18000, 18000, 17000, 16000] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,83 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'area', | |||||
| inverted: true | |||||
| }, | |||||
| title: { | |||||
| text: 'Average fruit consumption during one week' | |||||
| }, | |||||
| subtitle: { | |||||
| style: { | |||||
| position: 'absolute', | |||||
| right: '0px', | |||||
| bottom: '10px' | |||||
| } | |||||
| }, | |||||
| legend: { | |||||
| layout: 'vertical', | |||||
| align: 'right', | |||||
| verticalAlign: 'top', | |||||
| x: -150, | |||||
| y: 100, | |||||
| floating: true, | |||||
| borderWidth: 1, | |||||
| backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: [ | |||||
| 'Monday', | |||||
| 'Tuesday', | |||||
| 'Wednesday', | |||||
| 'Thursday', | |||||
| 'Friday', | |||||
| 'Saturday', | |||||
| 'Sunday' | |||||
| ] | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Number of units' | |||||
| }, | |||||
| labels: { | |||||
| formatter: function () { | |||||
| return this.value; | |||||
| } | |||||
| }, | |||||
| min: 0 | |||||
| }, | |||||
| plotOptions: { | |||||
| area: { | |||||
| fillOpacity: 0.5 | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'John', | |||||
| data: [3, 4, 3, 5, 4, 10, 12] | |||||
| }, { | |||||
| name: 'Jane', | |||||
| data: [1, 3, 4, 3, 3, 5, 4] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,83 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'area', | |||||
| spacingBottom: 30 | |||||
| }, | |||||
| title: { | |||||
| text: 'Fruit consumption *' | |||||
| }, | |||||
| subtitle: { | |||||
| text: '* Jane\'s banana consumption is unknown', | |||||
| floating: true, | |||||
| align: 'right', | |||||
| verticalAlign: 'bottom', | |||||
| y: 15 | |||||
| }, | |||||
| legend: { | |||||
| layout: 'vertical', | |||||
| align: 'left', | |||||
| verticalAlign: 'top', | |||||
| x: 150, | |||||
| y: 100, | |||||
| floating: true, | |||||
| borderWidth: 1, | |||||
| backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries'] | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Y-Axis' | |||||
| }, | |||||
| labels: { | |||||
| formatter: function () { | |||||
| return this.value; | |||||
| } | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| formatter: function () { | |||||
| return '<b>' + this.series.name + '</b><br/>' + | |||||
| this.x + ': ' + this.y; | |||||
| } | |||||
| }, | |||||
| plotOptions: { | |||||
| area: { | |||||
| fillOpacity: 0.5 | |||||
| } | |||||
| }, | |||||
| credits: { | |||||
| enabled: false | |||||
| }, | |||||
| series: [{ | |||||
| name: 'John', | |||||
| data: [0, 1, 4, 4, 5, 2, 3, 7] | |||||
| }, { | |||||
| name: 'Jane', | |||||
| data: [1, 0, 3, null, 3, 1, 2, 1] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,47 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'area' | |||||
| }, | |||||
| title: { | |||||
| text: 'Area chart with negative values' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] | |||||
| }, | |||||
| credits: { | |||||
| enabled: false | |||||
| }, | |||||
| series: [{ | |||||
| name: 'John', | |||||
| data: [5, 3, 4, 7, 2] | |||||
| }, { | |||||
| name: 'Jane', | |||||
| data: [2, -2, -3, 2, 1] | |||||
| }, { | |||||
| name: 'Joe', | |||||
| data: [3, 4, 4, -2, 5] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,77 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'area' | |||||
| }, | |||||
| title: { | |||||
| text: 'Historic and Estimated Worldwide Population Distribution by Region' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Source: Wikipedia.org' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'], | |||||
| tickmarkPlacement: 'on', | |||||
| title: { | |||||
| enabled: false | |||||
| } | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Percent' | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>', | |||||
| shared: true | |||||
| }, | |||||
| plotOptions: { | |||||
| area: { | |||||
| stacking: 'percent', | |||||
| lineColor: '#ffffff', | |||||
| lineWidth: 1, | |||||
| marker: { | |||||
| lineWidth: 1, | |||||
| lineColor: '#ffffff' | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Asia', | |||||
| data: [502, 635, 809, 947, 1402, 3634, 5268] | |||||
| }, { | |||||
| name: 'Africa', | |||||
| data: [106, 107, 111, 133, 221, 767, 1766] | |||||
| }, { | |||||
| name: 'Europe', | |||||
| data: [163, 203, 276, 408, 547, 729, 628] | |||||
| }, { | |||||
| name: 'America', | |||||
| data: [18, 31, 54, 156, 339, 818, 1201] | |||||
| }, { | |||||
| name: 'Oceania', | |||||
| data: [2, 2, 2, 6, 13, 30, 46] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,82 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'area' | |||||
| }, | |||||
| title: { | |||||
| text: 'Historic and Estimated Worldwide Population Growth by Region' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Source: Wikipedia.org' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'], | |||||
| tickmarkPlacement: 'on', | |||||
| title: { | |||||
| enabled: false | |||||
| } | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Billions' | |||||
| }, | |||||
| labels: { | |||||
| formatter: function () { | |||||
| return this.value / 1000; | |||||
| } | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| shared: true, | |||||
| valueSuffix: ' millions' | |||||
| }, | |||||
| plotOptions: { | |||||
| area: { | |||||
| stacking: 'normal', | |||||
| lineColor: '#666666', | |||||
| lineWidth: 1, | |||||
| marker: { | |||||
| lineWidth: 1, | |||||
| lineColor: '#666666' | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Asia', | |||||
| data: [502, 635, 809, 947, 1402, 3634, 5268] | |||||
| }, { | |||||
| name: 'Africa', | |||||
| data: [106, 107, 111, 133, 221, 767, 1766] | |||||
| }, { | |||||
| name: 'Europe', | |||||
| data: [163, 203, 276, 408, 547, 729, 628] | |||||
| }, { | |||||
| name: 'America', | |||||
| data: [18, 31, 54, 156, 339, 818, 1201] | |||||
| }, { | |||||
| name: 'Oceania', | |||||
| data: [2, 2, 2, 6, 13, 30, 46] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,138 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| var ranges = [ | |||||
| [1246406400000, 14.3, 27.7], | |||||
| [1246492800000, 14.5, 27.8], | |||||
| [1246579200000, 15.5, 29.6], | |||||
| [1246665600000, 16.7, 30.7], | |||||
| [1246752000000, 16.5, 25.0], | |||||
| [1246838400000, 17.8, 25.7], | |||||
| [1246924800000, 13.5, 24.8], | |||||
| [1247011200000, 10.5, 21.4], | |||||
| [1247097600000, 9.2, 23.8], | |||||
| [1247184000000, 11.6, 21.8], | |||||
| [1247270400000, 10.7, 23.7], | |||||
| [1247356800000, 11.0, 23.3], | |||||
| [1247443200000, 11.6, 23.7], | |||||
| [1247529600000, 11.8, 20.7], | |||||
| [1247616000000, 12.6, 22.4], | |||||
| [1247702400000, 13.6, 19.6], | |||||
| [1247788800000, 11.4, 22.6], | |||||
| [1247875200000, 13.2, 25.0], | |||||
| [1247961600000, 14.2, 21.6], | |||||
| [1248048000000, 13.1, 17.1], | |||||
| [1248134400000, 12.2, 15.5], | |||||
| [1248220800000, 12.0, 20.8], | |||||
| [1248307200000, 12.0, 17.1], | |||||
| [1248393600000, 12.7, 18.3], | |||||
| [1248480000000, 12.4, 19.4], | |||||
| [1248566400000, 12.6, 19.9], | |||||
| [1248652800000, 11.9, 20.2], | |||||
| [1248739200000, 11.0, 19.3], | |||||
| [1248825600000, 10.8, 17.8], | |||||
| [1248912000000, 11.8, 18.5], | |||||
| [1248998400000, 10.8, 16.1] | |||||
| ], | |||||
| averages = [ | |||||
| [1246406400000, 21.5], | |||||
| [1246492800000, 22.1], | |||||
| [1246579200000, 23], | |||||
| [1246665600000, 23.8], | |||||
| [1246752000000, 21.4], | |||||
| [1246838400000, 21.3], | |||||
| [1246924800000, 18.3], | |||||
| [1247011200000, 15.4], | |||||
| [1247097600000, 16.4], | |||||
| [1247184000000, 17.7], | |||||
| [1247270400000, 17.5], | |||||
| [1247356800000, 17.6], | |||||
| [1247443200000, 17.7], | |||||
| [1247529600000, 16.8], | |||||
| [1247616000000, 17.7], | |||||
| [1247702400000, 16.3], | |||||
| [1247788800000, 17.8], | |||||
| [1247875200000, 18.1], | |||||
| [1247961600000, 17.2], | |||||
| [1248048000000, 14.4], | |||||
| [1248134400000, 13.7], | |||||
| [1248220800000, 15.7], | |||||
| [1248307200000, 14.6], | |||||
| [1248393600000, 15.3], | |||||
| [1248480000000, 15.3], | |||||
| [1248566400000, 15.8], | |||||
| [1248652800000, 15.2], | |||||
| [1248739200000, 14.8], | |||||
| [1248825600000, 14.4], | |||||
| [1248912000000, 15], | |||||
| [1248998400000, 13.6] | |||||
| ]; | |||||
| $('#container').highcharts({ | |||||
| title: { | |||||
| text: 'July temperatures' | |||||
| }, | |||||
| xAxis: { | |||||
| type: 'datetime' | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: null | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| crosshairs: true, | |||||
| shared: true, | |||||
| valueSuffix: '°C' | |||||
| }, | |||||
| legend: { | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Temperature', | |||||
| data: averages, | |||||
| zIndex: 1, | |||||
| marker: { | |||||
| fillColor: 'white', | |||||
| lineWidth: 2, | |||||
| lineColor: Highcharts.getOptions().colors[0] | |||||
| } | |||||
| }, { | |||||
| name: 'Range', | |||||
| data: ranges, | |||||
| type: 'arearange', | |||||
| lineWidth: 0, | |||||
| linkedTo: ':previous', | |||||
| color: Highcharts.getOptions().colors[0], | |||||
| fillOpacity: 0.3, | |||||
| zIndex: 0 | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-more.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,65 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function (data) { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'arearange', | |||||
| zoomType: 'x' | |||||
| }, | |||||
| title: { | |||||
| text: 'Temperature variation by day' | |||||
| }, | |||||
| xAxis: { | |||||
| type: 'datetime' | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: null | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| crosshairs: true, | |||||
| shared: true, | |||||
| valueSuffix: '°C' | |||||
| }, | |||||
| legend: { | |||||
| enabled: false | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Temperatures', | |||||
| data: data | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-more.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,81 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'areaspline' | |||||
| }, | |||||
| title: { | |||||
| text: 'Average fruit consumption during one week' | |||||
| }, | |||||
| legend: { | |||||
| layout: 'vertical', | |||||
| align: 'left', | |||||
| verticalAlign: 'top', | |||||
| x: 150, | |||||
| y: 100, | |||||
| floating: true, | |||||
| borderWidth: 1, | |||||
| backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: [ | |||||
| 'Monday', | |||||
| 'Tuesday', | |||||
| 'Wednesday', | |||||
| 'Thursday', | |||||
| 'Friday', | |||||
| 'Saturday', | |||||
| 'Sunday' | |||||
| ], | |||||
| plotBands: [{ // visualize the weekend | |||||
| from: 4.5, | |||||
| to: 6.5, | |||||
| color: 'rgba(68, 170, 213, .2)' | |||||
| }] | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Fruit units' | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| shared: true, | |||||
| valueSuffix: ' units' | |||||
| }, | |||||
| credits: { | |||||
| enabled: false | |||||
| }, | |||||
| plotOptions: { | |||||
| areaspline: { | |||||
| fillOpacity: 0.5 | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'John', | |||||
| data: [3, 4, 3, 5, 4, 10, 12] | |||||
| }, { | |||||
| name: 'Jane', | |||||
| data: [1, 3, 4, 3, 3, 5, 4] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,84 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'bar' | |||||
| }, | |||||
| title: { | |||||
| text: 'Historic World Population by Region' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'], | |||||
| title: { | |||||
| text: null | |||||
| } | |||||
| }, | |||||
| yAxis: { | |||||
| min: 0, | |||||
| title: { | |||||
| text: 'Population (millions)', | |||||
| align: 'high' | |||||
| }, | |||||
| labels: { | |||||
| overflow: 'justify' | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| valueSuffix: ' millions' | |||||
| }, | |||||
| plotOptions: { | |||||
| bar: { | |||||
| dataLabels: { | |||||
| enabled: true | |||||
| } | |||||
| } | |||||
| }, | |||||
| legend: { | |||||
| layout: 'vertical', | |||||
| align: 'right', | |||||
| verticalAlign: 'top', | |||||
| x: -40, | |||||
| y: 80, | |||||
| floating: true, | |||||
| borderWidth: 1, | |||||
| backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), | |||||
| shadow: true | |||||
| }, | |||||
| credits: { | |||||
| enabled: false | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Year 1800', | |||||
| data: [107, 31, 635, 203, 2] | |||||
| }, { | |||||
| name: 'Year 1900', | |||||
| data: [133, 156, 947, 408, 6] | |||||
| }, { | |||||
| name: 'Year 2012', | |||||
| data: [1052, 954, 4250, 740, 38] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,94 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| // Data gathered from http://populationpyramid.net/germany/2015/ | |||||
| $(function () { | |||||
| // Age categories | |||||
| var categories = ['0-4', '5-9', '10-14', '15-19', | |||||
| '20-24', '25-29', '30-34', '35-39', '40-44', | |||||
| '45-49', '50-54', '55-59', '60-64', '65-69', | |||||
| '70-74', '75-79', '80-84', '85-89', '90-94', | |||||
| '95-99', '100 + ']; | |||||
| $(document).ready(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'bar' | |||||
| }, | |||||
| title: { | |||||
| text: 'Population pyramid for Germany, 2015' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Source: <a href="http://populationpyramid.net/germany/2015/">Population Pyramids of the World from 1950 to 2100</a>' | |||||
| }, | |||||
| xAxis: [{ | |||||
| categories: categories, | |||||
| reversed: false, | |||||
| labels: { | |||||
| step: 1 | |||||
| } | |||||
| }, { // mirror axis on right side | |||||
| opposite: true, | |||||
| reversed: false, | |||||
| categories: categories, | |||||
| linkedTo: 0, | |||||
| labels: { | |||||
| step: 1 | |||||
| } | |||||
| }], | |||||
| yAxis: { | |||||
| title: { | |||||
| text: null | |||||
| }, | |||||
| labels: { | |||||
| formatter: function () { | |||||
| return Math.abs(this.value) + '%'; | |||||
| } | |||||
| } | |||||
| }, | |||||
| plotOptions: { | |||||
| series: { | |||||
| stacking: 'normal' | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| formatter: function () { | |||||
| return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' + | |||||
| 'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0); | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Male', | |||||
| data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2, | |||||
| -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4, | |||||
| -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0] | |||||
| }, { | |||||
| name: 'Female', | |||||
| data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9, | |||||
| 3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9, | |||||
| 1.8, 1.2, 0.6, 0.1, 0.0] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,58 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'bar' | |||||
| }, | |||||
| title: { | |||||
| text: 'Stacked bar chart' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] | |||||
| }, | |||||
| yAxis: { | |||||
| min: 0, | |||||
| title: { | |||||
| text: 'Total fruit consumption' | |||||
| } | |||||
| }, | |||||
| legend: { | |||||
| reversed: true | |||||
| }, | |||||
| plotOptions: { | |||||
| series: { | |||||
| stacking: 'normal' | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'John', | |||||
| data: [5, 3, 4, 7, 2] | |||||
| }, { | |||||
| name: 'Jane', | |||||
| data: [2, 2, 3, 2, 1] | |||||
| }, { | |||||
| name: 'Joe', | |||||
| data: [3, 4, 4, 2, 5] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,95 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'boxplot' | |||||
| }, | |||||
| title: { | |||||
| text: 'Highcharts Box Plot Example' | |||||
| }, | |||||
| legend: { | |||||
| enabled: false | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['1', '2', '3', '4', '5'], | |||||
| title: { | |||||
| text: 'Experiment No.' | |||||
| } | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Observations' | |||||
| }, | |||||
| plotLines: [{ | |||||
| value: 932, | |||||
| color: 'red', | |||||
| width: 1, | |||||
| label: { | |||||
| text: 'Theoretical mean: 932', | |||||
| align: 'center', | |||||
| style: { | |||||
| color: 'gray' | |||||
| } | |||||
| } | |||||
| }] | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Observations', | |||||
| data: [ | |||||
| [760, 801, 848, 895, 965], | |||||
| [733, 853, 939, 980, 1080], | |||||
| [714, 762, 817, 870, 918], | |||||
| [724, 802, 806, 871, 950], | |||||
| [834, 836, 864, 882, 910] | |||||
| ], | |||||
| tooltip: { | |||||
| headerFormat: '<em>Experiment No {point.key}</em><br/>' | |||||
| } | |||||
| }, { | |||||
| name: 'Outlier', | |||||
| color: Highcharts.getOptions().colors[0], | |||||
| type: 'scatter', | |||||
| data: [ // x, y positions where 0 is the first category | |||||
| [0, 644], | |||||
| [4, 718], | |||||
| [4, 951], | |||||
| [4, 969] | |||||
| ], | |||||
| marker: { | |||||
| fillColor: 'white', | |||||
| lineWidth: 1, | |||||
| lineColor: Highcharts.getOptions().colors[0] | |||||
| }, | |||||
| tooltip: { | |||||
| pointFormat: 'Observation: {point.y}' | |||||
| } | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-more.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,98 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'bubble', | |||||
| plotBorderWidth: 1, | |||||
| zoomType: 'xy' | |||||
| }, | |||||
| title: { | |||||
| text: 'Highcharts bubbles with radial gradient fill' | |||||
| }, | |||||
| xAxis: { | |||||
| gridLineWidth: 1 | |||||
| }, | |||||
| yAxis: { | |||||
| startOnTick: false, | |||||
| endOnTick: false | |||||
| }, | |||||
| series: [{ | |||||
| data: [ | |||||
| [9, 81, 63], | |||||
| [98, 5, 89], | |||||
| [51, 50, 73], | |||||
| [41, 22, 14], | |||||
| [58, 24, 20], | |||||
| [78, 37, 34], | |||||
| [55, 56, 53], | |||||
| [18, 45, 70], | |||||
| [42, 44, 28], | |||||
| [3, 52, 59], | |||||
| [31, 18, 97], | |||||
| [79, 91, 63], | |||||
| [93, 23, 23], | |||||
| [44, 83, 22] | |||||
| ], | |||||
| marker: { | |||||
| fillColor: { | |||||
| radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 }, | |||||
| stops: [ | |||||
| [0, 'rgba(255,255,255,0.5)'], | |||||
| [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')] | |||||
| ] | |||||
| } | |||||
| } | |||||
| }, { | |||||
| data: [ | |||||
| [42, 38, 20], | |||||
| [6, 18, 1], | |||||
| [1, 93, 55], | |||||
| [57, 2, 90], | |||||
| [80, 76, 22], | |||||
| [11, 74, 96], | |||||
| [88, 56, 10], | |||||
| [30, 47, 49], | |||||
| [57, 62, 98], | |||||
| [4, 16, 16], | |||||
| [46, 10, 11], | |||||
| [22, 87, 89], | |||||
| [57, 91, 82], | |||||
| [45, 15, 98] | |||||
| ], | |||||
| marker: { | |||||
| fillColor: { | |||||
| radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 }, | |||||
| stops: [ | |||||
| [0, 'rgba(255,255,255,0.5)'], | |||||
| [1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')] | |||||
| ] | |||||
| } | |||||
| } | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-more.js"></script> | |||||
| <div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,42 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'bubble', | |||||
| zoomType: 'xy' | |||||
| }, | |||||
| title: { | |||||
| text: 'Highcharts Bubbles' | |||||
| }, | |||||
| series: [{ | |||||
| data: [[97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56], [68, 27, 73], [74, 99, 42], [7, 93, 87], [51, 69, 40], [38, 23, 33], [57, 86, 31]] | |||||
| }, { | |||||
| data: [[25, 10, 87], [2, 75, 59], [11, 54, 8], [86, 55, 93], [5, 3, 58], [90, 63, 44], [91, 33, 17], [97, 3, 56], [15, 67, 48], [54, 25, 81]] | |||||
| }, { | |||||
| data: [[47, 47, 21], [20, 12, 4], [6, 76, 91], [38, 30, 60], [57, 98, 64], [61, 17, 80], [83, 60, 13], [67, 78, 75], [64, 12, 10], [30, 77, 82]] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-more.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,88 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'column' | |||||
| }, | |||||
| title: { | |||||
| text: 'Monthly Average Rainfall' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Source: WorldClimate.com' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: [ | |||||
| 'Jan', | |||||
| 'Feb', | |||||
| 'Mar', | |||||
| 'Apr', | |||||
| 'May', | |||||
| 'Jun', | |||||
| 'Jul', | |||||
| 'Aug', | |||||
| 'Sep', | |||||
| 'Oct', | |||||
| 'Nov', | |||||
| 'Dec' | |||||
| ], | |||||
| crosshair: true | |||||
| }, | |||||
| yAxis: { | |||||
| min: 0, | |||||
| title: { | |||||
| text: 'Rainfall (mm)' | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| headerFormat: '<span style="font-size:10px">{point.key}</span><table>', | |||||
| pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + | |||||
| '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', | |||||
| footerFormat: '</table>', | |||||
| shared: true, | |||||
| useHTML: true | |||||
| }, | |||||
| plotOptions: { | |||||
| column: { | |||||
| pointPadding: 0.2, | |||||
| borderWidth: 0 | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Tokyo', | |||||
| data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] | |||||
| }, { | |||||
| name: 'New York', | |||||
| data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] | |||||
| }, { | |||||
| name: 'London', | |||||
| data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2] | |||||
| }, { | |||||
| name: 'Berlin', | |||||
| data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,275 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| // Create the chart | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'column' | |||||
| }, | |||||
| title: { | |||||
| text: 'Browser market shares. January, 2015 to May, 2015' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.' | |||||
| }, | |||||
| xAxis: { | |||||
| type: 'category' | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Total percent market share' | |||||
| } | |||||
| }, | |||||
| legend: { | |||||
| enabled: false | |||||
| }, | |||||
| plotOptions: { | |||||
| series: { | |||||
| borderWidth: 0, | |||||
| dataLabels: { | |||||
| enabled: true, | |||||
| format: '{point.y:.1f}%' | |||||
| } | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| headerFormat: '<span style="font-size:11px">{series.name}</span><br>', | |||||
| pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>' | |||||
| }, | |||||
| series: [{ | |||||
| name: "Brands", | |||||
| colorByPoint: true, | |||||
| data: [{ | |||||
| name: "Microsoft Internet Explorer", | |||||
| y: 56.33, | |||||
| drilldown: "Microsoft Internet Explorer" | |||||
| }, { | |||||
| name: "Chrome", | |||||
| y: 24.03, | |||||
| drilldown: "Chrome" | |||||
| }, { | |||||
| name: "Firefox", | |||||
| y: 10.38, | |||||
| drilldown: "Firefox" | |||||
| }, { | |||||
| name: "Safari", | |||||
| y: 4.77, | |||||
| drilldown: "Safari" | |||||
| }, { | |||||
| name: "Opera", | |||||
| y: 0.91, | |||||
| drilldown: "Opera" | |||||
| }, { | |||||
| name: "Proprietary or Undetectable", | |||||
| y: 0.2, | |||||
| drilldown: null | |||||
| }] | |||||
| }], | |||||
| drilldown: { | |||||
| series: [{ | |||||
| name: "Microsoft Internet Explorer", | |||||
| id: "Microsoft Internet Explorer", | |||||
| data: [ | |||||
| [ | |||||
| "v11.0", | |||||
| 24.13 | |||||
| ], | |||||
| [ | |||||
| "v8.0", | |||||
| 17.2 | |||||
| ], | |||||
| [ | |||||
| "v9.0", | |||||
| 8.11 | |||||
| ], | |||||
| [ | |||||
| "v10.0", | |||||
| 5.33 | |||||
| ], | |||||
| [ | |||||
| "v6.0", | |||||
| 1.06 | |||||
| ], | |||||
| [ | |||||
| "v7.0", | |||||
| 0.5 | |||||
| ] | |||||
| ] | |||||
| }, { | |||||
| name: "Chrome", | |||||
| id: "Chrome", | |||||
| data: [ | |||||
| [ | |||||
| "v40.0", | |||||
| 5 | |||||
| ], | |||||
| [ | |||||
| "v41.0", | |||||
| 4.32 | |||||
| ], | |||||
| [ | |||||
| "v42.0", | |||||
| 3.68 | |||||
| ], | |||||
| [ | |||||
| "v39.0", | |||||
| 2.96 | |||||
| ], | |||||
| [ | |||||
| "v36.0", | |||||
| 2.53 | |||||
| ], | |||||
| [ | |||||
| "v43.0", | |||||
| 1.45 | |||||
| ], | |||||
| [ | |||||
| "v31.0", | |||||
| 1.24 | |||||
| ], | |||||
| [ | |||||
| "v35.0", | |||||
| 0.85 | |||||
| ], | |||||
| [ | |||||
| "v38.0", | |||||
| 0.6 | |||||
| ], | |||||
| [ | |||||
| "v32.0", | |||||
| 0.55 | |||||
| ], | |||||
| [ | |||||
| "v37.0", | |||||
| 0.38 | |||||
| ], | |||||
| [ | |||||
| "v33.0", | |||||
| 0.19 | |||||
| ], | |||||
| [ | |||||
| "v34.0", | |||||
| 0.14 | |||||
| ], | |||||
| [ | |||||
| "v30.0", | |||||
| 0.14 | |||||
| ] | |||||
| ] | |||||
| }, { | |||||
| name: "Firefox", | |||||
| id: "Firefox", | |||||
| data: [ | |||||
| [ | |||||
| "v35", | |||||
| 2.76 | |||||
| ], | |||||
| [ | |||||
| "v36", | |||||
| 2.32 | |||||
| ], | |||||
| [ | |||||
| "v37", | |||||
| 2.31 | |||||
| ], | |||||
| [ | |||||
| "v34", | |||||
| 1.27 | |||||
| ], | |||||
| [ | |||||
| "v38", | |||||
| 1.02 | |||||
| ], | |||||
| [ | |||||
| "v31", | |||||
| 0.33 | |||||
| ], | |||||
| [ | |||||
| "v33", | |||||
| 0.22 | |||||
| ], | |||||
| [ | |||||
| "v32", | |||||
| 0.15 | |||||
| ] | |||||
| ] | |||||
| }, { | |||||
| name: "Safari", | |||||
| id: "Safari", | |||||
| data: [ | |||||
| [ | |||||
| "v8.0", | |||||
| 2.56 | |||||
| ], | |||||
| [ | |||||
| "v7.1", | |||||
| 0.77 | |||||
| ], | |||||
| [ | |||||
| "v5.1", | |||||
| 0.42 | |||||
| ], | |||||
| [ | |||||
| "v5.0", | |||||
| 0.3 | |||||
| ], | |||||
| [ | |||||
| "v6.1", | |||||
| 0.29 | |||||
| ], | |||||
| [ | |||||
| "v7.0", | |||||
| 0.26 | |||||
| ], | |||||
| [ | |||||
| "v6.2", | |||||
| 0.17 | |||||
| ] | |||||
| ] | |||||
| }, { | |||||
| name: "Opera", | |||||
| id: "Opera", | |||||
| data: [ | |||||
| [ | |||||
| "v12.x", | |||||
| 0.34 | |||||
| ], | |||||
| [ | |||||
| "v28", | |||||
| 0.24 | |||||
| ], | |||||
| [ | |||||
| "v27", | |||||
| 0.17 | |||||
| ], | |||||
| [ | |||||
| "v29", | |||||
| 0.16 | |||||
| ] | |||||
| ] | |||||
| }] | |||||
| } | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/data.js"></script> | |||||
| <script src="../../js/modules/drilldown.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,47 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'column' | |||||
| }, | |||||
| title: { | |||||
| text: 'Column chart with negative values' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] | |||||
| }, | |||||
| credits: { | |||||
| enabled: false | |||||
| }, | |||||
| series: [{ | |||||
| name: 'John', | |||||
| data: [5, 3, 4, 7, 2] | |||||
| }, { | |||||
| name: 'Jane', | |||||
| data: [2, -2, -3, 2, 1] | |||||
| }, { | |||||
| name: 'Joe', | |||||
| data: [3, 4, 4, -2, 5] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,83 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| data: { | |||||
| table: 'datatable' | |||||
| }, | |||||
| chart: { | |||||
| type: 'column' | |||||
| }, | |||||
| title: { | |||||
| text: 'Data extracted from a HTML table in the page' | |||||
| }, | |||||
| yAxis: { | |||||
| allowDecimals: false, | |||||
| title: { | |||||
| text: 'Units' | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| formatter: function () { | |||||
| return '<b>' + this.series.name + '</b><br/>' + | |||||
| this.point.y + ' ' + this.point.name.toLowerCase(); | |||||
| } | |||||
| } | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/data.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| <table id="datatable"> | |||||
| <thead> | |||||
| <tr> | |||||
| <th></th> | |||||
| <th>Jane</th> | |||||
| <th>John</th> | |||||
| </tr> | |||||
| </thead> | |||||
| <tbody> | |||||
| <tr> | |||||
| <th>Apples</th> | |||||
| <td>3</td> | |||||
| <td>4</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Pears</th> | |||||
| <td>2</td> | |||||
| <td>0</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Plums</th> | |||||
| <td>5</td> | |||||
| <td>11</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Bananas</th> | |||||
| <td>1</td> | |||||
| <td>1</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Oranges</th> | |||||
| <td>2</td> | |||||
| <td>4</td> | |||||
| </tr> | |||||
| </tbody> | |||||
| </table> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,97 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'column' | |||||
| }, | |||||
| title: { | |||||
| text: 'Efficiency Optimization by Branch' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: [ | |||||
| 'Seattle HQ', | |||||
| 'San Francisco', | |||||
| 'Tokyo' | |||||
| ] | |||||
| }, | |||||
| yAxis: [{ | |||||
| min: 0, | |||||
| title: { | |||||
| text: 'Employees' | |||||
| } | |||||
| }, { | |||||
| title: { | |||||
| text: 'Profit (millions)' | |||||
| }, | |||||
| opposite: true | |||||
| }], | |||||
| legend: { | |||||
| shadow: false | |||||
| }, | |||||
| tooltip: { | |||||
| shared: true | |||||
| }, | |||||
| plotOptions: { | |||||
| column: { | |||||
| grouping: false, | |||||
| shadow: false, | |||||
| borderWidth: 0 | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Employees', | |||||
| color: 'rgba(165,170,217,1)', | |||||
| data: [150, 73, 20], | |||||
| pointPadding: 0.3, | |||||
| pointPlacement: -0.2 | |||||
| }, { | |||||
| name: 'Employees Optimized', | |||||
| color: 'rgba(126,86,134,.9)', | |||||
| data: [140, 90, 40], | |||||
| pointPadding: 0.4, | |||||
| pointPlacement: -0.2 | |||||
| }, { | |||||
| name: 'Profit', | |||||
| color: 'rgba(248,161,63,1)', | |||||
| data: [183.6, 178.8, 198.5], | |||||
| tooltip: { | |||||
| valuePrefix: '$', | |||||
| valueSuffix: ' M' | |||||
| }, | |||||
| pointPadding: 0.3, | |||||
| pointPlacement: 0.2, | |||||
| yAxis: 1 | |||||
| }, { | |||||
| name: 'Profit Optimized', | |||||
| color: 'rgba(186,60,61,.9)', | |||||
| data: [203.6, 198.8, 208.5], | |||||
| tooltip: { | |||||
| valuePrefix: '$', | |||||
| valueSuffix: ' M' | |||||
| }, | |||||
| pointPadding: 0.4, | |||||
| pointPlacement: 0.2, | |||||
| yAxis: 1 | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,93 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'column' | |||||
| }, | |||||
| title: { | |||||
| text: 'World\'s largest cities per 2014' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>' | |||||
| }, | |||||
| xAxis: { | |||||
| type: 'category', | |||||
| labels: { | |||||
| rotation: -45, | |||||
| style: { | |||||
| fontSize: '13px', | |||||
| fontFamily: 'Verdana, sans-serif' | |||||
| } | |||||
| } | |||||
| }, | |||||
| yAxis: { | |||||
| min: 0, | |||||
| title: { | |||||
| text: 'Population (millions)' | |||||
| } | |||||
| }, | |||||
| legend: { | |||||
| enabled: false | |||||
| }, | |||||
| tooltip: { | |||||
| pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>' | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Population', | |||||
| data: [ | |||||
| ['Shanghai', 23.7], | |||||
| ['Lagos', 16.1], | |||||
| ['Instanbul', 14.2], | |||||
| ['Karachi', 14.0], | |||||
| ['Mumbai', 12.5], | |||||
| ['Moscow', 12.1], | |||||
| ['São Paulo', 11.8], | |||||
| ['Beijing', 11.7], | |||||
| ['Guangzhou', 11.1], | |||||
| ['Delhi', 11.1], | |||||
| ['Shenzhen', 10.5], | |||||
| ['Seoul', 10.4], | |||||
| ['Jakarta', 10.0], | |||||
| ['Kinshasa', 9.3], | |||||
| ['Tianjin', 9.3], | |||||
| ['Tokyo', 9.0], | |||||
| ['Cairo', 8.9], | |||||
| ['Dhaka', 8.9], | |||||
| ['Mexico City', 8.9], | |||||
| ['Lima', 8.9] | |||||
| ], | |||||
| dataLabels: { | |||||
| enabled: true, | |||||
| rotation: -90, | |||||
| color: '#FFFFFF', | |||||
| align: 'right', | |||||
| format: '{point.y:.1f}', // one decimal | |||||
| y: 10, // 10 pixels down from the top | |||||
| style: { | |||||
| fontSize: '13px', | |||||
| fontFamily: 'Verdana, sans-serif' | |||||
| } | |||||
| } | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 300px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,77 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'column' | |||||
| }, | |||||
| title: { | |||||
| text: 'Total fruit consumtion, grouped by gender' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] | |||||
| }, | |||||
| yAxis: { | |||||
| allowDecimals: false, | |||||
| min: 0, | |||||
| title: { | |||||
| text: 'Number of fruits' | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| formatter: function () { | |||||
| return '<b>' + this.x + '</b><br/>' + | |||||
| this.series.name + ': ' + this.y + '<br/>' + | |||||
| 'Total: ' + this.point.stackTotal; | |||||
| } | |||||
| }, | |||||
| plotOptions: { | |||||
| column: { | |||||
| stacking: 'normal' | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'John', | |||||
| data: [5, 3, 4, 7, 2], | |||||
| stack: 'male' | |||||
| }, { | |||||
| name: 'Joe', | |||||
| data: [3, 4, 4, 2, 5], | |||||
| stack: 'male' | |||||
| }, { | |||||
| name: 'Jane', | |||||
| data: [2, 5, 6, 2, 1], | |||||
| stack: 'female' | |||||
| }, { | |||||
| name: 'Janet', | |||||
| data: [3, 0, 4, 4, 3], | |||||
| stack: 'female' | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,59 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'column' | |||||
| }, | |||||
| title: { | |||||
| text: 'Stacked column chart' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] | |||||
| }, | |||||
| yAxis: { | |||||
| min: 0, | |||||
| title: { | |||||
| text: 'Total fruit consumption' | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>', | |||||
| shared: true | |||||
| }, | |||||
| plotOptions: { | |||||
| column: { | |||||
| stacking: 'percent' | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'John', | |||||
| data: [5, 3, 4, 7, 2] | |||||
| }, { | |||||
| name: 'Jane', | |||||
| data: [2, 2, 3, 2, 1] | |||||
| }, { | |||||
| name: 'Joe', | |||||
| data: [3, 4, 4, 2, 5] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,87 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'column' | |||||
| }, | |||||
| title: { | |||||
| text: 'Stacked column chart' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] | |||||
| }, | |||||
| yAxis: { | |||||
| min: 0, | |||||
| title: { | |||||
| text: 'Total fruit consumption' | |||||
| }, | |||||
| stackLabels: { | |||||
| enabled: true, | |||||
| style: { | |||||
| fontWeight: 'bold', | |||||
| color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' | |||||
| } | |||||
| } | |||||
| }, | |||||
| legend: { | |||||
| align: 'right', | |||||
| x: -30, | |||||
| verticalAlign: 'top', | |||||
| y: 25, | |||||
| floating: true, | |||||
| backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', | |||||
| borderColor: '#CCC', | |||||
| borderWidth: 1, | |||||
| shadow: false | |||||
| }, | |||||
| tooltip: { | |||||
| formatter: function () { | |||||
| return '<b>' + this.x + '</b><br/>' + | |||||
| this.series.name + ': ' + this.y + '<br/>' + | |||||
| 'Total: ' + this.point.stackTotal; | |||||
| } | |||||
| }, | |||||
| plotOptions: { | |||||
| column: { | |||||
| stacking: 'normal', | |||||
| dataLabels: { | |||||
| enabled: true, | |||||
| color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', | |||||
| style: { | |||||
| textShadow: '0 0 3px black' | |||||
| } | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'John', | |||||
| data: [5, 3, 4, 7, 2] | |||||
| }, { | |||||
| name: 'Jane', | |||||
| data: [2, 2, 3, 2, 1] | |||||
| }, { | |||||
| name: 'Joe', | |||||
| data: [3, 4, 4, 2, 5] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,89 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'columnrange', | |||||
| inverted: true | |||||
| }, | |||||
| title: { | |||||
| text: 'Temperature variation by month' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Observed in Vik i Sogn, Norway' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Temperature ( °C )' | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| valueSuffix: '°C' | |||||
| }, | |||||
| plotOptions: { | |||||
| columnrange: { | |||||
| dataLabels: { | |||||
| enabled: true, | |||||
| formatter: function () { | |||||
| return this.y + '°C'; | |||||
| } | |||||
| } | |||||
| } | |||||
| }, | |||||
| legend: { | |||||
| enabled: false | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Temperatures', | |||||
| data: [ | |||||
| [-9.7, 9.4], | |||||
| [-8.7, 6.5], | |||||
| [-3.5, 9.4], | |||||
| [-1.4, 19.9], | |||||
| [0.0, 22.6], | |||||
| [2.9, 29.5], | |||||
| [9.2, 30.7], | |||||
| [7.3, 26.5], | |||||
| [4.4, 18.0], | |||||
| [-3.1, 11.4], | |||||
| [-5.2, 10.4], | |||||
| [-13.5, 9.8] | |||||
| ] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-more.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,96 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| zoomType: 'xy' | |||||
| }, | |||||
| title: { | |||||
| text: 'Average Monthly Temperature and Rainfall in Tokyo' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Source: WorldClimate.com' | |||||
| }, | |||||
| xAxis: [{ | |||||
| categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', | |||||
| 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], | |||||
| crosshair: true | |||||
| }], | |||||
| yAxis: [{ // Primary yAxis | |||||
| labels: { | |||||
| format: '{value}°C', | |||||
| style: { | |||||
| color: Highcharts.getOptions().colors[1] | |||||
| } | |||||
| }, | |||||
| title: { | |||||
| text: 'Temperature', | |||||
| style: { | |||||
| color: Highcharts.getOptions().colors[1] | |||||
| } | |||||
| } | |||||
| }, { // Secondary yAxis | |||||
| title: { | |||||
| text: 'Rainfall', | |||||
| style: { | |||||
| color: Highcharts.getOptions().colors[0] | |||||
| } | |||||
| }, | |||||
| labels: { | |||||
| format: '{value} mm', | |||||
| style: { | |||||
| color: Highcharts.getOptions().colors[0] | |||||
| } | |||||
| }, | |||||
| opposite: true | |||||
| }], | |||||
| tooltip: { | |||||
| shared: true | |||||
| }, | |||||
| legend: { | |||||
| layout: 'vertical', | |||||
| align: 'left', | |||||
| x: 120, | |||||
| verticalAlign: 'top', | |||||
| y: 100, | |||||
| floating: true, | |||||
| backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Rainfall', | |||||
| type: 'column', | |||||
| yAxis: 1, | |||||
| data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], | |||||
| tooltip: { | |||||
| valueSuffix: ' mm' | |||||
| } | |||||
| }, { | |||||
| name: 'Temperature', | |||||
| type: 'spline', | |||||
| 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], | |||||
| tooltip: { | |||||
| valueSuffix: '°C' | |||||
| } | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,791 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| /** | |||||
| * This is a complex demo of how to set up a Highcharts chart, coupled to a | |||||
| * dynamic source and extended by drawing image sprites, wind arrow paths | |||||
| * and a second grid on top of the chart. The purpose of the demo is to inpire | |||||
| * developers to go beyond the basic chart types and show how the library can | |||||
| * be extended programmatically. This is what the demo does: | |||||
| * | |||||
| * - Loads weather forecast from www.yr.no in form of an XML service. The XML | |||||
| * is translated on the Higcharts website into JSONP for the sake of the demo | |||||
| * being shown on both our website and JSFiddle. | |||||
| * - When the data arrives async, a Meteogram instance is created. We have | |||||
| * created the Meteogram prototype to provide an organized structure of the different | |||||
| * methods and subroutines associated with the demo. | |||||
| * - The parseYrData method parses the data from www.yr.no into several parallel arrays. These | |||||
| * arrays are used directly as the data option for temperature, precipitation | |||||
| * and air pressure. As the temperature data gives only full degrees, we apply | |||||
| * some smoothing on the graph, but keep the original data in the tooltip. | |||||
| * - After this, the options structure is build, and the chart generated with the | |||||
| * parsed data. | |||||
| * - In the callback (on chart load), we weather icons on top of the temperature series. | |||||
| * The icons are sprites from a single PNG image, placed inside a clipped 30x30 | |||||
| * SVG <g> element. VML interprets this as HTML images inside a clipped div. | |||||
| * - Lastly, the wind arrows are built and added below the plot area, and a grid is | |||||
| * drawn around them. The wind arrows are basically drawn north-south, then rotated | |||||
| * as per the wind direction. | |||||
| */ | |||||
| function Meteogram(xml, container) { | |||||
| // Parallel arrays for the chart data, these are populated as the XML/JSON file | |||||
| // is loaded | |||||
| this.symbols = []; | |||||
| this.symbolNames = []; | |||||
| this.precipitations = []; | |||||
| this.windDirections = []; | |||||
| this.windDirectionNames = []; | |||||
| this.windSpeeds = []; | |||||
| this.windSpeedNames = []; | |||||
| this.temperatures = []; | |||||
| this.pressures = []; | |||||
| // Initialize | |||||
| this.xml = xml; | |||||
| this.container = container; | |||||
| // Run | |||||
| this.parseYrData(); | |||||
| } | |||||
| /** | |||||
| * Return weather symbol sprites as laid out at http://om.yr.no/forklaring/symbol/ | |||||
| */ | |||||
| Meteogram.prototype.getSymbolSprites = function (symbolSize) { | |||||
| return { | |||||
| '01d': { | |||||
| x: 0, | |||||
| y: 0 | |||||
| }, | |||||
| '01n': { | |||||
| x: symbolSize, | |||||
| y: 0 | |||||
| }, | |||||
| '16': { | |||||
| x: 2 * symbolSize, | |||||
| y: 0 | |||||
| }, | |||||
| '02d': { | |||||
| x: 0, | |||||
| y: symbolSize | |||||
| }, | |||||
| '02n': { | |||||
| x: symbolSize, | |||||
| y: symbolSize | |||||
| }, | |||||
| '03d': { | |||||
| x: 0, | |||||
| y: 2 * symbolSize | |||||
| }, | |||||
| '03n': { | |||||
| x: symbolSize, | |||||
| y: 2 * symbolSize | |||||
| }, | |||||
| '17': { | |||||
| x: 2 * symbolSize, | |||||
| y: 2 * symbolSize | |||||
| }, | |||||
| '04': { | |||||
| x: 0, | |||||
| y: 3 * symbolSize | |||||
| }, | |||||
| '05d': { | |||||
| x: 0, | |||||
| y: 4 * symbolSize | |||||
| }, | |||||
| '05n': { | |||||
| x: symbolSize, | |||||
| y: 4 * symbolSize | |||||
| }, | |||||
| '18': { | |||||
| x: 2 * symbolSize, | |||||
| y: 4 * symbolSize | |||||
| }, | |||||
| '06d': { | |||||
| x: 0, | |||||
| y: 5 * symbolSize | |||||
| }, | |||||
| '06n': { | |||||
| x: symbolSize, | |||||
| y: 5 * symbolSize | |||||
| }, | |||||
| '07d': { | |||||
| x: 0, | |||||
| y: 6 * symbolSize | |||||
| }, | |||||
| '07n': { | |||||
| x: symbolSize, | |||||
| y: 6 * symbolSize | |||||
| }, | |||||
| '08d': { | |||||
| x: 0, | |||||
| y: 7 * symbolSize | |||||
| }, | |||||
| '08n': { | |||||
| x: symbolSize, | |||||
| y: 7 * symbolSize | |||||
| }, | |||||
| '19': { | |||||
| x: 2 * symbolSize, | |||||
| y: 7 * symbolSize | |||||
| }, | |||||
| '09': { | |||||
| x: 0, | |||||
| y: 8 * symbolSize | |||||
| }, | |||||
| '10': { | |||||
| x: 0, | |||||
| y: 9 * symbolSize | |||||
| }, | |||||
| '11': { | |||||
| x: 0, | |||||
| y: 10 * symbolSize | |||||
| }, | |||||
| '12': { | |||||
| x: 0, | |||||
| y: 11 * symbolSize | |||||
| }, | |||||
| '13': { | |||||
| x: 0, | |||||
| y: 12 * symbolSize | |||||
| }, | |||||
| '14': { | |||||
| x: 0, | |||||
| y: 13 * symbolSize | |||||
| }, | |||||
| '15': { | |||||
| x: 0, | |||||
| y: 14 * symbolSize | |||||
| }, | |||||
| '20d': { | |||||
| x: 0, | |||||
| y: 15 * symbolSize | |||||
| }, | |||||
| '20n': { | |||||
| x: symbolSize, | |||||
| y: 15 * symbolSize | |||||
| }, | |||||
| '20m': { | |||||
| x: 2 * symbolSize, | |||||
| y: 15 * symbolSize | |||||
| }, | |||||
| '21d': { | |||||
| x: 0, | |||||
| y: 16 * symbolSize | |||||
| }, | |||||
| '21n': { | |||||
| x: symbolSize, | |||||
| y: 16 * symbolSize | |||||
| }, | |||||
| '21m': { | |||||
| x: 2 * symbolSize, | |||||
| y: 16 * symbolSize | |||||
| }, | |||||
| '22': { | |||||
| x: 0, | |||||
| y: 17 * symbolSize | |||||
| }, | |||||
| '23': { | |||||
| x: 0, | |||||
| y: 18 * symbolSize | |||||
| } | |||||
| }; | |||||
| }; | |||||
| /** | |||||
| * Function to smooth the temperature line. The original data provides only whole degrees, | |||||
| * which makes the line graph look jagged. So we apply a running mean on it, but preserve | |||||
| * the unaltered value in the tooltip. | |||||
| */ | |||||
| Meteogram.prototype.smoothLine = function (data) { | |||||
| var i = data.length, | |||||
| sum, | |||||
| value; | |||||
| while (i--) { | |||||
| data[i].value = value = data[i].y; // preserve value for tooltip | |||||
| // Set the smoothed value to the average of the closest points, but don't allow | |||||
| // it to differ more than 0.5 degrees from the given value | |||||
| sum = (data[i - 1] || data[i]).y + value + (data[i + 1] || data[i]).y; | |||||
| data[i].y = Math.max(value - 0.5, Math.min(sum / 3, value + 0.5)); | |||||
| } | |||||
| }; | |||||
| /** | |||||
| * Callback function that is called from Highcharts on hovering each point and returns | |||||
| * HTML for the tooltip. | |||||
| */ | |||||
| Meteogram.prototype.tooltipFormatter = function (tooltip) { | |||||
| // Create the header with reference to the time interval | |||||
| var index = tooltip.points[0].point.index, | |||||
| ret = '<small>' + Highcharts.dateFormat('%A, %b %e, %H:%M', tooltip.x) + '-' + | |||||
| Highcharts.dateFormat('%H:%M', tooltip.points[0].point.to) + '</small><br>'; | |||||
| // Symbol text | |||||
| ret += '<b>' + this.symbolNames[index] + '</b>'; | |||||
| ret += '<table>'; | |||||
| // Add all series | |||||
| Highcharts.each(tooltip.points, function (point) { | |||||
| var series = point.series; | |||||
| ret += '<tr><td><span style="color:' + series.color + '">\u25CF</span> ' + series.name + | |||||
| ': </td><td style="white-space:nowrap">' + Highcharts.pick(point.point.value, point.y) + | |||||
| series.options.tooltip.valueSuffix + '</td></tr>'; | |||||
| }); | |||||
| // Add wind | |||||
| ret += '<tr><td style="vertical-align: top">\u25CF Wind</td><td style="white-space:nowrap">' + this.windDirectionNames[index] + | |||||
| '<br>' + this.windSpeedNames[index] + ' (' + | |||||
| Highcharts.numberFormat(this.windSpeeds[index], 1) + ' m/s)</td></tr>'; | |||||
| // Close | |||||
| ret += '</table>'; | |||||
| return ret; | |||||
| }; | |||||
| /** | |||||
| * Draw the weather symbols on top of the temperature series. The symbols are sprites of a single | |||||
| * file, defined in the getSymbolSprites function above. | |||||
| */ | |||||
| Meteogram.prototype.drawWeatherSymbols = function (chart) { | |||||
| var meteogram = this, | |||||
| symbolSprites = this.getSymbolSprites(30); | |||||
| $.each(chart.series[0].data, function (i, point) { | |||||
| var sprite, | |||||
| group; | |||||
| if (meteogram.resolution > 36e5 || i % 2 === 0) { | |||||
| sprite = symbolSprites[meteogram.symbols[i]]; | |||||
| if (sprite) { | |||||
| // Create a group element that is positioned and clipped at 30 pixels width and height | |||||
| group = chart.renderer.g() | |||||
| .attr({ | |||||
| translateX: point.plotX + chart.plotLeft - 15, | |||||
| translateY: point.plotY + chart.plotTop - 30, | |||||
| zIndex: 5 | |||||
| }) | |||||
| .clip(chart.renderer.clipRect(0, 0, 30, 30)) | |||||
| .add(); | |||||
| // Position the image inside it at the sprite position | |||||
| chart.renderer.image( | |||||
| 'http://www.highcharts.com/samples/graphics/meteogram-symbols-30px.png', | |||||
| -sprite.x, | |||||
| -sprite.y, | |||||
| 90, | |||||
| 570 | |||||
| ) | |||||
| .add(group); | |||||
| } | |||||
| } | |||||
| }); | |||||
| }; | |||||
| /** | |||||
| * Create wind speed symbols for the Beaufort wind scale. The symbols are rotated | |||||
| * around the zero centerpoint. | |||||
| */ | |||||
| Meteogram.prototype.windArrow = function (name) { | |||||
| var level, | |||||
| path; | |||||
| // The stem and the arrow head | |||||
| path = [ | |||||
| 'M', 0, 7, // base of arrow | |||||
| 'L', -1.5, 7, | |||||
| 0, 10, | |||||
| 1.5, 7, | |||||
| 0, 7, | |||||
| 0, -10 // top | |||||
| ]; | |||||
| level = $.inArray(name, ['Calm', 'Light air', 'Light breeze', 'Gentle breeze', 'Moderate breeze', | |||||
| 'Fresh breeze', 'Strong breeze', 'Near gale', 'Gale', 'Strong gale', 'Storm', | |||||
| 'Violent storm', 'Hurricane']); | |||||
| if (level === 0) { | |||||
| path = []; | |||||
| } | |||||
| if (level === 2) { | |||||
| path.push('M', 0, -8, 'L', 4, -8); // short line | |||||
| } else if (level >= 3) { | |||||
| path.push(0, -10, 7, -10); // long line | |||||
| } | |||||
| if (level === 4) { | |||||
| path.push('M', 0, -7, 'L', 4, -7); | |||||
| } else if (level >= 5) { | |||||
| path.push('M', 0, -7, 'L', 7, -7); | |||||
| } | |||||
| if (level === 5) { | |||||
| path.push('M', 0, -4, 'L', 4, -4); | |||||
| } else if (level >= 6) { | |||||
| path.push('M', 0, -4, 'L', 7, -4); | |||||
| } | |||||
| if (level === 7) { | |||||
| path.push('M', 0, -1, 'L', 4, -1); | |||||
| } else if (level >= 8) { | |||||
| path.push('M', 0, -1, 'L', 7, -1); | |||||
| } | |||||
| return path; | |||||
| }; | |||||
| /** | |||||
| * Draw the wind arrows. Each arrow path is generated by the windArrow function above. | |||||
| */ | |||||
| Meteogram.prototype.drawWindArrows = function (chart) { | |||||
| var meteogram = this; | |||||
| $.each(chart.series[0].data, function (i, point) { | |||||
| var sprite, arrow, x, y; | |||||
| if (meteogram.resolution > 36e5 || i % 2 === 0) { | |||||
| // Draw the wind arrows | |||||
| x = point.plotX + chart.plotLeft + 7; | |||||
| y = 255; | |||||
| if (meteogram.windSpeedNames[i] === 'Calm') { | |||||
| arrow = chart.renderer.circle(x, y, 10).attr({ | |||||
| fill: 'none' | |||||
| }); | |||||
| } else { | |||||
| arrow = chart.renderer.path( | |||||
| meteogram.windArrow(meteogram.windSpeedNames[i]) | |||||
| ).attr({ | |||||
| rotation: parseInt(meteogram.windDirections[i], 10), | |||||
| translateX: x, // rotation center | |||||
| translateY: y // rotation center | |||||
| }); | |||||
| } | |||||
| arrow.attr({ | |||||
| stroke: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', | |||||
| 'stroke-width': 1.5, | |||||
| zIndex: 5 | |||||
| }) | |||||
| .add(); | |||||
| } | |||||
| }); | |||||
| }; | |||||
| /** | |||||
| * Draw blocks around wind arrows, below the plot area | |||||
| */ | |||||
| Meteogram.prototype.drawBlocksForWindArrows = function (chart) { | |||||
| var xAxis = chart.xAxis[0], | |||||
| x, | |||||
| pos, | |||||
| max, | |||||
| isLong, | |||||
| isLast, | |||||
| i; | |||||
| for (pos = xAxis.min, max = xAxis.max, i = 0; pos <= max + 36e5; pos += 36e5, i += 1) { | |||||
| // Get the X position | |||||
| isLast = pos === max + 36e5; | |||||
| x = Math.round(xAxis.toPixels(pos)) + (isLast ? 0.5 : -0.5); | |||||
| // Draw the vertical dividers and ticks | |||||
| if (this.resolution > 36e5) { | |||||
| isLong = pos % this.resolution === 0; | |||||
| } else { | |||||
| isLong = i % 2 === 0; | |||||
| } | |||||
| chart.renderer.path(['M', x, chart.plotTop + chart.plotHeight + (isLong ? 0 : 28), | |||||
| 'L', x, chart.plotTop + chart.plotHeight + 32, 'Z']) | |||||
| .attr({ | |||||
| 'stroke': chart.options.chart.plotBorderColor, | |||||
| 'stroke-width': 1 | |||||
| }) | |||||
| .add(); | |||||
| } | |||||
| }; | |||||
| /** | |||||
| * Get the title based on the XML data | |||||
| */ | |||||
| Meteogram.prototype.getTitle = function () { | |||||
| return 'Meteogram for ' + this.xml.location.name + ', ' + this.xml.location.country; | |||||
| }; | |||||
| /** | |||||
| * Build and return the Highcharts options structure | |||||
| */ | |||||
| Meteogram.prototype.getChartOptions = function () { | |||||
| var meteogram = this; | |||||
| return { | |||||
| chart: { | |||||
| renderTo: this.container, | |||||
| marginBottom: 70, | |||||
| marginRight: 40, | |||||
| marginTop: 50, | |||||
| plotBorderWidth: 1, | |||||
| width: 800, | |||||
| height: 310 | |||||
| }, | |||||
| title: { | |||||
| text: this.getTitle(), | |||||
| align: 'left' | |||||
| }, | |||||
| credits: { | |||||
| text: 'Forecast from <a href="http://yr.no">yr.no</a>', | |||||
| href: this.xml.credit.link['@attributes'].url, | |||||
| position: { | |||||
| x: -40 | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| shared: true, | |||||
| useHTML: true, | |||||
| formatter: function () { | |||||
| return meteogram.tooltipFormatter(this); | |||||
| } | |||||
| }, | |||||
| xAxis: [{ // Bottom X axis | |||||
| type: 'datetime', | |||||
| tickInterval: 2 * 36e5, // two hours | |||||
| minorTickInterval: 36e5, // one hour | |||||
| tickLength: 0, | |||||
| gridLineWidth: 1, | |||||
| gridLineColor: (Highcharts.theme && Highcharts.theme.background2) || '#F0F0F0', | |||||
| startOnTick: false, | |||||
| endOnTick: false, | |||||
| minPadding: 0, | |||||
| maxPadding: 0, | |||||
| offset: 30, | |||||
| showLastLabel: true, | |||||
| labels: { | |||||
| format: '{value:%H}' | |||||
| } | |||||
| }, { // Top X axis | |||||
| linkedTo: 0, | |||||
| type: 'datetime', | |||||
| tickInterval: 24 * 3600 * 1000, | |||||
| labels: { | |||||
| format: '{value:<span style="font-size: 12px; font-weight: bold">%a</span> %b %e}', | |||||
| align: 'left', | |||||
| x: 3, | |||||
| y: -5 | |||||
| }, | |||||
| opposite: true, | |||||
| tickLength: 20, | |||||
| gridLineWidth: 1 | |||||
| }], | |||||
| yAxis: [{ // temperature axis | |||||
| title: { | |||||
| text: null | |||||
| }, | |||||
| labels: { | |||||
| format: '{value}°', | |||||
| style: { | |||||
| fontSize: '10px' | |||||
| }, | |||||
| x: -3 | |||||
| }, | |||||
| plotLines: [{ // zero plane | |||||
| value: 0, | |||||
| color: '#BBBBBB', | |||||
| width: 1, | |||||
| zIndex: 2 | |||||
| }], | |||||
| // Custom positioner to provide even temperature ticks from top down | |||||
| tickPositioner: function () { | |||||
| var max = Math.ceil(this.max) + 1, | |||||
| pos = max - 12, // start | |||||
| ret; | |||||
| if (pos < this.min) { | |||||
| ret = []; | |||||
| while (pos <= max) { | |||||
| ret.push(pos += 1); | |||||
| } | |||||
| } // else return undefined and go auto | |||||
| return ret; | |||||
| }, | |||||
| maxPadding: 0.3, | |||||
| tickInterval: 1, | |||||
| gridLineColor: (Highcharts.theme && Highcharts.theme.background2) || '#F0F0F0' | |||||
| }, { // precipitation axis | |||||
| title: { | |||||
| text: null | |||||
| }, | |||||
| labels: { | |||||
| enabled: false | |||||
| }, | |||||
| gridLineWidth: 0, | |||||
| tickLength: 0 | |||||
| }, { // Air pressure | |||||
| allowDecimals: false, | |||||
| title: { // Title on top of axis | |||||
| text: 'hPa', | |||||
| offset: 0, | |||||
| align: 'high', | |||||
| rotation: 0, | |||||
| style: { | |||||
| fontSize: '10px', | |||||
| color: Highcharts.getOptions().colors[2] | |||||
| }, | |||||
| textAlign: 'left', | |||||
| x: 3 | |||||
| }, | |||||
| labels: { | |||||
| style: { | |||||
| fontSize: '8px', | |||||
| color: Highcharts.getOptions().colors[2] | |||||
| }, | |||||
| y: 2, | |||||
| x: 3 | |||||
| }, | |||||
| gridLineWidth: 0, | |||||
| opposite: true, | |||||
| showLastLabel: false | |||||
| }], | |||||
| legend: { | |||||
| enabled: false | |||||
| }, | |||||
| plotOptions: { | |||||
| series: { | |||||
| pointPlacement: 'between' | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Temperature', | |||||
| data: this.temperatures, | |||||
| type: 'spline', | |||||
| marker: { | |||||
| enabled: false, | |||||
| states: { | |||||
| hover: { | |||||
| enabled: true | |||||
| } | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| valueSuffix: '°C' | |||||
| }, | |||||
| zIndex: 1, | |||||
| color: '#FF3333', | |||||
| negativeColor: '#48AFE8' | |||||
| }, { | |||||
| name: 'Precipitation', | |||||
| data: this.precipitations, | |||||
| type: 'column', | |||||
| color: '#68CFE8', | |||||
| yAxis: 1, | |||||
| groupPadding: 0, | |||||
| pointPadding: 0, | |||||
| borderWidth: 0, | |||||
| shadow: false, | |||||
| dataLabels: { | |||||
| enabled: true, | |||||
| formatter: function () { | |||||
| if (this.y > 0) { | |||||
| return this.y; | |||||
| } | |||||
| }, | |||||
| style: { | |||||
| fontSize: '8px' | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| valueSuffix: 'mm' | |||||
| } | |||||
| }, { | |||||
| name: 'Air pressure', | |||||
| color: Highcharts.getOptions().colors[2], | |||||
| data: this.pressures, | |||||
| marker: { | |||||
| enabled: false | |||||
| }, | |||||
| shadow: false, | |||||
| tooltip: { | |||||
| valueSuffix: ' hPa' | |||||
| }, | |||||
| dashStyle: 'shortdot', | |||||
| yAxis: 2 | |||||
| }] | |||||
| } | |||||
| }; | |||||
| /** | |||||
| * Post-process the chart from the callback function, the second argument to Highcharts.Chart. | |||||
| */ | |||||
| Meteogram.prototype.onChartLoad = function (chart) { | |||||
| this.drawWeatherSymbols(chart); | |||||
| this.drawWindArrows(chart); | |||||
| this.drawBlocksForWindArrows(chart); | |||||
| }; | |||||
| /** | |||||
| * Create the chart. This function is called async when the data file is loaded and parsed. | |||||
| */ | |||||
| Meteogram.prototype.createChart = function () { | |||||
| var meteogram = this; | |||||
| this.chart = new Highcharts.Chart(this.getChartOptions(), function (chart) { | |||||
| meteogram.onChartLoad(chart); | |||||
| }); | |||||
| }; | |||||
| /** | |||||
| * Handle the data. This part of the code is not Highcharts specific, but deals with yr.no's | |||||
| * specific data format | |||||
| */ | |||||
| Meteogram.prototype.parseYrData = function () { | |||||
| var meteogram = this, | |||||
| xml = this.xml, | |||||
| pointStart; | |||||
| if (!xml || !xml.forecast) { | |||||
| $('#loading').html('<i class="fa fa-frown-o"></i> Failed loading data, please try again later'); | |||||
| return; | |||||
| } | |||||
| // The returned xml variable is a JavaScript representation of the provided XML, | |||||
| // generated on the server by running PHP simple_load_xml and converting it to | |||||
| // JavaScript by json_encode. | |||||
| $.each(xml.forecast.tabular.time, function (i, time) { | |||||
| // Get the times - only Safari can't parse ISO8601 so we need to do some replacements | |||||
| var from = time['@attributes'].from + ' UTC', | |||||
| to = time['@attributes'].to + ' UTC'; | |||||
| from = from.replace(/-/g, '/').replace('T', ' '); | |||||
| from = Date.parse(from); | |||||
| to = to.replace(/-/g, '/').replace('T', ' '); | |||||
| to = Date.parse(to); | |||||
| if (to > pointStart + 4 * 24 * 36e5) { | |||||
| return; | |||||
| } | |||||
| // If it is more than an hour between points, show all symbols | |||||
| if (i === 0) { | |||||
| meteogram.resolution = to - from; | |||||
| } | |||||
| // Populate the parallel arrays | |||||
| meteogram.symbols.push(time.symbol['@attributes']['var'].match(/[0-9]{2}[dnm]?/)[0]); | |||||
| meteogram.symbolNames.push(time.symbol['@attributes'].name); | |||||
| meteogram.temperatures.push({ | |||||
| x: from, | |||||
| y: parseInt(time.temperature['@attributes'].value), | |||||
| // custom options used in the tooltip formatter | |||||
| to: to, | |||||
| index: i | |||||
| }); | |||||
| meteogram.precipitations.push({ | |||||
| x: from, | |||||
| y: parseFloat(time.precipitation['@attributes'].value) | |||||
| }); | |||||
| meteogram.windDirections.push(parseFloat(time.windDirection['@attributes'].deg)); | |||||
| meteogram.windDirectionNames.push(time.windDirection['@attributes'].name); | |||||
| meteogram.windSpeeds.push(parseFloat(time.windSpeed['@attributes'].mps)); | |||||
| meteogram.windSpeedNames.push(time.windSpeed['@attributes'].name); | |||||
| meteogram.pressures.push({ | |||||
| x: from, | |||||
| y: parseFloat(time.pressure['@attributes'].value) | |||||
| }); | |||||
| if (i == 0) { | |||||
| pointStart = (from + to) / 2; | |||||
| } | |||||
| }); | |||||
| // Smooth the line | |||||
| this.smoothLine(this.temperatures); | |||||
| // Create the chart when the data is loaded | |||||
| this.createChart(); | |||||
| }; | |||||
| // End of the Meteogram protype | |||||
| $(function () { // On DOM ready... | |||||
| // Set the hash to the yr.no URL we want to parse | |||||
| if (!location.hash) { | |||||
| var place = 'United_Kingdom/England/London'; | |||||
| //place = 'France/Rhône-Alpes/Val_d\'Isère~2971074'; | |||||
| //place = 'Norway/Sogn_og_Fjordane/Vik/Målset'; | |||||
| //place = 'United_States/California/San_Francisco'; | |||||
| //place = 'United_States/Minnesota/Minneapolis'; | |||||
| location.hash = 'http://www.yr.no/place/' + place + '/forecast_hour_by_hour.xml'; | |||||
| } | |||||
| // Then get the XML file through Highcharts' jsonp provider, see | |||||
| // https://github.com/highslide-software/highcharts.com/blob/master/samples/data/jsonp.php | |||||
| // for source code. | |||||
| $.getJSON( | |||||
| 'http://www.highcharts.com/samples/data/jsonp.php?url=' + location.hash.substr(1) + '&callback=?', | |||||
| function (xml) { | |||||
| var meteogram = new Meteogram(xml, 'container'); | |||||
| } | |||||
| ); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> | |||||
| <div id="container" style="width: 800px; height: 310px; margin: 0 auto"> | |||||
| <div style="margin-top: 100px; text-align: center" id="loading"> | |||||
| <i class="fa fa-spinner fa-spin"></i> Loading data from external source | |||||
| </div> | |||||
| </div> | |||||
| <!-- | |||||
| <div style="width: 800px; margin: 0 auto"> | |||||
| <a href="#http://www.yr.no/place/United_Kingdom/England/London/forecast_hour_by_hour.xml">London</a>, | |||||
| <a href="#http://www.yr.no/place/France/Rhône-Alpes/Val_d\'Isère~2971074/forecast_hour_by_hour.xml">Val d'Isère</a>, | |||||
| <a href="#http://www.yr.no/place/United_States/California/San_Francisco/forecast_hour_by_hour.xml">San Francisco</a>, | |||||
| <a href="#http://www.yr.no/place/Norway/Vik/Vikafjell/forecast_hour_by_hour.xml">Vikjafjellet</a> | |||||
| </div> | |||||
| --> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,129 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| zoomType: 'xy' | |||||
| }, | |||||
| title: { | |||||
| text: 'Average Monthly Weather Data for Tokyo' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Source: WorldClimate.com' | |||||
| }, | |||||
| xAxis: [{ | |||||
| categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', | |||||
| 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], | |||||
| crosshair: true | |||||
| }], | |||||
| yAxis: [{ // Primary yAxis | |||||
| labels: { | |||||
| format: '{value}°C', | |||||
| style: { | |||||
| color: Highcharts.getOptions().colors[2] | |||||
| } | |||||
| }, | |||||
| title: { | |||||
| text: 'Temperature', | |||||
| style: { | |||||
| color: Highcharts.getOptions().colors[2] | |||||
| } | |||||
| }, | |||||
| opposite: true | |||||
| }, { // Secondary yAxis | |||||
| gridLineWidth: 0, | |||||
| title: { | |||||
| text: 'Rainfall', | |||||
| style: { | |||||
| color: Highcharts.getOptions().colors[0] | |||||
| } | |||||
| }, | |||||
| labels: { | |||||
| format: '{value} mm', | |||||
| style: { | |||||
| color: Highcharts.getOptions().colors[0] | |||||
| } | |||||
| } | |||||
| }, { // Tertiary yAxis | |||||
| gridLineWidth: 0, | |||||
| title: { | |||||
| text: 'Sea-Level Pressure', | |||||
| style: { | |||||
| color: Highcharts.getOptions().colors[1] | |||||
| } | |||||
| }, | |||||
| labels: { | |||||
| format: '{value} mb', | |||||
| style: { | |||||
| color: Highcharts.getOptions().colors[1] | |||||
| } | |||||
| }, | |||||
| opposite: true | |||||
| }], | |||||
| tooltip: { | |||||
| shared: true | |||||
| }, | |||||
| legend: { | |||||
| layout: 'vertical', | |||||
| align: 'left', | |||||
| x: 80, | |||||
| verticalAlign: 'top', | |||||
| y: 55, | |||||
| floating: true, | |||||
| backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Rainfall', | |||||
| type: 'column', | |||||
| yAxis: 1, | |||||
| data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], | |||||
| tooltip: { | |||||
| valueSuffix: ' mm' | |||||
| } | |||||
| }, { | |||||
| name: 'Sea-Level Pressure', | |||||
| type: 'spline', | |||||
| yAxis: 2, | |||||
| data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7], | |||||
| marker: { | |||||
| enabled: false | |||||
| }, | |||||
| dashStyle: 'shortdot', | |||||
| tooltip: { | |||||
| valueSuffix: ' mb' | |||||
| } | |||||
| }, { | |||||
| name: 'Temperature', | |||||
| type: 'spline', | |||||
| 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], | |||||
| tooltip: { | |||||
| valueSuffix: ' °C' | |||||
| } | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,56 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| xAxis: { | |||||
| min: -0.5, | |||||
| max: 5.5 | |||||
| }, | |||||
| yAxis: { | |||||
| min: 0 | |||||
| }, | |||||
| title: { | |||||
| text: 'Scatter plot with regression line' | |||||
| }, | |||||
| series: [{ | |||||
| type: 'line', | |||||
| name: 'Regression Line', | |||||
| data: [[0, 1.11], [5, 4.51]], | |||||
| marker: { | |||||
| enabled: false | |||||
| }, | |||||
| states: { | |||||
| hover: { | |||||
| lineWidth: 0 | |||||
| } | |||||
| }, | |||||
| enableMouseTracking: false | |||||
| }, { | |||||
| type: 'scatter', | |||||
| name: 'Observations', | |||||
| data: [1, 1.5, 2.8, 3.5, 3.9, 4.2], | |||||
| marker: { | |||||
| radius: 4 | |||||
| } | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,422 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| #container { | |||||
| min-width: 300px; | |||||
| max-width: 1000px; | |||||
| height: 420px; | |||||
| margin: 1em auto; | |||||
| } | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| /** | |||||
| * This is an advanced demo of setting up Highcharts with the flags feature borrowed from Highstock. | |||||
| * It also shows custom graphics drawn in the chart area on chart load. | |||||
| */ | |||||
| /** | |||||
| * Fires on chart load, called from the chart.events.load option. | |||||
| */ | |||||
| function onChartLoad() { | |||||
| var centerX = 140, | |||||
| centerY = 110, | |||||
| path = [], | |||||
| angle, | |||||
| radius, | |||||
| badgeColor = Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.2).get(), | |||||
| spike, | |||||
| empImage, | |||||
| big5, | |||||
| label, | |||||
| left, | |||||
| right, | |||||
| years, | |||||
| renderer; | |||||
| if (this.chartWidth < 530) { | |||||
| return; | |||||
| } | |||||
| // Draw the spiked disc | |||||
| for (angle = 0; angle < 2 * Math.PI; angle += Math.PI / 24) { | |||||
| radius = spike ? 80 : 70; | |||||
| path.push( | |||||
| 'L', | |||||
| centerX + radius * Math.cos(angle), | |||||
| centerY + radius * Math.sin(angle) | |||||
| ); | |||||
| spike = !spike; | |||||
| } | |||||
| path[0] = 'M'; | |||||
| path.push('z'); | |||||
| this.renderer.path(path) | |||||
| .attr({ | |||||
| fill: badgeColor, | |||||
| zIndex: 6 | |||||
| }) | |||||
| .add(); | |||||
| // Employee image overlay | |||||
| empImage = this.renderer.path(path) | |||||
| .attr({ | |||||
| zIndex: 7, | |||||
| opacity: 0, | |||||
| stroke: badgeColor, | |||||
| 'stroke-width': 1 | |||||
| }) | |||||
| .add(); | |||||
| // Big 5 | |||||
| big5 = this.renderer.text('5') | |||||
| .attr({ | |||||
| zIndex: 6 | |||||
| }) | |||||
| .css({ | |||||
| color: 'white', | |||||
| fontSize: '100px', | |||||
| fontStyle: 'italic', | |||||
| fontFamily: "'Brush Script MT', sans-serif" | |||||
| }) | |||||
| .add(); | |||||
| big5.attr({ | |||||
| x: centerX - big5.getBBox().width / 2, | |||||
| y: centerY + 14 | |||||
| }); | |||||
| // Draw the label | |||||
| label = this.renderer.text('Highcharts Anniversary') | |||||
| .attr({ | |||||
| zIndex: 6 | |||||
| }) | |||||
| .css({ | |||||
| color: '#FFFFFF' | |||||
| }) | |||||
| .add(); | |||||
| left = centerX - label.getBBox().width / 2; | |||||
| right = centerX + label.getBBox().width / 2; | |||||
| label.attr({ | |||||
| x: left, | |||||
| y: centerY + 44 | |||||
| }); | |||||
| // The band | |||||
| left = centerX - 90; | |||||
| right = centerX + 90; | |||||
| this.renderer | |||||
| .path([ | |||||
| 'M', left, centerY + 30, | |||||
| 'L', right, centerY + 30, | |||||
| right, centerY + 50, | |||||
| left, centerY + 50, | |||||
| 'z', | |||||
| 'M', left, centerY + 40, | |||||
| 'L', left - 20, centerY + 40, | |||||
| left - 10, centerY + 50, | |||||
| left - 20, centerY + 60, | |||||
| left + 10, centerY + 60, | |||||
| left, centerY + 50, | |||||
| left + 10, centerY + 60, | |||||
| left + 10, centerY + 50, | |||||
| left, centerY + 50, | |||||
| 'z', | |||||
| 'M', right, centerY + 40, | |||||
| 'L', right + 20, centerY + 40, | |||||
| right + 10, centerY + 50, | |||||
| right + 20, centerY + 60, | |||||
| right - 10, centerY + 60, | |||||
| right, centerY + 50, | |||||
| right - 10, centerY + 60, | |||||
| right - 10, centerY + 50, | |||||
| right, centerY + 50, | |||||
| 'z' | |||||
| ]) | |||||
| .attr({ | |||||
| fill: badgeColor, | |||||
| stroke: '#FFFFFF', | |||||
| 'stroke-width': 1, | |||||
| zIndex: 5 | |||||
| }) | |||||
| .add(); | |||||
| // 2009-2014 | |||||
| years = this.renderer.text('2009-2014') | |||||
| .attr({ | |||||
| zIndex: 6 | |||||
| }) | |||||
| .css({ | |||||
| color: '#FFFFFF', | |||||
| fontStyle: 'italic', | |||||
| fontSize: '10px' | |||||
| }) | |||||
| .add(); | |||||
| years.attr({ | |||||
| x: centerX - years.getBBox().width / 2, | |||||
| y: centerY + 62 | |||||
| }); | |||||
| // Prepare mouseover | |||||
| renderer = this.renderer; | |||||
| if (renderer.defs) { // is SVG | |||||
| $.each(this.get('employees').points, function () { | |||||
| var point = this, | |||||
| pattern; | |||||
| if (point.image) { | |||||
| pattern = renderer.createElement('pattern').attr({ | |||||
| id: 'pattern-' + point.image, | |||||
| patternUnits: 'userSpaceOnUse', | |||||
| width: 400, | |||||
| height: 400 | |||||
| }).add(renderer.defs); | |||||
| renderer.image( | |||||
| 'http://www.highcharts.com/images/employees2014/' + point.image + '.jpg', | |||||
| centerX - 80, | |||||
| centerY - 80, | |||||
| 160, | |||||
| 213 | |||||
| ).add(pattern); | |||||
| Highcharts.addEvent(point, 'mouseOver', function () { | |||||
| empImage | |||||
| .attr({ | |||||
| fill: 'url(#pattern-' + point.image + ')' | |||||
| }) | |||||
| .animate({ opacity: 1 }, { duration : 500 }); | |||||
| }); | |||||
| Highcharts.addEvent(point, 'mouseOut', function () { | |||||
| empImage.animate({ opacity: 0 }, { duration : 500 }); | |||||
| }); | |||||
| } | |||||
| }); | |||||
| } | |||||
| } | |||||
| $(function () { | |||||
| var options = { | |||||
| chart: { | |||||
| events: { | |||||
| load: onChartLoad | |||||
| } | |||||
| }, | |||||
| xAxis: { | |||||
| type: 'datetime', | |||||
| minTickInterval: 365 * 24 * 36e5, | |||||
| labels: { | |||||
| align: 'left' | |||||
| }, | |||||
| plotBands: [{ | |||||
| from: Date.UTC(2009, 10, 27), | |||||
| to: Date.UTC(2010, 11, 1), | |||||
| color: '#EFFFFF', | |||||
| label: { | |||||
| text: '<em>Offices:</em><br> Torstein\'s basement', | |||||
| style: { | |||||
| color: '#999999' | |||||
| }, | |||||
| y: 180 | |||||
| } | |||||
| }, { | |||||
| from: Date.UTC(2010, 11, 1), | |||||
| to: Date.UTC(2013, 9, 1), | |||||
| color: '#FFFFEF', | |||||
| label: { | |||||
| text: '<em>Offices:</em><br> Tomtebu', | |||||
| style: { | |||||
| color: '#999999' | |||||
| }, | |||||
| y: 30 | |||||
| } | |||||
| }, { | |||||
| from: Date.UTC(2013, 9, 1), | |||||
| to: Date.UTC(2014, 10, 27), | |||||
| color: '#FFEFFF', | |||||
| label: { | |||||
| text: '<em>Offices:</em><br> VikØrsta', | |||||
| style: { | |||||
| color: '#999999' | |||||
| }, | |||||
| y: 30 | |||||
| } | |||||
| }] | |||||
| }, | |||||
| title: { | |||||
| text: 'Highcharts and Highsoft timeline' | |||||
| }, | |||||
| tooltip: { | |||||
| style: { | |||||
| width: '250px' | |||||
| } | |||||
| }, | |||||
| yAxis: [{ | |||||
| max: 100, | |||||
| labels: { | |||||
| enabled: false | |||||
| }, | |||||
| title: { | |||||
| text: '' | |||||
| }, | |||||
| gridLineColor: 'rgba(0, 0, 0, 0.07)' | |||||
| }, { | |||||
| allowDecimals: false, | |||||
| max: 15, | |||||
| labels: { | |||||
| style: { | |||||
| color: Highcharts.getOptions().colors[2] | |||||
| } | |||||
| }, | |||||
| title: { | |||||
| text: 'Employees', | |||||
| style: { | |||||
| color: Highcharts.getOptions().colors[2] | |||||
| } | |||||
| }, | |||||
| opposite: true, | |||||
| gridLineWidth: 0 | |||||
| }], | |||||
| plotOptions: { | |||||
| series: { | |||||
| marker: { | |||||
| enabled: false, | |||||
| symbol: 'circle', | |||||
| radius: 2 | |||||
| }, | |||||
| fillOpacity: 0.5 | |||||
| }, | |||||
| flags: { | |||||
| tooltip: { | |||||
| xDateFormat: '%B %e, %Y' | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| type: 'spline', | |||||
| id: 'google-trends', | |||||
| dashStyle: 'dash', | |||||
| name: 'Google search for <em>highcharts</em>', | |||||
| data: [{ x: 1258322400000, /* November 2009 */ y: 0}, { x: 1260961200000, y: 5}, { x: 1263639600000, y: 7}, { x: 1266188400000, y: 5}, { x: 1268740800000, y: 6}, { x: 1271368800000, y: 8}, { x: 1274004000000, y: 11}, { x: 1276639200000, y: 9}, { x: 1279274400000, y: 12}, { x: 1281952800000, y: 13}, { x: 1284588000000, y: 17}, { x: 1287223200000, y: 17}, { x: 1289858400000, y: 18}, { x: 1292497200000, y: 20}, { x: 1295175600000, y: 20}, { x: 1297724400000, y: 27}, { x: 1300276800000, y: 32}, { x: 1302904800000, y: 29}, { x: 1305540000000, y: 34}, { x: 1308175200000, y: 34}, { x: 1310810400000, y: 36}, { x: 1313488800000, y: 43}, { x: 1316124000000, y: 44}, { x: 1318759200000, y: 42}, { x: 1321394400000, y: 47}, { x: 1324033200000, y: 46}, { x: 1326711600000, y: 50}, { x: 1329303600000, y: 57}, { x: 1331899200000, y: 54}, { x: 1334527200000, y: 59}, { x: 1337162400000, y: 62}, { x: 1339797600000, y: 66}, { x: 1342432800000, y: 61}, { x: 1345111200000, y: 68}, { x: 1347746400000, y: 67}, { x: 1350381600000, y: 73}, { x: 1353016800000, y: 63}, { x: 1355655600000, y: 54}, { x: 1358334000000, y: 67}, { x: 1360882800000, y: 74}, { x: 1363435200000, y: 81}, { x: 1366063200000, y: 89}, { x: 1368698400000, y: 83}, { x: 1371333600000, y: 88}, { x: 1373968800000, y: 86}, { x: 1376647200000, y: 81}, { x: 1379282400000, y: 83}, { x: 1381917600000, y: 95}, { x: 1384552800000, y: 86}, { x: 1387191600000, y: 83}, { x: 1389870000000, y: 89}, { x: 1392418800000, y: 90}, { x: 1394971200000, y: 94}, { x: 1397599200000, y: 100}, { x: 1400234400000, y: 100}, { x: 1402869600000, y: 99}, { x: 1405504800000, y: 99}, { x: 1408183200000, y: 93}, { x: 1410818400000, y: 97}, { x: 1413453600000, y: 98}], | |||||
| tooltip: { | |||||
| xDateFormat: '%B %Y', | |||||
| valueSuffix: ' % of best month' | |||||
| } | |||||
| }, { | |||||
| name: 'Revenue', | |||||
| id: 'revenue', | |||||
| type: 'area', | |||||
| data: [[1257033600000, 2], [1259625600000, 3], [1262304000000, 2], [1264982400000, 3], [1267401600000, 4], [1270080000000, 4], [1272672000000, 4], [1275350400000, 4], [1277942400000, 5], [1280620800000, 7], [1283299200000, 6], [1285891200000, 9], [1288569600000, 10], [1291161600000, 8], [1293840000000, 10], [1296518400000, 13], [1298937600000, 15], [1301616000000, 14], [1304208000000, 15], [1306886400000, 16], [1309478400000, 22], [1312156800000, 19], [1314835200000, 20], [1317427200000, 32], [1320105600000, 34], [1322697600000, 36], [1325376000000, 34], [1328054400000, 40], [1330560000000, 37], [1333238400000, 35], [1335830400000, 40], [1338508800000, 38], [1341100800000, 39], [1343779200000, 43], [1346457600000, 49], [1349049600000, 43], [1351728000000, 54], [1354320000000, 44], [1356998400000, 43], [1359676800000, 43], [1362096000000, 52], [1364774400000, 52], [1367366400000, 56], [1370044800000, 62], [1372636800000, 66], [1375315200000, 62], [1377993600000, 63], [1380585600000, 60], [1383264000000, 60], [1385856000000, 58], [1388534400000, 65], [1391212800000, 52], [1393632000000, 72], [1396310400000, 57], [1398902400000, 70], [1401580800000, 63], [1404172800000, 65], [1406851200000, 65], [1409529600000, 89], [1412121600000, 100]], | |||||
| tooltip: { | |||||
| xDateFormat: '%B %Y', | |||||
| valueSuffix: ' % of best month' | |||||
| } | |||||
| }, { | |||||
| yAxis: 1, | |||||
| name: 'Highsoft employees', | |||||
| id: 'employees', | |||||
| type: 'area', | |||||
| step: 'left', | |||||
| tooltip: { | |||||
| headerFormat: '<span style="font-size: 11px;color:#666">{point.x:%B %e, %Y}</span><br>', | |||||
| pointFormat: '{point.name}<br><b>{point.y}</b>', | |||||
| valueSuffix: ' employees' | |||||
| }, | |||||
| data: [ | |||||
| { x: Date.UTC(2009, 10, 1), y: 1, name: 'Torstein worked alone', image: 'Torstein' }, | |||||
| { x: Date.UTC(2010, 10, 20), y: 2, name: 'Grethe joined', image: 'Grethe' }, | |||||
| { x: Date.UTC(2011, 3, 1), y: 3, name: 'Erik joined', image: null }, | |||||
| { x: Date.UTC(2011, 7, 1), y: 4, name: 'Gert joined', image: 'Gert' }, | |||||
| { x: Date.UTC(2011, 7, 15), y: 5, name: 'Hilde joined', image: 'Hilde' }, | |||||
| { x: Date.UTC(2012, 5, 1), y: 6, name: 'Guro joined', image: 'Guro' }, | |||||
| { x: Date.UTC(2012, 8, 1), y: 5, name: 'Erik left', image: null }, | |||||
| { x: Date.UTC(2012, 8, 15), y: 6, name: 'Anne Jorunn joined', image: 'AnneJorunn' }, | |||||
| { x: Date.UTC(2013, 0, 1), y: 7, name: 'Hilde T. joined', image: null }, | |||||
| { x: Date.UTC(2013, 7, 1), y: 8, name: 'Jon Arild joined', image: 'JonArild' }, | |||||
| { x: Date.UTC(2013, 7, 20), y: 9, name: 'Øystein joined', image: 'Oystein' }, | |||||
| { x: Date.UTC(2013, 9, 1), y: 10, name: 'Stephane joined', image: 'Stephane' }, | |||||
| { x: Date.UTC(2014, 9, 1), y: 11, name: 'Anita joined', image: 'Anita' }, | |||||
| { x: Date.UTC(2014, 10, 27), y: 11, name: ' ', image: null } | |||||
| ] | |||||
| }] | |||||
| }; | |||||
| // Add flags for important milestones. This requires Highstock. | |||||
| if (Highcharts.seriesTypes.flags) { | |||||
| options.series.push({ | |||||
| type: 'flags', | |||||
| name: 'Cloud', | |||||
| color: '#333333', | |||||
| shape: 'squarepin', | |||||
| y: -80, | |||||
| data: [ | |||||
| { x: Date.UTC(2014, 4, 1), text: 'Highcharts Cloud Beta', title: 'Cloud', shape: 'squarepin' } | |||||
| ], | |||||
| showInLegend: false | |||||
| }, { | |||||
| type: 'flags', | |||||
| name: 'Highmaps', | |||||
| color: '#333333', | |||||
| shape: 'squarepin', | |||||
| y: -55, | |||||
| data: [ | |||||
| { x: Date.UTC(2014, 5, 13), text: 'Highmaps version 1.0 released', title: 'Maps' } | |||||
| ], | |||||
| showInLegend: false | |||||
| }, { | |||||
| type: 'flags', | |||||
| name: 'Highcharts', | |||||
| color: '#333333', | |||||
| shape: 'circlepin', | |||||
| data: [ | |||||
| { x: Date.UTC(2009, 10, 27), text: 'Highcharts version 1.0 released', title: '1.0' }, | |||||
| { x: Date.UTC(2010, 6, 13), text: 'Ported from canvas to SVG rendering', title: '2.0' }, | |||||
| { x: Date.UTC(2010, 10, 23), text: 'Dynamically resize and scale to text labels', title: '2.1' }, | |||||
| { x: Date.UTC(2011, 9, 18), text: 'Highstock version 1.0 released', title: 'Stock', shape: 'squarepin' }, | |||||
| { x: Date.UTC(2012, 7, 24), text: 'Gauges, polar charts and range series', title: '2.3' }, | |||||
| { x: Date.UTC(2013, 2, 22), text: 'Multitouch support, more series types', title: '3.0' }, | |||||
| { x: Date.UTC(2014, 3, 22), text: '3D charts, heatmaps', title: '4.0' } | |||||
| ], | |||||
| showInLegend: false | |||||
| }, { | |||||
| type: 'flags', | |||||
| name: 'Events', | |||||
| color: '#333333', | |||||
| fillColor: 'rgba(255,255,255,0.8)', | |||||
| data: [ | |||||
| { x: Date.UTC(2012, 10, 1), text: 'Highsoft won "Entrepeneur of the Year" in Sogn og Fjordane, Norway', title: 'Award' }, | |||||
| { x: Date.UTC(2012, 11, 25), text: 'Packt Publishing published <em>Learning Highcharts by Example</em>. Since then, many other books are written about Highcharts.', title: 'First book' }, | |||||
| { x: Date.UTC(2013, 4, 25), text: 'Highsoft nominated Norway\'s Startup of the Year', title: 'Award' }, | |||||
| { x: Date.UTC(2014, 4, 25), text: 'Highsoft nominated Best Startup in Nordic Startup Awards', title: 'Award' } | |||||
| ], | |||||
| onSeries: 'revenue', | |||||
| showInLegend: false | |||||
| }); | |||||
| } | |||||
| $('#container').highcharts(options); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highstock.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,87 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| title: { | |||||
| text: 'Combination chart' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'] | |||||
| }, | |||||
| labels: { | |||||
| items: [{ | |||||
| html: 'Total fruit consumption', | |||||
| style: { | |||||
| left: '50px', | |||||
| top: '18px', | |||||
| color: (Highcharts.theme && Highcharts.theme.textColor) || 'black' | |||||
| } | |||||
| }] | |||||
| }, | |||||
| series: [{ | |||||
| type: 'column', | |||||
| name: 'Jane', | |||||
| data: [3, 2, 1, 3, 4] | |||||
| }, { | |||||
| type: 'column', | |||||
| name: 'John', | |||||
| data: [2, 3, 5, 7, 6] | |||||
| }, { | |||||
| type: 'column', | |||||
| name: 'Joe', | |||||
| data: [4, 3, 3, 9, 0] | |||||
| }, { | |||||
| type: 'spline', | |||||
| name: 'Average', | |||||
| data: [3, 2.67, 3, 6.33, 3.33], | |||||
| marker: { | |||||
| lineWidth: 2, | |||||
| lineColor: Highcharts.getOptions().colors[3], | |||||
| fillColor: 'white' | |||||
| } | |||||
| }, { | |||||
| type: 'pie', | |||||
| name: 'Total consumption', | |||||
| data: [{ | |||||
| name: 'Jane', | |||||
| y: 13, | |||||
| color: Highcharts.getOptions().colors[0] // Jane's color | |||||
| }, { | |||||
| name: 'John', | |||||
| y: 23, | |||||
| color: Highcharts.getOptions().colors[1] // John's color | |||||
| }, { | |||||
| name: 'Joe', | |||||
| y: 19, | |||||
| color: Highcharts.getOptions().colors[2] // Joe's color | |||||
| }], | |||||
| center: [100, 80], | |||||
| size: 100, | |||||
| showInLegend: false, | |||||
| dataLabels: { | |||||
| enabled: false | |||||
| } | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,89 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'scatter', | |||||
| margin: [70, 50, 60, 80], | |||||
| events: { | |||||
| click: function (e) { | |||||
| // find the clicked values and the series | |||||
| var x = e.xAxis[0].value, | |||||
| y = e.yAxis[0].value, | |||||
| series = this.series[0]; | |||||
| // Add it | |||||
| series.addPoint([x, y]); | |||||
| } | |||||
| } | |||||
| }, | |||||
| title: { | |||||
| text: 'User supplied data' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Click the plot area to add a point. Click a point to remove it.' | |||||
| }, | |||||
| xAxis: { | |||||
| gridLineWidth: 1, | |||||
| minPadding: 0.2, | |||||
| maxPadding: 0.2, | |||||
| maxZoom: 60 | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Value' | |||||
| }, | |||||
| minPadding: 0.2, | |||||
| maxPadding: 0.2, | |||||
| maxZoom: 60, | |||||
| plotLines: [{ | |||||
| value: 0, | |||||
| width: 1, | |||||
| color: '#808080' | |||||
| }] | |||||
| }, | |||||
| legend: { | |||||
| enabled: false | |||||
| }, | |||||
| exporting: { | |||||
| enabled: false | |||||
| }, | |||||
| plotOptions: { | |||||
| series: { | |||||
| lineWidth: 1, | |||||
| point: { | |||||
| events: { | |||||
| 'click': function () { | |||||
| if (this.series.data.length > 1) { | |||||
| this.remove(); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| data: [[20, 20], [80, 80]] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; max-width: 700px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,260 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) { | |||||
| var detailChart; | |||||
| $(document).ready(function () { | |||||
| // create the detail chart | |||||
| function createDetail(masterChart) { | |||||
| // prepare the detail chart | |||||
| var detailData = [], | |||||
| detailStart = data[0][0]; | |||||
| $.each(masterChart.series[0].data, function () { | |||||
| if (this.x >= detailStart) { | |||||
| detailData.push(this.y); | |||||
| } | |||||
| }); | |||||
| // create a detail chart referenced by a global variable | |||||
| detailChart = $('#detail-container').highcharts({ | |||||
| chart: { | |||||
| marginBottom: 120, | |||||
| reflow: false, | |||||
| marginLeft: 50, | |||||
| marginRight: 20, | |||||
| style: { | |||||
| position: 'absolute' | |||||
| } | |||||
| }, | |||||
| credits: { | |||||
| enabled: false | |||||
| }, | |||||
| title: { | |||||
| text: 'Historical USD to EUR Exchange Rate' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Select an area by dragging across the lower chart' | |||||
| }, | |||||
| xAxis: { | |||||
| type: 'datetime' | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: null | |||||
| }, | |||||
| maxZoom: 0.1 | |||||
| }, | |||||
| tooltip: { | |||||
| formatter: function () { | |||||
| var point = this.points[0]; | |||||
| return '<b>' + point.series.name + '</b><br/>' + Highcharts.dateFormat('%A %B %e %Y', this.x) + ':<br/>' + | |||||
| '1 USD = ' + Highcharts.numberFormat(point.y, 2) + ' EUR'; | |||||
| }, | |||||
| shared: true | |||||
| }, | |||||
| legend: { | |||||
| enabled: false | |||||
| }, | |||||
| plotOptions: { | |||||
| series: { | |||||
| marker: { | |||||
| enabled: false, | |||||
| states: { | |||||
| hover: { | |||||
| enabled: true, | |||||
| radius: 3 | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'USD to EUR', | |||||
| pointStart: detailStart, | |||||
| pointInterval: 24 * 3600 * 1000, | |||||
| data: detailData | |||||
| }], | |||||
| exporting: { | |||||
| enabled: false | |||||
| } | |||||
| }).highcharts(); // return chart | |||||
| } | |||||
| // create the master chart | |||||
| function createMaster() { | |||||
| $('#master-container').highcharts({ | |||||
| chart: { | |||||
| reflow: false, | |||||
| borderWidth: 0, | |||||
| backgroundColor: null, | |||||
| marginLeft: 50, | |||||
| marginRight: 20, | |||||
| zoomType: 'x', | |||||
| events: { | |||||
| // listen to the selection event on the master chart to update the | |||||
| // extremes of the detail chart | |||||
| selection: function (event) { | |||||
| var extremesObject = event.xAxis[0], | |||||
| min = extremesObject.min, | |||||
| max = extremesObject.max, | |||||
| detailData = [], | |||||
| xAxis = this.xAxis[0]; | |||||
| // reverse engineer the last part of the data | |||||
| $.each(this.series[0].data, function () { | |||||
| if (this.x > min && this.x < max) { | |||||
| detailData.push([this.x, this.y]); | |||||
| } | |||||
| }); | |||||
| // move the plot bands to reflect the new detail span | |||||
| xAxis.removePlotBand('mask-before'); | |||||
| xAxis.addPlotBand({ | |||||
| id: 'mask-before', | |||||
| from: data[0][0], | |||||
| to: min, | |||||
| color: 'rgba(0, 0, 0, 0.2)' | |||||
| }); | |||||
| xAxis.removePlotBand('mask-after'); | |||||
| xAxis.addPlotBand({ | |||||
| id: 'mask-after', | |||||
| from: max, | |||||
| to: data[data.length - 1][0], | |||||
| color: 'rgba(0, 0, 0, 0.2)' | |||||
| }); | |||||
| detailChart.series[0].setData(detailData); | |||||
| return false; | |||||
| } | |||||
| } | |||||
| }, | |||||
| title: { | |||||
| text: null | |||||
| }, | |||||
| xAxis: { | |||||
| type: 'datetime', | |||||
| showLastTickLabel: true, | |||||
| maxZoom: 14 * 24 * 3600000, // fourteen days | |||||
| plotBands: [{ | |||||
| id: 'mask-before', | |||||
| from: data[0][0], | |||||
| to: data[data.length - 1][0], | |||||
| color: 'rgba(0, 0, 0, 0.2)' | |||||
| }], | |||||
| title: { | |||||
| text: null | |||||
| } | |||||
| }, | |||||
| yAxis: { | |||||
| gridLineWidth: 0, | |||||
| labels: { | |||||
| enabled: false | |||||
| }, | |||||
| title: { | |||||
| text: null | |||||
| }, | |||||
| min: 0.6, | |||||
| showFirstLabel: false | |||||
| }, | |||||
| tooltip: { | |||||
| formatter: function () { | |||||
| return false; | |||||
| } | |||||
| }, | |||||
| legend: { | |||||
| enabled: false | |||||
| }, | |||||
| credits: { | |||||
| enabled: false | |||||
| }, | |||||
| plotOptions: { | |||||
| series: { | |||||
| fillColor: { | |||||
| linearGradient: [0, 0, 0, 70], | |||||
| stops: [ | |||||
| [0, Highcharts.getOptions().colors[0]], | |||||
| [1, 'rgba(255,255,255,0)'] | |||||
| ] | |||||
| }, | |||||
| lineWidth: 1, | |||||
| marker: { | |||||
| enabled: false | |||||
| }, | |||||
| shadow: false, | |||||
| states: { | |||||
| hover: { | |||||
| lineWidth: 1 | |||||
| } | |||||
| }, | |||||
| enableMouseTracking: false | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| type: 'area', | |||||
| name: 'USD to EUR', | |||||
| pointInterval: 24 * 3600 * 1000, | |||||
| pointStart: data[0][0], | |||||
| data: data | |||||
| }], | |||||
| exporting: { | |||||
| enabled: false | |||||
| } | |||||
| }, function (masterChart) { | |||||
| createDetail(masterChart); | |||||
| }) | |||||
| .highcharts(); // return chart instance | |||||
| } | |||||
| // make the container smaller and add a second container for the master chart | |||||
| var $container = $('#container') | |||||
| .css('position', 'relative'); | |||||
| $('<div id="detail-container">') | |||||
| .appendTo($container); | |||||
| $('<div id="master-container">') | |||||
| .css({ | |||||
| position: 'absolute', | |||||
| top: 300, | |||||
| height: 100, | |||||
| width: '100%' | |||||
| }) | |||||
| .appendTo($container); | |||||
| // create master and in its callback, create the detail chart | |||||
| createMaster(); | |||||
| }); | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,97 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $(document).ready(function () { | |||||
| Highcharts.setOptions({ | |||||
| global: { | |||||
| useUTC: false | |||||
| } | |||||
| }); | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'spline', | |||||
| animation: Highcharts.svg, // don't animate in old IE | |||||
| marginRight: 10, | |||||
| events: { | |||||
| load: function () { | |||||
| // set up the updating of the chart each second | |||||
| var series = this.series[0]; | |||||
| setInterval(function () { | |||||
| var x = (new Date()).getTime(), // current time | |||||
| y = Math.random(); | |||||
| series.addPoint([x, y], true, true); | |||||
| }, 1000); | |||||
| } | |||||
| } | |||||
| }, | |||||
| title: { | |||||
| text: 'Live random data' | |||||
| }, | |||||
| xAxis: { | |||||
| type: 'datetime', | |||||
| tickPixelInterval: 150 | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Value' | |||||
| }, | |||||
| plotLines: [{ | |||||
| value: 0, | |||||
| width: 1, | |||||
| color: '#808080' | |||||
| }] | |||||
| }, | |||||
| tooltip: { | |||||
| formatter: function () { | |||||
| return '<b>' + this.series.name + '</b><br/>' + | |||||
| Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + | |||||
| Highcharts.numberFormat(this.y, 2); | |||||
| } | |||||
| }, | |||||
| legend: { | |||||
| enabled: false | |||||
| }, | |||||
| exporting: { | |||||
| enabled: false | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Random data', | |||||
| data: (function () { | |||||
| // generate an array of random data | |||||
| var data = [], | |||||
| time = (new Date()).getTime(), | |||||
| i; | |||||
| for (i = -19; i <= 0; i += 1) { | |||||
| data.push({ | |||||
| x: time + i * 1000, | |||||
| y: Math.random() | |||||
| }); | |||||
| } | |||||
| return data; | |||||
| }()) | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,99 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| var chart; | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| zoomType: 'xy' | |||||
| }, | |||||
| title: { | |||||
| text: 'Temperature vs Rainfall' | |||||
| }, | |||||
| xAxis: [{ | |||||
| categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | |||||
| }], | |||||
| yAxis: [{ // Primary yAxis | |||||
| labels: { | |||||
| format: '{value} °C', | |||||
| style: { | |||||
| color: Highcharts.getOptions().colors[1] | |||||
| } | |||||
| }, | |||||
| title: { | |||||
| text: 'Temperature', | |||||
| style: { | |||||
| color: Highcharts.getOptions().colors[1] | |||||
| } | |||||
| } | |||||
| }, { // Secondary yAxis | |||||
| title: { | |||||
| text: 'Rainfall', | |||||
| style: { | |||||
| color: Highcharts.getOptions().colors[0] | |||||
| } | |||||
| }, | |||||
| labels: { | |||||
| format: '{value} mm', | |||||
| style: { | |||||
| color: Highcharts.getOptions().colors[0] | |||||
| } | |||||
| }, | |||||
| opposite: true | |||||
| }], | |||||
| tooltip: { | |||||
| shared: true | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Rainfall', | |||||
| type: 'column', | |||||
| yAxis: 1, | |||||
| data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], | |||||
| tooltip: { | |||||
| pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f} mm</b> ' | |||||
| } | |||||
| }, { | |||||
| name: 'Rainfall error', | |||||
| type: 'errorbar', | |||||
| yAxis: 1, | |||||
| data: [[48, 51], [68, 73], [92, 110], [128, 136], [140, 150], [171, 179], [135, 143], [142, 149], [204, 220], [189, 199], [95, 110], [52, 56]], | |||||
| tooltip: { | |||||
| pointFormat: '(error range: {point.low}-{point.high} mm)<br/>' | |||||
| } | |||||
| }, { | |||||
| name: 'Temperature', | |||||
| type: 'spline', | |||||
| 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], | |||||
| tooltip: { | |||||
| pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f}°C</b> ' | |||||
| } | |||||
| }, { | |||||
| name: 'Temperature error', | |||||
| type: 'errorbar', | |||||
| data: [[6, 8], [5.9, 7.6], [9.4, 10.4], [14.1, 15.9], [18.0, 20.1], [21.0, 24.0], [23.2, 25.3], [26.1, 27.8], [23.2, 23.9], [18.0, 21.1], [12.9, 14.0], [7.6, 10.0]], | |||||
| tooltip: { | |||||
| pointFormat: '(error range: {point.low}-{point.high}°C)<br/>' | |||||
| } | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-more.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,64 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'funnel', | |||||
| marginRight: 100 | |||||
| }, | |||||
| title: { | |||||
| text: 'Sales funnel', | |||||
| x: -50 | |||||
| }, | |||||
| plotOptions: { | |||||
| series: { | |||||
| dataLabels: { | |||||
| enabled: true, | |||||
| format: '<b>{point.name}</b> ({point.y:,.0f})', | |||||
| color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', | |||||
| softConnector: true | |||||
| }, | |||||
| neckWidth: '30%', | |||||
| neckHeight: '25%' | |||||
| //-- Other available options | |||||
| // height: pixels or percent | |||||
| // width: pixels or percent | |||||
| } | |||||
| }, | |||||
| legend: { | |||||
| enabled: false | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Unique users', | |||||
| data: [ | |||||
| ['Website visits', 15654], | |||||
| ['Downloads', 4064], | |||||
| ['Requested price list', 1987], | |||||
| ['Invoice sent', 976], | |||||
| ['Finalized', 846] | |||||
| ] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/funnel.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,198 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| /** | |||||
| * Get the current time | |||||
| */ | |||||
| function getNow() { | |||||
| var now = new Date(); | |||||
| return { | |||||
| hours: now.getHours() + now.getMinutes() / 60, | |||||
| minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600, | |||||
| seconds: now.getSeconds() * 12 / 60 | |||||
| }; | |||||
| } | |||||
| /** | |||||
| * Pad numbers | |||||
| */ | |||||
| function pad(number, length) { | |||||
| // Create an array of the remaining length + 1 and join it with 0's | |||||
| return new Array((length || 2) + 1 - String(number).length).join(0) + number; | |||||
| } | |||||
| var now = getNow(); | |||||
| // Create the chart | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'gauge', | |||||
| plotBackgroundColor: null, | |||||
| plotBackgroundImage: null, | |||||
| plotBorderWidth: 0, | |||||
| plotShadow: false, | |||||
| height: 200 | |||||
| }, | |||||
| credits: { | |||||
| enabled: false | |||||
| }, | |||||
| title: { | |||||
| text: 'The Highcharts clock' | |||||
| }, | |||||
| pane: { | |||||
| background: [{ | |||||
| // default background | |||||
| }, { | |||||
| // reflex for supported browsers | |||||
| backgroundColor: Highcharts.svg ? { | |||||
| radialGradient: { | |||||
| cx: 0.5, | |||||
| cy: -0.4, | |||||
| r: 1.9 | |||||
| }, | |||||
| stops: [ | |||||
| [0.5, 'rgba(255, 255, 255, 0.2)'], | |||||
| [0.5, 'rgba(200, 200, 200, 0.2)'] | |||||
| ] | |||||
| } : null | |||||
| }] | |||||
| }, | |||||
| yAxis: { | |||||
| labels: { | |||||
| distance: -20 | |||||
| }, | |||||
| min: 0, | |||||
| max: 12, | |||||
| lineWidth: 0, | |||||
| showFirstLabel: false, | |||||
| minorTickInterval: 'auto', | |||||
| minorTickWidth: 1, | |||||
| minorTickLength: 5, | |||||
| minorTickPosition: 'inside', | |||||
| minorGridLineWidth: 0, | |||||
| minorTickColor: '#666', | |||||
| tickInterval: 1, | |||||
| tickWidth: 2, | |||||
| tickPosition: 'inside', | |||||
| tickLength: 10, | |||||
| tickColor: '#666', | |||||
| title: { | |||||
| text: 'Powered by<br/>Highcharts', | |||||
| style: { | |||||
| color: '#BBB', | |||||
| fontWeight: 'normal', | |||||
| fontSize: '8px', | |||||
| lineHeight: '10px' | |||||
| }, | |||||
| y: 10 | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| formatter: function () { | |||||
| return this.series.chart.tooltipText; | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| data: [{ | |||||
| id: 'hour', | |||||
| y: now.hours, | |||||
| dial: { | |||||
| radius: '60%', | |||||
| baseWidth: 4, | |||||
| baseLength: '95%', | |||||
| rearLength: 0 | |||||
| } | |||||
| }, { | |||||
| id: 'minute', | |||||
| y: now.minutes, | |||||
| dial: { | |||||
| baseLength: '95%', | |||||
| rearLength: 0 | |||||
| } | |||||
| }, { | |||||
| id: 'second', | |||||
| y: now.seconds, | |||||
| dial: { | |||||
| radius: '100%', | |||||
| baseWidth: 1, | |||||
| rearLength: '20%' | |||||
| } | |||||
| }], | |||||
| animation: false, | |||||
| dataLabels: { | |||||
| enabled: false | |||||
| } | |||||
| }] | |||||
| }, | |||||
| // Move | |||||
| function (chart) { | |||||
| setInterval(function () { | |||||
| now = getNow(); | |||||
| var hour = chart.get('hour'), | |||||
| minute = chart.get('minute'), | |||||
| second = chart.get('second'), | |||||
| // run animation unless we're wrapping around from 59 to 0 | |||||
| animation = now.seconds === 0 ? | |||||
| false : | |||||
| { | |||||
| easing: 'easeOutElastic' | |||||
| }; | |||||
| // Cache the tooltip text | |||||
| chart.tooltipText = | |||||
| pad(Math.floor(now.hours), 2) + ':' + | |||||
| pad(Math.floor(now.minutes * 5), 2) + ':' + | |||||
| pad(now.seconds * 5, 2); | |||||
| hour.update(now.hours, true, animation); | |||||
| minute.update(now.minutes, true, animation); | |||||
| second.update(now.seconds, true, animation); | |||||
| }, 1000); | |||||
| }); | |||||
| }); | |||||
| // Extend jQuery with some easing (copied from jQuery UI) | |||||
| $.extend($.easing, { | |||||
| easeOutElastic: function (x, t, b, c, d) { | |||||
| var s=1.70158;var p=0;var a=c; | |||||
| if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; | |||||
| if (a < Math.abs(c)) { a=c; var s=p/4; } | |||||
| else var s = p/(2*Math.PI) * Math.asin (c/a); | |||||
| return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; | |||||
| } | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-more.js"></script> | |||||
| <div id="container" style="width: 300px; height: 300px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,125 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'gauge', | |||||
| alignTicks: false, | |||||
| plotBackgroundColor: null, | |||||
| plotBackgroundImage: null, | |||||
| plotBorderWidth: 0, | |||||
| plotShadow: false | |||||
| }, | |||||
| title: { | |||||
| text: 'Speedometer with dual axes' | |||||
| }, | |||||
| pane: { | |||||
| startAngle: -150, | |||||
| endAngle: 150 | |||||
| }, | |||||
| yAxis: [{ | |||||
| min: 0, | |||||
| max: 200, | |||||
| lineColor: '#339', | |||||
| tickColor: '#339', | |||||
| minorTickColor: '#339', | |||||
| offset: -25, | |||||
| lineWidth: 2, | |||||
| labels: { | |||||
| distance: -20, | |||||
| rotation: 'auto' | |||||
| }, | |||||
| tickLength: 5, | |||||
| minorTickLength: 5, | |||||
| endOnTick: false | |||||
| }, { | |||||
| min: 0, | |||||
| max: 124, | |||||
| tickPosition: 'outside', | |||||
| lineColor: '#933', | |||||
| lineWidth: 2, | |||||
| minorTickPosition: 'outside', | |||||
| tickColor: '#933', | |||||
| minorTickColor: '#933', | |||||
| tickLength: 5, | |||||
| minorTickLength: 5, | |||||
| labels: { | |||||
| distance: 12, | |||||
| rotation: 'auto' | |||||
| }, | |||||
| offset: -20, | |||||
| endOnTick: false | |||||
| }], | |||||
| series: [{ | |||||
| name: 'Speed', | |||||
| data: [80], | |||||
| dataLabels: { | |||||
| formatter: function () { | |||||
| var kmh = this.y, | |||||
| mph = Math.round(kmh * 0.621); | |||||
| return '<span style="color:#339">' + kmh + ' km/h</span><br/>' + | |||||
| '<span style="color:#933">' + mph + ' mph</span>'; | |||||
| }, | |||||
| backgroundColor: { | |||||
| linearGradient: { | |||||
| x1: 0, | |||||
| y1: 0, | |||||
| x2: 0, | |||||
| y2: 1 | |||||
| }, | |||||
| stops: [ | |||||
| [0, '#DDD'], | |||||
| [1, '#FFF'] | |||||
| ] | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| valueSuffix: ' km/h' | |||||
| } | |||||
| }] | |||||
| }, | |||||
| // Add some life | |||||
| function (chart) { | |||||
| setInterval(function () { | |||||
| var point = chart.series[0].points[0], | |||||
| newVal, | |||||
| inc = Math.round((Math.random() - 0.5) * 20); | |||||
| newVal = point.y + inc; | |||||
| if (newVal < 0 || newVal > 200) { | |||||
| newVal = point.y - inc; | |||||
| } | |||||
| point.update(newVal); | |||||
| }, 3000); | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-more.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,175 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| var gaugeOptions = { | |||||
| chart: { | |||||
| type: 'solidgauge' | |||||
| }, | |||||
| title: null, | |||||
| pane: { | |||||
| center: ['50%', '85%'], | |||||
| size: '140%', | |||||
| startAngle: -90, | |||||
| endAngle: 90, | |||||
| background: { | |||||
| backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE', | |||||
| innerRadius: '60%', | |||||
| outerRadius: '100%', | |||||
| shape: 'arc' | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| enabled: false | |||||
| }, | |||||
| // the value axis | |||||
| yAxis: { | |||||
| stops: [ | |||||
| [0.1, '#55BF3B'], // green | |||||
| [0.5, '#DDDF0D'], // yellow | |||||
| [0.9, '#DF5353'] // red | |||||
| ], | |||||
| lineWidth: 0, | |||||
| minorTickInterval: null, | |||||
| tickPixelInterval: 400, | |||||
| tickWidth: 0, | |||||
| title: { | |||||
| y: -70 | |||||
| }, | |||||
| labels: { | |||||
| y: 16 | |||||
| } | |||||
| }, | |||||
| plotOptions: { | |||||
| solidgauge: { | |||||
| dataLabels: { | |||||
| y: 5, | |||||
| borderWidth: 0, | |||||
| useHTML: true | |||||
| } | |||||
| } | |||||
| } | |||||
| }; | |||||
| // The speed gauge | |||||
| $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, { | |||||
| yAxis: { | |||||
| min: 0, | |||||
| max: 200, | |||||
| title: { | |||||
| text: 'Speed' | |||||
| } | |||||
| }, | |||||
| credits: { | |||||
| enabled: false | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Speed', | |||||
| data: [80], | |||||
| dataLabels: { | |||||
| format: '<div style="text-align:center"><span style="font-size:25px;color:' + | |||||
| ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' + | |||||
| '<span style="font-size:12px;color:silver">km/h</span></div>' | |||||
| }, | |||||
| tooltip: { | |||||
| valueSuffix: ' km/h' | |||||
| } | |||||
| }] | |||||
| })); | |||||
| // The RPM gauge | |||||
| $('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, { | |||||
| yAxis: { | |||||
| min: 0, | |||||
| max: 5, | |||||
| title: { | |||||
| text: 'RPM' | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'RPM', | |||||
| data: [1], | |||||
| dataLabels: { | |||||
| format: '<div style="text-align:center"><span style="font-size:25px;color:' + | |||||
| ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' + | |||||
| '<span style="font-size:12px;color:silver">* 1000 / min</span></div>' | |||||
| }, | |||||
| tooltip: { | |||||
| valueSuffix: ' revolutions/min' | |||||
| } | |||||
| }] | |||||
| })); | |||||
| // Bring life to the dials | |||||
| setInterval(function () { | |||||
| // Speed | |||||
| var chart = $('#container-speed').highcharts(), | |||||
| point, | |||||
| newVal, | |||||
| inc; | |||||
| if (chart) { | |||||
| point = chart.series[0].points[0]; | |||||
| inc = Math.round((Math.random() - 0.5) * 100); | |||||
| newVal = point.y + inc; | |||||
| if (newVal < 0 || newVal > 200) { | |||||
| newVal = point.y - inc; | |||||
| } | |||||
| point.update(newVal); | |||||
| } | |||||
| // RPM | |||||
| chart = $('#container-rpm').highcharts(); | |||||
| if (chart) { | |||||
| point = chart.series[0].points[0]; | |||||
| inc = Math.random() - 0.5; | |||||
| newVal = point.y + inc; | |||||
| if (newVal < 0 || newVal > 5) { | |||||
| newVal = point.y - inc; | |||||
| } | |||||
| point.update(newVal); | |||||
| } | |||||
| }, 2000); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-more.js"></script> | |||||
| <script src="../../js/modules/solid-gauge.js"></script> | |||||
| <div style="width: 600px; height: 400px; margin: 0 auto"> | |||||
| <div id="container-speed" style="width: 300px; height: 200px; float: left"></div> | |||||
| <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div> | |||||
| </div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,137 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'gauge', | |||||
| plotBackgroundColor: null, | |||||
| plotBackgroundImage: null, | |||||
| plotBorderWidth: 0, | |||||
| plotShadow: false | |||||
| }, | |||||
| title: { | |||||
| text: 'Speedometer' | |||||
| }, | |||||
| pane: { | |||||
| startAngle: -150, | |||||
| endAngle: 150, | |||||
| background: [{ | |||||
| backgroundColor: { | |||||
| linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, | |||||
| stops: [ | |||||
| [0, '#FFF'], | |||||
| [1, '#333'] | |||||
| ] | |||||
| }, | |||||
| borderWidth: 0, | |||||
| outerRadius: '109%' | |||||
| }, { | |||||
| backgroundColor: { | |||||
| linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, | |||||
| stops: [ | |||||
| [0, '#333'], | |||||
| [1, '#FFF'] | |||||
| ] | |||||
| }, | |||||
| borderWidth: 1, | |||||
| outerRadius: '107%' | |||||
| }, { | |||||
| // default background | |||||
| }, { | |||||
| backgroundColor: '#DDD', | |||||
| borderWidth: 0, | |||||
| outerRadius: '105%', | |||||
| innerRadius: '103%' | |||||
| }] | |||||
| }, | |||||
| // the value axis | |||||
| yAxis: { | |||||
| min: 0, | |||||
| max: 200, | |||||
| minorTickInterval: 'auto', | |||||
| minorTickWidth: 1, | |||||
| minorTickLength: 10, | |||||
| minorTickPosition: 'inside', | |||||
| minorTickColor: '#666', | |||||
| tickPixelInterval: 30, | |||||
| tickWidth: 2, | |||||
| tickPosition: 'inside', | |||||
| tickLength: 10, | |||||
| tickColor: '#666', | |||||
| labels: { | |||||
| step: 2, | |||||
| rotation: 'auto' | |||||
| }, | |||||
| title: { | |||||
| text: 'km/h' | |||||
| }, | |||||
| plotBands: [{ | |||||
| from: 0, | |||||
| to: 120, | |||||
| color: '#55BF3B' // green | |||||
| }, { | |||||
| from: 120, | |||||
| to: 160, | |||||
| color: '#DDDF0D' // yellow | |||||
| }, { | |||||
| from: 160, | |||||
| to: 200, | |||||
| color: '#DF5353' // red | |||||
| }] | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Speed', | |||||
| data: [80], | |||||
| tooltip: { | |||||
| valueSuffix: ' km/h' | |||||
| } | |||||
| }] | |||||
| }, | |||||
| // Add some life | |||||
| function (chart) { | |||||
| if (!chart.renderer.forExport) { | |||||
| setInterval(function () { | |||||
| var point = chart.series[0].points[0], | |||||
| newVal, | |||||
| inc = Math.round((Math.random() - 0.5) * 20); | |||||
| newVal = point.y + inc; | |||||
| if (newVal < 0 || newVal > 200) { | |||||
| newVal = point.y - inc; | |||||
| } | |||||
| point.update(newVal); | |||||
| }, 3000); | |||||
| } | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-more.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,151 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'gauge', | |||||
| plotBorderWidth: 1, | |||||
| plotBackgroundColor: { | |||||
| linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, | |||||
| stops: [ | |||||
| [0, '#FFF4C6'], | |||||
| [0.3, '#FFFFFF'], | |||||
| [1, '#FFF4C6'] | |||||
| ] | |||||
| }, | |||||
| plotBackgroundImage: null, | |||||
| height: 200 | |||||
| }, | |||||
| title: { | |||||
| text: 'VU meter' | |||||
| }, | |||||
| pane: [{ | |||||
| startAngle: -45, | |||||
| endAngle: 45, | |||||
| background: null, | |||||
| center: ['25%', '145%'], | |||||
| size: 300 | |||||
| }, { | |||||
| startAngle: -45, | |||||
| endAngle: 45, | |||||
| background: null, | |||||
| center: ['75%', '145%'], | |||||
| size: 300 | |||||
| }], | |||||
| yAxis: [{ | |||||
| min: -20, | |||||
| max: 6, | |||||
| minorTickPosition: 'outside', | |||||
| tickPosition: 'outside', | |||||
| labels: { | |||||
| rotation: 'auto', | |||||
| distance: 20 | |||||
| }, | |||||
| plotBands: [{ | |||||
| from: 0, | |||||
| to: 6, | |||||
| color: '#C02316', | |||||
| innerRadius: '100%', | |||||
| outerRadius: '105%' | |||||
| }], | |||||
| pane: 0, | |||||
| title: { | |||||
| text: 'VU<br/><span style="font-size:8px">Channel A</span>', | |||||
| y: -40 | |||||
| } | |||||
| }, { | |||||
| min: -20, | |||||
| max: 6, | |||||
| minorTickPosition: 'outside', | |||||
| tickPosition: 'outside', | |||||
| labels: { | |||||
| rotation: 'auto', | |||||
| distance: 20 | |||||
| }, | |||||
| plotBands: [{ | |||||
| from: 0, | |||||
| to: 6, | |||||
| color: '#C02316', | |||||
| innerRadius: '100%', | |||||
| outerRadius: '105%' | |||||
| }], | |||||
| pane: 1, | |||||
| title: { | |||||
| text: 'VU<br/><span style="font-size:8px">Channel B</span>', | |||||
| y: -40 | |||||
| } | |||||
| }], | |||||
| plotOptions: { | |||||
| gauge: { | |||||
| dataLabels: { | |||||
| enabled: false | |||||
| }, | |||||
| dial: { | |||||
| radius: '100%' | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| data: [-20], | |||||
| yAxis: 0 | |||||
| }, { | |||||
| data: [-20], | |||||
| yAxis: 1 | |||||
| }] | |||||
| }, | |||||
| // Let the music play | |||||
| function (chart) { | |||||
| setInterval(function () { | |||||
| if (chart.series) { // the chart may be destroyed | |||||
| var left = chart.series[0].points[0], | |||||
| right = chart.series[1].points[0], | |||||
| leftVal, | |||||
| rightVal, | |||||
| inc = (Math.random() - 0.5) * 3; | |||||
| leftVal = left.y + inc; | |||||
| rightVal = leftVal + inc / 3; | |||||
| if (leftVal < -20 || leftVal > 6) { | |||||
| leftVal = left.y - inc; | |||||
| } | |||||
| if (rightVal < -20 || rightVal > 6) { | |||||
| rightVal = leftVal; | |||||
| } | |||||
| left.update(leftVal, false); | |||||
| right.update(rightVal, false); | |||||
| chart.redraw(); | |||||
| } | |||||
| }, 500); | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-more.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,80 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'heatmap', | |||||
| marginTop: 40, | |||||
| marginBottom: 80 | |||||
| }, | |||||
| title: { | |||||
| text: 'Sales per employee per weekday' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura'] | |||||
| }, | |||||
| yAxis: { | |||||
| categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], | |||||
| title: null | |||||
| }, | |||||
| colorAxis: { | |||||
| min: 0, | |||||
| minColor: '#FFFFFF', | |||||
| maxColor: Highcharts.getOptions().colors[0] | |||||
| }, | |||||
| legend: { | |||||
| align: 'right', | |||||
| layout: 'vertical', | |||||
| margin: 0, | |||||
| verticalAlign: 'top', | |||||
| y: 25, | |||||
| symbolHeight: 280 | |||||
| }, | |||||
| tooltip: { | |||||
| formatter: function () { | |||||
| return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' + | |||||
| this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>'; | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Sales per employee', | |||||
| borderWidth: 1, | |||||
| data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]], | |||||
| dataLabels: { | |||||
| enabled: true, | |||||
| color: '#000000' | |||||
| } | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/heatmap.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,135 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| // Get the CSV and create the chart | |||||
| $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) { | |||||
| $('#container').highcharts({ | |||||
| data: { | |||||
| csv: csv | |||||
| }, | |||||
| title: { | |||||
| text: 'Daily visits at www.highcharts.com' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Source: Google Analytics' | |||||
| }, | |||||
| xAxis: { | |||||
| tickInterval: 7 * 24 * 3600 * 1000, // one week | |||||
| tickWidth: 0, | |||||
| gridLineWidth: 1, | |||||
| labels: { | |||||
| align: 'left', | |||||
| x: 3, | |||||
| y: -3 | |||||
| } | |||||
| }, | |||||
| yAxis: [{ // left y axis | |||||
| title: { | |||||
| text: null | |||||
| }, | |||||
| labels: { | |||||
| align: 'left', | |||||
| x: 3, | |||||
| y: 16, | |||||
| format: '{value:.,0f}' | |||||
| }, | |||||
| showFirstLabel: false | |||||
| }, { // right y axis | |||||
| linkedTo: 0, | |||||
| gridLineWidth: 0, | |||||
| opposite: true, | |||||
| title: { | |||||
| text: null | |||||
| }, | |||||
| labels: { | |||||
| align: 'right', | |||||
| x: -3, | |||||
| y: 16, | |||||
| format: '{value:.,0f}' | |||||
| }, | |||||
| showFirstLabel: false | |||||
| }], | |||||
| legend: { | |||||
| align: 'left', | |||||
| verticalAlign: 'top', | |||||
| y: 20, | |||||
| floating: true, | |||||
| borderWidth: 0 | |||||
| }, | |||||
| tooltip: { | |||||
| shared: true, | |||||
| crosshairs: true | |||||
| }, | |||||
| plotOptions: { | |||||
| series: { | |||||
| cursor: 'pointer', | |||||
| point: { | |||||
| events: { | |||||
| click: function (e) { | |||||
| hs.htmlExpand(null, { | |||||
| pageOrigin: { | |||||
| x: e.pageX || e.clientX, | |||||
| y: e.pageY || e.clientY | |||||
| }, | |||||
| headingText: this.series.name, | |||||
| maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' + | |||||
| this.y + ' visits', | |||||
| width: 200 | |||||
| }); | |||||
| } | |||||
| } | |||||
| }, | |||||
| marker: { | |||||
| lineWidth: 1 | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'All visits', | |||||
| lineWidth: 4, | |||||
| marker: { | |||||
| radius: 4 | |||||
| } | |||||
| }, { | |||||
| name: 'New visitors' | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/data.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <!-- Additional files for the Highslide popup effect --> | |||||
| <script src="http://www.highcharts.com/joomla/media/com_demo/js/highslide-full.min.js"></script> | |||||
| <script src="http://www.highcharts.com/joomla/media/com_demo/js/highslide.config.js" charset="utf-8"></script> | |||||
| <link rel="stylesheet" type="text/css" href="http://www.highcharts.com/joomla/media/com_demo/highslide.css" /> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,69 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| title: { | |||||
| text: 'Monthly Average Temperature', | |||||
| x: -20 //center | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Source: WorldClimate.com', | |||||
| x: -20 | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', | |||||
| 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Temperature (°C)' | |||||
| }, | |||||
| plotLines: [{ | |||||
| value: 0, | |||||
| width: 1, | |||||
| color: '#808080' | |||||
| }] | |||||
| }, | |||||
| tooltip: { | |||||
| valueSuffix: '°C' | |||||
| }, | |||||
| legend: { | |||||
| layout: 'vertical', | |||||
| align: 'right', | |||||
| verticalAlign: 'middle', | |||||
| borderWidth: 0 | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Tokyo', | |||||
| 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] | |||||
| }, { | |||||
| name: 'New York', | |||||
| 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] | |||||
| }, { | |||||
| name: 'Berlin', | |||||
| 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] | |||||
| }, { | |||||
| name: 'London', | |||||
| 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] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,57 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'line' | |||||
| }, | |||||
| title: { | |||||
| text: 'Monthly Average Temperature' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Source: WorldClimate.com' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Temperature (°C)' | |||||
| } | |||||
| }, | |||||
| plotOptions: { | |||||
| line: { | |||||
| dataLabels: { | |||||
| enabled: true | |||||
| }, | |||||
| enableMouseTracking: false | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Tokyo', | |||||
| data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] | |||||
| }, { | |||||
| name: 'London', | |||||
| 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] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,48 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| title: { | |||||
| text: 'Logarithmic axis demo' | |||||
| }, | |||||
| xAxis: { | |||||
| tickInterval: 1 | |||||
| }, | |||||
| yAxis: { | |||||
| type: 'logarithmic', | |||||
| minorTickInterval: 0.1 | |||||
| }, | |||||
| tooltip: { | |||||
| headerFormat: '<b>{series.name}</b><br />', | |||||
| pointFormat: 'x = {point.x}, y = {point.y}' | |||||
| }, | |||||
| series: [{ | |||||
| data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512], | |||||
| pointStart: 1 | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,81 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| zoomType: 'x' | |||||
| }, | |||||
| title: { | |||||
| text: 'USD to EUR exchange rate over time' | |||||
| }, | |||||
| subtitle: { | |||||
| text: document.ontouchstart === undefined ? | |||||
| 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in' | |||||
| }, | |||||
| xAxis: { | |||||
| type: 'datetime' | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Exchange rate' | |||||
| } | |||||
| }, | |||||
| legend: { | |||||
| enabled: false | |||||
| }, | |||||
| plotOptions: { | |||||
| area: { | |||||
| fillColor: { | |||||
| linearGradient: { | |||||
| x1: 0, | |||||
| y1: 0, | |||||
| x2: 0, | |||||
| y2: 1 | |||||
| }, | |||||
| stops: [ | |||||
| [0, Highcharts.getOptions().colors[0]], | |||||
| [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] | |||||
| ] | |||||
| }, | |||||
| marker: { | |||||
| radius: 2 | |||||
| }, | |||||
| lineWidth: 1, | |||||
| states: { | |||||
| hover: { | |||||
| lineWidth: 1 | |||||
| } | |||||
| }, | |||||
| threshold: null | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| type: 'area', | |||||
| name: 'USD to EUR', | |||||
| data: data | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,75 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| plotBackgroundColor: null, | |||||
| plotBorderWidth: null, | |||||
| plotShadow: false, | |||||
| type: 'pie' | |||||
| }, | |||||
| title: { | |||||
| text: 'Browser market shares January, 2015 to May, 2015' | |||||
| }, | |||||
| tooltip: { | |||||
| pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' | |||||
| }, | |||||
| plotOptions: { | |||||
| pie: { | |||||
| allowPointSelect: true, | |||||
| cursor: 'pointer', | |||||
| dataLabels: { | |||||
| enabled: true, | |||||
| format: '<b>{point.name}</b>: {point.percentage:.1f} %', | |||||
| style: { | |||||
| color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' | |||||
| } | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: "Brands", | |||||
| colorByPoint: true, | |||||
| data: [{ | |||||
| name: "Microsoft Internet Explorer", | |||||
| y: 56.33 | |||||
| }, { | |||||
| name: "Chrome", | |||||
| y: 24.03, | |||||
| sliced: true, | |||||
| selected: true | |||||
| }, { | |||||
| name: "Firefox", | |||||
| y: 10.38 | |||||
| }, { | |||||
| name: "Safari", | |||||
| y: 4.77 | |||||
| }, { | |||||
| name: "Opera", | |||||
| y: 0.91 | |||||
| }, { | |||||
| name: "Proprietary or Undetectable", | |||||
| y: 0.2 | |||||
| }] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,163 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| var colors = Highcharts.getOptions().colors, | |||||
| categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'], | |||||
| data = [{ | |||||
| y: 56.33, | |||||
| color: colors[0], | |||||
| drilldown: { | |||||
| name: 'MSIE versions', | |||||
| categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', 'MSIE 10.0', 'MSIE 11.0'], | |||||
| data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13], | |||||
| color: colors[0] | |||||
| } | |||||
| }, { | |||||
| y: 10.38, | |||||
| color: colors[1], | |||||
| drilldown: { | |||||
| name: 'Firefox versions', | |||||
| categories: ['Firefox v31', 'Firefox v32', 'Firefox v33', 'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'], | |||||
| data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02], | |||||
| color: colors[1] | |||||
| } | |||||
| }, { | |||||
| y: 24.03, | |||||
| color: colors[2], | |||||
| drilldown: { | |||||
| name: 'Chrome versions', | |||||
| categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0', 'Chrome v33.0', 'Chrome v34.0', | |||||
| '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' | |||||
| ], | |||||
| 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], | |||||
| color: colors[2] | |||||
| } | |||||
| }, { | |||||
| y: 4.77, | |||||
| color: colors[3], | |||||
| drilldown: { | |||||
| name: 'Safari versions', | |||||
| categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'], | |||||
| data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56], | |||||
| color: colors[3] | |||||
| } | |||||
| }, { | |||||
| y: 0.91, | |||||
| color: colors[4], | |||||
| drilldown: { | |||||
| name: 'Opera versions', | |||||
| categories: ['Opera v12.x', 'Opera v27', 'Opera v28', 'Opera v29'], | |||||
| data: [0.34, 0.17, 0.24, 0.16], | |||||
| color: colors[4] | |||||
| } | |||||
| }, { | |||||
| y: 0.2, | |||||
| color: colors[5], | |||||
| drilldown: { | |||||
| name: 'Proprietary or Undetectable', | |||||
| categories: [], | |||||
| data: [], | |||||
| color: colors[5] | |||||
| } | |||||
| }], | |||||
| browserData = [], | |||||
| versionsData = [], | |||||
| i, | |||||
| j, | |||||
| dataLen = data.length, | |||||
| drillDataLen, | |||||
| brightness; | |||||
| // Build the data arrays | |||||
| for (i = 0; i < dataLen; i += 1) { | |||||
| // add browser data | |||||
| browserData.push({ | |||||
| name: categories[i], | |||||
| y: data[i].y, | |||||
| color: data[i].color | |||||
| }); | |||||
| // add version data | |||||
| drillDataLen = data[i].drilldown.data.length; | |||||
| for (j = 0; j < drillDataLen; j += 1) { | |||||
| brightness = 0.2 - (j / drillDataLen) / 5; | |||||
| versionsData.push({ | |||||
| name: data[i].drilldown.categories[j], | |||||
| y: data[i].drilldown.data[j], | |||||
| color: Highcharts.Color(data[i].color).brighten(brightness).get() | |||||
| }); | |||||
| } | |||||
| } | |||||
| // Create the chart | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'pie' | |||||
| }, | |||||
| title: { | |||||
| text: 'Browser market share, January, 2015 to May, 2015' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>' | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Total percent market share' | |||||
| } | |||||
| }, | |||||
| plotOptions: { | |||||
| pie: { | |||||
| shadow: false, | |||||
| center: ['50%', '50%'] | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| valueSuffix: '%' | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Browsers', | |||||
| data: browserData, | |||||
| size: '60%', | |||||
| dataLabels: { | |||||
| formatter: function () { | |||||
| return this.y > 5 ? this.point.name : null; | |||||
| }, | |||||
| color: 'white', | |||||
| distance: -30 | |||||
| } | |||||
| }, { | |||||
| name: 'Versions', | |||||
| data: versionsData, | |||||
| size: '80%', | |||||
| innerSize: '60%', | |||||
| dataLabels: { | |||||
| formatter: function () { | |||||
| // display only if larger than 1 | |||||
| return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null; | |||||
| } | |||||
| } | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,188 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| // Create the chart | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'pie' | |||||
| }, | |||||
| title: { | |||||
| text: 'Browser market shares. January, 2015 to May, 2015' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Click the slices to view versions. Source: netmarketshare.com.' | |||||
| }, | |||||
| plotOptions: { | |||||
| series: { | |||||
| dataLabels: { | |||||
| enabled: true, | |||||
| format: '{point.name}: {point.y:.1f}%' | |||||
| } | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| headerFormat: '<span style="font-size:11px">{series.name}</span><br>', | |||||
| pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>' | |||||
| }, | |||||
| series: [{ | |||||
| name: "Brands", | |||||
| colorByPoint: true, | |||||
| data: [{ | |||||
| name: "Microsoft Internet Explorer", | |||||
| y: 56.33, | |||||
| drilldown: "Microsoft Internet Explorer" | |||||
| }, { | |||||
| name: "Chrome", | |||||
| y: 24.03, | |||||
| drilldown: "Chrome" | |||||
| }, { | |||||
| name: "Firefox", | |||||
| y: 10.38, | |||||
| drilldown: "Firefox" | |||||
| }, { | |||||
| name: "Safari", | |||||
| y: 4.77, | |||||
| drilldown: "Safari" | |||||
| }, { | |||||
| name: "Opera", | |||||
| y: 0.91, | |||||
| drilldown: "Opera" | |||||
| }, { | |||||
| name: "Proprietary or Undetectable", | |||||
| y: 0.2, | |||||
| drilldown: null | |||||
| }] | |||||
| }], | |||||
| drilldown: { | |||||
| series: [{ | |||||
| name: "Microsoft Internet Explorer", | |||||
| id: "Microsoft Internet Explorer", | |||||
| data: [ | |||||
| ["v11.0", 24.13], | |||||
| ["v8.0", 17.2], | |||||
| ["v9.0", 8.11], | |||||
| ["v10.0", 5.33], | |||||
| ["v6.0", 1.06], | |||||
| ["v7.0", 0.5] | |||||
| ] | |||||
| }, { | |||||
| name: "Chrome", | |||||
| id: "Chrome", | |||||
| data: [ | |||||
| ["v40.0", 5], | |||||
| ["v41.0", 4.32], | |||||
| ["v42.0", 3.68], | |||||
| ["v39.0", 2.96], | |||||
| ["v36.0", 2.53], | |||||
| ["v43.0", 1.45], | |||||
| ["v31.0", 1.24], | |||||
| ["v35.0", 0.85], | |||||
| ["v38.0", 0.6], | |||||
| ["v32.0", 0.55], | |||||
| ["v37.0", 0.38], | |||||
| ["v33.0", 0.19], | |||||
| ["v34.0", 0.14], | |||||
| ["v30.0", 0.14] | |||||
| ] | |||||
| }, { | |||||
| name: "Firefox", | |||||
| id: "Firefox", | |||||
| data: [ | |||||
| ["v35", 2.76], | |||||
| ["v36", 2.32], | |||||
| ["v37", 2.31], | |||||
| ["v34", 1.27], | |||||
| ["v38", 1.02], | |||||
| ["v31", 0.33], | |||||
| ["v33", 0.22], | |||||
| ["v32", 0.15] | |||||
| ] | |||||
| }, { | |||||
| name: "Safari", | |||||
| id: "Safari", | |||||
| data: [ | |||||
| ["v8.0", 2.56], | |||||
| ["v7.1", 0.77], | |||||
| ["v5.1", 0.42], | |||||
| ["v5.0", 0.3], | |||||
| ["v6.1", 0.29], | |||||
| ["v7.0", 0.26], | |||||
| ["v6.2", 0.17] | |||||
| ] | |||||
| }, { | |||||
| name: "Opera", | |||||
| id: "Opera", | |||||
| data: [ | |||||
| ["v12.x", 0.34], | |||||
| ["v28", 0.24], | |||||
| ["v27", 0.17], | |||||
| ["v29", 0.16] | |||||
| ] | |||||
| }] | |||||
| } | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/data.js"></script> | |||||
| <script src="../../js/modules/drilldown.js"></script> | |||||
| <div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div> | |||||
| <!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. --> | |||||
| <pre id="tsv" style="display:none">Browser Version Total Market Share | |||||
| Microsoft Internet Explorer 8.0 26.61% | |||||
| Microsoft Internet Explorer 9.0 16.96% | |||||
| Chrome 18.0 8.01% | |||||
| Chrome 19.0 7.73% | |||||
| Firefox 12 6.72% | |||||
| Microsoft Internet Explorer 6.0 6.40% | |||||
| Firefox 11 4.72% | |||||
| Microsoft Internet Explorer 7.0 3.55% | |||||
| Safari 5.1 3.53% | |||||
| Firefox 13 2.16% | |||||
| Firefox 3.6 1.87% | |||||
| Opera 11.x 1.30% | |||||
| Chrome 17.0 1.13% | |||||
| Firefox 10 0.90% | |||||
| Safari 5.0 0.85% | |||||
| Firefox 9.0 0.65% | |||||
| Firefox 8.0 0.55% | |||||
| Firefox 4.0 0.50% | |||||
| Chrome 16.0 0.45% | |||||
| Firefox 3.0 0.36% | |||||
| Firefox 3.5 0.36% | |||||
| Firefox 6.0 0.32% | |||||
| Firefox 5.0 0.31% | |||||
| Firefox 7.0 0.29% | |||||
| Proprietary or Undetectable 0.29% | |||||
| Chrome 18.0 - Maxthon Edition 0.26% | |||||
| Chrome 14.0 0.25% | |||||
| Chrome 20.0 0.24% | |||||
| Chrome 15.0 0.18% | |||||
| Chrome 12.0 0.16% | |||||
| Opera 12.x 0.15% | |||||
| Safari 4.0 0.14% | |||||
| Chrome 13.0 0.13% | |||||
| Safari 4.1 0.12% | |||||
| Chrome 11.0 0.10% | |||||
| Firefox 14 0.10% | |||||
| Firefox 2.0 0.09% | |||||
| Chrome 10.0 0.09% | |||||
| Opera 10.x 0.09% | |||||
| Microsoft Internet Explorer 8.0 - Tencent Traveler Edition 0.09%</pre> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,83 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| // Radialize the colors | |||||
| Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) { | |||||
| return { | |||||
| radialGradient: { | |||||
| cx: 0.5, | |||||
| cy: 0.3, | |||||
| r: 0.7 | |||||
| }, | |||||
| stops: [ | |||||
| [0, color], | |||||
| [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken | |||||
| ] | |||||
| }; | |||||
| }); | |||||
| // Build the chart | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| plotBackgroundColor: null, | |||||
| plotBorderWidth: null, | |||||
| plotShadow: false, | |||||
| type: 'pie' | |||||
| }, | |||||
| title: { | |||||
| text: 'Browser market shares. January, 2015 to May, 2015' | |||||
| }, | |||||
| tooltip: { | |||||
| pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' | |||||
| }, | |||||
| plotOptions: { | |||||
| pie: { | |||||
| allowPointSelect: true, | |||||
| cursor: 'pointer', | |||||
| dataLabels: { | |||||
| enabled: true, | |||||
| format: '<b>{point.name}</b>: {point.percentage:.1f} %', | |||||
| style: { | |||||
| color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' | |||||
| }, | |||||
| connectorColor: 'silver' | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: "Brands", | |||||
| data: [ | |||||
| {name: "Microsoft Internet Explorer", y: 56.33}, | |||||
| { | |||||
| name: "Chrome", | |||||
| y: 24.03, | |||||
| sliced: true, | |||||
| selected: true | |||||
| }, | |||||
| {name: "Firefox", y: 10.38}, | |||||
| {name: "Safari", y: 4.77}, {name: "Opera", y: 0.91}, | |||||
| {name: "Proprietary or Undetectable", y: 0.2} | |||||
| ] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,77 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $(document).ready(function () { | |||||
| // Build the chart | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| plotBackgroundColor: null, | |||||
| plotBorderWidth: null, | |||||
| plotShadow: false, | |||||
| type: 'pie' | |||||
| }, | |||||
| title: { | |||||
| text: 'Browser market shares January, 2015 to May, 2015' | |||||
| }, | |||||
| tooltip: { | |||||
| pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' | |||||
| }, | |||||
| plotOptions: { | |||||
| pie: { | |||||
| allowPointSelect: true, | |||||
| cursor: 'pointer', | |||||
| dataLabels: { | |||||
| enabled: false | |||||
| }, | |||||
| showInLegend: true | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: "Brands", | |||||
| colorByPoint: true, | |||||
| data: [{ | |||||
| name: "Microsoft Internet Explorer", | |||||
| y: 56.33 | |||||
| }, { | |||||
| name: "Chrome", | |||||
| y: 24.03, | |||||
| sliced: true, | |||||
| selected: true | |||||
| }, { | |||||
| name: "Firefox", | |||||
| y: 10.38 | |||||
| }, { | |||||
| name: "Safari", | |||||
| y: 4.77 | |||||
| }, { | |||||
| name: "Opera", | |||||
| y: 0.91 | |||||
| }, { | |||||
| name: "Proprietary or Undetectable", | |||||
| y: 0.2 | |||||
| }] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,77 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| // Make monochrome colors and set them as default for all pies | |||||
| Highcharts.getOptions().plotOptions.pie.colors = (function () { | |||||
| var colors = [], | |||||
| base = Highcharts.getOptions().colors[0], | |||||
| i; | |||||
| for (i = 0; i < 10; i += 1) { | |||||
| // Start out with a darkened base color (negative brighten), and end | |||||
| // up with a much brighter color | |||||
| colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get()); | |||||
| } | |||||
| return colors; | |||||
| }()); | |||||
| // Build the chart | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| plotBackgroundColor: null, | |||||
| plotBorderWidth: null, | |||||
| plotShadow: false, | |||||
| type: 'pie' | |||||
| }, | |||||
| title: { | |||||
| text: 'Browser market shares at a specific website, 2014' | |||||
| }, | |||||
| tooltip: { | |||||
| pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' | |||||
| }, | |||||
| plotOptions: { | |||||
| pie: { | |||||
| allowPointSelect: true, | |||||
| cursor: 'pointer', | |||||
| dataLabels: { | |||||
| enabled: true, | |||||
| format: '<b>{point.name}</b>: {point.percentage:.1f} %', | |||||
| style: { | |||||
| color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' | |||||
| } | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: "Brands", | |||||
| data: [ | |||||
| {name: "Microsoft Internet Explorer", y: 56.33}, | |||||
| {name: "Chrome", y: 24.03}, | |||||
| {name: "Firefox", y: 10.38}, | |||||
| {name: "Safari", y: 4.77}, | |||||
| {name: "Opera", y: 0.91}, | |||||
| {name: "Proprietary or Undetectable", y: 0.2} | |||||
| ] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,76 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| plotBackgroundColor: null, | |||||
| plotBorderWidth: 0, | |||||
| plotShadow: false | |||||
| }, | |||||
| title: { | |||||
| text: 'Browser<br>shares<br>2015', | |||||
| align: 'center', | |||||
| verticalAlign: 'middle', | |||||
| y: 40 | |||||
| }, | |||||
| tooltip: { | |||||
| pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' | |||||
| }, | |||||
| plotOptions: { | |||||
| pie: { | |||||
| dataLabels: { | |||||
| enabled: true, | |||||
| distance: -50, | |||||
| style: { | |||||
| fontWeight: 'bold', | |||||
| color: 'white', | |||||
| textShadow: '0px 1px 2px black' | |||||
| } | |||||
| }, | |||||
| startAngle: -90, | |||||
| endAngle: 90, | |||||
| center: ['50%', '75%'] | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| type: 'pie', | |||||
| name: 'Browser share', | |||||
| innerSize: '50%', | |||||
| data: [ | |||||
| ['Firefox', 10.38], | |||||
| ['IE', 56.33], | |||||
| ['Chrome', 24.03], | |||||
| ['Safari', 4.77], | |||||
| ['Opera', 0.91], | |||||
| { | |||||
| name: 'Proprietary or Undetectable', | |||||
| y: 0.2, | |||||
| dataLabels: { | |||||
| enabled: false | |||||
| } | |||||
| } | |||||
| ] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,77 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| polar: true, | |||||
| type: 'line' | |||||
| }, | |||||
| title: { | |||||
| text: 'Budget vs spending', | |||||
| x: -80 | |||||
| }, | |||||
| pane: { | |||||
| size: '80%' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['Sales', 'Marketing', 'Development', 'Customer Support', | |||||
| 'Information Technology', 'Administration'], | |||||
| tickmarkPlacement: 'on', | |||||
| lineWidth: 0 | |||||
| }, | |||||
| yAxis: { | |||||
| gridLineInterpolation: 'polygon', | |||||
| lineWidth: 0, | |||||
| min: 0 | |||||
| }, | |||||
| tooltip: { | |||||
| shared: true, | |||||
| pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>' | |||||
| }, | |||||
| legend: { | |||||
| align: 'right', | |||||
| verticalAlign: 'top', | |||||
| y: 70, | |||||
| layout: 'vertical' | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Allocated Budget', | |||||
| data: [43000, 19000, 60000, 35000, 17000, 10000], | |||||
| pointPlacement: 'on' | |||||
| }, { | |||||
| name: 'Actual Spending', | |||||
| data: [50000, 39000, 42000, 31000, 26000, 14000], | |||||
| pointPlacement: 'on' | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-more.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,299 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| // Parse the data from an inline table using the Highcharts Data plugin | |||||
| $('#container').highcharts({ | |||||
| data: { | |||||
| table: 'freq', | |||||
| startRow: 1, | |||||
| endRow: 17, | |||||
| endColumn: 7 | |||||
| }, | |||||
| chart: { | |||||
| polar: true, | |||||
| type: 'column' | |||||
| }, | |||||
| title: { | |||||
| text: 'Wind rose for South Shore Met Station, Oregon' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Source: or.water.usgs.gov' | |||||
| }, | |||||
| pane: { | |||||
| size: '85%' | |||||
| }, | |||||
| legend: { | |||||
| align: 'right', | |||||
| verticalAlign: 'top', | |||||
| y: 100, | |||||
| layout: 'vertical' | |||||
| }, | |||||
| xAxis: { | |||||
| tickmarkPlacement: 'on' | |||||
| }, | |||||
| yAxis: { | |||||
| min: 0, | |||||
| endOnTick: false, | |||||
| showLastLabel: true, | |||||
| title: { | |||||
| text: 'Frequency (%)' | |||||
| }, | |||||
| labels: { | |||||
| formatter: function () { | |||||
| return this.value + '%'; | |||||
| } | |||||
| }, | |||||
| reversedStacks: false | |||||
| }, | |||||
| tooltip: { | |||||
| valueSuffix: '%' | |||||
| }, | |||||
| plotOptions: { | |||||
| series: { | |||||
| stacking: 'normal', | |||||
| shadow: false, | |||||
| groupPadding: 0, | |||||
| pointPlacement: 'on' | |||||
| } | |||||
| } | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-more.js"></script> | |||||
| <script src="../../js/modules/data.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div> | |||||
| <div style="display:none"> | |||||
| <!-- Source: http://or.water.usgs.gov/cgi-bin/grapher/graph_windrose.pl --> | |||||
| <table id="freq" border="0" cellspacing="0" cellpadding="0"> | |||||
| <tr nowrap bgcolor="#CCCCFF"> | |||||
| <th colspan="9" class="hdr">Table of Frequencies (percent)</th> | |||||
| </tr> | |||||
| <tr nowrap bgcolor="#CCCCFF"> | |||||
| <th class="freq">Direction</th> | |||||
| <th class="freq">< 0.5 m/s</th> | |||||
| <th class="freq">0.5-2 m/s</th> | |||||
| <th class="freq">2-4 m/s</th> | |||||
| <th class="freq">4-6 m/s</th> | |||||
| <th class="freq">6-8 m/s</th> | |||||
| <th class="freq">8-10 m/s</th> | |||||
| <th class="freq">> 10 m/s</th> | |||||
| <th class="freq">Total</th> | |||||
| </tr> | |||||
| <tr nowrap> | |||||
| <td class="dir">N</td> | |||||
| <td class="data">1.81</td> | |||||
| <td class="data">1.78</td> | |||||
| <td class="data">0.16</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">3.75</td> | |||||
| </tr> | |||||
| <tr nowrap bgcolor="#DDDDDD"> | |||||
| <td class="dir">NNE</td> | |||||
| <td class="data">0.62</td> | |||||
| <td class="data">1.09</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">1.71</td> | |||||
| </tr> | |||||
| <tr nowrap> | |||||
| <td class="dir">NE</td> | |||||
| <td class="data">0.82</td> | |||||
| <td class="data">0.82</td> | |||||
| <td class="data">0.07</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">1.71</td> | |||||
| </tr> | |||||
| <tr nowrap bgcolor="#DDDDDD"> | |||||
| <td class="dir">ENE</td> | |||||
| <td class="data">0.59</td> | |||||
| <td class="data">1.22</td> | |||||
| <td class="data">0.07</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">1.88</td> | |||||
| </tr> | |||||
| <tr nowrap> | |||||
| <td class="dir">E</td> | |||||
| <td class="data">0.62</td> | |||||
| <td class="data">2.20</td> | |||||
| <td class="data">0.49</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">3.32</td> | |||||
| </tr> | |||||
| <tr nowrap bgcolor="#DDDDDD"> | |||||
| <td class="dir">ESE</td> | |||||
| <td class="data">1.22</td> | |||||
| <td class="data">2.01</td> | |||||
| <td class="data">1.55</td> | |||||
| <td class="data">0.30</td> | |||||
| <td class="data">0.13</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">5.20</td> | |||||
| </tr> | |||||
| <tr nowrap> | |||||
| <td class="dir">SE</td> | |||||
| <td class="data">1.61</td> | |||||
| <td class="data">3.06</td> | |||||
| <td class="data">2.37</td> | |||||
| <td class="data">2.14</td> | |||||
| <td class="data">1.74</td> | |||||
| <td class="data">0.39</td> | |||||
| <td class="data">0.13</td> | |||||
| <td class="data">11.45</td> | |||||
| </tr> | |||||
| <tr nowrap bgcolor="#DDDDDD"> | |||||
| <td class="dir">SSE</td> | |||||
| <td class="data">2.04</td> | |||||
| <td class="data">3.42</td> | |||||
| <td class="data">1.97</td> | |||||
| <td class="data">0.86</td> | |||||
| <td class="data">0.53</td> | |||||
| <td class="data">0.49</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">9.31</td> | |||||
| </tr> | |||||
| <tr nowrap> | |||||
| <td class="dir">S</td> | |||||
| <td class="data">2.66</td> | |||||
| <td class="data">4.74</td> | |||||
| <td class="data">0.43</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">7.83</td> | |||||
| </tr> | |||||
| <tr nowrap bgcolor="#DDDDDD"> | |||||
| <td class="dir">SSW</td> | |||||
| <td class="data">2.96</td> | |||||
| <td class="data">4.14</td> | |||||
| <td class="data">0.26</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">7.37</td> | |||||
| </tr> | |||||
| <tr nowrap> | |||||
| <td class="dir">SW</td> | |||||
| <td class="data">2.53</td> | |||||
| <td class="data">4.01</td> | |||||
| <td class="data">1.22</td> | |||||
| <td class="data">0.49</td> | |||||
| <td class="data">0.13</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">8.39</td> | |||||
| </tr> | |||||
| <tr nowrap bgcolor="#DDDDDD"> | |||||
| <td class="dir">WSW</td> | |||||
| <td class="data">1.97</td> | |||||
| <td class="data">2.66</td> | |||||
| <td class="data">1.97</td> | |||||
| <td class="data">0.79</td> | |||||
| <td class="data">0.30</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">7.70</td> | |||||
| </tr> | |||||
| <tr nowrap> | |||||
| <td class="dir">W</td> | |||||
| <td class="data">1.64</td> | |||||
| <td class="data">1.71</td> | |||||
| <td class="data">0.92</td> | |||||
| <td class="data">1.45</td> | |||||
| <td class="data">0.26</td> | |||||
| <td class="data">0.10</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">6.09</td> | |||||
| </tr> | |||||
| <tr nowrap bgcolor="#DDDDDD"> | |||||
| <td class="dir">WNW</td> | |||||
| <td class="data">1.32</td> | |||||
| <td class="data">2.40</td> | |||||
| <td class="data">0.99</td> | |||||
| <td class="data">1.61</td> | |||||
| <td class="data">0.33</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">0.00</td> | |||||
| <td class="data">6.64</td> | |||||
| </tr> | |||||
| <tr nowrap> | |||||
| <td class="dir">NW</td> | |||||
| <td class="data">1.58</td> | |||||
| <td class="data">4.28</td> | |||||
| <td class="data">1.28</td> | |||||
| <td class="data">0.76</td> | |||||
| <td class="data">0.66</td> | |||||
| <td class="data">0.69</td> | |||||
| <td class="data">0.03</td> | |||||
| <td class="data">9.28</td> | |||||
| </tr> | |||||
| <tr nowrap bgcolor="#DDDDDD"> | |||||
| <td class="dir">NNW</td> | |||||
| <td class="data">1.51</td> | |||||
| <td class="data">5.00</td> | |||||
| <td class="data">1.32</td> | |||||
| <td class="data">0.13</td> | |||||
| <td class="data">0.23</td> | |||||
| <td class="data">0.13</td> | |||||
| <td class="data">0.07</td> | |||||
| <td class="data">8.39</td> | |||||
| </tr> | |||||
| <tr nowrap> | |||||
| <td class="totals">Total</td> | |||||
| <td class="totals">25.53</td> | |||||
| <td class="totals">44.54</td> | |||||
| <td class="totals">15.07</td> | |||||
| <td class="totals">8.52</td> | |||||
| <td class="totals">4.31</td> | |||||
| <td class="totals">1.81</td> | |||||
| <td class="totals">0.23</td> | |||||
| <td class="totals"> </td> | |||||
| </tr> | |||||
| </table> | |||||
| </div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,81 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| polar: true | |||||
| }, | |||||
| title: { | |||||
| text: 'Highcharts Polar Chart' | |||||
| }, | |||||
| pane: { | |||||
| startAngle: 0, | |||||
| endAngle: 360 | |||||
| }, | |||||
| xAxis: { | |||||
| tickInterval: 45, | |||||
| min: 0, | |||||
| max: 360, | |||||
| labels: { | |||||
| formatter: function () { | |||||
| return this.value + '°'; | |||||
| } | |||||
| } | |||||
| }, | |||||
| yAxis: { | |||||
| min: 0 | |||||
| }, | |||||
| plotOptions: { | |||||
| series: { | |||||
| pointStart: 0, | |||||
| pointInterval: 45 | |||||
| }, | |||||
| column: { | |||||
| pointPadding: 0, | |||||
| groupPadding: 0 | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| type: 'column', | |||||
| name: 'Column', | |||||
| data: [8, 7, 6, 5, 4, 3, 2, 1], | |||||
| pointPlacement: 'between' | |||||
| }, { | |||||
| type: 'line', | |||||
| name: 'Line', | |||||
| data: [1, 2, 3, 4, 5, 6, 7, 8] | |||||
| }, { | |||||
| type: 'area', | |||||
| name: 'Area', | |||||
| data: [1, 8, 2, 7, 3, 6, 4, 5] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-more.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; max-width: 400px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,125 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| title: { | |||||
| text: 'Height vs Weight' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Polygon series in Highcharts' | |||||
| }, | |||||
| xAxis: { | |||||
| gridLineWidth: 1, | |||||
| title: { | |||||
| enabled: true, | |||||
| text: 'Height (cm)' | |||||
| }, | |||||
| startOnTick: true, | |||||
| endOnTick: true, | |||||
| showLastLabel: true | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Weight (kg)' | |||||
| } | |||||
| }, | |||||
| legend: { | |||||
| layout: 'vertical', | |||||
| align: 'right', | |||||
| verticalAlign: 'middle' | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Target', | |||||
| type: 'polygon', | |||||
| data: [[153, 42], [149, 46], [149, 55], [152, 60], [159, 70], [170, 77], [180, 70], | |||||
| [180, 60], [173, 52], [166, 45]], | |||||
| color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get(), | |||||
| enableMouseTracking: false | |||||
| }, { | |||||
| name: 'Observations', | |||||
| type: 'scatter', | |||||
| color: Highcharts.getOptions().colors[1], | |||||
| data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6], | |||||
| [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2], | |||||
| [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0], | |||||
| [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8], | |||||
| [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8], | |||||
| [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0], | |||||
| [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8], | |||||
| [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6], | |||||
| [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3], | |||||
| [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8], | |||||
| [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3], | |||||
| [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3], | |||||
| [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0], | |||||
| [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7], | |||||
| [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5], | |||||
| [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2], | |||||
| [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8], | |||||
| [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9], | |||||
| [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2], | |||||
| [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4], | |||||
| [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4], | |||||
| [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2], | |||||
| [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0], | |||||
| [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0], | |||||
| [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4], | |||||
| [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4], | |||||
| [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5], | |||||
| [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5], | |||||
| [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2], | |||||
| [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2], | |||||
| [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3], | |||||
| [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5], | |||||
| [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4], | |||||
| [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6], | |||||
| [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8], | |||||
| [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1], | |||||
| [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5], | |||||
| [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2], | |||||
| [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6], | |||||
| [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0], | |||||
| [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0], | |||||
| [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9], | |||||
| [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1], | |||||
| [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4], | |||||
| [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7], | |||||
| [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5], | |||||
| [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8], | |||||
| [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0], | |||||
| [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9], | |||||
| [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6], | |||||
| [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8], | |||||
| [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]] | |||||
| }], | |||||
| tooltip: { | |||||
| headerFormat: '<b>{series.name}</b><br>', | |||||
| pointFormat: '{point.x} cm, {point.y} kg' | |||||
| } | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-more.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,58 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'pyramid', | |||||
| marginRight: 100 | |||||
| }, | |||||
| title: { | |||||
| text: 'Sales pyramid', | |||||
| x: -50 | |||||
| }, | |||||
| plotOptions: { | |||||
| series: { | |||||
| dataLabels: { | |||||
| enabled: true, | |||||
| format: '<b>{point.name}</b> ({point.y:,.0f})', | |||||
| color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', | |||||
| softConnector: true | |||||
| } | |||||
| } | |||||
| }, | |||||
| legend: { | |||||
| enabled: false | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Unique users', | |||||
| data: [ | |||||
| ['Website visits', 15654], | |||||
| ['Downloads', 4064], | |||||
| ['Requested price list', 1987], | |||||
| ['Invoice sent', 976], | |||||
| ['Finalized', 846] | |||||
| ] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/funnel.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,268 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| backgroundColor: 'white', | |||||
| events: { | |||||
| load: function () { | |||||
| // Draw the flow chart | |||||
| var ren = this.renderer, | |||||
| colors = Highcharts.getOptions().colors, | |||||
| rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5], | |||||
| leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5]; | |||||
| // Separator, client from service | |||||
| ren.path(['M', 120, 40, 'L', 120, 330]) | |||||
| .attr({ | |||||
| 'stroke-width': 2, | |||||
| stroke: 'silver', | |||||
| dashstyle: 'dash' | |||||
| }) | |||||
| .add(); | |||||
| // Separator, CLI from service | |||||
| ren.path(['M', 420, 40, 'L', 420, 330]) | |||||
| .attr({ | |||||
| 'stroke-width': 2, | |||||
| stroke: 'silver', | |||||
| dashstyle: 'dash' | |||||
| }) | |||||
| .add(); | |||||
| // Headers | |||||
| ren.label('Web client', 20, 40) | |||||
| .css({ | |||||
| fontWeight: 'bold' | |||||
| }) | |||||
| .add(); | |||||
| ren.label('Web service / CLI', 220, 40) | |||||
| .css({ | |||||
| fontWeight: 'bold' | |||||
| }) | |||||
| .add(); | |||||
| ren.label('Command line client', 440, 40) | |||||
| .css({ | |||||
| fontWeight: 'bold' | |||||
| }) | |||||
| .add(); | |||||
| // SaaS client label | |||||
| ren.label('SaaS client<br/>(browser or<br/>script)', 10, 82) | |||||
| .attr({ | |||||
| fill: colors[0], | |||||
| stroke: 'white', | |||||
| 'stroke-width': 2, | |||||
| padding: 5, | |||||
| r: 5 | |||||
| }) | |||||
| .css({ | |||||
| color: 'white' | |||||
| }) | |||||
| .add() | |||||
| .shadow(true); | |||||
| // Arrow from SaaS client to Phantom JS | |||||
| ren.path(rightArrow) | |||||
| .attr({ | |||||
| 'stroke-width': 2, | |||||
| stroke: colors[3] | |||||
| }) | |||||
| .translate(95, 95) | |||||
| .add(); | |||||
| ren.label('POST options in JSON', 90, 75) | |||||
| .css({ | |||||
| fontSize: '10px', | |||||
| color: colors[3] | |||||
| }) | |||||
| .add(); | |||||
| ren.label('PhantomJS', 210, 82) | |||||
| .attr({ | |||||
| r: 5, | |||||
| width: 100, | |||||
| fill: colors[1] | |||||
| }) | |||||
| .css({ | |||||
| color: 'white', | |||||
| fontWeight: 'bold' | |||||
| }) | |||||
| .add(); | |||||
| // Arrow from Phantom JS to Batik | |||||
| ren.path(['M', 250, 110, 'L', 250, 185, 'L', 245, 180, 'M', 250, 185, 'L', 255, 180]) | |||||
| .attr({ | |||||
| 'stroke-width': 2, | |||||
| stroke: colors[3] | |||||
| }) | |||||
| .add(); | |||||
| ren.label('SVG', 255, 120) | |||||
| .css({ | |||||
| color: colors[3], | |||||
| fontSize: '10px' | |||||
| }) | |||||
| .add(); | |||||
| ren.label('Batik', 210, 200) | |||||
| .attr({ | |||||
| r: 5, | |||||
| width: 100, | |||||
| fill: colors[1] | |||||
| }) | |||||
| .css({ | |||||
| color: 'white', | |||||
| fontWeight: 'bold' | |||||
| }) | |||||
| .add(); | |||||
| // Arrow from Batik to SaaS client | |||||
| ren.path(['M', 235, 185, 'L', 235, 155, 'C', 235, 130, 235, 130, 215, 130, | |||||
| 'L', 95, 130, 'L', 100, 125, 'M', 95, 130, 'L', 100, 135]) | |||||
| .attr({ | |||||
| 'stroke-width': 2, | |||||
| stroke: colors[3] | |||||
| }) | |||||
| .add(); | |||||
| ren.label('Rasterized image', 100, 110) | |||||
| .css({ | |||||
| color: colors[3], | |||||
| fontSize: '10px' | |||||
| }) | |||||
| .add(); | |||||
| // Browser label | |||||
| ren.label('Browser<br/>running<br/>Highcharts', 10, 180) | |||||
| .attr({ | |||||
| fill: colors[0], | |||||
| stroke: 'white', | |||||
| 'stroke-width': 2, | |||||
| padding: 5, | |||||
| r: 5 | |||||
| }) | |||||
| .css({ | |||||
| color: 'white', | |||||
| width: '100px' | |||||
| }) | |||||
| .add() | |||||
| .shadow(true); | |||||
| // Arrow from Browser to Batik | |||||
| ren.path(rightArrow) | |||||
| .attr({ | |||||
| 'stroke-width': 2, | |||||
| stroke: colors[1] | |||||
| }) | |||||
| .translate(95, 205) | |||||
| .add(); | |||||
| ren.label('POST SVG', 110, 185) | |||||
| .css({ | |||||
| color: colors[1], | |||||
| fontSize: '10px' | |||||
| }) | |||||
| .add(); | |||||
| // Arrow from Batik to Browser | |||||
| ren.path(leftArrow) | |||||
| .attr({ | |||||
| 'stroke-width': 2, | |||||
| stroke: colors[1] | |||||
| }) | |||||
| .translate(95, 215) | |||||
| .add(); | |||||
| ren.label('Rasterized image', 100, 215) | |||||
| .css({ | |||||
| color: colors[1], | |||||
| fontSize: '10px' | |||||
| }) | |||||
| .add(); | |||||
| // Script label | |||||
| ren.label('Script', 450, 82) | |||||
| .attr({ | |||||
| fill: colors[2], | |||||
| stroke: 'white', | |||||
| 'stroke-width': 2, | |||||
| padding: 5, | |||||
| r: 5 | |||||
| }) | |||||
| .css({ | |||||
| color: 'white', | |||||
| width: '100px' | |||||
| }) | |||||
| .add() | |||||
| .shadow(true); | |||||
| // Arrow from Script to PhantomJS | |||||
| ren.path(leftArrow) | |||||
| .attr({ | |||||
| 'stroke-width': 2, | |||||
| stroke: colors[2] | |||||
| }) | |||||
| .translate(330, 90) | |||||
| .add(); | |||||
| ren.label('Command', 340, 70) | |||||
| .css({ | |||||
| color: colors[2], | |||||
| fontSize: '10px' | |||||
| }) | |||||
| .add(); | |||||
| // Arrow from PhantomJS to Script | |||||
| ren.path(rightArrow) | |||||
| .attr({ | |||||
| 'stroke-width': 2, | |||||
| stroke: colors[2] | |||||
| }) | |||||
| .translate(330, 100) | |||||
| .add(); | |||||
| ren.label('Rasterized image', 330, 100) | |||||
| .css({ | |||||
| color: colors[2], | |||||
| fontSize: '10px' | |||||
| }) | |||||
| .add(); | |||||
| } | |||||
| } | |||||
| }, | |||||
| title: { | |||||
| text: 'Highcharts export server overview', | |||||
| style: { | |||||
| color: 'black' | |||||
| } | |||||
| } | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="width: 600px; height: 250px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,195 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'scatter', | |||||
| zoomType: 'xy' | |||||
| }, | |||||
| title: { | |||||
| text: 'Height Versus Weight of 507 Individuals by Gender' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Source: Heinz 2003' | |||||
| }, | |||||
| xAxis: { | |||||
| title: { | |||||
| enabled: true, | |||||
| text: 'Height (cm)' | |||||
| }, | |||||
| startOnTick: true, | |||||
| endOnTick: true, | |||||
| showLastLabel: true | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Weight (kg)' | |||||
| } | |||||
| }, | |||||
| legend: { | |||||
| layout: 'vertical', | |||||
| align: 'left', | |||||
| verticalAlign: 'top', | |||||
| x: 100, | |||||
| y: 70, | |||||
| floating: true, | |||||
| backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF', | |||||
| borderWidth: 1 | |||||
| }, | |||||
| plotOptions: { | |||||
| scatter: { | |||||
| marker: { | |||||
| radius: 5, | |||||
| states: { | |||||
| hover: { | |||||
| enabled: true, | |||||
| lineColor: 'rgb(100,100,100)' | |||||
| } | |||||
| } | |||||
| }, | |||||
| states: { | |||||
| hover: { | |||||
| marker: { | |||||
| enabled: false | |||||
| } | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| headerFormat: '<b>{series.name}</b><br>', | |||||
| pointFormat: '{point.x} cm, {point.y} kg' | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Female', | |||||
| color: 'rgba(223, 83, 83, .5)', | |||||
| data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6], | |||||
| [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2], | |||||
| [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0], | |||||
| [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8], | |||||
| [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8], | |||||
| [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0], | |||||
| [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8], | |||||
| [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6], | |||||
| [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3], | |||||
| [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8], | |||||
| [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3], | |||||
| [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3], | |||||
| [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0], | |||||
| [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7], | |||||
| [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5], | |||||
| [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2], | |||||
| [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8], | |||||
| [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9], | |||||
| [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2], | |||||
| [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4], | |||||
| [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4], | |||||
| [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2], | |||||
| [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0], | |||||
| [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0], | |||||
| [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4], | |||||
| [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4], | |||||
| [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5], | |||||
| [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5], | |||||
| [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2], | |||||
| [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2], | |||||
| [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3], | |||||
| [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5], | |||||
| [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4], | |||||
| [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6], | |||||
| [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8], | |||||
| [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1], | |||||
| [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5], | |||||
| [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2], | |||||
| [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6], | |||||
| [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0], | |||||
| [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0], | |||||
| [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9], | |||||
| [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1], | |||||
| [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4], | |||||
| [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7], | |||||
| [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5], | |||||
| [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8], | |||||
| [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0], | |||||
| [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9], | |||||
| [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6], | |||||
| [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8], | |||||
| [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]] | |||||
| }, { | |||||
| name: 'Male', | |||||
| color: 'rgba(119, 152, 191, .5)', | |||||
| data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8], | |||||
| [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6], | |||||
| [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0], | |||||
| [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9], | |||||
| [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8], | |||||
| [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9], | |||||
| [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1], | |||||
| [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1], | |||||
| [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6], | |||||
| [182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1], | |||||
| [169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2], | |||||
| [163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2], | |||||
| [177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0], | |||||
| [167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2], | |||||
| [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2], | |||||
| [174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9], | |||||
| [180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9], | |||||
| [180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0], | |||||
| [175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3], | |||||
| [176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7], | |||||
| [184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5], | |||||
| [157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3], | |||||
| [165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1], | |||||
| [185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0], | |||||
| [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2], | |||||
| [188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1], | |||||
| [166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6], | |||||
| [185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1], | |||||
| [190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5], | |||||
| [176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1], | |||||
| [172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5], | |||||
| [167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5], | |||||
| [172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9], | |||||
| [193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1], | |||||
| [167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8], | |||||
| [188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5], | |||||
| [171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4], | |||||
| [182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5], | |||||
| [188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6], | |||||
| [175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7], | |||||
| [177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5], | |||||
| [174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6], | |||||
| [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7], | |||||
| [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0], | |||||
| [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3], | |||||
| [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3], | |||||
| [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9], | |||||
| [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1], | |||||
| [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1], | |||||
| [180.3, 83.2], [180.3, 83.2]] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,675 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| #result { | |||||
| text-align: right; | |||||
| color: gray; | |||||
| min-height: 2em; | |||||
| } | |||||
| #table-sparkline { | |||||
| margin: 0 auto; | |||||
| border-collapse: collapse; | |||||
| } | |||||
| th { | |||||
| font-weight: bold; | |||||
| text-align: left; | |||||
| } | |||||
| td, th { | |||||
| padding: 5px; | |||||
| border-bottom: 1px solid silver; | |||||
| height: 20px; | |||||
| } | |||||
| thead th { | |||||
| border-top: 2px solid gray; | |||||
| border-bottom: 2px solid gray; | |||||
| } | |||||
| .highcharts-tooltip>span { | |||||
| background: white; | |||||
| border: 1px solid silver; | |||||
| border-radius: 3px; | |||||
| box-shadow: 1px 1px 2px #888; | |||||
| padding: 8px; | |||||
| } | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| /** | |||||
| * Create a constructor for sparklines that takes some sensible defaults and merges in the individual | |||||
| * chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine'). | |||||
| */ | |||||
| Highcharts.SparkLine = function (options, callback) { | |||||
| var defaultOptions = { | |||||
| chart: { | |||||
| renderTo: (options.chart && options.chart.renderTo) || this, | |||||
| backgroundColor: null, | |||||
| borderWidth: 0, | |||||
| type: 'area', | |||||
| margin: [2, 0, 2, 0], | |||||
| width: 120, | |||||
| height: 20, | |||||
| style: { | |||||
| overflow: 'visible' | |||||
| }, | |||||
| skipClone: true | |||||
| }, | |||||
| title: { | |||||
| text: '' | |||||
| }, | |||||
| credits: { | |||||
| enabled: false | |||||
| }, | |||||
| xAxis: { | |||||
| labels: { | |||||
| enabled: false | |||||
| }, | |||||
| title: { | |||||
| text: null | |||||
| }, | |||||
| startOnTick: false, | |||||
| endOnTick: false, | |||||
| tickPositions: [] | |||||
| }, | |||||
| yAxis: { | |||||
| endOnTick: false, | |||||
| startOnTick: false, | |||||
| labels: { | |||||
| enabled: false | |||||
| }, | |||||
| title: { | |||||
| text: null | |||||
| }, | |||||
| tickPositions: [0] | |||||
| }, | |||||
| legend: { | |||||
| enabled: false | |||||
| }, | |||||
| tooltip: { | |||||
| backgroundColor: null, | |||||
| borderWidth: 0, | |||||
| shadow: false, | |||||
| useHTML: true, | |||||
| hideDelay: 0, | |||||
| shared: true, | |||||
| padding: 0, | |||||
| positioner: function (w, h, point) { | |||||
| return { x: point.plotX - w / 2, y: point.plotY - h}; | |||||
| } | |||||
| }, | |||||
| plotOptions: { | |||||
| series: { | |||||
| animation: false, | |||||
| lineWidth: 1, | |||||
| shadow: false, | |||||
| states: { | |||||
| hover: { | |||||
| lineWidth: 1 | |||||
| } | |||||
| }, | |||||
| marker: { | |||||
| radius: 1, | |||||
| states: { | |||||
| hover: { | |||||
| radius: 2 | |||||
| } | |||||
| } | |||||
| }, | |||||
| fillOpacity: 0.25 | |||||
| }, | |||||
| column: { | |||||
| negativeColor: '#910000', | |||||
| borderColor: 'silver' | |||||
| } | |||||
| } | |||||
| }; | |||||
| options = Highcharts.merge(defaultOptions, options); | |||||
| return new Highcharts.Chart(options, callback); | |||||
| }; | |||||
| var start = +new Date(), | |||||
| $tds = $("td[data-sparkline]"), | |||||
| fullLen = $tds.length, | |||||
| n = 0; | |||||
| // Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile | |||||
| // can take some seconds, so we split the input into chunks and apply them in timeouts | |||||
| // in order avoid locking up the browser process and allow interaction. | |||||
| function doChunk() { | |||||
| var time = +new Date(), | |||||
| i, | |||||
| len = $tds.length, | |||||
| $td, | |||||
| stringdata, | |||||
| arr, | |||||
| data, | |||||
| chart; | |||||
| for (i = 0; i < len; i += 1) { | |||||
| $td = $($tds[i]); | |||||
| stringdata = $td.data('sparkline'); | |||||
| arr = stringdata.split('; '); | |||||
| data = $.map(arr[0].split(', '), parseFloat); | |||||
| chart = {}; | |||||
| if (arr[1]) { | |||||
| chart.type = arr[1]; | |||||
| } | |||||
| $td.highcharts('SparkLine', { | |||||
| series: [{ | |||||
| data: data, | |||||
| pointStart: 1 | |||||
| }], | |||||
| tooltip: { | |||||
| headerFormat: '<span style="font-size: 10px">' + $td.parent().find('th').html() + ', Q{point.x}:</span><br/>', | |||||
| pointFormat: '<b>{point.y}.000</b> USD' | |||||
| }, | |||||
| chart: chart | |||||
| }); | |||||
| n += 1; | |||||
| // If the process takes too much time, run a timeout to allow interaction with the browser | |||||
| if (new Date() - time > 500) { | |||||
| $tds.splice(0, i + 1); | |||||
| setTimeout(doChunk, 0); | |||||
| break; | |||||
| } | |||||
| // Print a feedback on the performance | |||||
| if (n === fullLen) { | |||||
| $('#result').html('Generated ' + fullLen + ' sparklines in ' + (new Date() - start) + ' ms'); | |||||
| } | |||||
| } | |||||
| } | |||||
| doChunk(); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <div id="result"></div> | |||||
| <table id="table-sparkline"> | |||||
| <thead> | |||||
| <tr> | |||||
| <th>State</th> | |||||
| <th>Income</th> | |||||
| <th>Income per quarter</th> | |||||
| <th>Costs</th> | |||||
| <th>Costs per quarter</th> | |||||
| <th>Result</th> | |||||
| <th>Result per quarter</th> | |||||
| </tr> | |||||
| </thead> | |||||
| <tbody id="tbody-sparkline"> | |||||
| <tr> | |||||
| <th>Alabama</th> | |||||
| <td>254</td> | |||||
| <td data-sparkline="71, 78, 39, 66 "/> | |||||
| <td>296</td> | |||||
| <td data-sparkline="68, 52, 80, 96 "/> | |||||
| <td>-42</td> | |||||
| <td data-sparkline="3, 26, -41, -30 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Alaska</th> | |||||
| <td>246</td> | |||||
| <td data-sparkline="87, 44, 74, 41 "/> | |||||
| <td>181</td> | |||||
| <td data-sparkline="29, 54, 73, 25 "/> | |||||
| <td>65</td> | |||||
| <td data-sparkline="58, -10, 1, 16 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Arizona</th> | |||||
| <td>101</td> | |||||
| <td data-sparkline="56, 12, 8, 25 "/> | |||||
| <td>191</td> | |||||
| <td data-sparkline="69, 14, 53, 55 "/> | |||||
| <td>-90</td> | |||||
| <td data-sparkline="-13, -2, -45, -30 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Arkansas</th> | |||||
| <td>303</td> | |||||
| <td data-sparkline="81, 50, 78, 94 "/> | |||||
| <td>76</td> | |||||
| <td data-sparkline="36, 15, 14, 11 "/> | |||||
| <td>227</td> | |||||
| <td data-sparkline="45, 35, 64, 83 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>California</th> | |||||
| <td>200</td> | |||||
| <td data-sparkline="61, 80, 10, 49 "/> | |||||
| <td>217</td> | |||||
| <td data-sparkline="100, 8, 52, 57 "/> | |||||
| <td>-17</td> | |||||
| <td data-sparkline="-39, 72, -42, -8 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Colorado</th> | |||||
| <td>118</td> | |||||
| <td data-sparkline="13, 48, 21, 36 "/> | |||||
| <td>273</td> | |||||
| <td data-sparkline="98, 86, 8, 81 "/> | |||||
| <td>-155</td> | |||||
| <td data-sparkline="-85, -38, 13, -45 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Connecticut</th> | |||||
| <td>201</td> | |||||
| <td data-sparkline="6, 64, 44, 87 "/> | |||||
| <td>148</td> | |||||
| <td data-sparkline="60, 13, 73, 2 "/> | |||||
| <td>53</td> | |||||
| <td data-sparkline="-54, 51, -29, 85 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Delaware</th> | |||||
| <td>161</td> | |||||
| <td data-sparkline="7, 27, 49, 78 "/> | |||||
| <td>298</td> | |||||
| <td data-sparkline="19, 90, 100, 89 "/> | |||||
| <td>-137</td> | |||||
| <td data-sparkline="-12, -63, -51, -11 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>District of Columbia</th> | |||||
| <td>106</td> | |||||
| <td data-sparkline="18, 39, 27, 22 "/> | |||||
| <td>185</td> | |||||
| <td data-sparkline="62, 97, 24, 2 "/> | |||||
| <td>-79</td> | |||||
| <td data-sparkline="-44, -58, 3, 20 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Florida</th> | |||||
| <td>249</td> | |||||
| <td data-sparkline="51, 24, 90, 84 "/> | |||||
| <td>244</td> | |||||
| <td data-sparkline="47, 40, 74, 83 "/> | |||||
| <td>5</td> | |||||
| <td data-sparkline="4, -16, 16, 1 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Georgia</th> | |||||
| <td>183</td> | |||||
| <td data-sparkline="36, 80, 39, 28 "/> | |||||
| <td>212</td> | |||||
| <td data-sparkline="43, 25, 52, 92 "/> | |||||
| <td>-29</td> | |||||
| <td data-sparkline="-7, 55, -13, -64 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Hawaii</th> | |||||
| <td>232</td> | |||||
| <td data-sparkline="73, 34, 74, 51 "/> | |||||
| <td>172</td> | |||||
| <td data-sparkline="1, 83, 49, 39 "/> | |||||
| <td>60</td> | |||||
| <td data-sparkline="72, -49, 25, 12 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Idaho</th> | |||||
| <td>166</td> | |||||
| <td data-sparkline="25, 43, 31, 67 "/> | |||||
| <td>152</td> | |||||
| <td data-sparkline="30, 30, 75, 17 "/> | |||||
| <td>14</td> | |||||
| <td data-sparkline="-5, 13, -44, 50 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Illinois</th> | |||||
| <td>336</td> | |||||
| <td data-sparkline="56, 84, 98, 98 "/> | |||||
| <td>151</td> | |||||
| <td data-sparkline="61, 12, 77, 1 "/> | |||||
| <td>185</td> | |||||
| <td data-sparkline="-5, 72, 21, 97 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Indiana</th> | |||||
| <td>216</td> | |||||
| <td data-sparkline="52, 87, 64, 13 "/> | |||||
| <td>216</td> | |||||
| <td data-sparkline="2, 47, 94, 73 "/> | |||||
| <td>0</td> | |||||
| <td data-sparkline="50, 40, -30, -60 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Iowa</th> | |||||
| <td>135</td> | |||||
| <td data-sparkline="41, 45, 19, 30 "/> | |||||
| <td>159</td> | |||||
| <td data-sparkline="17, 34, 45, 63 "/> | |||||
| <td>-24</td> | |||||
| <td data-sparkline="24, 11, -26, -33 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Kansas</th> | |||||
| <td>184</td> | |||||
| <td data-sparkline="52, 43, 65, 24 "/> | |||||
| <td>215</td> | |||||
| <td data-sparkline="20, 42, 97, 56 "/> | |||||
| <td>-31</td> | |||||
| <td data-sparkline="32, 1, -32, -32 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Kentucky</th> | |||||
| <td>289</td> | |||||
| <td data-sparkline="85, 74, 98, 32 "/> | |||||
| <td>219</td> | |||||
| <td data-sparkline="37, 38, 93, 51 "/> | |||||
| <td>70</td> | |||||
| <td data-sparkline="48, 36, 5, -19 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Louisiana</th> | |||||
| <td>257</td> | |||||
| <td data-sparkline="89, 18, 87, 63 "/> | |||||
| <td>201</td> | |||||
| <td data-sparkline="19, 54, 35, 93 "/> | |||||
| <td>56</td> | |||||
| <td data-sparkline="70, -36, 52, -30 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Maine</th> | |||||
| <td>194</td> | |||||
| <td data-sparkline="17, 68, 61, 48 "/> | |||||
| <td>133</td> | |||||
| <td data-sparkline="44, 35, 42, 12 "/> | |||||
| <td>61</td> | |||||
| <td data-sparkline="-27, 33, 19, 36 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Maryland</th> | |||||
| <td>204</td> | |||||
| <td data-sparkline="74, 12, 74, 44 "/> | |||||
| <td>157</td> | |||||
| <td data-sparkline="65, 58, 22, 12 "/> | |||||
| <td>47</td> | |||||
| <td data-sparkline="9, -46, 52, 32 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Massachusetts</th> | |||||
| <td>172</td> | |||||
| <td data-sparkline="44, 35, 69, 24 "/> | |||||
| <td>115</td> | |||||
| <td data-sparkline="26, 3, 69, 17 "/> | |||||
| <td>57</td> | |||||
| <td data-sparkline="18, 32, 0, 7 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Michigan</th> | |||||
| <td>177</td> | |||||
| <td data-sparkline="99, 26, 13, 39 "/> | |||||
| <td>185</td> | |||||
| <td data-sparkline="20, 37, 99, 29 "/> | |||||
| <td>-8</td> | |||||
| <td data-sparkline="79, -11, -86, 10 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Minnesota</th> | |||||
| <td>99</td> | |||||
| <td data-sparkline="34, 30, 16, 19 "/> | |||||
| <td>137</td> | |||||
| <td data-sparkline="49, 43, 24, 21 "/> | |||||
| <td>-38</td> | |||||
| <td data-sparkline="-15, -13, -8, -2 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Mississippi</th> | |||||
| <td>205</td> | |||||
| <td data-sparkline="38, 75, 31, 61 "/> | |||||
| <td>179</td> | |||||
| <td data-sparkline="0, 68, 100, 11 "/> | |||||
| <td>26</td> | |||||
| <td data-sparkline="38, 7, -69, 50 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Missouri</th> | |||||
| <td>135</td> | |||||
| <td data-sparkline="37, 48, 2, 48 "/> | |||||
| <td>202</td> | |||||
| <td data-sparkline="41, 64, 17, 80 "/> | |||||
| <td>-67</td> | |||||
| <td data-sparkline="-4, -16, -15, -32 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Montana</th> | |||||
| <td>195</td> | |||||
| <td data-sparkline="48, 81, 38, 28 "/> | |||||
| <td>237</td> | |||||
| <td data-sparkline="44, 33, 86, 74 "/> | |||||
| <td>-42</td> | |||||
| <td data-sparkline="4, 48, -48, -46 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Nebraska</th> | |||||
| <td>286</td> | |||||
| <td data-sparkline="98, 55, 82, 51 "/> | |||||
| <td>232</td> | |||||
| <td data-sparkline="89, 54, 28, 61 "/> | |||||
| <td>54</td> | |||||
| <td data-sparkline="9, 1, 54, -10 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Nevada</th> | |||||
| <td>221</td> | |||||
| <td data-sparkline="66, 4, 57, 94 "/> | |||||
| <td>214</td> | |||||
| <td data-sparkline="59, 39, 94, 22 "/> | |||||
| <td>7</td> | |||||
| <td data-sparkline="7, -35, -37, 72 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>New Hampshire</th> | |||||
| <td>136</td> | |||||
| <td data-sparkline="32, 21, 1, 82 "/> | |||||
| <td>306</td> | |||||
| <td data-sparkline="88, 85, 65, 68 "/> | |||||
| <td>-170</td> | |||||
| <td data-sparkline="-56, -64, -64, 14 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>New Jersey</th> | |||||
| <td>194</td> | |||||
| <td data-sparkline="31, 40, 24, 99 "/> | |||||
| <td>147</td> | |||||
| <td data-sparkline="7, 45, 12, 83 "/> | |||||
| <td>47</td> | |||||
| <td data-sparkline="24, -5, 12, 16 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>New Mexico</th> | |||||
| <td>207</td> | |||||
| <td data-sparkline="66, 93, 18, 30 "/> | |||||
| <td>261</td> | |||||
| <td data-sparkline="97, 28, 79, 57 "/> | |||||
| <td>-54</td> | |||||
| <td data-sparkline="-31, 65, -61, -27 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>New York</th> | |||||
| <td>316</td> | |||||
| <td data-sparkline="48, 95, 76, 97 "/> | |||||
| <td>193</td> | |||||
| <td data-sparkline="68, 5, 97, 23 "/> | |||||
| <td>123</td> | |||||
| <td data-sparkline="-20, 90, -21, 74 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>North Carolina</th> | |||||
| <td>175</td> | |||||
| <td data-sparkline="31, 71, 2, 71 "/> | |||||
| <td>188</td> | |||||
| <td data-sparkline="93, 5, 81, 9 "/> | |||||
| <td>-13</td> | |||||
| <td data-sparkline="-62, 66, -79, 62 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>North Dakota</th> | |||||
| <td>181</td> | |||||
| <td data-sparkline="3, 90, 62, 26 "/> | |||||
| <td>288</td> | |||||
| <td data-sparkline="70, 63, 82, 73 "/> | |||||
| <td>-107</td> | |||||
| <td data-sparkline="-67, 27, -20, -47 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Ohio</th> | |||||
| <td>189</td> | |||||
| <td data-sparkline="70, 50, 6, 63 "/> | |||||
| <td>163</td> | |||||
| <td data-sparkline="21, 94, 4, 44 "/> | |||||
| <td>26</td> | |||||
| <td data-sparkline="49, -44, 2, 19 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Oklahoma</th> | |||||
| <td>188</td> | |||||
| <td data-sparkline="66, 46, 53, 23 "/> | |||||
| <td>172</td> | |||||
| <td data-sparkline="26, 25, 35, 86 "/> | |||||
| <td>16</td> | |||||
| <td data-sparkline="40, 21, 18, -63 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Oregon</th> | |||||
| <td>165</td> | |||||
| <td data-sparkline="82, 31, 38, 14 "/> | |||||
| <td>257</td> | |||||
| <td data-sparkline="91, 9, 80, 77 "/> | |||||
| <td>-92</td> | |||||
| <td data-sparkline="-9, 22, -42, -63 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Pennsylvania</th> | |||||
| <td>268</td> | |||||
| <td data-sparkline="33, 88, 82, 65 "/> | |||||
| <td>129</td> | |||||
| <td data-sparkline="30, 29, 41, 29 "/> | |||||
| <td>139</td> | |||||
| <td data-sparkline="3, 59, 41, 36 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Rhode Island</th> | |||||
| <td>164</td> | |||||
| <td data-sparkline="8, 86, 32, 38 "/> | |||||
| <td>182</td> | |||||
| <td data-sparkline="88, 8, 18, 68 "/> | |||||
| <td>-18</td> | |||||
| <td data-sparkline="-80, 78, 14, -30 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>South Carolina</th> | |||||
| <td>91</td> | |||||
| <td data-sparkline="24, 18, 0, 49 "/> | |||||
| <td>193</td> | |||||
| <td data-sparkline="72, 62, 21, 38 "/> | |||||
| <td>-102</td> | |||||
| <td data-sparkline="-48, -44, -21, 11 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>South Dakota</th> | |||||
| <td>184</td> | |||||
| <td data-sparkline="73, 17, 64, 30 "/> | |||||
| <td>221</td> | |||||
| <td data-sparkline="21, 91, 57, 52 "/> | |||||
| <td>-37</td> | |||||
| <td data-sparkline="52, -74, 7, -22 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Tennessee</th> | |||||
| <td>233</td> | |||||
| <td data-sparkline="92, 24, 25, 92 "/> | |||||
| <td>131</td> | |||||
| <td data-sparkline="5, 18, 42, 66 "/> | |||||
| <td>102</td> | |||||
| <td data-sparkline="87, 6, -17, 26 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Texas</th> | |||||
| <td>211</td> | |||||
| <td data-sparkline="33, 80, 68, 30 "/> | |||||
| <td>225</td> | |||||
| <td data-sparkline="86, 58, 36, 45 "/> | |||||
| <td>-14</td> | |||||
| <td data-sparkline="-53, 22, 32, -15 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Utah</th> | |||||
| <td>362</td> | |||||
| <td data-sparkline="89, 98, 96, 79 "/> | |||||
| <td>225</td> | |||||
| <td data-sparkline="35, 51, 88, 51 "/> | |||||
| <td>137</td> | |||||
| <td data-sparkline="54, 47, 8, 28 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Vermont</th> | |||||
| <td>119</td> | |||||
| <td data-sparkline="4, 19, 56, 40 "/> | |||||
| <td>152</td> | |||||
| <td data-sparkline="17, 66, 27, 42 "/> | |||||
| <td>-33</td> | |||||
| <td data-sparkline="-13, -47, 29, -2 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Virginia</th> | |||||
| <td>127</td> | |||||
| <td data-sparkline="24, 27, 41, 35 "/> | |||||
| <td>71</td> | |||||
| <td data-sparkline="30, 2, 36, 3 "/> | |||||
| <td>56</td> | |||||
| <td data-sparkline="-6, 25, 5, 32 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Washington</th> | |||||
| <td>165</td> | |||||
| <td data-sparkline="40, 11, 63, 51 "/> | |||||
| <td>245</td> | |||||
| <td data-sparkline="46, 41, 94, 64 "/> | |||||
| <td>-80</td> | |||||
| <td data-sparkline="-6, -30, -31, -13 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>West Virginia</th> | |||||
| <td>248</td> | |||||
| <td data-sparkline="66, 56, 97, 29 "/> | |||||
| <td>171</td> | |||||
| <td data-sparkline="65, 53, 37, 16 "/> | |||||
| <td>77</td> | |||||
| <td data-sparkline="1, 3, 60, 13 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Wisconsin</th> | |||||
| <td>183</td> | |||||
| <td data-sparkline="24, 55, 21, 83 "/> | |||||
| <td>224</td> | |||||
| <td data-sparkline="80, 64, 13, 67 "/> | |||||
| <td>-41</td> | |||||
| <td data-sparkline="-56, -9, 8, 16 ; column"/> | |||||
| </tr> | |||||
| <tr> | |||||
| <th>Wyoming</th> | |||||
| <td>231</td> | |||||
| <td data-sparkline="52, 49, 97, 33 "/> | |||||
| <td>251</td> | |||||
| <td data-sparkline="96, 50, 23, 82 "/> | |||||
| <td>-20</td> | |||||
| <td data-sparkline="-44, -1, 74, -49 ; column"/> | |||||
| </tr> | |||||
| </tbody> | |||||
| </table> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,79 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'spline', | |||||
| inverted: true | |||||
| }, | |||||
| title: { | |||||
| text: 'Atmosphere Temperature by Altitude' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'According to the Standard Atmosphere Model' | |||||
| }, | |||||
| xAxis: { | |||||
| reversed: false, | |||||
| title: { | |||||
| enabled: true, | |||||
| text: 'Altitude' | |||||
| }, | |||||
| labels: { | |||||
| formatter: function () { | |||||
| return this.value + 'km'; | |||||
| } | |||||
| }, | |||||
| maxPadding: 0.05, | |||||
| showLastLabel: true | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Temperature' | |||||
| }, | |||||
| labels: { | |||||
| formatter: function () { | |||||
| return this.value + '°'; | |||||
| } | |||||
| }, | |||||
| lineWidth: 2 | |||||
| }, | |||||
| legend: { | |||||
| enabled: false | |||||
| }, | |||||
| tooltip: { | |||||
| headerFormat: '<b>{series.name}</b><br/>', | |||||
| pointFormat: '{point.x} km: {point.y}°C' | |||||
| }, | |||||
| plotOptions: { | |||||
| spline: { | |||||
| marker: { | |||||
| enable: false | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Temperature', | |||||
| data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1], | |||||
| [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,132 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'spline' | |||||
| }, | |||||
| title: { | |||||
| text: 'Snow depth at Vikjafjellet, Norway' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Irregular time data in Highcharts JS' | |||||
| }, | |||||
| xAxis: { | |||||
| type: 'datetime', | |||||
| dateTimeLabelFormats: { // don't display the dummy year | |||||
| month: '%e. %b', | |||||
| year: '%b' | |||||
| }, | |||||
| title: { | |||||
| text: 'Date' | |||||
| } | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Snow depth (m)' | |||||
| }, | |||||
| min: 0 | |||||
| }, | |||||
| tooltip: { | |||||
| headerFormat: '<b>{series.name}</b><br>', | |||||
| pointFormat: '{point.x:%e. %b}: {point.y:.2f} m' | |||||
| }, | |||||
| plotOptions: { | |||||
| spline: { | |||||
| marker: { | |||||
| enabled: true | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: "Winter 2012-2013", | |||||
| // Define the data points. All series have a dummy year | |||||
| // of 1970/71 in order to be compared on the same x axis. Note | |||||
| // that in JavaScript, months start at 0 for January, 1 for February etc. | |||||
| data: [ | |||||
| [Date.UTC(1970, 9, 21), 0], | |||||
| [Date.UTC(1970, 10, 4), 0.28], | |||||
| [Date.UTC(1970, 10, 9), 0.25], | |||||
| [Date.UTC(1970, 10, 27), 0.2], | |||||
| [Date.UTC(1970, 11, 2), 0.28], | |||||
| [Date.UTC(1970, 11, 26), 0.28], | |||||
| [Date.UTC(1970, 11, 29), 0.47], | |||||
| [Date.UTC(1971, 0, 11), 0.79], | |||||
| [Date.UTC(1971, 0, 26), 0.72], | |||||
| [Date.UTC(1971, 1, 3), 1.02], | |||||
| [Date.UTC(1971, 1, 11), 1.12], | |||||
| [Date.UTC(1971, 1, 25), 1.2], | |||||
| [Date.UTC(1971, 2, 11), 1.18], | |||||
| [Date.UTC(1971, 3, 11), 1.19], | |||||
| [Date.UTC(1971, 4, 1), 1.85], | |||||
| [Date.UTC(1971, 4, 5), 2.22], | |||||
| [Date.UTC(1971, 4, 19), 1.15], | |||||
| [Date.UTC(1971, 5, 3), 0] | |||||
| ] | |||||
| }, { | |||||
| name: "Winter 2013-2014", | |||||
| data: [ | |||||
| [Date.UTC(1970, 9, 29), 0], | |||||
| [Date.UTC(1970, 10, 9), 0.4], | |||||
| [Date.UTC(1970, 11, 1), 0.25], | |||||
| [Date.UTC(1971, 0, 1), 1.66], | |||||
| [Date.UTC(1971, 0, 10), 1.8], | |||||
| [Date.UTC(1971, 1, 19), 1.76], | |||||
| [Date.UTC(1971, 2, 25), 2.62], | |||||
| [Date.UTC(1971, 3, 19), 2.41], | |||||
| [Date.UTC(1971, 3, 30), 2.05], | |||||
| [Date.UTC(1971, 4, 14), 1.7], | |||||
| [Date.UTC(1971, 4, 24), 1.1], | |||||
| [Date.UTC(1971, 5, 10), 0] | |||||
| ] | |||||
| }, { | |||||
| name: "Winter 2014-2015", | |||||
| data: [ | |||||
| [Date.UTC(1970, 10, 25), 0], | |||||
| [Date.UTC(1970, 11, 6), 0.25], | |||||
| [Date.UTC(1970, 11, 20), 1.41], | |||||
| [Date.UTC(1970, 11, 25), 1.64], | |||||
| [Date.UTC(1971, 0, 4), 1.6], | |||||
| [Date.UTC(1971, 0, 17), 2.55], | |||||
| [Date.UTC(1971, 0, 24), 2.62], | |||||
| [Date.UTC(1971, 1, 4), 2.5], | |||||
| [Date.UTC(1971, 1, 14), 2.42], | |||||
| [Date.UTC(1971, 2, 6), 2.74], | |||||
| [Date.UTC(1971, 2, 14), 2.62], | |||||
| [Date.UTC(1971, 2, 24), 2.6], | |||||
| [Date.UTC(1971, 3, 2), 2.81], | |||||
| [Date.UTC(1971, 3, 12), 2.63], | |||||
| [Date.UTC(1971, 3, 28), 2.77], | |||||
| [Date.UTC(1971, 4, 5), 2.68], | |||||
| [Date.UTC(1971, 4, 10), 2.56], | |||||
| [Date.UTC(1971, 4, 15), 2.39], | |||||
| [Date.UTC(1971, 4, 20), 2.3], | |||||
| [Date.UTC(1971, 5, 5), 2], | |||||
| [Date.UTC(1971, 5, 10), 1.85], | |||||
| [Date.UTC(1971, 5, 15), 1.49], | |||||
| [Date.UTC(1971, 5, 23), 1.08] | |||||
| ] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,152 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| // Data retrieved from http://vikjavev.no/ver/index.php?spenn=2d&sluttid=16.06.2015. | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'spline' | |||||
| }, | |||||
| title: { | |||||
| text: 'Wind speed during two days' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'May 31 and and June 1, 2015 at two locations in Vik i Sogn, Norway' | |||||
| }, | |||||
| xAxis: { | |||||
| type: 'datetime', | |||||
| labels: { | |||||
| overflow: 'justify' | |||||
| } | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Wind speed (m/s)' | |||||
| }, | |||||
| min: 0, | |||||
| minorGridLineWidth: 0, | |||||
| gridLineWidth: 0, | |||||
| alternateGridColor: null, | |||||
| plotBands: [{ // Light air | |||||
| from: 0.3, | |||||
| to: 1.5, | |||||
| color: 'rgba(68, 170, 213, 0.1)', | |||||
| label: { | |||||
| text: 'Light air', | |||||
| style: { | |||||
| color: '#606060' | |||||
| } | |||||
| } | |||||
| }, { // Light breeze | |||||
| from: 1.5, | |||||
| to: 3.3, | |||||
| color: 'rgba(0, 0, 0, 0)', | |||||
| label: { | |||||
| text: 'Light breeze', | |||||
| style: { | |||||
| color: '#606060' | |||||
| } | |||||
| } | |||||
| }, { // Gentle breeze | |||||
| from: 3.3, | |||||
| to: 5.5, | |||||
| color: 'rgba(68, 170, 213, 0.1)', | |||||
| label: { | |||||
| text: 'Gentle breeze', | |||||
| style: { | |||||
| color: '#606060' | |||||
| } | |||||
| } | |||||
| }, { // Moderate breeze | |||||
| from: 5.5, | |||||
| to: 8, | |||||
| color: 'rgba(0, 0, 0, 0)', | |||||
| label: { | |||||
| text: 'Moderate breeze', | |||||
| style: { | |||||
| color: '#606060' | |||||
| } | |||||
| } | |||||
| }, { // Fresh breeze | |||||
| from: 8, | |||||
| to: 11, | |||||
| color: 'rgba(68, 170, 213, 0.1)', | |||||
| label: { | |||||
| text: 'Fresh breeze', | |||||
| style: { | |||||
| color: '#606060' | |||||
| } | |||||
| } | |||||
| }, { // Strong breeze | |||||
| from: 11, | |||||
| to: 14, | |||||
| color: 'rgba(0, 0, 0, 0)', | |||||
| label: { | |||||
| text: 'Strong breeze', | |||||
| style: { | |||||
| color: '#606060' | |||||
| } | |||||
| } | |||||
| }, { // High wind | |||||
| from: 14, | |||||
| to: 15, | |||||
| color: 'rgba(68, 170, 213, 0.1)', | |||||
| label: { | |||||
| text: 'High wind', | |||||
| style: { | |||||
| color: '#606060' | |||||
| } | |||||
| } | |||||
| }] | |||||
| }, | |||||
| tooltip: { | |||||
| valueSuffix: ' m/s' | |||||
| }, | |||||
| plotOptions: { | |||||
| spline: { | |||||
| lineWidth: 4, | |||||
| states: { | |||||
| hover: { | |||||
| lineWidth: 5 | |||||
| } | |||||
| }, | |||||
| marker: { | |||||
| enabled: false | |||||
| }, | |||||
| pointInterval: 3600000, // one hour | |||||
| pointStart: Date.UTC(2015, 4, 31, 0, 0, 0) | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Hestavollane', | |||||
| data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6] | |||||
| }, { | |||||
| name: 'Vik', | |||||
| data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3] | |||||
| }], | |||||
| navigation: { | |||||
| menuItemStyle: { | |||||
| fontSize: '10px' | |||||
| } | |||||
| } | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,85 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'spline' | |||||
| }, | |||||
| title: { | |||||
| text: 'Monthly Average Temperature' | |||||
| }, | |||||
| subtitle: { | |||||
| text: 'Source: WorldClimate.com' | |||||
| }, | |||||
| xAxis: { | |||||
| categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', | |||||
| 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'Temperature' | |||||
| }, | |||||
| labels: { | |||||
| formatter: function () { | |||||
| return this.value + '°'; | |||||
| } | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| crosshairs: true, | |||||
| shared: true | |||||
| }, | |||||
| plotOptions: { | |||||
| spline: { | |||||
| marker: { | |||||
| radius: 4, | |||||
| lineColor: '#666666', | |||||
| lineWidth: 1 | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [{ | |||||
| name: 'Tokyo', | |||||
| marker: { | |||||
| symbol: 'square' | |||||
| }, | |||||
| data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, { | |||||
| y: 26.5, | |||||
| marker: { | |||||
| symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' | |||||
| } | |||||
| }, 23.3, 18.3, 13.9, 9.6] | |||||
| }, { | |||||
| name: 'London', | |||||
| marker: { | |||||
| symbol: 'diamond' | |||||
| }, | |||||
| data: [{ | |||||
| y: 3.9, | |||||
| marker: { | |||||
| symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)' | |||||
| } | |||||
| }, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,155 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| .chart { | |||||
| min-width: 320px; | |||||
| max-width: 800px; | |||||
| height: 220px; | |||||
| margin: 0 auto; | |||||
| } | |||||
| </style> | |||||
| <!-- http://doc.jsfiddle.net/use/hacks.html#css-panel-hack --> | |||||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |||||
| <style> | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| /* | |||||
| The purpose of this demo is to demonstrate how multiple charts on the same page can be linked | |||||
| through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a | |||||
| small variation for each data set, and a mouse/touch event handler to bind the charts together. | |||||
| */ | |||||
| $(function () { | |||||
| /** | |||||
| * In order to synchronize tooltips and crosshairs, override the | |||||
| * built-in events with handlers defined on the parent element. | |||||
| */ | |||||
| $('#container').bind('mousemove touchmove', function (e) { | |||||
| var chart, | |||||
| point, | |||||
| i; | |||||
| for (i = 0; i < Highcharts.charts.length; i++) { | |||||
| chart = Highcharts.charts[i]; | |||||
| e = chart.pointer.normalize(e); // Find coordinates within the chart | |||||
| point = chart.series[0].searchPoint(e, true); // Get the hovered point | |||||
| if (point) { | |||||
| point.onMouseOver(); // Show the hover marker | |||||
| chart.tooltip.refresh(point); // Show the tooltip | |||||
| chart.xAxis[0].drawCrosshair(e, point); // Show the crosshair | |||||
| } | |||||
| } | |||||
| }); | |||||
| /** | |||||
| * Override the reset function, we don't need to hide the tooltips and crosshairs. | |||||
| */ | |||||
| Highcharts.Pointer.prototype.reset = function () {}; | |||||
| /** | |||||
| * Synchronize zooming through the setExtremes event handler. | |||||
| */ | |||||
| function syncExtremes(e) { | |||||
| var thisChart = this.chart; | |||||
| Highcharts.each(Highcharts.charts, function (chart) { | |||||
| if (chart !== thisChart) { | |||||
| if (chart.xAxis[0].setExtremes) { // It is null while updating | |||||
| chart.xAxis[0].setExtremes(e.min, e.max); | |||||
| } | |||||
| } | |||||
| }); | |||||
| } | |||||
| // Get the data. The contents of the data file can be viewed at | |||||
| // https://github.com/highslide-software/highcharts.com/blob/master/samples/data/activity.json | |||||
| $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function (activity) { | |||||
| $.each(activity.datasets, function (i, dataset) { | |||||
| // Add X values | |||||
| dataset.data = Highcharts.map(dataset.data, function (val, i) { | |||||
| return [activity.xData[i], val]; | |||||
| }); | |||||
| $('<div class="chart">') | |||||
| .appendTo('#container') | |||||
| .highcharts({ | |||||
| chart: { | |||||
| marginLeft: 40, // Keep all charts left aligned | |||||
| spacingTop: 20, | |||||
| spacingBottom: 20 | |||||
| // zoomType: 'x', | |||||
| // pinchType: null // Disable zoom on touch devices | |||||
| }, | |||||
| title: { | |||||
| text: dataset.name, | |||||
| align: 'left', | |||||
| margin: 0, | |||||
| x: 30 | |||||
| }, | |||||
| credits: { | |||||
| enabled: false | |||||
| }, | |||||
| legend: { | |||||
| enabled: false | |||||
| }, | |||||
| xAxis: { | |||||
| crosshair: true, | |||||
| events: { | |||||
| setExtremes: syncExtremes | |||||
| }, | |||||
| labels: { | |||||
| format: '{value} km' | |||||
| } | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: null | |||||
| } | |||||
| }, | |||||
| tooltip: { | |||||
| positioner: function () { | |||||
| return { | |||||
| x: this.chart.chartWidth - this.label.width, // right aligned | |||||
| y: -1 // align to title | |||||
| }; | |||||
| }, | |||||
| borderWidth: 0, | |||||
| backgroundColor: 'none', | |||||
| pointFormat: '{point.y}', | |||||
| headerFormat: '', | |||||
| shadow: false, | |||||
| style: { | |||||
| fontSize: '18px' | |||||
| }, | |||||
| valueDecimals: dataset.valueDecimals | |||||
| }, | |||||
| series: [{ | |||||
| data: dataset.data, | |||||
| name: dataset.name, | |||||
| type: dataset.type, | |||||
| color: Highcharts.getOptions().colors[i], | |||||
| fillOpacity: 0.3, | |||||
| tooltip: { | |||||
| valueSuffix: ' ' + dataset.unit | |||||
| } | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <div id="container"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,68 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| #container { | |||||
| min-width: 300px; | |||||
| max-width: 600px; | |||||
| margin: 0 auto; | |||||
| } | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| colorAxis: { | |||||
| minColor: '#FFFFFF', | |||||
| maxColor: Highcharts.getOptions().colors[0] | |||||
| }, | |||||
| series: [{ | |||||
| type: "treemap", | |||||
| layoutAlgorithm: 'squarified', | |||||
| data: [{ | |||||
| name: 'A', | |||||
| value: 6, | |||||
| colorValue: 1 | |||||
| }, { | |||||
| name: 'B', | |||||
| value: 6, | |||||
| colorValue: 2 | |||||
| }, { | |||||
| name: 'C', | |||||
| value: 4, | |||||
| colorValue: 3 | |||||
| }, { | |||||
| name: 'D', | |||||
| value: 3, | |||||
| colorValue: 4 | |||||
| }, { | |||||
| name: 'E', | |||||
| value: 2, | |||||
| colorValue: 5 | |||||
| }, { | |||||
| name: 'F', | |||||
| value: 2, | |||||
| colorValue: 6 | |||||
| }, { | |||||
| name: 'G', | |||||
| value: 1, | |||||
| colorValue: 7 | |||||
| }] | |||||
| }], | |||||
| title: { | |||||
| text: 'Highcharts Treemap' | |||||
| } | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/heatmap.js"></script> | |||||
| <script src="../../js/modules/treemap.js"></script> | |||||
| <div id="container"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,980 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| #container { | |||||
| min-width: 300px; | |||||
| max-width: 600px; | |||||
| margin: 0 auto; | |||||
| } | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| var data = { | |||||
| "South-East Asia": { | |||||
| "Sri Lanka": { | |||||
| "Communicable & other Group I": "75.5", | |||||
| "Injuries": "89.0", | |||||
| "Noncommunicable diseases": "501.2" | |||||
| }, | |||||
| "Bangladesh": { | |||||
| "Noncommunicable diseases": "548.9", | |||||
| "Injuries": "64.0", | |||||
| "Communicable & other Group I": "234.6" | |||||
| }, | |||||
| "Myanmar": { | |||||
| "Communicable & other Group I": "316.4", | |||||
| "Injuries": "102.0", | |||||
| "Noncommunicable diseases": "708.7" | |||||
| }, | |||||
| "Maldives": { | |||||
| "Injuries": "35.0", | |||||
| "Noncommunicable diseases": "487.2", | |||||
| "Communicable & other Group I": "59.2" | |||||
| }, | |||||
| "Democratic People's Republic of Korea": { | |||||
| "Injuries": "91.9", | |||||
| "Noncommunicable diseases": "751.4", | |||||
| "Communicable & other Group I": "117.3" | |||||
| }, | |||||
| "Bhutan": { | |||||
| "Injuries": "142.2", | |||||
| "Noncommunicable diseases": "572.8", | |||||
| "Communicable & other Group I": "186.9" | |||||
| }, | |||||
| "Thailand": { | |||||
| "Injuries": "72.8", | |||||
| "Communicable & other Group I": "123.3", | |||||
| "Noncommunicable diseases": "449.1" | |||||
| }, | |||||
| "Nepal": { | |||||
| "Noncommunicable diseases": "678.1", | |||||
| "Injuries": "88.7", | |||||
| "Communicable & other Group I": "251.8" | |||||
| }, | |||||
| "Timor-Leste": { | |||||
| "Injuries": "69.2", | |||||
| "Noncommunicable diseases": "670.5", | |||||
| "Communicable & other Group I": "343.5" | |||||
| }, | |||||
| "India": { | |||||
| "Communicable & other Group I": "253.0", | |||||
| "Injuries": "115.9", | |||||
| "Noncommunicable diseases": "682.3" | |||||
| }, | |||||
| "Indonesia": { | |||||
| "Injuries": "49.3", | |||||
| "Noncommunicable diseases": "680.1", | |||||
| "Communicable & other Group I": "162.4" | |||||
| } | |||||
| }, | |||||
| "Europe": { | |||||
| "Hungary": { | |||||
| "Communicable & other Group I": "16.8", | |||||
| "Noncommunicable diseases": "602.8", | |||||
| "Injuries": "44.3" | |||||
| }, | |||||
| "Poland": { | |||||
| "Communicable & other Group I": "22.6", | |||||
| "Noncommunicable diseases": "494.5", | |||||
| "Injuries": "48.9" | |||||
| }, | |||||
| "Israel": { | |||||
| "Communicable & other Group I": "31.2", | |||||
| "Noncommunicable diseases": "311.2", | |||||
| "Injuries": "20.8" | |||||
| }, | |||||
| "France": { | |||||
| "Communicable & other Group I": "21.4", | |||||
| "Noncommunicable diseases": "313.2", | |||||
| "Injuries": "34.6" | |||||
| }, | |||||
| "Turkey": { | |||||
| "Injuries": "39.1", | |||||
| "Communicable & other Group I": "43.9", | |||||
| "Noncommunicable diseases": "555.2" | |||||
| }, | |||||
| "Kyrgyzstan": { | |||||
| "Communicable & other Group I": "65.8", | |||||
| "Injuries": "65.1", | |||||
| "Noncommunicable diseases": "835.4" | |||||
| }, | |||||
| "Croatia": { | |||||
| "Communicable & other Group I": "12.2", | |||||
| "Noncommunicable diseases": "495.8", | |||||
| "Injuries": "40.1" | |||||
| }, | |||||
| "Portugal": { | |||||
| "Injuries": "25.2", | |||||
| "Communicable & other Group I": "39.9", | |||||
| "Noncommunicable diseases": "343.3" | |||||
| }, | |||||
| "Greece": { | |||||
| "Injuries": "26.5", | |||||
| "Noncommunicable diseases": "365.0", | |||||
| "Communicable & other Group I": "24.1" | |||||
| }, | |||||
| "Italy": { | |||||
| "Injuries": "20.1", | |||||
| "Communicable & other Group I": "15.5", | |||||
| "Noncommunicable diseases": "303.6" | |||||
| }, | |||||
| "Belgium": { | |||||
| "Communicable & other Group I": "27.8", | |||||
| "Injuries": "38.9", | |||||
| "Noncommunicable diseases": "356.8" | |||||
| }, | |||||
| "Lithuania": { | |||||
| "Noncommunicable diseases": "580.6", | |||||
| "Communicable & other Group I": "25.5", | |||||
| "Injuries": "76.4" | |||||
| }, | |||||
| "Uzbekistan": { | |||||
| "Communicable & other Group I": "85.8", | |||||
| "Injuries": "47.4", | |||||
| "Noncommunicable diseases": "810.9" | |||||
| }, | |||||
| "Serbia": { | |||||
| "Communicable & other Group I": "19.4", | |||||
| "Injuries": "32.0", | |||||
| "Noncommunicable diseases": "657.7" | |||||
| }, | |||||
| "Austria": { | |||||
| "Noncommunicable diseases": "359.5", | |||||
| "Injuries": "30.6", | |||||
| "Communicable & other Group I": "12.6" | |||||
| }, | |||||
| "Bosnia and Herzegovina": { | |||||
| "Injuries": "42.4", | |||||
| "Noncommunicable diseases": "512.5", | |||||
| "Communicable & other Group I": "20.0" | |||||
| }, | |||||
| "Slovakia": { | |||||
| "Injuries": "39.1", | |||||
| "Communicable & other Group I": "35.3", | |||||
| "Noncommunicable diseases": "532.5" | |||||
| }, | |||||
| "The former Yugoslav republic of Macedonia": { | |||||
| "Injuries": "24.0", | |||||
| "Communicable & other Group I": "16.9", | |||||
| "Noncommunicable diseases": "636.5" | |||||
| }, | |||||
| "Sweden": { | |||||
| "Communicable & other Group I": "19.3", | |||||
| "Noncommunicable diseases": "333.5", | |||||
| "Injuries": "26.1" | |||||
| }, | |||||
| "Russian Federation": { | |||||
| "Noncommunicable diseases": "790.3", | |||||
| "Communicable & other Group I": "73.8", | |||||
| "Injuries": "102.8" | |||||
| }, | |||||
| "Republic of Moldova": { | |||||
| "Noncommunicable diseases": "787.6", | |||||
| "Injuries": "75.7", | |||||
| "Communicable & other Group I": "44.5" | |||||
| }, | |||||
| "Ireland": { | |||||
| "Injuries": "31.8", | |||||
| "Communicable & other Group I": "21.5", | |||||
| "Noncommunicable diseases": "343.9" | |||||
| }, | |||||
| "Estonia": { | |||||
| "Injuries": "47.0", | |||||
| "Communicable & other Group I": "18.5", | |||||
| "Noncommunicable diseases": "510.7" | |||||
| }, | |||||
| "Cyprus": { | |||||
| "Noncommunicable diseases": "333.0", | |||||
| "Injuries": "26.6", | |||||
| "Communicable & other Group I": "16.2" | |||||
| }, | |||||
| "Kazakhstan": { | |||||
| "Noncommunicable diseases": "949.7", | |||||
| "Injuries": "101.6", | |||||
| "Communicable & other Group I": "55.3" | |||||
| }, | |||||
| "Netherlands": { | |||||
| "Noncommunicable diseases": "355.2", | |||||
| "Injuries": "22.3", | |||||
| "Communicable & other Group I": "25.5" | |||||
| }, | |||||
| "Finland": { | |||||
| "Noncommunicable diseases": "366.6", | |||||
| "Injuries": "38.7", | |||||
| "Communicable & other Group I": "9.0" | |||||
| }, | |||||
| "Romania": { | |||||
| "Noncommunicable diseases": "612.2", | |||||
| "Injuries": "40.7", | |||||
| "Communicable & other Group I": "38.5" | |||||
| }, | |||||
| "Albania": { | |||||
| "Noncommunicable diseases": "671.6", | |||||
| "Injuries": "48.0", | |||||
| "Communicable & other Group I": "46.5" | |||||
| }, | |||||
| "Iceland": { | |||||
| "Injuries": "29.0", | |||||
| "Noncommunicable diseases": "311.7", | |||||
| "Communicable & other Group I": "14.0" | |||||
| }, | |||||
| "Azerbaijan": { | |||||
| "Noncommunicable diseases": "664.3", | |||||
| "Injuries": "33.6", | |||||
| "Communicable & other Group I": "70.8" | |||||
| }, | |||||
| "Tajikistan": { | |||||
| "Injuries": "51.6", | |||||
| "Communicable & other Group I": "147.7", | |||||
| "Noncommunicable diseases": "752.6" | |||||
| }, | |||||
| "Bulgaria": { | |||||
| "Communicable & other Group I": "33.4", | |||||
| "Injuries": "36.4", | |||||
| "Noncommunicable diseases": "638.2" | |||||
| }, | |||||
| "United Kingdom of Great Britain and Northern Ireland": { | |||||
| "Communicable & other Group I": "28.5", | |||||
| "Injuries": "21.5", | |||||
| "Noncommunicable diseases": "358.8" | |||||
| }, | |||||
| "Spain": { | |||||
| "Communicable & other Group I": "19.1", | |||||
| "Injuries": "17.8", | |||||
| "Noncommunicable diseases": "323.1" | |||||
| }, | |||||
| "Ukraine": { | |||||
| "Communicable & other Group I": "69.3", | |||||
| "Injuries": "67.3", | |||||
| "Noncommunicable diseases": "749.0" | |||||
| }, | |||||
| "Norway": { | |||||
| "Noncommunicable diseases": "336.6", | |||||
| "Communicable & other Group I": "25.2", | |||||
| "Injuries": "25.6" | |||||
| }, | |||||
| "Denmark": { | |||||
| "Injuries": "22.5", | |||||
| "Communicable & other Group I": "29.5", | |||||
| "Noncommunicable diseases": "406.1" | |||||
| }, | |||||
| "Belarus": { | |||||
| "Noncommunicable diseases": "682.5", | |||||
| "Communicable & other Group I": "28.3", | |||||
| "Injuries": "91.3" | |||||
| }, | |||||
| "Malta": { | |||||
| "Noncommunicable diseases": "364.5", | |||||
| "Injuries": "19.0", | |||||
| "Communicable & other Group I": "23.6" | |||||
| }, | |||||
| "Latvia": { | |||||
| "Noncommunicable diseases": "623.7", | |||||
| "Injuries": "54.5", | |||||
| "Communicable & other Group I": "26.0" | |||||
| }, | |||||
| "Turkmenistan": { | |||||
| "Injuries": "93.0", | |||||
| "Communicable & other Group I": "115.8", | |||||
| "Noncommunicable diseases": "1025.1" | |||||
| }, | |||||
| "Switzerland": { | |||||
| "Communicable & other Group I": "14.5", | |||||
| "Noncommunicable diseases": "291.6", | |||||
| "Injuries": "25.4" | |||||
| }, | |||||
| "Luxembourg": { | |||||
| "Injuries": "31.1", | |||||
| "Noncommunicable diseases": "317.8", | |||||
| "Communicable & other Group I": "20.5" | |||||
| }, | |||||
| "Georgia": { | |||||
| "Injuries": "32.2", | |||||
| "Communicable & other Group I": "39.3", | |||||
| "Noncommunicable diseases": "615.2" | |||||
| }, | |||||
| "Slovenia": { | |||||
| "Noncommunicable diseases": "369.2", | |||||
| "Communicable & other Group I": "15.4", | |||||
| "Injuries": "44.2" | |||||
| }, | |||||
| "Montenegro": { | |||||
| "Communicable & other Group I": "18.7", | |||||
| "Noncommunicable diseases": "571.5", | |||||
| "Injuries": "41.2" | |||||
| }, | |||||
| "Armenia": { | |||||
| "Noncommunicable diseases": "847.5", | |||||
| "Communicable & other Group I": "45.0", | |||||
| "Injuries": "49.2" | |||||
| }, | |||||
| "Germany": { | |||||
| "Injuries": "23.0", | |||||
| "Communicable & other Group I": "21.6", | |||||
| "Noncommunicable diseases": "365.1" | |||||
| }, | |||||
| "Czech Republic": { | |||||
| "Injuries": "39.1", | |||||
| "Noncommunicable diseases": "460.7", | |||||
| "Communicable & other Group I": "27.0" | |||||
| } | |||||
| }, | |||||
| "Africa": { | |||||
| "Equatorial Guinea": { | |||||
| "Communicable & other Group I": "756.8", | |||||
| "Injuries": "133.6", | |||||
| "Noncommunicable diseases": "729.0" | |||||
| }, | |||||
| "Madagascar": { | |||||
| "Noncommunicable diseases": "648.6", | |||||
| "Communicable & other Group I": "429.9", | |||||
| "Injuries": "89.0" | |||||
| }, | |||||
| "Swaziland": { | |||||
| "Communicable & other Group I": "884.3", | |||||
| "Injuries": "119.5", | |||||
| "Noncommunicable diseases": "702.4" | |||||
| }, | |||||
| "Congo": { | |||||
| "Noncommunicable diseases": "632.3", | |||||
| "Communicable & other Group I": "666.9", | |||||
| "Injuries": "89.0" | |||||
| }, | |||||
| "Burkina Faso": { | |||||
| "Communicable & other Group I": "648.2", | |||||
| "Noncommunicable diseases": "784.0", | |||||
| "Injuries": "119.3" | |||||
| }, | |||||
| "Guinea-Bissau": { | |||||
| "Communicable & other Group I": "869.8", | |||||
| "Noncommunicable diseases": "764.7", | |||||
| "Injuries": "111.6" | |||||
| }, | |||||
| "Democratic Republic of the Congo": { | |||||
| "Noncommunicable diseases": "724.4", | |||||
| "Injuries": "137.1", | |||||
| "Communicable & other Group I": "920.7" | |||||
| }, | |||||
| "Mozambique": { | |||||
| "Injuries": "175.3", | |||||
| "Noncommunicable diseases": "593.7", | |||||
| "Communicable & other Group I": "998.1" | |||||
| }, | |||||
| "Central African Republic": { | |||||
| "Communicable & other Group I": "1212.1", | |||||
| "Injuries": "107.9", | |||||
| "Noncommunicable diseases": "550.8" | |||||
| }, | |||||
| "United Republic of Tanzania": { | |||||
| "Noncommunicable diseases": "569.8", | |||||
| "Communicable & other Group I": "584.2", | |||||
| "Injuries": "129.2" | |||||
| }, | |||||
| "Cameroon": { | |||||
| "Communicable & other Group I": "768.8", | |||||
| "Injuries": "106.0", | |||||
| "Noncommunicable diseases": "675.2" | |||||
| }, | |||||
| "Togo": { | |||||
| "Noncommunicable diseases": "679.0", | |||||
| "Communicable & other Group I": "681.8", | |||||
| "Injuries": "93.0" | |||||
| }, | |||||
| "Eritrea": { | |||||
| "Injuries": "118.7", | |||||
| "Communicable & other Group I": "506.0", | |||||
| "Noncommunicable diseases": "671.9" | |||||
| }, | |||||
| "Namibia": { | |||||
| "Injuries": "76.4", | |||||
| "Noncommunicable diseases": "580.2", | |||||
| "Communicable & other Group I": "356.6" | |||||
| }, | |||||
| "Senegal": { | |||||
| "Noncommunicable diseases": "558.1", | |||||
| "Injuries": "89.3", | |||||
| "Communicable & other Group I": "587.7" | |||||
| }, | |||||
| "Chad": { | |||||
| "Communicable & other Group I": "1070.9", | |||||
| "Injuries": "114.5", | |||||
| "Noncommunicable diseases": "712.6" | |||||
| }, | |||||
| "Benin": { | |||||
| "Injuries": "98.0", | |||||
| "Noncommunicable diseases": "761.5", | |||||
| "Communicable & other Group I": "577.3" | |||||
| }, | |||||
| "Zimbabwe": { | |||||
| "Communicable & other Group I": "711.3", | |||||
| "Injuries": "82.5", | |||||
| "Noncommunicable diseases": "598.9" | |||||
| }, | |||||
| "Rwanda": { | |||||
| "Noncommunicable diseases": "585.3", | |||||
| "Injuries": "106.3", | |||||
| "Communicable & other Group I": "401.7" | |||||
| }, | |||||
| "Zambia": { | |||||
| "Noncommunicable diseases": "587.4", | |||||
| "Injuries": "156.4", | |||||
| "Communicable & other Group I": "764.3" | |||||
| }, | |||||
| "Mali": { | |||||
| "Injuries": "119.5", | |||||
| "Communicable & other Group I": "588.3", | |||||
| "Noncommunicable diseases": "866.1" | |||||
| }, | |||||
| "Ethiopia": { | |||||
| "Injuries": "94.5", | |||||
| "Communicable & other Group I": "558.9", | |||||
| "Noncommunicable diseases": "476.3" | |||||
| }, | |||||
| "South Africa": { | |||||
| "Communicable & other Group I": "611.6", | |||||
| "Injuries": "103.5", | |||||
| "Noncommunicable diseases": "710.9" | |||||
| }, | |||||
| "Burundi": { | |||||
| "Injuries": "146.6", | |||||
| "Communicable & other Group I": "704.8", | |||||
| "Noncommunicable diseases": "729.5" | |||||
| }, | |||||
| "Cabo Verde": { | |||||
| "Injuries": "54.4", | |||||
| "Noncommunicable diseases": "482.1", | |||||
| "Communicable & other Group I": "141.9" | |||||
| }, | |||||
| "Liberia": { | |||||
| "Noncommunicable diseases": "656.9", | |||||
| "Injuries": "83.3", | |||||
| "Communicable & other Group I": "609.1" | |||||
| }, | |||||
| "Uganda": { | |||||
| "Noncommunicable diseases": "664.4", | |||||
| "Communicable & other Group I": "696.7", | |||||
| "Injuries": "166.8" | |||||
| }, | |||||
| "Mauritius": { | |||||
| "Noncommunicable diseases": "576.5", | |||||
| "Injuries": "44.1", | |||||
| "Communicable & other Group I": "61.8" | |||||
| }, | |||||
| "Algeria": { | |||||
| "Noncommunicable diseases": "710.4", | |||||
| "Injuries": "53.8", | |||||
| "Communicable & other Group I": "97.8" | |||||
| }, | |||||
| "C\u00f4te d'Ivoire": { | |||||
| "Noncommunicable diseases": "794.0", | |||||
| "Injuries": "124.0", | |||||
| "Communicable & other Group I": "861.3" | |||||
| }, | |||||
| "Malawi": { | |||||
| "Injuries": "97.7", | |||||
| "Communicable & other Group I": "777.6", | |||||
| "Noncommunicable diseases": "655.0" | |||||
| }, | |||||
| "Botswana": { | |||||
| "Injuries": "87.9", | |||||
| "Noncommunicable diseases": "612.2", | |||||
| "Communicable & other Group I": "555.3" | |||||
| }, | |||||
| "Guinea": { | |||||
| "Injuries": "96.0", | |||||
| "Noncommunicable diseases": "681.1", | |||||
| "Communicable & other Group I": "679.6" | |||||
| }, | |||||
| "Ghana": { | |||||
| "Injuries": "76.1", | |||||
| "Noncommunicable diseases": "669.9", | |||||
| "Communicable & other Group I": "476.0" | |||||
| }, | |||||
| "Kenya": { | |||||
| "Noncommunicable diseases": "514.7", | |||||
| "Injuries": "101.1", | |||||
| "Communicable & other Group I": "657.5" | |||||
| }, | |||||
| "Gambia": { | |||||
| "Noncommunicable diseases": "629.6", | |||||
| "Injuries": "96.0", | |||||
| "Communicable & other Group I": "590.5" | |||||
| }, | |||||
| "Angola": { | |||||
| "Injuries": "137.8", | |||||
| "Noncommunicable diseases": "768.4", | |||||
| "Communicable & other Group I": "873.3" | |||||
| }, | |||||
| "Sierra Leone": { | |||||
| "Communicable & other Group I": "1327.4", | |||||
| "Noncommunicable diseases": "963.5", | |||||
| "Injuries": "149.5" | |||||
| }, | |||||
| "Mauritania": { | |||||
| "Communicable & other Group I": "619.1", | |||||
| "Injuries": "83.4", | |||||
| "Noncommunicable diseases": "555.1" | |||||
| }, | |||||
| "Comoros": { | |||||
| "Communicable & other Group I": "494.6", | |||||
| "Injuries": "132.4", | |||||
| "Noncommunicable diseases": "695.5" | |||||
| }, | |||||
| "Gabon": { | |||||
| "Noncommunicable diseases": "504.6", | |||||
| "Injuries": "77.4", | |||||
| "Communicable & other Group I": "589.4" | |||||
| }, | |||||
| "Niger": { | |||||
| "Injuries": "97.6", | |||||
| "Communicable & other Group I": "740.0", | |||||
| "Noncommunicable diseases": "649.1" | |||||
| }, | |||||
| "Lesotho": { | |||||
| "Communicable & other Group I": "1110.5", | |||||
| "Injuries": "142.5", | |||||
| "Noncommunicable diseases": "671.8" | |||||
| }, | |||||
| "Nigeria": { | |||||
| "Noncommunicable diseases": "673.7", | |||||
| "Communicable & other Group I": "866.2", | |||||
| "Injuries": "145.6" | |||||
| } | |||||
| }, | |||||
| "Americas": { | |||||
| "Canada": { | |||||
| "Noncommunicable diseases": "318.0", | |||||
| "Injuries": "31.3", | |||||
| "Communicable & other Group I": "22.6" | |||||
| }, | |||||
| "Bolivia (Plurinational State of)": { | |||||
| "Communicable & other Group I": "226.2", | |||||
| "Noncommunicable diseases": "635.3", | |||||
| "Injuries": "100.0" | |||||
| }, | |||||
| "Haiti": { | |||||
| "Communicable & other Group I": "405.4", | |||||
| "Noncommunicable diseases": "724.6", | |||||
| "Injuries": "89.3" | |||||
| }, | |||||
| "Belize": { | |||||
| "Noncommunicable diseases": "470.7", | |||||
| "Injuries": "82.0", | |||||
| "Communicable & other Group I": "104.6" | |||||
| }, | |||||
| "Suriname": { | |||||
| "Injuries": "70.5", | |||||
| "Communicable & other Group I": "83.7", | |||||
| "Noncommunicable diseases": "374.8" | |||||
| }, | |||||
| "Argentina": { | |||||
| "Communicable & other Group I": "68.7", | |||||
| "Injuries": "50.7", | |||||
| "Noncommunicable diseases": "467.3" | |||||
| }, | |||||
| "Mexico": { | |||||
| "Injuries": "63.2", | |||||
| "Communicable & other Group I": "57.0", | |||||
| "Noncommunicable diseases": "468.3" | |||||
| }, | |||||
| "Jamaica": { | |||||
| "Injuries": "51.5", | |||||
| "Communicable & other Group I": "97.0", | |||||
| "Noncommunicable diseases": "519.1" | |||||
| }, | |||||
| "Peru": { | |||||
| "Noncommunicable diseases": "363.5", | |||||
| "Injuries": "47.9", | |||||
| "Communicable & other Group I": "121.3" | |||||
| }, | |||||
| "Brazil": { | |||||
| "Injuries": "80.2", | |||||
| "Communicable & other Group I": "92.8", | |||||
| "Noncommunicable diseases": "513.8" | |||||
| }, | |||||
| "Venezuela (Bolivarian Republic of)": { | |||||
| "Communicable & other Group I": "58.2", | |||||
| "Injuries": "103.2", | |||||
| "Noncommunicable diseases": "410.6" | |||||
| }, | |||||
| "Paraguay": { | |||||
| "Noncommunicable diseases": "485.5", | |||||
| "Communicable & other Group I": "77.3", | |||||
| "Injuries": "67.6" | |||||
| }, | |||||
| "Chile": { | |||||
| "Noncommunicable diseases": "366.5", | |||||
| "Communicable & other Group I": "36.3", | |||||
| "Injuries": "41.2" | |||||
| }, | |||||
| "Trinidad and Tobago": { | |||||
| "Noncommunicable diseases": "705.3", | |||||
| "Communicable & other Group I": "80.4", | |||||
| "Injuries": "98.4" | |||||
| }, | |||||
| "Colombia": { | |||||
| "Noncommunicable diseases": "377.3", | |||||
| "Communicable & other Group I": "55.0", | |||||
| "Injuries": "72.6" | |||||
| }, | |||||
| "Cuba": { | |||||
| "Injuries": "45.3", | |||||
| "Noncommunicable diseases": "421.8", | |||||
| "Communicable & other Group I": "33.2" | |||||
| }, | |||||
| "El Salvador": { | |||||
| "Noncommunicable diseases": "474.9", | |||||
| "Injuries": "157.7", | |||||
| "Communicable & other Group I": "96.2" | |||||
| }, | |||||
| "Honduras": { | |||||
| "Injuries": "80.8", | |||||
| "Communicable & other Group I": "117.5", | |||||
| "Noncommunicable diseases": "441.5" | |||||
| }, | |||||
| "Ecuador": { | |||||
| "Noncommunicable diseases": "409.7", | |||||
| "Injuries": "83.7", | |||||
| "Communicable & other Group I": "97.3" | |||||
| }, | |||||
| "Costa Rica": { | |||||
| "Communicable & other Group I": "30.5", | |||||
| "Noncommunicable diseases": "391.8", | |||||
| "Injuries": "46.5" | |||||
| }, | |||||
| "Dominican Republic": { | |||||
| "Noncommunicable diseases": "396.0", | |||||
| "Injuries": "66.4", | |||||
| "Communicable & other Group I": "76.8" | |||||
| }, | |||||
| "Nicaragua": { | |||||
| "Communicable & other Group I": "75.2", | |||||
| "Injuries": "64.4", | |||||
| "Noncommunicable diseases": "546.6" | |||||
| }, | |||||
| "Barbados": { | |||||
| "Noncommunicable diseases": "404.5", | |||||
| "Injuries": "28.0", | |||||
| "Communicable & other Group I": "60.8" | |||||
| }, | |||||
| "Uruguay": { | |||||
| "Noncommunicable diseases": "446.0", | |||||
| "Injuries": "53.8", | |||||
| "Communicable & other Group I": "46.2" | |||||
| }, | |||||
| "Panama": { | |||||
| "Communicable & other Group I": "86.1", | |||||
| "Injuries": "67.4", | |||||
| "Noncommunicable diseases": "372.9" | |||||
| }, | |||||
| "Bahamas": { | |||||
| "Noncommunicable diseases": "465.2", | |||||
| "Injuries": "45.7", | |||||
| "Communicable & other Group I": "122.0" | |||||
| }, | |||||
| "Guyana": { | |||||
| "Communicable & other Group I": "177.2", | |||||
| "Noncommunicable diseases": "1024.2", | |||||
| "Injuries": "150.0" | |||||
| }, | |||||
| "United States of America": { | |||||
| "Noncommunicable diseases": "412.8", | |||||
| "Injuries": "44.2", | |||||
| "Communicable & other Group I": "31.3" | |||||
| }, | |||||
| "Guatemala": { | |||||
| "Communicable & other Group I": "212.7", | |||||
| "Noncommunicable diseases": "409.4", | |||||
| "Injuries": "111.0" | |||||
| } | |||||
| }, | |||||
| "Eastern Mediterranean": { | |||||
| "Egypt": { | |||||
| "Communicable & other Group I": "74.3", | |||||
| "Noncommunicable diseases": "781.7", | |||||
| "Injuries": "33.5" | |||||
| }, | |||||
| "South Sudan": { | |||||
| "Injuries": "143.4", | |||||
| "Communicable & other Group I": "831.3", | |||||
| "Noncommunicable diseases": "623.4" | |||||
| }, | |||||
| "Sudan": { | |||||
| "Injuries": "133.6", | |||||
| "Noncommunicable diseases": "551.0", | |||||
| "Communicable & other Group I": "495.0" | |||||
| }, | |||||
| "Libya": { | |||||
| "Injuries": "62.8", | |||||
| "Noncommunicable diseases": "550.0", | |||||
| "Communicable & other Group I": "52.6" | |||||
| }, | |||||
| "Jordan": { | |||||
| "Noncommunicable diseases": "640.3", | |||||
| "Injuries": "53.5", | |||||
| "Communicable & other Group I": "52.5" | |||||
| }, | |||||
| "Pakistan": { | |||||
| "Communicable & other Group I": "296.0", | |||||
| "Noncommunicable diseases": "669.3", | |||||
| "Injuries": "98.7" | |||||
| }, | |||||
| "Djibouti": { | |||||
| "Noncommunicable diseases": "631.1", | |||||
| "Communicable & other Group I": "626.0", | |||||
| "Injuries": "106.0" | |||||
| }, | |||||
| "Syrian Arab Republic": { | |||||
| "Communicable & other Group I": "41.0", | |||||
| "Injuries": "308.0", | |||||
| "Noncommunicable diseases": "572.7" | |||||
| }, | |||||
| "Morocco": { | |||||
| "Noncommunicable diseases": "707.7", | |||||
| "Communicable & other Group I": "131.5", | |||||
| "Injuries": "47.0" | |||||
| }, | |||||
| "Yemen": { | |||||
| "Communicable & other Group I": "515.0", | |||||
| "Noncommunicable diseases": "626.9", | |||||
| "Injuries": "84.3" | |||||
| }, | |||||
| "Bahrain": { | |||||
| "Injuries": "33.5", | |||||
| "Noncommunicable diseases": "505.7", | |||||
| "Communicable & other Group I": "48.5" | |||||
| }, | |||||
| "United Arab Emirates": { | |||||
| "Noncommunicable diseases": "546.8", | |||||
| "Injuries": "31.5", | |||||
| "Communicable & other Group I": "35.6" | |||||
| }, | |||||
| "Lebanon": { | |||||
| "Noncommunicable diseases": "384.6", | |||||
| "Injuries": "40.6", | |||||
| "Communicable & other Group I": "30.5" | |||||
| }, | |||||
| "Saudi Arabia": { | |||||
| "Noncommunicable diseases": "549.4", | |||||
| "Injuries": "41.1", | |||||
| "Communicable & other Group I": "71.3" | |||||
| }, | |||||
| "Iran (Islamic Republic of)": { | |||||
| "Injuries": "74.9", | |||||
| "Communicable & other Group I": "56.2", | |||||
| "Noncommunicable diseases": "569.3" | |||||
| }, | |||||
| "Iraq": { | |||||
| "Communicable & other Group I": "87.0", | |||||
| "Noncommunicable diseases": "715.5", | |||||
| "Injuries": "128.5" | |||||
| }, | |||||
| "Qatar": { | |||||
| "Communicable & other Group I": "28.3", | |||||
| "Injuries": "41.0", | |||||
| "Noncommunicable diseases": "407.0" | |||||
| }, | |||||
| "Afghanistan": { | |||||
| "Communicable & other Group I": "362.7", | |||||
| "Injuries": "169.2", | |||||
| "Noncommunicable diseases": "846.3" | |||||
| }, | |||||
| "Somalia": { | |||||
| "Noncommunicable diseases": "550.7", | |||||
| "Communicable & other Group I": "927.2", | |||||
| "Injuries": "188.5" | |||||
| }, | |||||
| "Kuwait": { | |||||
| "Communicable & other Group I": "82.5", | |||||
| "Injuries": "25.4", | |||||
| "Noncommunicable diseases": "406.3" | |||||
| }, | |||||
| "Oman": { | |||||
| "Injuries": "52.8", | |||||
| "Noncommunicable diseases": "478.2", | |||||
| "Communicable & other Group I": "84.2" | |||||
| }, | |||||
| "Tunisia": { | |||||
| "Noncommunicable diseases": "509.3", | |||||
| "Communicable & other Group I": "65.0", | |||||
| "Injuries": "39.1" | |||||
| } | |||||
| }, | |||||
| "Western Pacific": { | |||||
| "Mongolia": { | |||||
| "Injuries": "69.4", | |||||
| "Noncommunicable diseases": "966.5", | |||||
| "Communicable & other Group I": "82.8" | |||||
| }, | |||||
| "Cambodia": { | |||||
| "Injuries": "62.2", | |||||
| "Communicable & other Group I": "227.5", | |||||
| "Noncommunicable diseases": "394.0" | |||||
| }, | |||||
| "Japan": { | |||||
| "Injuries": "40.5", | |||||
| "Noncommunicable diseases": "244.2", | |||||
| "Communicable & other Group I": "33.9" | |||||
| }, | |||||
| "Brunei Darussalam": { | |||||
| "Injuries": "44.6", | |||||
| "Noncommunicable diseases": "475.3", | |||||
| "Communicable & other Group I": "56.1" | |||||
| }, | |||||
| "Solomon Islands": { | |||||
| "Communicable & other Group I": "230.6", | |||||
| "Injuries": "75.1", | |||||
| "Noncommunicable diseases": "709.7" | |||||
| }, | |||||
| "Viet Nam": { | |||||
| "Communicable & other Group I": "96.0", | |||||
| "Injuries": "59.0", | |||||
| "Noncommunicable diseases": "435.4" | |||||
| }, | |||||
| "Lao People's Democratic Republic": { | |||||
| "Communicable & other Group I": "328.7", | |||||
| "Injuries": "75.2", | |||||
| "Noncommunicable diseases": "680.0" | |||||
| }, | |||||
| "China": { | |||||
| "Communicable & other Group I": "41.4", | |||||
| "Noncommunicable diseases": "576.3", | |||||
| "Injuries": "50.4" | |||||
| }, | |||||
| "New Zealand": { | |||||
| "Injuries": "32.9", | |||||
| "Noncommunicable diseases": "313.6", | |||||
| "Communicable & other Group I": "18.0" | |||||
| }, | |||||
| "Papua New Guinea": { | |||||
| "Injuries": "100.1", | |||||
| "Communicable & other Group I": "554.3", | |||||
| "Noncommunicable diseases": "693.2" | |||||
| }, | |||||
| "Philippines": { | |||||
| "Communicable & other Group I": "226.4", | |||||
| "Noncommunicable diseases": "720.0", | |||||
| "Injuries": "53.8" | |||||
| }, | |||||
| "Malaysia": { | |||||
| "Injuries": "62.8", | |||||
| "Noncommunicable diseases": "563.2", | |||||
| "Communicable & other Group I": "117.4" | |||||
| }, | |||||
| "Australia": { | |||||
| "Communicable & other Group I": "13.7", | |||||
| "Noncommunicable diseases": "302.9", | |||||
| "Injuries": "28.2" | |||||
| }, | |||||
| "Fiji": { | |||||
| "Noncommunicable diseases": "804.0", | |||||
| "Injuries": "64.0", | |||||
| "Communicable & other Group I": "105.2" | |||||
| }, | |||||
| "Singapore": { | |||||
| "Communicable & other Group I": "66.2", | |||||
| "Noncommunicable diseases": "264.8", | |||||
| "Injuries": "17.5" | |||||
| }, | |||||
| "Republic of Korea": { | |||||
| "Injuries": "53.1", | |||||
| "Communicable & other Group I": "33.8", | |||||
| "Noncommunicable diseases": "302.1" | |||||
| } | |||||
| } | |||||
| }, | |||||
| points = [], | |||||
| region_p, | |||||
| region_val, | |||||
| region_i, | |||||
| country_p, | |||||
| country_i, | |||||
| cause_p, | |||||
| cause_i, | |||||
| cause_name = [], | |||||
| region, | |||||
| country, | |||||
| cause; | |||||
| cause_name['Communicable & other Group I'] = 'Communicable diseases'; | |||||
| cause_name['Noncommunicable diseases'] = 'Non-communicable diseases'; | |||||
| cause_name.Injuries = 'Injuries'; | |||||
| region_i = 0; | |||||
| for (region in data) { | |||||
| if (data.hasOwnProperty(region)) { | |||||
| region_val = 0; | |||||
| region_p = { | |||||
| id: "id_" + region_i, | |||||
| name: region, | |||||
| color: Highcharts.getOptions().colors[region_i] | |||||
| }; | |||||
| country_i = 0; | |||||
| for (country in data[region]) { | |||||
| if (data[region].hasOwnProperty(country)) { | |||||
| country_p = { | |||||
| id: region_p.id + "_" + country_i, | |||||
| name: country, | |||||
| parent: region_p.id | |||||
| }; | |||||
| points.push(country_p); | |||||
| cause_i = 0; | |||||
| for (cause in data[region][country]) { | |||||
| if (data[region][country].hasOwnProperty(cause)) { | |||||
| cause_p = { | |||||
| id: country_p.id + "_" + cause_i, | |||||
| name: cause_name[cause], | |||||
| parent: country_p.id, | |||||
| value: Math.round(+data[region][country][cause]) | |||||
| }; | |||||
| region_val += cause_p.value; | |||||
| points.push(cause_p); | |||||
| cause_i = cause_i + 1; | |||||
| } | |||||
| } | |||||
| country_i = country_i + 1; | |||||
| } | |||||
| } | |||||
| region_p.value = Math.round(region_val / country_i); | |||||
| points.push(region_p); | |||||
| region_i = region_i + 1; | |||||
| } | |||||
| } | |||||
| $('#container').highcharts({ | |||||
| series: [{ | |||||
| type: "treemap", | |||||
| layoutAlgorithm: 'squarified', | |||||
| allowDrillToNode: true, | |||||
| dataLabels: { | |||||
| enabled: false | |||||
| }, | |||||
| levelIsConstant: false, | |||||
| levels: [{ | |||||
| level: 1, | |||||
| dataLabels: { | |||||
| enabled: true | |||||
| }, | |||||
| borderWidth: 3 | |||||
| }], | |||||
| data: points | |||||
| }], | |||||
| subtitle: { | |||||
| text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.' | |||||
| }, | |||||
| title: { | |||||
| text: 'Global Mortality Rate 2012, per 100 000 population' | |||||
| } | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/heatmap.js"></script> | |||||
| <script src="../../js/modules/treemap.js"></script> | |||||
| <div id="container"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,102 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| #container { | |||||
| min-width: 300px; | |||||
| max-width: 600px; | |||||
| margin: 0 auto; | |||||
| } | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| series: [{ | |||||
| type: "treemap", | |||||
| layoutAlgorithm: 'stripes', | |||||
| alternateStartingDirection: true, | |||||
| levels: [{ | |||||
| level: 1, | |||||
| layoutAlgorithm: 'sliceAndDice', | |||||
| dataLabels: { | |||||
| enabled: true, | |||||
| align: 'left', | |||||
| verticalAlign: 'top', | |||||
| style: { | |||||
| fontSize: '15px', | |||||
| fontWeight: 'bold' | |||||
| } | |||||
| } | |||||
| }], | |||||
| data: [{ | |||||
| id: 'A', | |||||
| name: 'Apples', | |||||
| color: "#EC2500" | |||||
| }, { | |||||
| id: 'B', | |||||
| name: 'Bananas', | |||||
| color: "#ECE100" | |||||
| }, { | |||||
| id: 'O', | |||||
| name: 'Oranges', | |||||
| color: '#EC9800' | |||||
| }, { | |||||
| name: 'Anne', | |||||
| parent: 'A', | |||||
| value: 5 | |||||
| }, { | |||||
| name: 'Rick', | |||||
| parent: 'A', | |||||
| value: 3 | |||||
| }, { | |||||
| name: 'Peter', | |||||
| parent: 'A', | |||||
| value: 4 | |||||
| }, { | |||||
| name: 'Anne', | |||||
| parent: 'B', | |||||
| value: 4 | |||||
| }, { | |||||
| name: 'Rick', | |||||
| parent: 'B', | |||||
| value: 10 | |||||
| }, { | |||||
| name: 'Peter', | |||||
| parent: 'B', | |||||
| value: 1 | |||||
| }, { | |||||
| name: 'Anne', | |||||
| parent: 'O', | |||||
| value: 1 | |||||
| }, { | |||||
| name: 'Rick', | |||||
| parent: 'O', | |||||
| value: 3 | |||||
| }, { | |||||
| name: 'Peter', | |||||
| parent: 'O', | |||||
| value: 3 | |||||
| }, { | |||||
| name: 'Susanne', | |||||
| parent: 'Kiwi', | |||||
| value: 2, | |||||
| color: '#9EDE00' | |||||
| }] | |||||
| }], | |||||
| title: { | |||||
| text: 'Fruit consumption' | |||||
| } | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/modules/treemap.js"></script> | |||||
| <div id="container"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,93 +0,0 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <title>Highcharts Example</title> | |||||
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |||||
| <style type="text/css"> | |||||
| ${demo.css} | |||||
| </style> | |||||
| <script type="text/javascript"> | |||||
| $(function () { | |||||
| $('#container').highcharts({ | |||||
| chart: { | |||||
| type: 'waterfall' | |||||
| }, | |||||
| title: { | |||||
| text: 'Highcharts Waterfall' | |||||
| }, | |||||
| xAxis: { | |||||
| type: 'category' | |||||
| }, | |||||
| yAxis: { | |||||
| title: { | |||||
| text: 'USD' | |||||
| } | |||||
| }, | |||||
| legend: { | |||||
| enabled: false | |||||
| }, | |||||
| tooltip: { | |||||
| pointFormat: '<b>${point.y:,.2f}</b> USD' | |||||
| }, | |||||
| series: [{ | |||||
| upColor: Highcharts.getOptions().colors[2], | |||||
| color: Highcharts.getOptions().colors[3], | |||||
| data: [{ | |||||
| name: 'Start', | |||||
| y: 120000 | |||||
| }, { | |||||
| name: 'Product Revenue', | |||||
| y: 569000 | |||||
| }, { | |||||
| name: 'Service Revenue', | |||||
| y: 231000 | |||||
| }, { | |||||
| name: 'Positive Balance', | |||||
| isIntermediateSum: true, | |||||
| color: Highcharts.getOptions().colors[1] | |||||
| }, { | |||||
| name: 'Fixed Costs', | |||||
| y: -342000 | |||||
| }, { | |||||
| name: 'Variable Costs', | |||||
| y: -233000 | |||||
| }, { | |||||
| name: 'Balance', | |||||
| isSum: true, | |||||
| color: Highcharts.getOptions().colors[1] | |||||
| }], | |||||
| dataLabels: { | |||||
| enabled: true, | |||||
| formatter: function () { | |||||
| return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k'; | |||||
| }, | |||||
| style: { | |||||
| color: '#FFFFFF', | |||||
| fontWeight: 'bold', | |||||
| textShadow: '0px 0px 3px black' | |||||
| } | |||||
| }, | |||||
| pointPadding: 0 | |||||
| }] | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <script src="../../js/highcharts.js"></script> | |||||
| <script src="../../js/highcharts-more.js"></script> | |||||
| <script src="../../js/modules/exporting.js"></script> | |||||
| <div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div> | |||||
| </body> | |||||
| </html> | |||||
| @ -1,21 +0,0 @@ | |||||
| The MIT License (MIT) | |||||
| Copyright (c) 2010-2015 Torstein Hønsi, Gert Vaartjes | |||||
| Permission is hereby granted, free of charge, to any person obtaining a copy | |||||
| of this software and associated documentation files (the "Software"), to deal | |||||
| in the Software without restriction, including without limitation the rights | |||||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |||||
| copies of the Software, and to permit persons to whom the Software is | |||||
| furnished to do so, subject to the following conditions: | |||||
| The above copyright notice and this permission notice shall be included in all | |||||
| copies or substantial portions of the Software. | |||||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |||||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |||||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |||||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |||||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |||||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | |||||
| SOFTWARE. | |||||
| @ -1,28 +0,0 @@ | |||||
| <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" | |||||
| xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> | |||||
| <modelVersion>4.0.0</modelVersion> | |||||
| <parent> | |||||
| <groupId>com.highcharts.export</groupId> | |||||
| <artifactId>highcharts-export</artifactId> | |||||
| <version>2.1.0</version> | |||||
| </parent> | |||||
| <artifactId>highcharts-export-convert</artifactId> | |||||
| <packaging>jar</packaging> | |||||
| <name>highcharts-export-convert</name> | |||||
| <url>http://maven.apache.org</url> | |||||
| <organization> | |||||
| <name>Highsoft</name> | |||||
| <url>http://highcharts.com</url> | |||||
| </organization> | |||||
| <dependencies> | |||||
| <dependency> | |||||
| <groupId>com.google.code.gson</groupId> | |||||
| <artifactId>gson</artifactId> | |||||
| <version>2.2.2</version> | |||||
| <scope>compile</scope> | |||||
| </dependency> | |||||
| </dependencies> | |||||
| <build> | |||||
| <finalName>${project.artifactId}</finalName> | |||||
| </build> | |||||
| </project> | |||||
| @ -1,151 +0,0 @@ | |||||
| /** | |||||
| * @license Highcharts JS v2.3.3 (2012-11-02) | |||||
| * | |||||
| * (c) 20012-2014 | |||||
| * | |||||
| * Author: Gert Vaartjes | |||||
| * | |||||
| * License: www.highcharts.com/license | |||||
| */ | |||||
| package com.highcharts.export.converter; | |||||
| import java.io.File; | |||||
| import java.io.IOException; | |||||
| import java.net.SocketTimeoutException; | |||||
| import java.util.HashMap; | |||||
| import java.util.Map; | |||||
| import java.util.NoSuchElementException; | |||||
| import java.util.concurrent.TimeoutException; | |||||
| import org.apache.commons.io.FileUtils; | |||||
| import org.apache.log4j.Logger; | |||||
| import org.springframework.beans.factory.annotation.Autowired; | |||||
| import org.springframework.stereotype.Service; | |||||
| import com.google.gson.Gson; | |||||
| import com.highcharts.export.pool.PoolException; | |||||
| import com.highcharts.export.pool.BlockingQueuePool; | |||||
| import com.highcharts.export.server.Server; | |||||
| import com.highcharts.export.util.MimeType; | |||||
| @Service("svgConverter") | |||||
| public class SVGConverter { | |||||
| @Autowired | |||||
| private BlockingQueuePool serverPool; | |||||
| protected static Logger logger = Logger.getLogger("converter"); | |||||
| private static final String SVG_DOCTYPE = "<?xml version=\"1.0\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">"; | |||||
| public String convert(String input, MimeType mime, | |||||
| String constructor, String callback, String globalOptions, Float width, Float scale, String filename) throws SVGConverterException, PoolException, NoSuchElementException, TimeoutException { | |||||
| return this.convert(input, globalOptions, null, null, mime, constructor, callback, width, scale, filename); | |||||
| } | |||||
| public String convert(String input, String globalOptions, String dataOptions, String customCode, MimeType mime, | |||||
| String constructor, String callback, Float width, Float scale, String filename) throws SVGConverterException, PoolException, NoSuchElementException, TimeoutException { | |||||
| Map<String, String> params = new HashMap<String, String>(); | |||||
| Gson gson = new Gson(); | |||||
| if (filename != null) { | |||||
| params.put("outfile", filename); | |||||
| } else { | |||||
| params.put("type", mime.name().toLowerCase()); | |||||
| } | |||||
| params.put("infile", input); | |||||
| if (constructor != null && !constructor.isEmpty()) { | |||||
| params.put("constr", constructor); | |||||
| } | |||||
| if (callback != null && !callback.isEmpty()) { | |||||
| params.put("callback", callback); | |||||
| } | |||||
| if (globalOptions != null && !globalOptions.isEmpty()) { | |||||
| params.put("globaloptions", globalOptions); | |||||
| } | |||||
| if (dataOptions != null && !dataOptions.isEmpty()) { | |||||
| params.put("dataoptions", dataOptions); | |||||
| } | |||||
| if (customCode != null && !customCode.isEmpty()) { | |||||
| params.put("customcode", customCode); | |||||
| } | |||||
| if (width != null) { | |||||
| params.put("width", String.valueOf(width)); | |||||
| } | |||||
| if (scale != null) { | |||||
| params.put("scale", String.valueOf(scale)); | |||||
| } | |||||
| // parameters to JSON | |||||
| String json = gson.toJson(params); | |||||
| // send to phantomJs | |||||
| String output = ""; | |||||
| output = requestServer(json); | |||||
| // check first for errors | |||||
| if (output.length() > 5 && output.substring(0,5).equalsIgnoreCase("error")) { | |||||
| throw new SVGConverterException("recveived error from phantomjs:" + output); | |||||
| } | |||||
| return output; | |||||
| } | |||||
| /* | |||||
| * Redirect the SVG string directly | |||||
| */ | |||||
| public String redirectSVG(String svg, String filename) throws SVGConverterException { | |||||
| // add XML Doctype for svg | |||||
| String output = SVG_DOCTYPE + svg; | |||||
| if (filename != null) { | |||||
| // Create file and return filename instead. | |||||
| //String filename = createUniqueFileName(".svg"); | |||||
| File file = new File(filename); | |||||
| try { | |||||
| FileUtils.writeStringToFile(file, output); | |||||
| } catch (IOException ioex) { | |||||
| logger.error(ioex.getMessage()); | |||||
| throw new SVGConverterException("Error while converting, " + ioex.getMessage()); | |||||
| } | |||||
| return filename; | |||||
| } | |||||
| return output; | |||||
| } | |||||
| public String requestServer(String params) throws SVGConverterException, TimeoutException, NoSuchElementException, PoolException { | |||||
| Server server = null; | |||||
| try { | |||||
| server = (Server) serverPool.borrowObject(); | |||||
| String response = server.request(params); | |||||
| return response; | |||||
| } catch (SocketTimeoutException ste) { | |||||
| logger.error(ste); | |||||
| throw new TimeoutException(ste.getMessage()); | |||||
| } catch (TimeoutException te) { | |||||
| logger.error(te); | |||||
| throw new TimeoutException(te.getMessage()); | |||||
| } catch (PoolException nse) { | |||||
| logger.error("POOL EXHAUSTED!!"); | |||||
| throw new PoolException(nse.getMessage()); | |||||
| } catch (Exception e) { | |||||
| logger.error(e); | |||||
| throw new SVGConverterException("Error converting SVG: " + e.getMessage()); | |||||
| } finally { | |||||
| try { | |||||
| serverPool.returnObject(server, true); | |||||
| } catch (Exception e) { | |||||
| logger.error("Exception while returning server to pool: " + e.getMessage()); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| @ -1,31 +0,0 @@ | |||||
| /** | |||||
| * @license Highcharts JS v2.3.3 (2012-11-02) | |||||
| * | |||||
| * (c) 20012-2014 | |||||
| * | |||||
| * Author: Gert Vaartjes | |||||
| * | |||||
| * License: www.highcharts.com/license | |||||
| */ | |||||
| package com.highcharts.export.converter; | |||||
| public class SVGConverterException extends Exception { | |||||
| private static final long serialVersionUID = -5110552374074051446L; | |||||
| private String mistake; | |||||
| public SVGConverterException() { | |||||
| super(); | |||||
| mistake = "unknown to men"; | |||||
| } | |||||
| public SVGConverterException(String err) { | |||||
| super(err); // call super class constructor | |||||
| mistake = err; // save message | |||||
| } | |||||
| public String getError() { | |||||
| return mistake; | |||||
| } | |||||
| } | |||||
| @ -1,131 +0,0 @@ | |||||
| package com.highcharts.export.pool; | |||||
| import com.highcharts.export.util.TempDir; | |||||
| import java.io.File; | |||||
| import java.io.IOException; | |||||
| import java.nio.file.Files; | |||||
| import java.nio.file.Path; | |||||
| import java.nio.file.Paths; | |||||
| import java.nio.file.attribute.BasicFileAttributes; | |||||
| import java.util.Collection; | |||||
| import java.util.Date; | |||||
| import java.util.Queue; | |||||
| import java.util.concurrent.atomic.AtomicInteger; | |||||
| import org.apache.commons.io.FileUtils; | |||||
| import org.apache.commons.io.filefilter.IOFileFilter; | |||||
| import org.apache.log4j.Logger; | |||||
| import org.springframework.scheduling.annotation.Scheduled; | |||||
| public abstract class AbstractPool<T> implements ObjectPool<T> { | |||||
| final ObjectFactory<T> objectFactory; | |||||
| Queue<T> queue; | |||||
| final AtomicInteger poolSize = new AtomicInteger(0); | |||||
| int maxWait; | |||||
| final int capacity; | |||||
| final long retentionTime; | |||||
| protected static Logger logger = Logger.getLogger("pool"); | |||||
| public AbstractPool(ObjectFactory<T> objectFactory, int number, int maxWait, Long retentionTime) throws PoolException { | |||||
| this.objectFactory = objectFactory; | |||||
| this.capacity = number; | |||||
| this.maxWait = maxWait; | |||||
| this.retentionTime = retentionTime; | |||||
| } | |||||
| @Override | |||||
| public void createObject() { | |||||
| T object = objectFactory.create(); | |||||
| queue.add(object); | |||||
| poolSize.getAndIncrement(); | |||||
| } | |||||
| @Override | |||||
| public void destroyObject(T object) { | |||||
| objectFactory.destroy(object); | |||||
| } | |||||
| @Override | |||||
| @Scheduled(initialDelay = 10000, fixedRate = 5000) | |||||
| public void poolCleaner() throws InterruptedException, PoolException { | |||||
| logger.debug("HC: queue size: " + queue.size() + " poolSize " + poolSize.get()); | |||||
| int size = poolSize.get(); | |||||
| // remove invalid objects | |||||
| for (int i = 0; i < size; i++) { | |||||
| T object = borrowObject(); | |||||
| if (object == null) { | |||||
| logger.debug("HC: object is null"); | |||||
| } else { | |||||
| logger.debug("HC: validating " + object.toString()); | |||||
| if (!objectFactory.validate(object)) { | |||||
| logger.debug("HC: destroying " + object.toString()); | |||||
| destroyObject(object); | |||||
| } else { | |||||
| returnObject(object, false); | |||||
| } | |||||
| } | |||||
| } | |||||
| int number = poolSize.get() - capacity; | |||||
| logger.debug("in cleanpool, the surplus or shortage is: " + number); | |||||
| synchronized (this) { | |||||
| int iterations = Math.abs(number); | |||||
| for (int i = 0; i < iterations; i++) { | |||||
| if (number < 1) { | |||||
| this.createObject(); | |||||
| } else { | |||||
| T object = borrowObject(); | |||||
| this.destroyObject(object); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| @Override | |||||
| @Scheduled(initialDelay = 15000, fixedRate = 60000) | |||||
| public void tempDirCleaner() { | |||||
| IOFileFilter filter = new IOFileFilter() { | |||||
| @Override | |||||
| public boolean accept(File file) { | |||||
| try { | |||||
| Long now = new Date().getTime(); | |||||
| Path path = Paths.get(file.getAbsolutePath()); | |||||
| BasicFileAttributes attrs = Files.readAttributes(path, BasicFileAttributes.class); | |||||
| Long inBetween = now - attrs.lastAccessTime().toMillis(); | |||||
| if (inBetween > retentionTime) { | |||||
| return true; | |||||
| } | |||||
| } catch (IOException ioex) { | |||||
| logger.error("Error: while selection files for deletion: " + ioex.getMessage()); | |||||
| } | |||||
| return false; | |||||
| } | |||||
| @Override | |||||
| public boolean accept(File file, String string) { | |||||
| throw new UnsupportedOperationException("Not supported yet."); | |||||
| } | |||||
| }; | |||||
| Collection<File> oldFiles = FileUtils.listFiles(TempDir.outputDir.toFile(),filter, null); | |||||
| for (File file : oldFiles) { | |||||
| file.delete(); | |||||
| } | |||||
| } | |||||
| /*Getter and Setters*/ | |||||
| public int getMaxWait() { | |||||
| return maxWait; | |||||
| } | |||||
| public void setMaxWait(int maxWait) { | |||||
| this.maxWait = maxWait; | |||||
| } | |||||
| } | |||||
| @ -1,52 +0,0 @@ | |||||
| package com.highcharts.export.pool; | |||||
| import java.util.concurrent.LinkedBlockingQueue; | |||||
| import java.util.concurrent.TimeUnit; | |||||
| public class BlockingQueuePool<T> extends AbstractPool<T>{ | |||||
| LinkedBlockingQueue<T> linkQueue; | |||||
| /** | |||||
| * @param factory | |||||
| * @param number | |||||
| * @throws PoolException | |||||
| */ | |||||
| public BlockingQueuePool(ObjectFactory<T> factory, int number, int maxWait, long retentionTime) throws PoolException { | |||||
| super(factory, number, maxWait, retentionTime); | |||||
| queue = new LinkedBlockingQueue<T>(); | |||||
| linkQueue = (LinkedBlockingQueue<T>) queue; | |||||
| } | |||||
| @Override | |||||
| public T borrowObject() throws InterruptedException, PoolException { | |||||
| T object = linkQueue.poll(maxWait, TimeUnit.MILLISECONDS); | |||||
| if (object == null) { | |||||
| throw new PoolException(); | |||||
| } | |||||
| poolSize.getAndDecrement(); | |||||
| return object; | |||||
| } | |||||
| @Override | |||||
| public void returnObject(T object, boolean validate) throws InterruptedException { | |||||
| if (object == null) { | |||||
| return; | |||||
| } | |||||
| boolean valid = ( !validate || objectFactory.validate(object)) ? true : false; | |||||
| if (!valid) { | |||||
| destroyObject(object); | |||||
| } else { | |||||
| objectFactory.passivate(object); | |||||
| linkQueue.offer(object, maxWait, TimeUnit.MILLISECONDS); | |||||
| poolSize.incrementAndGet(); | |||||
| } | |||||
| } | |||||
| } | |||||
| @ -1,9 +0,0 @@ | |||||
| package com.highcharts.export.pool; | |||||
| public interface ObjectFactory<T>{ | |||||
| public T create(); | |||||
| public boolean validate(T object); | |||||
| public void destroy(T object); | |||||
| public void activate(T object); | |||||
| public void passivate(T Object); | |||||
| } | |||||
| @ -1,19 +0,0 @@ | |||||
| /* | |||||
| * To change this template, choose Tools | Templates | |||||
| * and open the template in the editor. | |||||
| */ | |||||
| package com.highcharts.export.pool; | |||||
| /** | |||||
| * | |||||
| * @author gert | |||||
| */ | |||||
| public interface ObjectPool<T> { | |||||
| public void createObject(); | |||||
| public void destroyObject(T object); | |||||
| public T borrowObject() throws InterruptedException, PoolException; | |||||
| public void returnObject(T object, boolean validate) throws InterruptedException; | |||||
| public void poolCleaner() throws PoolException, InterruptedException; | |||||
| public void tempDirCleaner(); | |||||
| } | |||||
| @ -1,31 +0,0 @@ | |||||
| /** | |||||
| * @license Highcharts JS v2.3.3 (2012-11-02) | |||||
| * | |||||
| * (c) 20012-2014 | |||||
| * | |||||
| * Author: Gert Vaartjes | |||||
| * | |||||
| * License: www.highcharts.com/license | |||||
| */ | |||||
| package com.highcharts.export.pool; | |||||
| public class PoolException extends Exception { | |||||
| private static final long serialVersionUID = 3925816328286206059L; | |||||
| private final String mistake; | |||||
| public PoolException() { | |||||
| super(); | |||||
| mistake = "unknown to men"; | |||||
| } | |||||
| public PoolException(String err) { | |||||
| super(err); // call super class constructor | |||||
| mistake = err; // save message | |||||
| } | |||||
| public String getError() { | |||||
| return mistake; | |||||
| } | |||||
| } | |||||
| @ -1,239 +0,0 @@ | |||||
| package com.highcharts.export.pool; | |||||
| import java.nio.file.*; | |||||
| import java.util.HashMap; | |||||
| import java.util.Map; | |||||
| import javax.annotation.PostConstruct; | |||||
| import org.apache.log4j.Logger; | |||||
| import com.highcharts.export.server.Server; | |||||
| import com.highcharts.export.server.ServerState; | |||||
| import com.highcharts.export.util.TempDir; | |||||
| import java.io.File; | |||||
| import java.io.FileOutputStream; | |||||
| import java.io.IOException; | |||||
| import java.io.InputStream; | |||||
| import java.io.OutputStream; | |||||
| import java.net.URL; | |||||
| import java.net.URLClassLoader; | |||||
| import java.util.TreeMap; | |||||
| import org.apache.commons.io.IOUtils; | |||||
| import org.springframework.core.io.ClassPathResource; | |||||
| public class ServerObjectFactory implements ObjectFactory<Server> { | |||||
| public String exec; | |||||
| public String script; | |||||
| private String host; | |||||
| private int basePort; | |||||
| private int readTimeout; | |||||
| private int poolSize; | |||||
| private int connectTimeout; | |||||
| private int maxTimeout; | |||||
| private static TreeMap<Integer, PortStatus> portUsage = new TreeMap<>(); | |||||
| protected static Logger logger = Logger.getLogger("pool"); | |||||
| private enum PortStatus { | |||||
| BUSY, | |||||
| FREE; | |||||
| } | |||||
| @Override | |||||
| public Server create() { | |||||
| logger.debug("in makeObject, " + exec + ", " + script + ", " + host); | |||||
| Integer port = this.getAvailablePort(); | |||||
| String separator = FileSystems.getDefault().getSeparator(); | |||||
| if (script.isEmpty()) { | |||||
| // use the bundled highcharts-convert.js script | |||||
| script = TempDir.getPhantomJsDir().toAbsolutePath().toString() + separator + "highcharts-convert.js"; | |||||
| } | |||||
| Server server = new Server(exec, script, host, port, connectTimeout, readTimeout, maxTimeout); | |||||
| portUsage.put(port, PortStatus.BUSY); | |||||
| return server; | |||||
| } | |||||
| @Override | |||||
| public boolean validate(Server server) { | |||||
| boolean isValid = false; | |||||
| try { | |||||
| if(server.getState() != ServerState.IDLE) { | |||||
| logger.debug("server didn\'t pass validation"); | |||||
| return false; | |||||
| } | |||||
| String result = server.request("{\"status\":\"isok\"}"); | |||||
| if(result.indexOf("OK") > -1) { | |||||
| isValid = true; | |||||
| logger.debug("server passed validation"); | |||||
| } else { | |||||
| logger.debug("server didn\'t pass validation"); | |||||
| } | |||||
| } catch (Exception e) { | |||||
| logger.error("Error while validating object in Pool: " + e.getMessage()); | |||||
| } | |||||
| return isValid; | |||||
| } | |||||
| @Override | |||||
| public void destroy(Server server) { | |||||
| ServerObjectFactory.releasePort(server.getPort()); | |||||
| server.cleanup(); | |||||
| } | |||||
| @Override | |||||
| public void activate(Server server) { | |||||
| server.setState(ServerState.ACTIVE); | |||||
| } | |||||
| @Override | |||||
| public void passivate(Server server) { | |||||
| server.setState(ServerState.IDLE); | |||||
| } | |||||
| public static void releasePort(Integer port) { | |||||
| logger.debug("Releasing port " + port); | |||||
| portUsage.put(port, PortStatus.FREE); | |||||
| } | |||||
| public Integer getAvailablePort() { | |||||
| /* first we check within the defined port range from baseport | |||||
| * up to baseport + poolsize | |||||
| */ | |||||
| int port = basePort; | |||||
| for (; port < basePort + poolSize; port++) { | |||||
| if (portUsage.containsKey(port)) { | |||||
| if (portUsage.get(port) == PortStatus.FREE) { | |||||
| return port; | |||||
| } | |||||
| } else { | |||||
| // doesn't exist any longer, but is within the valid port range | |||||
| return port; | |||||
| } | |||||
| } | |||||
| // at this point there is no free port, we have to look outside of the valid port range | |||||
| logger.debug("Nothing free in Portusage " + portUsage.toString()); | |||||
| return portUsage.lastKey() + 1; | |||||
| } | |||||
| /*Getters and Setters*/ | |||||
| public String getExec() { | |||||
| return exec; | |||||
| } | |||||
| public void setExec(String exec) { | |||||
| this.exec = exec; | |||||
| } | |||||
| public String getScript() { | |||||
| return script; | |||||
| } | |||||
| public void setScript(String script) { | |||||
| this.script = script; | |||||
| } | |||||
| public String getHost() { | |||||
| return host; | |||||
| } | |||||
| public void setHost(String host) { | |||||
| this.host = host; | |||||
| } | |||||
| public int getBasePort() { | |||||
| return basePort; | |||||
| } | |||||
| public void setBasePort(int basePort) { | |||||
| this.basePort = basePort; | |||||
| } | |||||
| public int getReadTimeout() { | |||||
| return readTimeout; | |||||
| } | |||||
| public void setReadTimeout(int readTimeout) { | |||||
| this.readTimeout = readTimeout; | |||||
| } | |||||
| public int getConnectTimeout() { | |||||
| return connectTimeout; | |||||
| } | |||||
| public void setConnectTimeout(int connectTimeout) { | |||||
| this.connectTimeout = connectTimeout; | |||||
| } | |||||
| public int getMaxTimeout() { | |||||
| return maxTimeout; | |||||
| } | |||||
| public void setMaxTimeout(int maxTimeout) { | |||||
| this.maxTimeout = maxTimeout; | |||||
| } | |||||
| public int getPoolSize() { | |||||
| return poolSize; | |||||
| } | |||||
| public void setPoolSize(int poolSize) { | |||||
| this.poolSize = poolSize; | |||||
| } | |||||
| @PostConstruct | |||||
| public void afterBeanInit() { | |||||
| URL u = getClass().getProtectionDomain().getCodeSource().getLocation(); | |||||
| URLClassLoader jarLoader = new URLClassLoader(new URL[]{u}, Thread.currentThread().getContextClassLoader()); | |||||
| String filenames[] = new String[] {"highcharts-convert.js", | |||||
| "jquery.1.9.1.min.js", | |||||
| "highcharts.js", | |||||
| "highstock.js", | |||||
| "highcharts-more.js", | |||||
| "data.js", | |||||
| "drilldown.js", | |||||
| "funnel.js", | |||||
| "heatmap.js", | |||||
| "highcharts-3d.js", | |||||
| "no-data-to-display.js", | |||||
| "solid-gauge.js", | |||||
| "map.js", | |||||
| "broken-axis.js", | |||||
| "treemap.js"}; | |||||
| for (String filename : filenames) { | |||||
| ClassPathResource resource = new ClassPathResource("phantomjs/" + filename, jarLoader); | |||||
| if (resource.exists()) { | |||||
| Path path = Paths.get(TempDir.getPhantomJsDir().toString(), filename); | |||||
| File file; | |||||
| try { | |||||
| file = Files.createFile(path).toFile(); | |||||
| file.deleteOnExit(); | |||||
| try (InputStream in = resource.getInputStream(); | |||||
| OutputStream out=new FileOutputStream(file)) | |||||
| { | |||||
| IOUtils.copy(in, out); | |||||
| } | |||||
| } catch (IOException ioex) { | |||||
| logger.error("Error while setting up phantomjs environment: " + ioex.getMessage()); | |||||
| } | |||||
| } else { | |||||
| logger.debug("Copy javascript file to temp folder, resource doesn't exist: " + filename); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| @ -1,168 +0,0 @@ | |||||
| package com.highcharts.export.server; | |||||
| import java.io.BufferedReader; | |||||
| import java.io.IOException; | |||||
| import java.io.InputStream; | |||||
| import java.io.InputStreamReader; | |||||
| import java.io.OutputStream; | |||||
| import java.net.SocketTimeoutException; | |||||
| import java.net.URL; | |||||
| import java.net.URLConnection; | |||||
| import java.util.ArrayList; | |||||
| import java.util.Timer; | |||||
| import java.util.concurrent.TimeoutException; | |||||
| import org.apache.commons.io.IOUtils; | |||||
| import com.highcharts.export.converter.SVGConverterException; | |||||
| import com.highcharts.export.util.TempDir; | |||||
| import java.util.logging.Level; | |||||
| import java.util.logging.Logger; | |||||
| public class Server { | |||||
| private Process process; | |||||
| private final int port; | |||||
| private final String host; | |||||
| private final int readTimeout; | |||||
| private final int connectTimeout; | |||||
| private final int maxTimeout; | |||||
| private ServerState state = ServerState.IDLE; | |||||
| protected static final Logger logger = Logger.getLogger("server"); | |||||
| public Server(String exec, String script, String host, int port, int connectTimeout, int readTimeout, int maxTimeout) { | |||||
| // assign port and host to this instance | |||||
| this.port = port; | |||||
| this.host = host; | |||||
| this.connectTimeout = connectTimeout; | |||||
| this.readTimeout = readTimeout; | |||||
| this.maxTimeout = maxTimeout; | |||||
| try { | |||||
| ArrayList<String> commands = new ArrayList<String>(); | |||||
| commands.add(exec); | |||||
| commands.add(script); | |||||
| commands.add("-host"); | |||||
| commands.add(host); | |||||
| commands.add("-port"); | |||||
| commands.add("" + port); | |||||
| logger.log(Level.FINE, commands.toString()); | |||||
| process = new ProcessBuilder(commands).start(); | |||||
| final BufferedReader bufferedReader = new BufferedReader( | |||||
| new InputStreamReader(process.getInputStream())); | |||||
| String readLine = bufferedReader.readLine(); | |||||
| if (readLine == null || !readLine.contains("ready")) { | |||||
| logger.log(Level.WARNING, "Command starting Phantomjs failed"); | |||||
| process.destroy(); | |||||
| throw new RuntimeException("Error, PhantomJS couldnot start"); | |||||
| } | |||||
| initialize(); | |||||
| Runtime.getRuntime().addShutdownHook(new Thread() { | |||||
| @Override | |||||
| public void run() { | |||||
| if (process != null) { | |||||
| logger.log(Level.WARNING, "Shutting down PhantomJS instance, kill process directly, {0}", this.toString()); | |||||
| try { | |||||
| process.getErrorStream().close(); | |||||
| process.getInputStream().close(); | |||||
| process.getOutputStream().close(); | |||||
| } catch (IOException e) { | |||||
| logger.log(Level.WARNING, "Error while shutting down process: {0}", e.getMessage()); | |||||
| } | |||||
| process.destroy(); | |||||
| } | |||||
| } | |||||
| }); | |||||
| } catch (IOException e) { | |||||
| throw new RuntimeException(e); | |||||
| } | |||||
| } | |||||
| public void initialize() { | |||||
| logger.log(Level.FINE, "Phantom server started on port {0}", port); | |||||
| } | |||||
| public String request(String params) throws SocketTimeoutException, SVGConverterException, TimeoutException { | |||||
| String response = ""; | |||||
| Timer _timer = new Timer(); | |||||
| try { | |||||
| URL url = new URL("http://" + host + ":" | |||||
| + port + "/"); | |||||
| // TEST with running a local phantom instance | |||||
| // url = new URL("http://" + host + ":7777/"); | |||||
| // logger.log(Level.INFO, "requesting url: " + url.toString()); | |||||
| // logger.log(Level.INFO, "parameters: " + params); | |||||
| state = ServerState.BUSY; | |||||
| _timer.schedule(new TimeOut(this), maxTimeout); | |||||
| URLConnection connection = url.openConnection(); | |||||
| connection.setDoOutput(true); | |||||
| connection.setConnectTimeout(connectTimeout); | |||||
| connection.setReadTimeout(readTimeout); | |||||
| OutputStream out = connection.getOutputStream(); | |||||
| out.write(params.getBytes("utf-8")); | |||||
| out.close(); | |||||
| InputStream in = connection.getInputStream(); | |||||
| response = IOUtils.toString(in, "utf-8"); | |||||
| in.close(); | |||||
| _timer.cancel(); | |||||
| state = ServerState.IDLE; | |||||
| } catch (SocketTimeoutException ste) { | |||||
| _timer.cancel(); | |||||
| throw new SocketTimeoutException(ste.getMessage()); | |||||
| } catch (Exception e) { | |||||
| if(state == ServerState.TIMEDOUT) { | |||||
| throw new TimeoutException(e.getMessage()); | |||||
| } | |||||
| _timer.cancel(); | |||||
| throw new SVGConverterException(e.getMessage()); | |||||
| } | |||||
| return response; | |||||
| } | |||||
| public void cleanup() { | |||||
| try { | |||||
| /* It's not enough to only destroy the process, this helps*/ | |||||
| process.getErrorStream().close(); | |||||
| process.getInputStream().close(); | |||||
| process.getOutputStream().close(); | |||||
| } catch (IOException e) { | |||||
| logger.log(Level.SEVERE, "Error while shutting down process: {0}", e.getMessage()); | |||||
| } | |||||
| process.destroy(); | |||||
| process = null; | |||||
| logger.log(Level.FINE, "Destroyed phantomJS process running on port {0}", port); | |||||
| } | |||||
| public int getPort() { | |||||
| return port; | |||||
| } | |||||
| public String getHost() { | |||||
| return host; | |||||
| } | |||||
| public ServerState getState() { | |||||
| return state; | |||||
| } | |||||
| public void setState(ServerState state) { | |||||
| this.state = state; | |||||
| } | |||||
| @Override | |||||
| public String toString() { | |||||
| return this.getClass().getName() + "listening to port: " + port; | |||||
| } | |||||
| } | |||||
| @ -1,6 +0,0 @@ | |||||
| package com.highcharts.export.server; | |||||
| public enum ServerState { | |||||
| IDLE, DEAD, BUSY, TIMEDOUT, ACTIVE; | |||||
| } | |||||
| @ -1,21 +0,0 @@ | |||||
| package com.highcharts.export.server; | |||||
| import java.util.TimerTask; | |||||
| import org.apache.log4j.Logger; | |||||
| public class TimeOut extends TimerTask { | |||||
| private final Server server; | |||||
| protected static Logger logger = Logger.getLogger("utils"); | |||||
| public TimeOut(Server server) { | |||||
| this.server = server; | |||||
| } | |||||
| @Override | |||||
| public void run(){ | |||||
| logger.debug("Timed out while downloading."); | |||||
| server.setState(ServerState.TIMEDOUT); | |||||
| } | |||||
| }; | |||||
| @ -1,53 +0,0 @@ | |||||
| /** | |||||
| * @license Highcharts JS v2.3.3 (2012-11-02) | |||||
| * | |||||
| * (c) 2012-2014 | |||||
| * | |||||
| * Author: Gert Vaartjes | |||||
| * | |||||
| * License: www.highcharts.com/license | |||||
| */ | |||||
| package com.highcharts.export.util; | |||||
| import java.util.EnumSet; | |||||
| import java.util.HashMap; | |||||
| import java.util.Map; | |||||
| public enum MimeType { | |||||
| PNG("image/png", "png"), | |||||
| JPEG("image/jpeg", "jpeg"), | |||||
| PDF("application/pdf", "pdf"), | |||||
| SVG("image/svg+xml", "svg"); | |||||
| private static final Map<String, MimeType> lookup = new HashMap<>(); | |||||
| static { | |||||
| for (MimeType m : EnumSet.allOf(MimeType.class)) { | |||||
| lookup.put(m.getType(), m); | |||||
| } | |||||
| } | |||||
| private String type; | |||||
| private String extension; | |||||
| private MimeType(String type, String extension) { | |||||
| this.type = type; | |||||
| this.extension = extension; | |||||
| } | |||||
| public String getType() { | |||||
| return type; | |||||
| } | |||||
| public String getExtension() { | |||||
| return extension; | |||||
| } | |||||
| public static MimeType get(String type) { | |||||
| MimeType mime = lookup.get(type); | |||||
| if (mime != null) { | |||||
| return mime; | |||||
| } | |||||
| return MimeType.PNG; | |||||
| } | |||||
| } | |||||
| @ -1,71 +0,0 @@ | |||||
| /* | |||||
| * To change this template, choose Tools | Templates | |||||
| * and open the template in the editor. | |||||
| */ | |||||
| package com.highcharts.export.util; | |||||
| import java.io.IOException; | |||||
| import java.nio.file.Files; | |||||
| import java.nio.file.Path; | |||||
| import java.nio.file.Paths; | |||||
| import org.apache.commons.io.FileUtils; | |||||
| import org.apache.commons.io.FilenameUtils; | |||||
| import org.apache.log4j.Logger; | |||||
| /** | |||||
| * | |||||
| * @author gert | |||||
| */ | |||||
| public class TempDir { | |||||
| public static Path tmpDir; | |||||
| public static Path outputDir; | |||||
| public static Path phantomJsDir; | |||||
| protected static Logger logger = Logger.getLogger(TempDir.class.getName()); | |||||
| public TempDir() throws IOException { | |||||
| tmpDir = Files.createTempDirectory("export"); | |||||
| // Delete this directory on deletion of the JVM | |||||
| tmpDir.toFile().deleteOnExit(); | |||||
| outputDir = Files.createDirectory(Paths.get(tmpDir.toString(), "output")); | |||||
| outputDir.toFile().deleteOnExit(); | |||||
| phantomJsDir = Files.createDirectory(Paths.get(tmpDir.toString(), "phantomjs")); | |||||
| phantomJsDir.toFile().deleteOnExit(); | |||||
| Runtime.getRuntime().addShutdownHook(new Thread() { | |||||
| @Override | |||||
| public void run() { | |||||
| FileUtils.deleteQuietly(tmpDir.toFile()); | |||||
| } | |||||
| }); | |||||
| logger.debug("Highcharts Export Server using " +TempDir.getTmpDir() + " as TEMP folder."); | |||||
| } | |||||
| public static Path getTmpDir() { | |||||
| return tmpDir; | |||||
| } | |||||
| public static Path getOutputDir() { | |||||
| return outputDir; | |||||
| } | |||||
| public static Path getPhantomJsDir() { | |||||
| return phantomJsDir; | |||||
| } | |||||
| public static String getDownloadLink(String filename) { | |||||
| filename = FilenameUtils.getName(filename); | |||||
| String link = "files/" + filename; | |||||
| return link; | |||||
| } | |||||
| } | |||||
| @ -1,35 +0,0 @@ | |||||
| #### phantomjs properties #### | |||||
| # the host and port phantomjs listens to | |||||
| host = 127.0.0.1 | |||||
| port = 7777 | |||||
| # location of the phantomjs executable, could be for example /usr/local/bin/phantomjs | |||||
| exec = /usr/local/bin/phantomjs | |||||
| # specify here an alternative location (the whole path!) for the script that starts an Phantomjs server. F.eks /home/bert/scripts/my-highcharts-convert.js | |||||
| # Leave empty if you're using the script bundled with the export-server. | |||||
| script = | |||||
| #### connect properties used to connect with phantomjs running as HTTP-server #### | |||||
| # all values in milliseconds | |||||
| # specifies the timeout when reading from phantomjs when a connection is established | |||||
| readTimeout = 6000 | |||||
| # timeout to be used when opening a communications link to the phantomjs server | |||||
| connectTimeout = 500 | |||||
| # the whole request to the phantomjs server is scheduled, max timeout can last to this value. This is because in java you can't rely on the above two timeouts. | |||||
| maxTimeout = 6500 | |||||
| #### Pool properties #### | |||||
| # number of phantomjs servers you can run in the pool. | |||||
| poolSize = 10 | |||||
| # The pool is implemented as a BlockingQueue. When asking for a phantom server connection and nothing is available, it waits for the number of milliseconds defined by maxWait | |||||
| maxWait = 1000 | |||||
| # Keep files in the temp folder for a certain retentionTime, defined in miliseconds | |||||
| retentionTime = 60000 | |||||
| @ -1,20 +0,0 @@ | |||||
| #Console Appender | |||||
| log4j.appender.console=org.apache.log4j.ConsoleAppender | |||||
| log4j.appender.console.layout=org.apache.log4j.PatternLayout | |||||
| log4j.appender.console.layout.ConversionPattern=[%5p] [%t %d{hh:mm:ss}] (%F:%M:%L) %m%n | |||||
| log4j.appender.R=org.apache.log4j.RollingFileAppender | |||||
| log4j.appender.R.File=${catalina.base}/logs/export-convert.log | |||||
| log4j.appender.R.MaxFileSize=1000KB | |||||
| log4j.appender.R.MaxBackupIndex=10 | |||||
| log4j.appender.R.layout=org.apache.log4j.PatternLayout | |||||
| log4j.appender.R.layout.ConversionPattern=[%5p] [%t %d{hh:mm:ss}] (%F:%M:%L) %m%n | |||||
| # Debug specific class | |||||
| #log4j.logger.services=DEBUG | |||||
| #log4j.logger.converter=DEBUG | |||||
| #log4j.logger.exporter=DEBUG | |||||
| #log4j.logger.pool=DEBUG | |||||
| log4j.rootLogger=ERROR,console,R | |||||
| #log4j.rootLogger=ERROR,console | |||||
| @ -1,11 +0,0 @@ | |||||
| (function(g,p){function x(a,c,b,d,i){i=i||0;d=d||y;m(a.slice(i,i+d),c);i+d<a.length?setTimeout(function(){x(a,c,b,d,i+d)}):b&&b()}var O=function(){},P=g.Color,l=g.Series,e=g.seriesTypes,m=g.each,s=g.extend,Q=p.addEvent,R=p.fireEvent,S=g.merge,T=g.pick,k=g.wrap,q=g.getOptions().plotOptions,y=5E4;m(["area","arearange","column","line","scatter"],function(a){if(q[a])q[a].boostThreshold=5E3});m(["translate","generatePoints","drawTracker","drawPoints","render"],function(a){function c(b){var c=this.options.stacking&& | |||||
| (a==="translate"||a==="generatePoints");if((this.processedXData||this.options.data).length<(this.options.boostThreshold||Number.MAX_VALUE)||c){if(a==="render"&&this.image)this.image.attr({href:""}),this.animate=null;b.call(this)}else if(this[a+"Canvas"])this[a+"Canvas"]()}k(l.prototype,a,c);a==="translate"&&(e.column&&k(e.column.prototype,a,c),e.arearange&&k(e.arearange.prototype,a,c))});k(l.prototype,"getExtremes",function(a){this.hasExtremes()||a.apply(this,Array.prototype.slice.call(arguments, | |||||
| 1))});k(l.prototype,"setData",function(a){this.hasExtremes(!0)||a.apply(this,Array.prototype.slice.call(arguments,1))});k(l.prototype,"processData",function(a){this.hasExtremes(!0)||a.apply(this,Array.prototype.slice.call(arguments,1))});g.extend(l.prototype,{pointRange:0,hasExtremes:function(a){var c=this.options,b=this.xAxis.options,d=this.yAxis.options;return c.data.length>(c.boostThreshold||Number.MAX_VALUE)&&typeof d.min==="number"&&typeof d.max==="number"&&(!a||typeof b.min==="number"&&typeof b.max=== | |||||
| "number")},destroyGraphics:function(){var a=this,c=this.points,b,d;for(d=0;d<c.length;d+=1)if((b=c[d])&&b.graphic)b.graphic=b.graphic.destroy();m(["graph","area"],function(b){a[b]&&(a[b]=a[b].destroy())})},getContext:function(){var a=this.chart.plotWidth,c=this.chart.plotHeight;this.canvas?this.ctx.clearRect(0,0,a,c):(this.canvas=document.createElement("canvas"),this.image=this.chart.renderer.image("",0,0,a,c).add(this.group),this.ctx=this.canvas.getContext("2d"));this.canvas.setAttribute("width", | |||||
| a);this.canvas.setAttribute("height",c);this.image.attr({width:a,height:c});return this.ctx},canvasToSVG:function(){this.image.attr({href:this.canvas.toDataURL("image/png")})},cvsLineTo:function(a,c,b){a.lineTo(c,b)},renderCanvas:function(){var a=this,c=a.options,b=a.chart,d=this.xAxis,i=this.yAxis,h,g,e=0,k=a.processedXData,l=a.processedYData,m=c.data,j=d.getExtremes(),p=j.min,q=j.max,j=i.getExtremes(),U=j.min,V=j.max,z={},t,W=!!a.sampling,A,B=c.marker&&c.marker.radius,C=this.cvsDrawPoint,D=c.lineWidth? | |||||
| this.cvsLineTo:!1,E=B<=1?this.cvsMarkerSquare:this.cvsMarkerCircle,X=c.enableMouseTracking!==!1,F,j=c.threshold,n=i.getThreshold(j),G=typeof j==="number",H=n,Y=this.fill,I=a.pointArrayMap&&a.pointArrayMap.join(",")==="low,high",J=!!c.stacking,Z=a.cropStart||0,j=b.options.loading,$=a.requireSorting,K,aa=c.connectNulls,L=!k,u,v,o,r,ba=a.fillOpacity?(new P(a.color)).setOpacity(T(c.fillOpacity,0.75)).get():a.color,M=function(){Y?(h.fillStyle=ba,h.fill()):(h.strokeStyle=a.color,h.lineWidth=c.lineWidth, | |||||
| h.stroke())},N=function(a,b,c){e===0&&h.beginPath();K?h.moveTo(a,b):C?C(h,a,b,c,F):D?D(h,a,b):E&&E(h,a,b,B);e+=1;e===1E3&&(M(),e=0);F={clientX:a,plotY:b,yBottom:c}},w=function(a,b,c){X&&!z[a+","+b]&&(A.push({clientX:a,plotX:a,plotY:b,i:Z+c}),z[a+","+b]=!0)};this.points&&this.destroyGraphics();a.plotGroup("group","series",a.visible?"visible":"hidden",c.zIndex,b.seriesGroup);a.getAttribs();a.markerGroup=a.group;Q(a,"destroy",function(){a.markerGroup=null});A=this.points=[];h=this.getContext();a.buildKDTree= | |||||
| O;if(m.length>99999)b.options.loading=S(j,{labelStyle:{backgroundColor:"rgba(255,255,255,0.75)",padding:"1em",borderRadius:"0.5em"},style:{backgroundColor:"none",opacity:1}}),b.showLoading("Drawing..."),b.options.loading=j,b.loadingShown===!0?b.loadingShown=1:b.loadingShown+=1;g=0;x(J?a.data:k||m,function(b){var c,f,e,h=!0;L?(c=b[0],f=b[1]):(c=b,f=l[g]);if(I)L&&(f=b.slice(1,3)),e=f[0],f=f[1];else if(J)c=b.x,f=b.stackY,e=f-b.y;b=f===null;$||(h=f>=U&&f<=V);if(!b&&c>=p&&c<=q&&h)if(c=Math.round(d.toPixels(c, | |||||
| !0)),W){if(o===void 0||c===t){I||(e=f);if(r===void 0||f>v)v=f,r=g;if(o===void 0||e<u)u=e,o=g}c!==t&&(o!==void 0&&(f=i.toPixels(v,!0),n=i.toPixels(u,!0),N(c,G?Math.min(f,H):f,G?Math.max(n,H):n),w(c,f,r),n!==f&&w(c,n,o)),o=r=void 0,t=c)}else f=Math.round(i.toPixels(f,!0)),N(c,f,n),w(c,f,g);K=b&&!aa;g+=1;g%y===0&&a.canvasToSVG()},function(){var c=b.loadingDiv,d=+b.loadingShown;M();a.canvasToSVG();R(a,"renderedCanvas");if(d===1)s(c.style,{transition:"opacity 250ms",opacity:0}),b.loadingShown=!1,setTimeout(function(){c.parentNode&& | |||||
| c.parentNode.removeChild(c);b.loadingDiv=b.loadingSpan=null},250);if(d)b.loadingShown=d-1;a.directTouch=!1;a.options.stickyTracking=!0;delete a.buildKDTree;a.buildKDTree()},b.renderer.forExport?Number.MAX_VALUE:void 0)}});e.scatter.prototype.cvsMarkerCircle=function(a,c,b,d){a.moveTo(c,b);a.arc(c,b,d,0,2*Math.PI,!1)};e.scatter.prototype.cvsMarkerSquare=function(a,c,b,d){a.moveTo(c,b);a.rect(c-d,b-d,d*2,d*2)};e.scatter.prototype.fill=!0;s(e.area.prototype,{cvsDrawPoint:function(a,c,b,d,e){e&&c!==e.clientX&& | |||||
| (a.moveTo(e.clientX,e.yBottom),a.lineTo(e.clientX,e.plotY),a.lineTo(c,b),a.lineTo(c,d))},fill:!0,fillOpacity:!0,sampling:!0});s(e.column.prototype,{cvsDrawPoint:function(a,c,b,d){a.rect(c-1,b,1,d-b)},fill:!0,sampling:!0});k(l.prototype,"searchPoint",function(a,c){var b=a.call(this,c),d=b;if(b&&!(b instanceof this.pointClass))d=(new this.pointClass).init(this,this.options.data[b.i]),d.dist=b.dist,d.category=d.x,d.plotX=b.plotX,d.plotY=b.plotY;return d})})(Highcharts,HighchartsAdapter); | |||||
| @ -1,7 +0,0 @@ | |||||
| (function(i){function q(){return Array.prototype.slice.call(arguments,1)}var o=i.pick,n=i.wrap,r=i.extend,p=HighchartsAdapter.fireEvent,k=i.Axis,s=i.Series;r(k.prototype,{isInBreak:function(e,h){var c=e.repeat||Infinity,b=e.from,a=e.to-e.from,c=h>=b?(h-b)%c:c-(b-h)%c;return e.inclusive?c<=a:c<a&&c!==0},isInAnyBreak:function(e,h){var c=this.options.breaks,b=c&&c.length,a,g,d;if(b){for(;b--;)this.isInBreak(c[b],e)&&(a=!0,g||(g=o(c[b].showPoints,this.isXAxis?!1:!0)));d=a&&h?a&&!g:a}return d}});n(k.prototype, | |||||
| "setTickPositions",function(e){e.apply(this,Array.prototype.slice.call(arguments,1));if(this.options.breaks){var h=this.tickPositions,c=this.tickPositions.info,b=[],a;if(!(c&&c.totalRange>=this.closestPointRange)){for(a=0;a<h.length;a++)this.isInAnyBreak(h[a])||b.push(h[a]);this.tickPositions=b;this.tickPositions.info=c}}});n(k.prototype,"init",function(e,h,c){if(c.breaks&&c.breaks.length)c.ordinal=!1;e.call(this,h,c);if(this.options.breaks){var b=this;b.doPostTranslate=!0;this.val2lin=function(a){var g= | |||||
| a,d,c;for(c=0;c<b.breakArray.length;c++)if(d=b.breakArray[c],d.to<=a)g-=d.len;else if(d.from>=a)break;else if(b.isInBreak(d,a)){g-=a-d.from;break}return g};this.lin2val=function(a){var g,d;for(d=0;d<b.breakArray.length;d++)if(g=b.breakArray[d],g.from>=a)break;else g.to<a?a+=g.len:b.isInBreak(g,a)&&(a+=g.len);return a};this.setExtremes=function(a,b,d,c,h){for(;this.isInAnyBreak(a);)a-=this.closestPointRange;for(;this.isInAnyBreak(b);)b-=this.closestPointRange;k.prototype.setExtremes.call(this,a,b, | |||||
| d,c,h)};this.setAxisTranslation=function(a){k.prototype.setAxisTranslation.call(this,a);var c=b.options.breaks,a=[],d=[],h=0,e,f,l=b.userMin||b.min,m=b.userMax||b.max,j,i;for(i in c)f=c[i],e=f.repeat||Infinity,b.isInBreak(f,l)&&(l+=f.to%e-l%e),b.isInBreak(f,m)&&(m-=m%e-f.from%e);for(i in c){f=c[i];j=f.from;for(e=f.repeat||Infinity;j-e>l;)j-=e;for(;j<l;)j+=e;for(;j<m;j+=e)a.push({value:j,move:"in"}),a.push({value:j+(f.to-f.from),move:"out",size:f.breakSize})}a.sort(function(a,b){return a.value===b.value? | |||||
| (a.move==="in"?0:1)-(b.move==="in"?0:1):a.value-b.value});c=0;j=l;for(i in a){f=a[i];c+=f.move==="in"?1:-1;if(c===1&&f.move==="in")j=f.value;c===0&&(d.push({from:j,to:f.value,len:f.value-j-(f.size||0)}),h+=f.value-j-(f.size||0))}b.breakArray=d;p(b,"afterBreaks");b.transA*=(m-b.min)/(m-l-h);b.min=l;b.max=m}}});n(s.prototype,"generatePoints",function(e){e.apply(this,q(arguments));var h=this.xAxis,c=this.yAxis,b=this.points,a,g=b.length,d=this.options.connectNulls,i;if(h&&c&&(h.options.breaks||c.options.breaks))for(;g--;)if(a= | |||||
| b[g],i=a.y===null&&d===!1,!i&&(h.isInAnyBreak(a.x,!0)||c.isInAnyBreak(a.y,!0)))b.splice(g,1),this.data[g]&&this.data[g].destroyElements()});n(i.seriesTypes.column.prototype,"drawPoints",function(e){e.apply(this);var e=this.points,h=this.yAxis,c=h.breakArray||[],b=o(this.options.threshold,h.min),a,g,d,i,k,f;for(i=0;i<e.length;i++){g=e[i];f=g.stackY||g.y;for(k=0;k<c.length;k++){d=c[k];a=!1;if(b<d.from&&f>d.to||b>d.from&&f<d.from)a="pointBreak";else if(b<d.from&&f>d.from&&f<d.to||b>d.from&&f>d.to&&f< | |||||
| d.from)a="pointInBreak";a&&p(h,a,{point:g,brk:d})}}})})(Highcharts); | |||||
| @ -1,26 +0,0 @@ | |||||
| /* | |||||
| Highcharts JS v4.1.8 (2015-08-20) | |||||
| Data module | |||||
| (c) 2012-2014 Torstein Honsi | |||||
| License: www.highcharts.com/license | |||||
| */ | |||||
| (function(g){var k=g.each,t=g.pick,r=HighchartsAdapter.inArray,u=g.splat,j,p=function(b,a){this.init(b,a)};g.extend(p.prototype,{init:function(b,a){this.options=b;this.chartOptions=a;this.columns=b.columns||this.rowsToColumns(b.rows)||[];this.firstRowAsNames=t(b.firstRowAsNames,!0);this.decimalRegex=b.decimalPoint&&RegExp("^([0-9]+)"+b.decimalPoint+"([0-9]+)$");this.rawColumns=[];this.columns.length?this.dataFound():(this.parseCSV(),this.parseTable(),this.parseGoogleSpreadsheet())},getColumnDistribution:function(){var b= | |||||
| this.chartOptions,a=this.options,e=[],f=function(b){return(g.seriesTypes[b||"line"].prototype.pointArrayMap||[0]).length},d=b&&b.chart&&b.chart.type,c=[],h=[],n=0,i;k(b&&b.series||[],function(b){c.push(f(b.type||d))});k(a&&a.seriesMapping||[],function(b){e.push(b.x||0)});e.length===0&&e.push(0);k(a&&a.seriesMapping||[],function(a){var e=new j,o,q=c[n]||f(d),m=g.seriesTypes[((b&&b.series||[])[n]||{}).type||d||"line"].prototype.pointArrayMap||["y"];e.addColumnReader(a.x,"x");for(o in a)a.hasOwnProperty(o)&& | |||||
| o!=="x"&&e.addColumnReader(a[o],o);for(i=0;i<q;i++)e.hasReader(m[i])||e.addColumnReader(void 0,m[i]);h.push(e);n++});a=g.seriesTypes[d||"line"].prototype.pointArrayMap;a===void 0&&(a=["y"]);this.valueCount={global:f(d),xColumns:e,individual:c,seriesBuilders:h,globalPointArrayMap:a}},dataFound:function(){if(this.options.switchRowsAndColumns)this.columns=this.rowsToColumns(this.columns);this.getColumnDistribution();this.parseTypes();this.parsed()!==!1&&this.complete()},parseCSV:function(){var b=this, | |||||
| a=this.options,e=a.csv,f=this.columns,d=a.startRow||0,c=a.endRow||Number.MAX_VALUE,h=a.startColumn||0,n=a.endColumn||Number.MAX_VALUE,i,g,s=0;e&&(g=e.replace(/\r\n/g,"\n").replace(/\r/g,"\n").split(a.lineDelimiter||"\n"),i=a.itemDelimiter||(e.indexOf("\t")!==-1?"\t":","),k(g,function(a,e){var g=b.trim(a),v=g.indexOf("#")===0;e>=d&&e<=c&&!v&&g!==""&&(g=a.split(i),k(g,function(b,a){a>=h&&a<=n&&(f[a-h]||(f[a-h]=[]),f[a-h][s]=b)}),s+=1)}),this.dataFound())},parseTable:function(){var b=this.options,a= | |||||
| b.table,e=this.columns,f=b.startRow||0,d=b.endRow||Number.MAX_VALUE,c=b.startColumn||0,h=b.endColumn||Number.MAX_VALUE;a&&(typeof a==="string"&&(a=document.getElementById(a)),k(a.getElementsByTagName("tr"),function(b,a){a>=f&&a<=d&&k(b.children,function(b,d){if((b.tagName==="TD"||b.tagName==="TH")&&d>=c&&d<=h)e[d-c]||(e[d-c]=[]),e[d-c][a-f]=b.innerHTML})}),this.dataFound())},parseGoogleSpreadsheet:function(){var b=this,a=this.options,e=a.googleSpreadsheetKey,f=this.columns,d=a.startRow||0,c=a.endRow|| | |||||
| Number.MAX_VALUE,h=a.startColumn||0,n=a.endColumn||Number.MAX_VALUE,i,g;e&&jQuery.ajax({dataType:"json",url:"https://spreadsheets.google.com/feeds/cells/"+e+"/"+(a.googleSpreadsheetWorksheet||"od6")+"/public/values?alt=json-in-script&callback=?",error:a.error,success:function(a){var a=a.feed.entry,e,k=a.length,m=0,j=0,l;for(l=0;l<k;l++)e=a[l],m=Math.max(m,e.gs$cell.col),j=Math.max(j,e.gs$cell.row);for(l=0;l<m;l++)if(l>=h&&l<=n)f[l-h]=[],f[l-h].length=Math.min(j,c-d);for(l=0;l<k;l++)if(e=a[l],i=e.gs$cell.row- | |||||
| 1,g=e.gs$cell.col-1,g>=h&&g<=n&&i>=d&&i<=c)f[g-h][i-d]=e.content.$t;b.dataFound()}})},trim:function(b,a){typeof b==="string"&&(b=b.replace(/^\s+|\s+$/g,""),a&&/^[0-9\s]+$/.test(b)&&(b=b.replace(/\s/g,"")),this.decimalRegex&&(b=b.replace(this.decimalRegex,"$1.$2")));return b},parseTypes:function(){for(var b=this.columns,a=b.length;a--;)this.parseColumn(b[a],a)},parseColumn:function(b,a){var e=this.rawColumns,f=this.columns,d=b.length,c,h,g,i,k=this.firstRowAsNames,j=r(a,this.valueCount.xColumns)!== | |||||
| -1,o=[],q=this.chartOptions,m,p=(this.options.columnTypes||[])[a],q=j&&(q&&q.xAxis&&u(q.xAxis)[0].type==="category"||p==="string");for(e[a]||(e[a]=[]);d--;)if(c=o[d]||b[d],g=this.trim(c),i=this.trim(c,!0),h=parseFloat(i),e[a][d]===void 0&&(e[a][d]=g),q||d===0&&k)b[d]=g;else if(+i===h)b[d]=h,h>31536E6&&p!=="float"?b.isDatetime=!0:b.isNumeric=!0,b[d+1]!==void 0&&(m=h>b[d+1]);else if(h=this.parseDate(c),j&&typeof h==="number"&&!isNaN(h)&&p!=="float"){if(o[d]=c,b[d]=h,b.isDatetime=!0,b[d+1]!==void 0){c= | |||||
| h>b[d+1];if(c!==m&&m!==void 0)this.alternativeFormat?(this.dateFormat=this.alternativeFormat,d=b.length,this.alternativeFormat=this.dateFormats[this.dateFormat].alternative):b.unsorted=!0;m=c}}else if(b[d]=g===""?null:g,d!==0&&(b.isDatetime||b.isNumeric))b.mixed=!0;j&&b.mixed&&(f[a]=e[a]);if(j&&m&&this.options.sort)for(a=0;a<f.length;a++)f[a].reverse(),k&&f[a].unshift(f[a].pop())},dateFormats:{"YYYY-mm-dd":{regex:/^([0-9]{4})[\-\/\.]([0-9]{2})[\-\/\.]([0-9]{2})$/,parser:function(b){return Date.UTC(+b[1], | |||||
| b[2]-1,+b[3])}},"dd/mm/YYYY":{regex:/^([0-9]{1,2})[\-\/\.]([0-9]{1,2})[\-\/\.]([0-9]{4})$/,parser:function(b){return Date.UTC(+b[3],b[2]-1,+b[1])},alternative:"mm/dd/YYYY"},"mm/dd/YYYY":{regex:/^([0-9]{1,2})[\-\/\.]([0-9]{1,2})[\-\/\.]([0-9]{4})$/,parser:function(b){return Date.UTC(+b[3],b[1]-1,+b[2])}},"dd/mm/YY":{regex:/^([0-9]{1,2})[\-\/\.]([0-9]{1,2})[\-\/\.]([0-9]{2})$/,parser:function(b){return Date.UTC(+b[3]+2E3,b[2]-1,+b[1])},alternative:"mm/dd/YY"},"mm/dd/YY":{regex:/^([0-9]{1,2})[\-\/\.]([0-9]{1,2})[\-\/\.]([0-9]{2})$/, | |||||
| parser:function(b){return Date.UTC(+b[3]+2E3,b[1]-1,+b[2])}}},parseDate:function(b){var a=this.options.parseDate,e,f,d=this.options.dateFormat||this.dateFormat,c;if(a)e=a(b);else if(typeof b==="string"){if(d)a=this.dateFormats[d],(c=b.match(a.regex))&&(e=a.parser(c));else for(f in this.dateFormats)if(a=this.dateFormats[f],c=b.match(a.regex)){this.dateFormat=f;this.alternativeFormat=a.alternative;e=a.parser(c);break}c||(c=Date.parse(b),typeof c==="object"&&c!==null&&c.getTime?e=c.getTime()-c.getTimezoneOffset()* | |||||
| 6E4:typeof c==="number"&&!isNaN(c)&&(e=c-(new Date(c)).getTimezoneOffset()*6E4))}return e},rowsToColumns:function(b){var a,e,f,d,c;if(b){c=[];e=b.length;for(a=0;a<e;a++){d=b[a].length;for(f=0;f<d;f++)c[f]||(c[f]=[]),c[f][a]=b[a][f]}}return c},parsed:function(){if(this.options.parsed)return this.options.parsed.call(this,this.columns)},getFreeIndexes:function(b,a){var e,f,d=[],c=[],h;for(f=0;f<b;f+=1)d.push(!0);for(e=0;e<a.length;e+=1){h=a[e].getReferencedColumnIndexes();for(f=0;f<h.length;f+=1)d[h[f]]= | |||||
| !1}for(f=0;f<d.length;f+=1)d[f]&&c.push(f);return c},complete:function(){var b=this.columns,a,e=this.options,f,d,c,h,g=[],i;if(e.complete||e.afterComplete){for(c=0;c<b.length;c++)if(this.firstRowAsNames)b[c].name=b[c].shift();f=[];d=this.getFreeIndexes(b.length,this.valueCount.seriesBuilders);for(c=0;c<this.valueCount.seriesBuilders.length;c++)i=this.valueCount.seriesBuilders[c],i.populateColumns(d)&&g.push(i);for(;d.length>0;){i=new j;i.addColumnReader(0,"x");c=r(0,d);c!==-1&&d.splice(c,1);for(c= | |||||
| 0;c<this.valueCount.global;c++)i.addColumnReader(void 0,this.valueCount.globalPointArrayMap[c]);i.populateColumns(d)&&g.push(i)}g.length>0&&g[0].readers.length>0&&(i=b[g[0].readers[0].columnIndex],i!==void 0&&(i.isDatetime?a="datetime":i.isNumeric||(a="category")));if(a==="category")for(c=0;c<g.length;c++){i=g[c];for(d=0;d<i.readers.length;d++)if(i.readers[d].configName==="x")i.readers[d].configName="name"}for(c=0;c<g.length;c++){i=g[c];d=[];for(h=0;h<b[0].length;h++)d[h]=i.read(b,h);f[c]={data:d}; | |||||
| if(i.name)f[c].name=i.name;if(a==="category")f[c].turboThreshold=0}b={series:f};if(a)b.xAxis={type:a};e.complete&&e.complete(b);e.afterComplete&&e.afterComplete(b)}}});g.Data=p;g.data=function(b,a){return new p(b,a)};g.wrap(g.Chart.prototype,"init",function(b,a,e){var f=this;a&&a.data?g.data(g.extend(a.data,{afterComplete:function(d){var c,h;if(a.hasOwnProperty("series"))if(typeof a.series==="object")for(c=Math.max(a.series.length,d.series.length);c--;)h=a.series[c]||{},a.series[c]=g.merge(h,d.series[c]); | |||||
| else delete a.series;a=g.merge(d,a);b.call(f,a,e)}}),a):b.call(f,a,e)});j=function(){this.readers=[];this.pointIsArray=!0};j.prototype.populateColumns=function(b){var a=!0;k(this.readers,function(a){if(a.columnIndex===void 0)a.columnIndex=b.shift()});k(this.readers,function(b){b.columnIndex===void 0&&(a=!1)});return a};j.prototype.read=function(b,a){var e=this.pointIsArray,f=e?[]:{},d;k(this.readers,function(c){var d=b[c.columnIndex][a];e?f.push(d):f[c.configName]=d});if(this.name===void 0&&this.readers.length>= | |||||
| 2&&(d=this.getReferencedColumnIndexes(),d.length>=2))d.shift(),d.sort(),this.name=b[d.shift()].name;return f};j.prototype.addColumnReader=function(b,a){this.readers.push({columnIndex:b,configName:a});if(!(a==="x"||a==="y"||a===void 0))this.pointIsArray=!1};j.prototype.getReferencedColumnIndexes=function(){var b,a=[],e;for(b=0;b<this.readers.length;b+=1)e=this.readers[b],e.columnIndex!==void 0&&a.push(e.columnIndex);return a};j.prototype.hasReader=function(b){var a,e;for(a=0;a<this.readers.length;a+= | |||||
| 1)if(e=this.readers[a],e.configName===b)return!0}})(Highcharts); | |||||