From d80a0dbfd9eae5c86e86bfb073c07f513aef7410 Mon Sep 17 00:00:00 2001 From: johannnes <> Date: Wed, 1 May 2013 15:18:03 +0000 Subject: [PATCH] see changed file for changes git-svn-id: https://svn.fhem.de/fhem/trunk@3144 2b470e98-0d58-463d-a4d8-8e2adae1ed80 --- fhem/www/frontend/CHANGED | 7 + fhem/www/frontend/controls_frontend.txt | 95 +- fhem/www/frontend/www/frontend/README.txt | 4 +- fhem/www/frontend/www/frontend/app/app.js | 6 +- .../app/controller/ChartController.js | 191 +- .../app/controller/HighChartController.js | 317 - .../frontend/app/controller/MainController.js | 33 +- .../www/frontend/app/view/HighChartsPanel.js | 524 - .../www/frontend/app/view/LineChartPanel.js | 103 +- .../www/frontend/app/view/Viewport.js | 24 +- fhem/www/frontend/www/frontend/index.html | 2 - .../frontend/lib/highcharts/highcharts.src.js | 16273 ---------------- .../frontend/lib/highcharts/ux/Highcharts.js | 1104 -- .../ux/Highcharts/AreaRangeSerie.js | 11 - .../lib/highcharts/ux/Highcharts/AreaSerie.js | 10 - .../ux/Highcharts/AreaSplineRangeSerie.js | 11 - .../ux/Highcharts/AreaSplineSerie.js | 10 - .../lib/highcharts/ux/Highcharts/BarSerie.js | 10 - .../highcharts/ux/Highcharts/BoxPlotSerie.js | 50 - .../highcharts/ux/Highcharts/BubbleSerie.js | 65 - .../ux/Highcharts/ColumnRangeSerie.js | 10 - .../highcharts/ux/Highcharts/ColumnSerie.js | 10 - .../highcharts/ux/Highcharts/ErrorBarSerie.js | 10 - .../highcharts/ux/Highcharts/FunnelSerie.js | 41 - .../highcharts/ux/Highcharts/GaugeSerie.js | 17 - .../lib/highcharts/ux/Highcharts/LineSerie.js | 10 - .../lib/highcharts/ux/Highcharts/PieSerie.js | 301 - .../highcharts/ux/Highcharts/RangeSerie.js | 72 - .../highcharts/ux/Highcharts/ScatterSerie.js | 10 - .../lib/highcharts/ux/Highcharts/Serie.js | 341 - .../highcharts/ux/Highcharts/SplineSerie.js | 10 - .../ux/Highcharts/WaterfallSerie.js | 75 - .../www/frontend/lib/highcharts/ux/License | 13 - .../www/frontend/lib/jquery/jquery.min.js | 4 - 34 files changed, 344 insertions(+), 19430 deletions(-) delete mode 100644 fhem/www/frontend/www/frontend/app/controller/HighChartController.js delete mode 100644 fhem/www/frontend/www/frontend/app/view/HighChartsPanel.js delete mode 100644 fhem/www/frontend/www/frontend/lib/highcharts/highcharts.src.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/AreaRangeSerie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/AreaSerie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/AreaSplineRangeSerie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/AreaSplineSerie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/BarSerie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/BoxPlotSerie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/BubbleSerie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/ColumnRangeSerie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/ColumnSerie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/ErrorBarSerie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/FunnelSerie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/GaugeSerie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/LineSerie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/PieSerie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/RangeSerie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/ScatterSerie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/Serie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/SplineSerie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/WaterfallSerie.js delete mode 100755 fhem/www/frontend/www/frontend/lib/highcharts/ux/License delete mode 100644 fhem/www/frontend/www/frontend/lib/jquery/jquery.min.js diff --git a/fhem/www/frontend/CHANGED b/fhem/www/frontend/CHANGED index 88fa2d166..402e66ab4 100644 --- a/fhem/www/frontend/CHANGED +++ b/fhem/www/frontend/CHANGED @@ -1,3 +1,10 @@ +Update vom 01.5.2013 + * Performance Verbesserungen der Charts + * Statistikberechnungen nach ZoomIn hinzugefügt + * Highcharts entfernt + * Schatten in Charts entfernt + * Achsenkonfiguration manuell möglich (min/max) + * Achsenbeschriftung verbessert Update vom 27.4.2013 * Performance Verbesserungen der Charts * Achsenkonfiguration aufgeräumt diff --git a/fhem/www/frontend/controls_frontend.txt b/fhem/www/frontend/controls_frontend.txt index 78b517d18..22ac79da6 100644 --- a/fhem/www/frontend/controls_frontend.txt +++ b/fhem/www/frontend/controls_frontend.txt @@ -29,45 +29,7 @@ DIR www/frontend/lib/ext-4.2.0.663/images/window DIR www/frontend/lib/ext-4.2.0.663/images/grid DIR www/frontend/lib/ext-4.2.0.663/images/util DIR www/frontend/lib/ext-4.2.0.663/images/util/splitter -DIR www/frontend/lib/highcharts -DIR www/frontend/lib/highcharts/ux -DIR www/frontend/lib/highcharts/ux/Highcharts -DIR www/frontend/lib/jquery -UPD 2013-04-26_05:06:42 1059 www/frontend/index.html -UPD 2013-04-26_05:06:43 616 www/frontend/README.txt -UPD 2013-04-01_07:05:33 613 www/frontend/app/userconfig.js -UPD 2013-04-01_08:00:32 2104 www/frontend/app/resources/loading.png -UPD 2013-03-02_01:53:05 626 www/frontend/app/resources/icons/readme.txt -UPD 2013-03-02_01:53:05 755 www/frontend/app/resources/icons/database_save.png -UPD 2013-03-02_01:53:05 395 www/frontend/app/resources/icons/resultset_next.png -UPD 2013-03-02_01:53:05 700 www/frontend/app/resources/icons/stop.png -UPD 2013-03-02_01:53:05 770 www/frontend/app/resources/icons/database_refresh.png -UPD 2013-03-02_01:53:05 524 www/frontend/app/resources/icons/resultset_last.png -UPD 2013-04-03_07:27:17 781 www/frontend/app/resources/icons/accept.png -UPD 2013-04-03_07:27:17 715 www/frontend/app/resources/icons/delete.png -UPD 2013-04-03_07:27:17 345 www/frontend/app/resources/icons/arrow_left.png -UPD 2013-04-03_07:27:17 733 www/frontend/app/resources/icons/add.png -UPD 2013-04-03_07:27:17 389 www/frontend/app/resources/icons/resultset_previous.png -UPD 2013-04-26_05:05:23 2238 www/frontend/app/app.js -UPD 2013-04-28_02:00:20 22189 www/frontend/app/view/LineChartPanel.js -UPD 2013-04-26_05:05:57 22790 www/frontend/app/view/HighChartsPanel.js -UPD 2013-04-28_02:00:20 1205 www/frontend/app/view/ChartGridPanel.js -UPD 2013-04-03_07:26:40 15793 www/frontend/app/view/DevicePanel.js -UPD 2013-04-26_05:05:57 8922 www/frontend/app/view/Viewport.js -UPD 2013-04-01_07:05:14 2476 www/frontend/app/view/TableDataGridPanel.js -UPD 2013-04-28_01:59:56 64882 www/frontend/app/controller/ChartController.js -UPD 2013-04-26_05:05:41 12806 www/frontend/app/controller/HighChartController.js -UPD 2013-04-27_06:15:02 13892 www/frontend/app/controller/MainController.js -UPD 2013-04-01_07:04:35 202 www/frontend/app/model/ReadingsModel.js -UPD 2013-04-01_07:04:36 338 www/frontend/app/model/SavedChartsModel.js -UPD 2013-04-01_07:04:34 11535 www/frontend/app/model/ChartModel.js -UPD 2013-04-01_07:04:35 198 www/frontend/app/model/DeviceModel.js -UPD 2013-04-01_07:04:34 685 www/frontend/app/model/TableDataModel.js -UPD 2013-04-01_07:04:54 432 www/frontend/app/store/ChartStore.js -UPD 2013-04-01_07:04:54 451 www/frontend/app/store/SavedChartsStore.js -UPD 2013-04-01_07:04:54 426 www/frontend/app/store/ReadingsStore.js -UPD 2013-04-01_07:04:54 1048 www/frontend/app/store/TableDataStore.js -UPD 2013-04-27_06:11:13 439 www/frontend/app/store/DeviceStore.js +UPD 2013-04-26_05:06:42 899 www/frontend/index.html UPD 2013-04-01_07:03:30 260475 www/frontend/lib/ext-4.2.0.663/ext-theme-gray-all.css UPD 2013-04-01_07:03:30 1434875 www/frontend/lib/ext-4.2.0.663/ext-all.js UPD 2013-04-01_07:03:33 1981 www/frontend/lib/ext-4.2.0.663/images/tools/tools-sprites-trans.gif @@ -294,26 +256,35 @@ UPD 2013-04-01_07:03:33 872 www/frontend/lib/ext-4.2.0.663/images/util/splitter/ UPD 2013-04-01_07:03:33 856 www/frontend/lib/ext-4.2.0.663/images/util/splitter/mini-bottom.gif UPD 2013-04-01_07:03:33 856 www/frontend/lib/ext-4.2.0.663/images/util/splitter/mini-top.gif UPD 2013-04-01_07:51:34 1482 www/frontend/lib/ext-4.2.0.663/license.txt -UPD 2013-04-26_05:06:25 376 www/frontend/lib/highcharts/ux/Highcharts/GaugeSerie.js -UPD 2013-04-26_05:06:25 264 www/frontend/lib/highcharts/ux/Highcharts/ColumnSerie.js -UPD 2013-04-26_05:06:25 2502 www/frontend/lib/highcharts/ux/Highcharts/WaterfallSerie.js -UPD 2013-04-26_05:06:25 10509 www/frontend/lib/highcharts/ux/Highcharts/PieSerie.js -UPD 2013-04-26_05:06:25 265 www/frontend/lib/highcharts/ux/Highcharts/SplineSerie.js -UPD 2013-04-26_05:06:25 1809 www/frontend/lib/highcharts/ux/Highcharts/BubbleSerie.js -UPD 2013-04-26_05:06:25 268 www/frontend/lib/highcharts/ux/Highcharts/ScatterSerie.js -UPD 2013-04-26_05:06:25 261 www/frontend/lib/highcharts/ux/Highcharts/AreaSerie.js -UPD 2013-04-26_05:06:25 1266 www/frontend/lib/highcharts/ux/Highcharts/BoxPlotSerie.js -UPD 2013-04-26_05:06:25 1088 www/frontend/lib/highcharts/ux/Highcharts/FunnelSerie.js -UPD 2013-04-26_05:06:25 283 www/frontend/lib/highcharts/ux/Highcharts/ErrorBarSerie.js -UPD 2013-04-26_05:06:25 281 www/frontend/lib/highcharts/ux/Highcharts/AreaSplineSerie.js -UPD 2013-04-26_05:06:25 11822 www/frontend/lib/highcharts/ux/Highcharts/Serie.js -UPD 2013-04-26_05:06:25 315 www/frontend/lib/highcharts/ux/Highcharts/AreaSplineRangeSerie.js -UPD 2013-04-26_05:06:25 2084 www/frontend/lib/highcharts/ux/Highcharts/RangeSerie.js -UPD 2013-04-26_05:06:25 295 www/frontend/lib/highcharts/ux/Highcharts/ColumnRangeSerie.js -UPD 2013-04-26_05:06:25 252 www/frontend/lib/highcharts/ux/Highcharts/BarSerie.js -UPD 2013-04-26_05:06:25 257 www/frontend/lib/highcharts/ux/Highcharts/LineSerie.js -UPD 2013-04-26_05:06:25 290 www/frontend/lib/highcharts/ux/Highcharts/AreaRangeSerie.js -UPD 2013-04-26_05:06:25 629 www/frontend/lib/highcharts/ux/License -UPD 2013-04-26_05:06:25 41709 www/frontend/lib/highcharts/ux/Highcharts.js -UPD 2013-04-26_05:06:25 426260 www/frontend/lib/highcharts/highcharts.src.js -UPD 2013-04-26_05:06:25 93867 www/frontend/lib/jquery/jquery.min.js +UPD 2013-04-26_05:06:43 440 www/frontend/README.txt +UPD 2013-04-01_07:05:33 613 www/frontend/app/userconfig.js +UPD 2013-04-01_08:00:32 2104 www/frontend/app/resources/loading.png +UPD 2013-04-03_07:27:17 781 www/frontend/app/resources/icons/accept.png +UPD 2013-03-02_01:53:05 626 www/frontend/app/resources/icons/readme.txt +UPD 2013-04-03_07:27:17 715 www/frontend/app/resources/icons/delete.png +UPD 2013-03-02_01:53:05 755 www/frontend/app/resources/icons/database_save.png +UPD 2013-03-02_01:53:05 395 www/frontend/app/resources/icons/resultset_next.png +UPD 2013-03-02_01:53:05 700 www/frontend/app/resources/icons/stop.png +UPD 2013-04-03_07:27:17 345 www/frontend/app/resources/icons/arrow_left.png +UPD 2013-03-02_01:53:05 770 www/frontend/app/resources/icons/database_refresh.png +UPD 2013-03-02_01:53:05 524 www/frontend/app/resources/icons/resultset_last.png +UPD 2013-04-03_07:27:17 733 www/frontend/app/resources/icons/add.png +UPD 2013-04-03_07:27:17 389 www/frontend/app/resources/icons/resultset_previous.png +UPD 2013-05-01_05:09:36 2154 www/frontend/app/app.js +UPD 2013-05-01_05:10:56 27200 www/frontend/app/view/LineChartPanel.js +UPD 2013-04-28_02:00:20 1205 www/frontend/app/view/ChartGridPanel.js +UPD 2013-04-03_07:26:40 15793 www/frontend/app/view/DevicePanel.js +UPD 2013-05-01_05:10:56 8782 www/frontend/app/view/Viewport.js +UPD 2013-04-01_07:05:14 2476 www/frontend/app/view/TableDataGridPanel.js +UPD 2013-05-01_05:10:42 76820 www/frontend/app/controller/ChartController.js +UPD 2013-05-01_05:10:42 13004 www/frontend/app/controller/MainController.js +UPD 2013-04-01_07:04:35 202 www/frontend/app/model/ReadingsModel.js +UPD 2013-04-01_07:04:36 338 www/frontend/app/model/SavedChartsModel.js +UPD 2013-04-01_07:04:34 11535 www/frontend/app/model/ChartModel.js +UPD 2013-04-01_07:04:35 198 www/frontend/app/model/DeviceModel.js +UPD 2013-04-01_07:04:34 685 www/frontend/app/model/TableDataModel.js +UPD 2013-04-01_07:04:54 432 www/frontend/app/store/ChartStore.js +UPD 2013-04-01_07:04:54 451 www/frontend/app/store/SavedChartsStore.js +UPD 2013-04-01_07:04:54 426 www/frontend/app/store/ReadingsStore.js +UPD 2013-04-01_07:04:54 1048 www/frontend/app/store/TableDataStore.js +UPD 2013-04-27_06:11:13 439 www/frontend/app/store/DeviceStore.js \ No newline at end of file diff --git a/fhem/www/frontend/www/frontend/README.txt b/fhem/www/frontend/www/frontend/README.txt index d3193d85d..2012ae1b4 100644 --- a/fhem/www/frontend/www/frontend/README.txt +++ b/fhem/www/frontend/www/frontend/README.txt @@ -1,11 +1,9 @@ -This is the readme of the new Webfrontend, based on ExtJS / Highcharts / JQuery. +This is the readme of the new Webfrontend, based on ExtJS. As there is no full documentation available at the moment, please refer to this thread on the forums of FHEM to get help, ask questions or get updates: http://forum.fhem.de/index.php?t=msg&th=10439&start=0&rid=0 The ExtJS Library as well as the application itself are available under the GPLv3 License - http://www.sencha.com/ -JQuery is available under the GPL License - http://jquery.com/ -Highcharts is available under the Creative Commons License - http://www.highcharts.com/ See the license.txt in the lib folder for details diff --git a/fhem/www/frontend/www/frontend/app/app.js b/fhem/www/frontend/www/frontend/app/app.js index 8faa1ac77..579a66ef3 100644 --- a/fhem/www/frontend/www/frontend/app/app.js +++ b/fhem/www/frontend/www/frontend/app/app.js @@ -6,8 +6,7 @@ Ext.Loader.setConfig({ enabled: true, disableCaching: false, paths: { - 'FHEM': 'app', - 'Chart' : 'lib/highcharts/' + 'FHEM': 'app' } }); @@ -19,8 +18,7 @@ Ext.application({ controllers: [ 'FHEM.controller.MainController', - 'FHEM.controller.ChartController', - 'FHEM.controller.HighChartController' + 'FHEM.controller.ChartController' ], launch: function() { diff --git a/fhem/www/frontend/www/frontend/app/controller/ChartController.js b/fhem/www/frontend/www/frontend/app/controller/ChartController.js index ebf9fc6cb..5b31acb9f 100644 --- a/fhem/www/frontend/www/frontend/app/controller/ChartController.js +++ b/fhem/www/frontend/www/frontend/app/controller/ChartController.js @@ -151,6 +151,11 @@ Ext.define('FHEM.controller.ChartController', { chart = me.getChart(); //cleanup chartpanel + var existingwins = Ext.ComponentQuery.query('window[name=statisticswin]'); + Ext.each(existingwins, function(existingwin) { + existingwin.destroy(); + }); + var existingchartgrid = Ext.ComponentQuery.query('panel[name=chartgridpanel]')[0]; if (!existingchartgrid) { var chartdatagrid = Ext.create('FHEM.view.ChartGridPanel', { @@ -352,6 +357,12 @@ Ext.define('FHEM.controller.ChartController', { scope: me, handler: function(btn) { var chart = btn.up().up().down('chart'); + + var existingwins = Ext.ComponentQuery.query('window[name=statisticswin]'); + Ext.each(existingwins, function(existingwin) { + existingwin.destroy(); + }); + chart.restoreZoom(); chart.axes.get(0).minimum = chart.up().up().getLastYmin(); @@ -419,6 +430,7 @@ Ext.define('FHEM.controller.ChartController', { } ], animate: false, + shadow: false, store: store, enableMask: true, mask: true,//'vertical',//true, //'horizontal', @@ -452,6 +464,89 @@ Ext.define('FHEM.controller.ChartController', { }); serie.hideAll(); + } else { + //creating statistic windows after zooming + var html, + count = 0, + sum = 0, + average = 0, + min = 99999999, + max = 0, + lastrec, + diffkwh = 0, + winwidth = 125, + winheight = 105; + Ext.each(serie.items, function(item) { + if (Ext.isNumeric(item.value[1])) { + count++; + sum = sum + item.value[1]; + if (min > item.value[1]) { + min = item.value[1]; + } + if (max < item.value[1]) { + max = item.value[1]; + } + if (serie.title.indexOf('actual_kwh') >= 0) { + if (lastrec) { + var diffhrs = Ext.Date.getElapsed(lastrec.value[0], item.value[0]) / 1000 / 3600; + diffkwh = diffkwh + diffhrs * lastrec.value[1]; + } + lastrec = item; + winwidth = 165, + winheight = 130; + } + } + }); + average = sum / count; + + html = 'Selected Items: ' + count + '
'; + html += 'Sum: ' + Ext.util.Format.round(sum, 5) + '
'; + html += 'Average: ' + Ext.util.Format.round(average, 5) + '
'; + html += 'Min: ' + min + '
'; + html += 'Max: ' + max + '
'; + if (serie.title.indexOf('actual_kwh') >= 0) { + html += 'Used kW/h: ' + Ext.util.Format.round(diffkwh, 3) + '
'; + html += 'Costs (at 25c/kWh): ' + Ext.util.Format.round(diffkwh * 0.25, 2) + '€
'; + } + + var existingwins = Ext.ComponentQuery.query('window[name=statisticswin]'), + matchfound = false, + lastwin; + if (existingwins.length > 0) { + Ext.each(existingwins, function(existingwin) { + lastwin = existingwin; + if (existingwin.title === serie.title) { + existingwin.update(html); + existingwin.showAt(chart.getWidth() - 145, chart.getPosition()[1] + 8); + matchfound = true; + } + }); + if (!matchfound) { + var win = Ext.create('Ext.window.Window', { + width: winwidth, + height: winheight, + html: html, + title: serie.title, + name: 'statisticswin', + preventHeader: true, + border: false, + plain: true + }); + win.showAt(chart.getWidth() - 145, lastwin.getPosition()[1] + lastwin.getHeight()); + } + } else { + var win = Ext.create('Ext.window.Window', { + width: winwidth, + height: winheight, + html: html, + title: serie.title, + name: 'statisticswin', + preventHeader: true, + border: false, + plain: true + }); + win.showAt(chart.getWidth() - 145, chart.getPosition()[1] + 8); + } } }); } @@ -766,7 +861,9 @@ Ext.define('FHEM.controller.ChartController', { * do the final layout of chart after all data is loaded */ doFinalChartLayout: function(chart) { - var me = this; + var me = this, + leftaxisconfiguration = Ext.ComponentQuery.query('radiogroup[name=leftaxisconfiguration]')[0].getChecked()[0].inputValue, + rightaxisconfiguration = Ext.ComponentQuery.query('radiogroup[name=rightaxisconfiguration]')[0].getChecked()[0].inputValue; //remove the old max values of y axis to get a dynamic range delete chart.axes.get(0).maximum; @@ -774,6 +871,7 @@ Ext.define('FHEM.controller.ChartController', { delete chart.axes.get(1).maximum; delete chart.axes.get(1).minimum; + chart.axes.get(0).maximum = me.maxYValue; chart.axes.get(1).maximum = me.maxY2Value; @@ -796,6 +894,29 @@ Ext.define('FHEM.controller.ChartController', { chart.axes.get(1).minimum = me.minY2Value; } + //if user has specified its own range, use it + if (leftaxisconfiguration === "manual") { + var leftaxismin = Ext.ComponentQuery.query('numberfield[name=leftaxisminimum]')[0].getValue(), + leftaxismax = Ext.ComponentQuery.query('numberfield[name=leftaxismaximum]')[0].getValue(); + + if (Ext.isNumeric(leftaxismin) && Ext.isNumeric(leftaxismax)) { + chart.axes.get(0).minimum = leftaxismin; + chart.axes.get(0).maximum = leftaxismax; + } else { + Ext.Msg.alert("Error", "Please select a valid minimum and maximum for the axis!"); + } + } + if (rightaxisconfiguration === "manual") { + var rightaxismin = Ext.ComponentQuery.query('numberfield[name=rightaxisminimum]')[0].getValue(), + rightaxismax = Ext.ComponentQuery.query('numberfield[name=rightaxismaximum]')[0].getValue(); + + if (Ext.isNumeric(rightaxismin) && Ext.isNumeric(rightaxismax)) { + chart.axes.get(1).minimum = rightaxismin; + chart.axes.get(1).maximum = rightaxismax; + } else { + Ext.Msg.alert("Error", "Please select a valid minimum and maximum for the axis!"); + } + } // set the x axis range dependent on user given timerange var starttime = new Date(me.getStarttimepicker().getValue()), @@ -804,10 +925,22 @@ Ext.define('FHEM.controller.ChartController', { chart.axes.get(2).fromDate = starttime; chart.axes.get(2).toDate = endtime; - chart.axes.get(2).processView(); - //collapse chart settings - //me.getChartformpanel().collapse(); + var timediffhrs = Ext.Date.getElapsed(chart.axes.get(2).fromDate, chart.axes.get(2).toDate) / 1000 / 3600; + + if (timediffhrs <= 1) { + chart.axes.get(2).step = [Ext.Date.MINUTE, 10]; + } else if (timediffhrs <= 24) { + chart.axes.get(2).step = [Ext.Date.HOUR, 1]; + } else if (timediffhrs <= 168) { + chart.axes.get(2).step = [Ext.Date.DAY, 1]; + } else if (timediffhrs <= 720) { + chart.axes.get(2).step = [Ext.Date.DAY, 7]; + } else if (timediffhrs < 720) { + chart.axes.get(2).step = [Ext.Date.MONTH, 1]; + } + + chart.axes.get(2).processView(); me.resizeChart(); @@ -868,7 +1001,8 @@ Ext.define('FHEM.controller.ChartController', { fill: fill, style: { fill: color, - stroke: color + stroke: '#808080', + 'stroke-width': 2 }, markerConfig: { type: 'circle', @@ -966,6 +1100,15 @@ Ext.define('FHEM.controller.ChartController', { Ext.ComponentQuery.query('datefield[name=starttimepicker]')[0].reset(); Ext.ComponentQuery.query('datefield[name=endtimepicker]')[0].reset(); Ext.ComponentQuery.query('radiofield[name=generalization]')[1].setValue(true); + + Ext.ComponentQuery.query('numberfield[name=leftaxisminimum]')[0].reset(); + Ext.ComponentQuery.query('numberfield[name=leftaxismaximum]')[0].reset(); + Ext.ComponentQuery.query('numberfield[name=rightaxisminimum]')[0].reset(); + Ext.ComponentQuery.query('numberfield[name=rightaxismaximum]')[0].reset(); + + Ext.ComponentQuery.query('radiogroup[name=leftaxisconfiguration]')[0].items.items[0].setValue(true); + Ext.ComponentQuery.query('radiogroup[name=rightaxisconfiguration]')[0].items.items[0].setValue(true); + }, /** @@ -1037,6 +1180,8 @@ Ext.define('FHEM.controller.ChartController', { dynamicradio = Ext.ComponentQuery.query('radiogroup[name=dynamictime]')[0], generalization = Ext.ComponentQuery.query('radio[boxLabel=active]')[0], generalizationfactor = Ext.ComponentQuery.query('combobox[name=genfactor]')[0].getValue(), + leftaxisconfiguration = Ext.ComponentQuery.query('radiogroup[name=leftaxisconfiguration]')[0].getChecked()[0].inputValue, + rightaxisconfiguration = Ext.ComponentQuery.query('radiogroup[name=rightaxisconfiguration]')[0].getChecked()[0].inputValue, chart = me.getChart(), store = chart.getStore(); @@ -1096,6 +1241,30 @@ Ext.define('FHEM.controller.ChartController', { jsonConfig += '"generalizationfactor":"' + generalizationfactor + '",'; } + if (leftaxisconfiguration === 'manual') { + var leftaxismin = Ext.ComponentQuery.query('numberfield[name=leftaxisminimum]')[0].getValue(), + leftaxismax = Ext.ComponentQuery.query('numberfield[name=leftaxismaximum]')[0].getValue(); + + if (Ext.isNumeric(leftaxismin) && Ext.isNumeric(leftaxismax)) { + jsonConfig += '"leftaxismin":"' + leftaxismin + '",'; + jsonConfig += '"leftaxismax":"' + leftaxismax + '",'; + } else { + Ext.Msg.alert("Error", "Left axis configuration is invalid, values will not be saved!"); + } + } + + if (rightaxisconfiguration === "manual") { + var rightaxismin = Ext.ComponentQuery.query('numberfield[name=rightaxisminimum]')[0].getValue(), + rightaxismax = Ext.ComponentQuery.query('numberfield[name=rightaxismaximum]')[0].getValue(); + + if (Ext.isNumeric(rightaxismin) && Ext.isNumeric(rightaxismax)) { + jsonConfig += '"rightaxismin":"' + rightaxismin + '",'; + jsonConfig += '"rightaxismax":"' + rightaxismax + '",'; + } else { + Ext.Msg.alert("Error", "Right axis configuration is invalid, values will not be saved!"); + } + } + var j = 0; Ext.each(basesstart, function(base) { var basestart = basesstart[j].getValue(), @@ -1305,6 +1474,18 @@ Ext.define('FHEM.controller.ChartController', { genbox.setValue(false); } + if (chartdata.leftaxismin && chartdata.leftaxismax) { + Ext.ComponentQuery.query('radiogroup[name=leftaxisconfiguration]')[0].items.items[1].setValue(true); + Ext.ComponentQuery.query('numberfield[name=leftaxisminimum]')[0].setValue(chartdata.leftaxismin); + Ext.ComponentQuery.query('numberfield[name=leftaxismaximum]')[0].setValue(chartdata.leftaxismax); + } + + if (chartdata.rightaxismin && chartdata.rightaxismax) { + Ext.ComponentQuery.query('radiogroup[name=rightaxisconfiguration]')[0].items.items[1].setValue(true); + Ext.ComponentQuery.query('numberfield[name=rightaxisminimum]')[0].setValue(chartdata.rightaxismin); + Ext.ComponentQuery.query('numberfield[name=rightaxismaximum]')[0].setValue(chartdata.rightaxismax); + } + this.requestChartData(); this.getLinechartpanel().setTitle(name); } else { diff --git a/fhem/www/frontend/www/frontend/app/controller/HighChartController.js b/fhem/www/frontend/www/frontend/app/controller/HighChartController.js deleted file mode 100644 index 73d45142c..000000000 --- a/fhem/www/frontend/www/frontend/app/controller/HighChartController.js +++ /dev/null @@ -1,317 +0,0 @@ -/** - * Controller handling the charts - */ -Ext.define('FHEM.controller.HighChartController', { - extend: 'Ext.app.Controller', - - refs: [ - { - selector: 'panel[name=highchartformpanel]', - ref: 'chartformpanel' //this.getChartformpanel() - }, - { - selector: 'datefield[name=highchartstarttimepicker]', - ref: 'starttimepicker' //this.getStarttimepicker() - }, - { - selector: 'datefield[name=highchartendtimepicker]', - ref: 'endtimepicker' //this.getEndtimepicker() - }, - { - selector: 'button[name=highchartrequestchartdata]', - ref: 'requestchartdatabtn' //this.getRequestchartdatabtn() - }, - { - selector: 'button[name=highchartsavechartdata]', - ref: 'savechartdatabtn' //this.getSavechartdatabtn() - }, - { - selector: 'chart', - ref: 'chart' //this.getChart() - }, - { - selector: 'chartformpanel', - ref: 'panel[name=highchartchartformpanel]' //this.getChartformpanel() - }, - { - selector: 'highchartspanel', - ref: 'highchartpanel' //this.getHighchartpanel() - } -// { -// selector: 'linechartpanel toolbar', -// ref: 'linecharttoolbar' //this.getLinecharttoolbar() -// }, -// { -// selector: 'grid[name=highchartsavedchartsgrid]', -// ref: 'savedchartsgrid' //this.getSavedchartsgrid() -// }, -// { -// selector: 'grid[name=highchartchartdata]', -// ref: 'chartdatagrid' //this.getChartdatagrid() -// } - - ], - - /** - * init function to register listeners - */ - init: function() { - this.control({ - 'button[name=highchartrequestchartdata]': { - click: this.requestChartData - }, -// 'button[name=savechartdata]': { -// click: this.saveChartData -// }, -// 'button[name=stepback]': { -// click: this.stepchange -// }, -// 'button[name=stepforward]': { -// click: this.stepchange -// }, - 'button[name=highchartresetchartform]': { - click: this.resetFormFields - }, -// 'grid[name=savedchartsgrid]': { -// cellclick: this.loadsavedchart -// }, -// 'actioncolumn[name=savedchartsactioncolumn]': { -// click: this.deletechart -// }, -// 'grid[name=chartdata]': { -// itemclick: this.highlightRecordInChart -// }, - 'panel[name=highchartchartpanel]': { - collapse: this.resizeChart, - expand: this.resizeChart - }, - 'panel[name=highchartformpanel]': { - collapse: this.resizeChart, - expand: this.resizeChart - } -// 'panel[name=chartgridpanel]': { -// collapse: this.resizeChart, -// expand: this.resizeChart -// } - }); - - }, - - /** - * Triggers a request to FHEM Module to get the data from Database - */ - requestChartData: function(stepchangecalled) { - - var me = this; - - //show loadmask - me.getHighchartpanel().setLoading(true); - - // fit chart - me.resizeChart(); - - //cleanup - hc = Ext.ComponentQuery.query('highchart')[0]; - hc.store.removeAll(); - hc.refresh(); - - //getting the necessary values - var devices = Ext.ComponentQuery.query('combobox[name=highchartdevicecombo]'), - yaxes = Ext.ComponentQuery.query('combobox[name=highchartyaxiscombo]'), - yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=highchartyaxiscolorcombo]'), - yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=highchartyaxisfillcheck]'), - yaxesstepcheck = Ext.ComponentQuery.query('checkbox[name=highchartyaxisstepcheck]'), - yaxesstatistics = Ext.ComponentQuery.query('combobox[name=highchartyaxisstatisticscombo]'), - axissideradio = Ext.ComponentQuery.query('radiogroup[name=highchartaxisside]'); - - var starttime = me.getStarttimepicker().getValue(), - dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'), - endtime = me.getEndtimepicker().getValue(), - dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'), - dynamicradio = Ext.ComponentQuery.query('radiogroup[name=highchartdynamictime]')[0], - chartpanel = me.getHighchartpanel(), - chart = me.getChart(); - - //check if timerange or dynamic time should be used - dynamicradio.eachBox(function(box, idx){ - var date = new Date(); - if (box.checked && stepchangecalled !== true) { - if (box.inputValue === "year") { - starttime = Ext.Date.parse(date.getUTCFullYear() + "-01-01", "Y-m-d"); - dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'); - endtime = Ext.Date.parse(date.getUTCFullYear() + 1 + "-01-01", "Y-m-d"); - dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'); - } else if (box.inputValue === "month") { - starttime = Ext.Date.getFirstDateOfMonth(date); - dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'); - endtime = Ext.Date.getLastDateOfMonth(date); - dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'); - } else if (box.inputValue === "week") { - date.setHours(0); - date.setMinutes(0); - date.setSeconds(0); - //monday starts with 0 till sat with 5, sund with -1 - var dayoffset = date.getDay() - 1, - monday, - nextmonday; - if (dayoffset >= 0) { - monday = Ext.Date.add(date, Ext.Date.DAY, -dayoffset); - } else { - //we have a sunday - monday = Ext.Date.add(date, Ext.Date.DAY, -6); - } - nextmonday = Ext.Date.add(monday, Ext.Date.DAY, 7); - - starttime = monday; - dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'); - endtime = nextmonday; - dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'); - - } else if (box.inputValue === "day") { - date.setHours(0); - date.setMinutes(0); - date.setSeconds(0); - - starttime = date; - dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'); - endtime = Ext.Date.add(date, Ext.Date.DAY, 1); - dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'); - - } else if (box.inputValue === "hour") { - date.setMinutes(0); - date.setSeconds(0); - - starttime = date; - dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'); - endtime = Ext.Date.add(date, Ext.Date.HOUR, 1); - dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'); - } else { - Ext.Msg.alert("Error", "Could not setup the dynamic time."); - } - me.getStarttimepicker().setValue(starttime); - me.getEndtimepicker().setValue(endtime); - } - }); - - var i = 0; - Ext.each(yaxes, function(y) { - var device = devices[i].getValue(), - yaxis = yaxes[i].getValue(), - yaxiscolorcombo = yaxescolorcombos[i].getValue(), - yaxisfillcheck = yaxesfillchecks[i].checked, - yaxisstepcheck = yaxesstepcheck[i].checked, - yaxisstatistics = yaxesstatistics[i].getValue(), - axisside = axissideradio[i].getChecked()[0].getSubmitValue(); - if(yaxis === "" || yaxis === null) { - yaxis = yaxes[i].getRawValue(); - } - - me.populateAxis(i, yaxes.length, device, yaxis, yaxiscolorcombo, yaxisfillcheck, yaxisstepcheck, axisside, yaxisstatistics, dbstarttime, dbendtime); - i++; - }); - - }, - - /** - * resize the chart to fit the centerpanel - */ - resizeChart: function() { - - - var lcp = Ext.ComponentQuery.query('highchartspanel')[0]; - var lcv = Ext.ComponentQuery.query('panel[name=highchartpanel]')[0]; - var cfp = Ext.ComponentQuery.query('form[name=highchartformpanel]')[0]; - - if (lcp && lcv && cfp) { - var chartheight = lcp.getHeight() - cfp.getHeight() -55; - var chartwidth = lcp.getWidth() - 25; - lcv.setHeight(chartheight); - lcv.setWidth(chartwidth); - lcv.down('highchart').setHeight(chartheight); - lcv.down('highchart').setWidth(chartwidth); - lcv.down('highchart').render(); - } - - }, - - /** - * fill the axes with data - */ - populateAxis: function(i, axeslength, device, yaxis, yaxiscolorcombo, yaxisfillcheck, yaxisstepcheck, axisside, yaxisstatistics, dbstarttime, dbendtime) { - - var me = this, - yseries, - generalization = Ext.ComponentQuery.query('radio[boxLabel=active]')[0], - generalizationfactor = Ext.ComponentQuery.query('combobox[name=highchartgenfactor]')[0].getValue(); - - var url; - if (!Ext.isDefined(yaxisstatistics) || yaxisstatistics === "none" || Ext.isEmpty(yaxisstatistics)) { - url += '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+' + dbstarttime + '+' + dbendtime + '+'; - url +=device + '+timerange+' + "TIMESTAMP" + '+' + yaxis; - url += '&XHR=1'; - } else { //setup url to get statistics - url += '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+' + dbstarttime + '+' + dbendtime + '+'; - url +=device; - - if (yaxisstatistics.indexOf("hour") === 0) { - url += '+hourstats+'; - } else if (yaxisstatistics.indexOf("day") === 0) { - url += '+daystats+'; - } else if (yaxisstatistics.indexOf("week") === 0) { - url += '+weekstats+'; - } else if (yaxisstatistics.indexOf("month") === 0) { - url += '+monthstats+'; - } else if (yaxisstatistics.indexOf("year") === 0) { - url += '+yearstats+'; - } - - url += 'TIMESTAMP' + '+' + yaxis; - url += '&XHR=1'; - - } - - Ext.Ajax.request({ - method: 'GET', - async: false, - disableCaching: false, - url: url, - success: function(response){ - - var json = Ext.decode(response.responseText); - - if (json.success && json.success === "false") { - Ext.Msg.alert("Error", "Error an adding Y-Axis number " + i + ", error was:
" + json.msg); - } else { - hc = Ext.ComponentQuery.query('highchart')[0]; - hc.store.add(json.data); - - } - }, - failure: function() { - Ext.Msg.alert("Error", "Error an adding Y-Axis number " + i); - } - }); - - //check if we have added the last dataset - if ((i + 1) === axeslength) { - me.getHighchartpanel().setLoading(false); - } - - }, - - /** - * reset the form fields e.g. when loading a new chart - */ - resetFormFields: function() { - - var fieldset = this.getChartformpanel().down('fieldset[name=highchartaxesfieldset]'); - fieldset.removeAll(); - this.getHighchartpanel().createNewYAxis(); - - Ext.ComponentQuery.query('radiofield[name=highchartrb]')[0].setValue(true); - Ext.ComponentQuery.query('datefield[name=highchartstarttimepicker]')[0].reset(); - Ext.ComponentQuery.query('datefield[name=highchartendtimepicker]')[0].reset(); - Ext.ComponentQuery.query('radiofield[name=highchartgeneralization]')[1].setValue(true); - } - -}); \ No newline at end of file diff --git a/fhem/www/frontend/www/frontend/app/controller/MainController.js b/fhem/www/frontend/www/frontend/app/controller/MainController.js index 881603e18..cf96d6f01 100644 --- a/fhem/www/frontend/www/frontend/app/controller/MainController.js +++ b/fhem/www/frontend/www/frontend/app/controller/MainController.js @@ -4,8 +4,7 @@ Ext.define('FHEM.controller.MainController', { extend: 'Ext.app.Controller', requires: [ - 'FHEM.view.DevicePanel', - 'FHEM.view.HighChartsPanel' + 'FHEM.view.DevicePanel' ], refs: [ @@ -49,9 +48,6 @@ Ext.define('FHEM.controller.MainController', { 'panel[name=tabledataaccordionpanel]': { expand: this.showDatabaseTablePanel }, - 'panel[name=highchartsaccordionpanel]': { - expand: this.showHighChartsPanel - }, 'treepanel[name=maintreepanel]': { itemclick: this.showDevicePanel }, @@ -97,7 +93,7 @@ Ext.define('FHEM.controller.MainController', { if (Ext.isDefined(FHEM.version)) { var sp = this.getStatustextfield(); - sp.setText(FHEM.version + "; Frontend Version: 0.61 - 2013-04-27"); + sp.setText(FHEM.version + "; Frontend Version: 0.7 - 2013-05-01"); } //setup west accordion / treepanel @@ -430,29 +426,6 @@ Ext.define('FHEM.controller.MainController', { duration: 500, remove: false }); - }, - - showHighChartsPanel: function() { - var panel = { - xtype: 'highchartspanel', - name: 'highchartspanel', - region: 'center', - layout: 'fit' - }; - this.destroyCenterPanels(); - this.getMainviewport().add(panel); - -// var createdpanel = this.getMainviewport().down('tabledatagridpanel'); -// -// createdpanel.getEl().setOpacity(0); -// createdpanel.show(); -// -// createdpanel.getEl().animate({ -// opacity: 1, -// easing: 'easeIn', -// duration: 1500, -// remove: false -// }); - } + } }); \ No newline at end of file diff --git a/fhem/www/frontend/www/frontend/app/view/HighChartsPanel.js b/fhem/www/frontend/www/frontend/app/view/HighChartsPanel.js deleted file mode 100644 index 68b76fc36..000000000 --- a/fhem/www/frontend/www/frontend/app/view/HighChartsPanel.js +++ /dev/null @@ -1,524 +0,0 @@ -/** - * A Panel containing device specific information - */ -Ext.define('FHEM.view.HighChartsPanel', { - extend : 'Ext.panel.Panel', - alias : 'widget.highchartspanel', - - requires: [ - 'Chart.ux.Highcharts', - 'Chart.ux.Highcharts.Serie', - 'Chart.ux.Highcharts.SplineSerie', - 'FHEM.store.DeviceStore', - 'FHEM.store.ReadingsStore', - 'Ext.form.Panel', - 'Ext.form.field.Radio', - 'Ext.form.field.Date', - 'Ext.form.RadioGroup' - ], - - /** - * generating getters and setters - */ - config: { - /** - * - */ - axiscounter: 0 - }, - - /** - * - */ - title : 'Highcharts', - - /** - * init function - */ - initComponent : function() { - - var me = this; - - var chartSettingPanel = Ext.create('Ext.form.Panel', { - title: 'HighChart Settings - Click me to edit', - name: 'highchartformpanel', - maxHeight: 230, - autoScroll: true, - collapsible: true, - titleCollapse: true, - items: [ - { - xtype: 'fieldset', - layout: 'column', - title: 'Select data', - name: 'highchartaxesfieldset', - defaults: { - margin: '0 10 10 10' - }, - items: [] //get filled in own function - }, - { - xtype: 'fieldset', - layout: 'column', - title: 'Select Timerange', - defaults: { - margin: '0 0 0 10' - }, - items: [ - { - xtype: 'radiofield', - fieldLabel: 'Timerange', - labelWidth: 60, - name: 'highchartrb', - checked: true, - inputValue: 'timerange', - listeners: { - change: function(rb, newval, oldval) { - if (newval === false) { - rb.up().down('datefield[name=highchartstarttimepicker]').setDisabled(true); - rb.up().down('datefield[name=highchartendtimepicker]').setDisabled(true); - } else { - rb.up().down('datefield[name=highchartstarttimepicker]').setDisabled(false); - rb.up().down('datefield[name=highchartendtimepicker]').setDisabled(false); - } - } - } - }, - { - xtype: 'datefield', - name: 'highchartstarttimepicker', - format: 'Y-m-d H:i:s', - fieldLabel: 'Starttime', - labelWidth: 70 - }, - { - xtype: 'datefield', - name: 'highchartendtimepicker', - format: 'Y-m-d H:i:s', - fieldLabel: 'Endtime', - labelWidth: 70 - }, - { - xtype: 'radiogroup', - name: 'highchartdynamictime', - fieldLabel: 'or select a dynamic time', - labelWidth: 140, - allowBlank: true, - defaults: { - labelWidth: 42, - padding: "0 25px 0 0", - checked: false - }, - items: [ - { fieldLabel: 'yearly', name: 'highchartrb', inputValue: 'year' }, - { fieldLabel: 'monthly', name: 'highchartrb', inputValue: 'month' }, - { fieldLabel: 'weekly', name: 'highchartrb', inputValue: 'week' }, - { fieldLabel: 'daily', name: 'highchartrb', inputValue: 'day' }, - { fieldLabel: 'hourly', name: 'highchartrb', inputValue: 'hour' } - ] - } - ] - }, - { - xtype: 'fieldset', - layout: 'column', - defaults: { - margin: '10 10 10 10' - }, - items: [ - { - xtype: 'button', - width: 100, - text: 'Show Chart', - name: 'highchartrequestchartdata', - icon: 'app/resources/icons/accept.png' - }, - { - xtype: 'button', - width: 100, - text: 'Save Chart', - disabled: true, - name: 'highchartsavechartdata', - icon: 'app/resources/icons/database_save.png' - }, - { - xtype: 'button', - width: 100, - text: 'Reset Fields', - name: 'highchartresetchartform', - icon: 'app/resources/icons/delete.png' - }, - { - xtype: 'radio', - width: 160, - fieldLabel: 'Generalization', - disabled: true, - boxLabel: 'active', - name: 'highchartgeneralization', - listeners: { - change: function(radio, state) { - if (state) { - radio.up().down('combobox[name=highchartgenfactor]').setDisabled(false); - } else { - radio.up().down('combobox[name=highchartgenfactor]').setDisabled(true); - } - } - } - }, - { - xtype: 'radio', - width: 80, - boxLabel: 'disabled', - disabled: true, - checked: true, - name: 'highchartgeneralization' - }, - { - xtype: 'combo', - width: 120, - name: 'highchartgenfactor', - disabled: true, - fieldLabel: 'Factor', - labelWidth: 50, - store: Ext.create('Ext.data.Store', { - fields: ['displayval', 'val'], - data : [ - {"displayval": "10%", "val":"10"}, - {"displayval": "20%", "val":"20"}, - {"displayval": "30%", "val":"30"}, - {"displayval": "40%", "val":"40"}, - {"displayval": "50%", "val":"50"}, - {"displayval": "60%", "val":"60"}, - {"displayval": "70%", "val":"70"}, - {"displayval": "80%", "val":"80"}, - {"displayval": "90%", "val":"90"} - ] - }), - fields: ['displayval', 'val'], - displayField: 'displayval', - valueField: 'val', - value: '30' - } - ] - } - ] - }); - - Ext.define('HighChartData', { - extend : 'Ext.data.Model', - fields : [ { - name : 'TIMESTAMP', - type : 'string' - }, { - name : 'VALUE', - type : 'float' - }] - }); - - var store = Ext.create('Ext.data.Store', { - model : 'HighChartData', - data: [{}] - }); - - me.callParent(arguments); - - //listener used to get correct rendering dimensions - me.on("afterrender", function() { - - me.add(chartSettingPanel); - - //add the first yaxis line - me.createNewYAxis(); - - var chartpanel = Ext.create('Ext.panel.Panel', { - title : 'Highchart', - name: 'highchartpanel', - collapsible: true, - titleCollapse: true, - layout : 'fit', - items : [ { - xtype : 'highchart', - id : 'chart', - defaultSeriesType : 'spline', - series : [ { - type : 'spline', - dataIndex : 'VALUE', - name : 'VALUE', - visible : true - }], - store : store, - xField : 'TIMESTAMP', - chartConfig : { - chart : { - marginRight : 130, - marginBottom : 120, - zoomType : 'x', - animation : { - duration : 1500, - easing : 'swing' - } - }, - title : { - text : 'Highcharts Testing', - x : -20 - }, - xAxis : [ { - title : { - text : 'Timestamp', - margin : 20 - }, - type: 'datetime', - tickInterval : 40 , - labels : { - rotation : 315, - y : 45 -// formatter : function() { -// if (typeof this.value == 'string') { -// var dt = Ext.Date.parse( -// parseInt(this.value) / 1000, "U"); -// return Ext.Date.format(dt, "H:i:s"); -// } else { -// return this.value; -// } -// } - - } - } ], - yAxis : { - title : { - text : 'Value' - }, - plotLines : [ { - value : 0, - width : 1, - color : '#808080' - } ] - }, - plotOptions : { - series : { - animation : { - duration : 2000, - easing : 'swing' - } - } - }, - tooltip : { - formatter : function() { - return '' + this.series.name + '
' - + this.x + ': ' + this.y; - } - - }, - legend : { - layout : 'vertical', - align : 'right', - verticalAlign : 'top', - x : -10, - y : 100, - borderWidth : 0 - } - } - } ] - }); - - me.add(chartpanel); - - }); - - - }, - - /** - * create a new fieldset for a new chart y axis - */ - createNewYAxis: function() { - - var me = this; - - me.setAxiscounter(me.getAxiscounter() + 1); - - var components = - { - xtype: 'fieldset', - name: 'highchartsinglerowfieldset', - layout: 'column', - defaults: { - margin: '5 5 5 0' - }, - items: - [ - { - xtype: 'combobox', - name: 'highchartdevicecombo', - fieldLabel: 'Select Device', - labelWidth: 90, - store: Ext.create('FHEM.store.DeviceStore', { - proxy: { - type: 'ajax', - method: 'POST', - url: '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+getdevices&XHR=1', - reader: { - type: 'json', - root: 'data', - totalProperty: 'totalCount' - } - }, - autoLoad: false - }), - displayField: 'DEVICE', - valueField: 'DEVICE', - listeners: { - select: function(combo) { - var device = combo.getValue(), - readingscombo = combo.up().down('combobox[name=highchartyaxiscombo]'), - readingsstore = readingscombo.getStore(), - readingsproxy = readingsstore.getProxy(); - - readingsproxy.url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+' + device + '+getreadings&XHR=1'; - readingsstore.load(); - readingscombo.setDisabled(false); - } - } - }, - { - xtype: 'combobox', - name: 'highchartyaxiscombo', - fieldLabel: 'Select Y-Axis', - disabled: true, - labelWidth: 90, - inputWidth: 110, - store: Ext.create('FHEM.store.ReadingsStore', { - proxy: { - type: 'ajax', - method: 'POST', - url: '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+-+getreadings&XHR=1', - reader: { - type: 'json', - root: 'data', - totalProperty: 'totalCount' - } - }, - autoLoad: false - }), - displayField: 'READING', - valueField: 'READING' - }, - { - xtype: 'combobox', - name: 'highchartyaxiscolorcombo', - fieldLabel: 'Y-Color', - disabled: true, - labelWidth: 50, - inputWidth: 70, - store: Ext.create('Ext.data.Store', { - fields: ['name', 'value'], - data : [ - {'name':'Blue','value':'#2F40FA'}, - {'name':'Green', 'value':'#46E01B'}, - {'name':'Orange','value':'#F0A800'}, - {'name':'Red','value':'#E0321B'}, - {'name':'Yellow','value':'#F5ED16'} - ] - }), - displayField: 'name', - valueField: 'value', - value: '#2F40FA' - }, - { - xtype: 'checkboxfield', - disabled: true, - name: 'highchartyaxisfillcheck', - boxLabel: 'Fill' - }, - { - xtype: 'checkboxfield', - disabled: true, - name: 'highchartyaxisstepcheck', - boxLabel: 'Steps', - tooltip: 'Check, if the chart should be shown with steps instead of a linear Line' - }, - { - xtype: 'radiogroup', - disabled: true, - name: 'highchartaxisside', - allowBlank: false, - border: true, - defaults: { - padding: "0 15px 0 0", - checked: false - }, - items: [ - { labelWidth: 50, fieldLabel: 'Left Axis', name: 'highchartrbc' + me.getAxiscounter(), inputValue: 'left', checked: true }, - { labelWidth: 60, fieldLabel: 'Right Axis', name: 'highchartrbc' + me.getAxiscounter(), inputValue: 'right' } - ] - }, - { - xtype: 'combobox', - name: 'highchartyaxisstatisticscombo', - fieldLabel: 'Statistics', - disabled: true, - labelWidth: 70, - inputWidth: 120, - store: Ext.create('Ext.data.Store', { - fields: ['name', 'value'], - data : [ - {'name':'None','value':'none'}, - {'name':'Hour Sum', 'value':'hoursum'}, - {'name':'Hour Average', 'value':'houraverage'}, - {'name':'Hour Min','value':'hourmin'}, - {'name':'Hour Max','value':'hourmax'}, - {'name':'Hour Count','value':'hourcount'}, - {'name':'Day Sum', 'value':'daysum'}, - {'name':'Day Average', 'value':'dayaverage'}, - {'name':'Day Min','value':'daymin'}, - {'name':'Day Max','value':'daymax'}, - {'name':'Day Count','value':'daycount'}, - {'name':'Week Sum', 'value':'weeksum'}, - {'name':'Week Average', 'value':'weekaverage'}, - {'name':'Week Min','value':'weekmin'}, - {'name':'Week Max','value':'weekmax'}, - {'name':'Week Count','value':'weekcount'}, - {'name':'Month Sum', 'value':'monthsum'}, - {'name':'Month Average', 'value':'monthaverage'}, - {'name':'Month Min','value':'monthmin'}, - {'name':'Month Max','value':'monthmax'}, - {'name':'Month Count','value':'monthcount'}, - {'name':'Year Sum', 'value':'yearsum'}, - {'name':'Year Average', 'value':'yearaverage'}, - {'name':'Year Min','value':'yearmin'}, - {'name':'Year Max','value':'yearmax'}, - {'name':'Year Count','value':'yearcount'} - ] - }), - displayField: 'name', - valueField: 'value', - value: 'none' - }, - { - xtype: 'button', - disabled: true, - width: 110, - text: 'Add another Y-Axis', - name: 'highchartaddyaxisbtn', - handler: function(btn) { - me.createNewYAxis(); - } - }, - { - xtype: 'button', - disabled: true, - width: 90, - text: 'Add Baseline', - name: 'highchartaddbaselinebtn', - handler: function(btn) { - me.createNewBaseLineFields(btn); - } - } - ] - }; - - Ext.ComponentQuery.query('fieldset[name=highchartaxesfieldset]')[0].add(components); - - } - -}); diff --git a/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js b/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js index 268d66d21..313d84640 100644 --- a/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js +++ b/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js @@ -91,7 +91,7 @@ Ext.define('FHEM.view.LineChartPanel', { var chartSettingPanel = Ext.create('Ext.form.Panel', { title: 'Chart Settings - Click me to edit', name: 'chartformpanel', - maxHeight: 230, + maxHeight: 270, autoScroll: true, collapsible: true, titleCollapse: true, @@ -171,6 +171,107 @@ Ext.define('FHEM.view.LineChartPanel', { } ] }, + { + + xtype: 'fieldset', + layout: 'column', + title: 'Axis Configuration', + defaults: { + margin: '0 0 0 10' + }, + items: [ + { + xtype: 'radiogroup', + name: 'leftaxisconfiguration', + fieldLabel: 'Left Axis Scalerange', + labelWidth: 120, + allowBlank: true, + defaults: { + labelWidth: 55, + padding: "0 25px 0 0", + checked: false + }, + items: [ + { fieldLabel: 'automatic', name: 'rb1', inputValue: 'automatic', checked: true }, + { fieldLabel: 'manual', name: 'rb1', inputValue: 'manual' } + ], + listeners: { + change: function(rb1, newval, oldval) { + if (newval.rb1 === "automatic") { + rb1.up().down('numberfield[name=leftaxisminimum]').setDisabled(true); + rb1.up().down('numberfield[name=leftaxismaximum]').setDisabled(true); + } else { + rb1.up().down('numberfield[name=leftaxisminimum]').setDisabled(false); + rb1.up().down('numberfield[name=leftaxismaximum]').setDisabled(false); + } + } + } + }, + { + xtype: 'numberfield', + fieldLabel: 'Minimum', + name: 'leftaxisminimum', + allowBlank: false, + disabled: true, + labelWidth: 60, + width: 120 + }, + { + xtype: 'numberfield', + fieldLabel: 'Maximum', + name: 'leftaxismaximum', + allowBlank: false, + disabled: true, + labelWidth: 60, + width: 120 + }, + { + xtype: 'radiogroup', + name: 'rightaxisconfiguration', + fieldLabel: 'Right Axis Scalerange', + labelWidth: 130, + allowBlank: true, + defaults: { + labelWidth: 55, + padding: "0 25px 0 0", + checked: false + }, + items: [ + { fieldLabel: 'automatic', name: 'rb2', inputValue: 'automatic', checked: true }, + { fieldLabel: 'manual', name: 'rb2', inputValue: 'manual' } + ], + listeners: { + change: function(rb2, newval, oldval) { + if (newval.rb2 === "automatic") { + rb2.up().down('numberfield[name=rightaxisminimum]').setDisabled(true); + rb2.up().down('numberfield[name=rightaxismaximum]').setDisabled(true); + } else { + rb2.up().down('numberfield[name=rightaxisminimum]').setDisabled(false); + rb2.up().down('numberfield[name=rightaxismaximum]').setDisabled(false); + } + } + } + }, + { + xtype: 'numberfield', + fieldLabel: 'Minimum', + name: 'rightaxisminimum', + allowBlank: false, + disabled: true, + labelWidth: 60, + width: 120 + }, + { + xtype: 'numberfield', + fieldLabel: 'Maximum', + name: 'rightaxismaximum', + allowBlank: false, + disabled: true, + labelWidth: 60, + width: 120 + } + ] + }, { xtype: 'fieldset', layout: 'column', diff --git a/fhem/www/frontend/www/frontend/app/view/Viewport.js b/fhem/www/frontend/www/frontend/app/view/Viewport.js index 0e4e01c30..0a3793528 100644 --- a/fhem/www/frontend/www/frontend/app/view/Viewport.js +++ b/fhem/www/frontend/www/frontend/app/view/Viewport.js @@ -28,20 +28,22 @@ Ext.define('FHEM.view.Viewport', { items: [ { region: 'north', - height: 85, + height: 45, layout: 'hbox', items: [ { - xtype: 'panel', - html: '

Frontend

', + xtype: 'container', + //html: '

Frontend

', + html: 'FHEM Webfrontend', width: '25%', + padding: '15px 0 0 5px', border: false }, { xtype: 'textfield', name: 'commandfield', width: '30%', - padding: '30px 0 0 0', + padding: '10px 0 0 0', fieldLabel: 'Send Commands', border: false }, @@ -53,7 +55,7 @@ Ext.define('FHEM.view.Viewport', { { xtype: 'button', width: 80, - margin: '30px 0 0 5px', + margin: '10px 0 0 5px', text: 'Execute', name: 'executecommand', icon: 'app/resources/icons/arrow_left.png' @@ -61,7 +63,7 @@ Ext.define('FHEM.view.Viewport', { { xtype: 'button', width: 110, - margin: '30px 0 0 5px', + margin: '10px 0 0 5px', text: 'Save to Config', name: 'saveconfig', icon: 'app/resources/icons/database_save.png' @@ -76,7 +78,7 @@ Ext.define('FHEM.view.Viewport', { { xtype: 'button', width: 75, - margin: '30px 5px 0 5px', + margin: '10px 5px 0 5px', text: 'Shutdown', name: 'shutdownfhem', tooltip: 'Shutdown FHEM', @@ -85,7 +87,7 @@ Ext.define('FHEM.view.Viewport', { { xtype: 'button', width: 70, - margin: '30px 5px 0 5px', + margin: '10px 5px 0 5px', text: 'Restart', name: 'restartfhem', tooltip: 'Restart FHEM', @@ -160,12 +162,6 @@ Ext.define('FHEM.view.Viewport', { title: 'Database Tables', name: 'tabledataaccordionpanel', autoScroll: true - }, - { - xtype: 'panel', - title: 'Highcharts', - name: 'highchartsaccordionpanel', - autoScroll: true } ] }, diff --git a/fhem/www/frontend/www/frontend/index.html b/fhem/www/frontend/www/frontend/index.html index 3a4192d2e..c18983019 100644 --- a/fhem/www/frontend/www/frontend/index.html +++ b/fhem/www/frontend/www/frontend/index.html @@ -21,8 +21,6 @@ - - diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/highcharts.src.js b/fhem/www/frontend/www/frontend/lib/highcharts/highcharts.src.js deleted file mode 100644 index 7e45545c7..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/highcharts.src.js +++ /dev/null @@ -1,16273 +0,0 @@ -// ==ClosureCompiler== -// @compilation_level SIMPLE_OPTIMIZATIONS - -/** - * @license Highcharts JS v3.0.1 (2013-04-09) - * - * (c) 2009-2013 Torstein Hønsi - * - * License: www.highcharts.com/license - */ - -// JSLint options: -/*global Highcharts, document, window, navigator, setInterval, clearInterval, clearTimeout, setTimeout, location, jQuery, $, console */ - -(function () { -// encapsulated variables -var UNDEFINED, - doc = document, - win = window, - math = Math, - mathRound = math.round, - mathFloor = math.floor, - mathCeil = math.ceil, - mathMax = math.max, - mathMin = math.min, - mathAbs = math.abs, - mathCos = math.cos, - mathSin = math.sin, - mathPI = math.PI, - deg2rad = mathPI * 2 / 360, - - - // some variables - userAgent = navigator.userAgent, - isOpera = win.opera, - isIE = /msie/i.test(userAgent) && !isOpera, - docMode8 = doc.documentMode === 8, - isWebKit = /AppleWebKit/.test(userAgent), - isFirefox = /Firefox/.test(userAgent), - isTouchDevice = /(Mobile|Android|Windows Phone)/.test(userAgent), - SVG_NS = 'http://www.w3.org/2000/svg', - hasSVG = !!doc.createElementNS && !!doc.createElementNS(SVG_NS, 'svg').createSVGRect, - hasBidiBug = isFirefox && parseInt(userAgent.split('Firefox/')[1], 10) < 4, // issue #38 - useCanVG = !hasSVG && !isIE && !!doc.createElement('canvas').getContext, - Renderer, - hasTouch = doc.documentElement.ontouchstart !== UNDEFINED, - symbolSizes = {}, - idCounter = 0, - garbageBin, - defaultOptions, - dateFormat, // function - globalAnimation, - pathAnim, - timeUnits, - noop = function () {}, - charts = [], - PRODUCT = 'Highcharts', - VERSION = '3.0.1', - - // some constants for frequently used strings - DIV = 'div', - ABSOLUTE = 'absolute', - RELATIVE = 'relative', - HIDDEN = 'hidden', - PREFIX = 'highcharts-', - VISIBLE = 'visible', - PX = 'px', - NONE = 'none', - M = 'M', - L = 'L', - /* - * Empirical lowest possible opacities for TRACKER_FILL - * IE6: 0.002 - * IE7: 0.002 - * IE8: 0.002 - * IE9: 0.00000000001 (unlimited) - * IE10: 0.0001 (exporting only) - * FF: 0.00000000001 (unlimited) - * Chrome: 0.000001 - * Safari: 0.000001 - * Opera: 0.00000000001 (unlimited) - */ - TRACKER_FILL = 'rgba(192,192,192,' + (hasSVG ? 0.0001 : 0.002) + ')', // invisible but clickable - //TRACKER_FILL = 'rgba(192,192,192,0.5)', - NORMAL_STATE = '', - HOVER_STATE = 'hover', - SELECT_STATE = 'select', - MILLISECOND = 'millisecond', - SECOND = 'second', - MINUTE = 'minute', - HOUR = 'hour', - DAY = 'day', - WEEK = 'week', - MONTH = 'month', - YEAR = 'year', - - // constants for attributes - LINEAR_GRADIENT = 'linearGradient', - STOPS = 'stops', - STROKE_WIDTH = 'stroke-width', - - // time methods, changed based on whether or not UTC is used - makeTime, - getMinutes, - getHours, - getDay, - getDate, - getMonth, - getFullYear, - setMinutes, - setHours, - setDate, - setMonth, - setFullYear, - - - // lookup over the types and the associated classes - seriesTypes = {}; - -// The Highcharts namespace -win.Highcharts = win.Highcharts ? error(16, true) : {}; - -/** - * Extend an object with the members of another - * @param {Object} a The object to be extended - * @param {Object} b The object to add to the first one - */ -function extend(a, b) { - var n; - if (!a) { - a = {}; - } - for (n in b) { - a[n] = b[n]; - } - return a; -} - -/** - * Deep merge two or more objects and return a third object. - * Previously this function redirected to jQuery.extend(true), but this had two limitations. - * First, it deep merged arrays, which lead to workarounds in Highcharts. Second, - * it copied properties from extended prototypes. - */ -function merge() { - var i, - len = arguments.length, - ret = {}, - doCopy = function (copy, original) { - var value, key; - - for (key in original) { - if (original.hasOwnProperty(key)) { - value = original[key]; - - // An object is replacing a primitive - if (typeof copy !== 'object') { - copy = {}; - } - - // Copy the contents of objects, but not arrays or DOM nodes - if (value && typeof value === 'object' && Object.prototype.toString.call(value) !== '[object Array]' - && typeof value.nodeType !== 'number') { - copy[key] = doCopy(copy[key] || {}, value); - - // Primitives and arrays are copied over directly - } else { - copy[key] = original[key]; - } - } - } - return copy; - }; - - // For each argument, extend the return - for (i = 0; i < len; i++) { - ret = doCopy(ret, arguments[i]); - } - - return ret; -} - -/** - * Take an array and turn into a hash with even number arguments as keys and odd numbers as - * values. Allows creating constants for commonly used style properties, attributes etc. - * Avoid it in performance critical situations like looping - */ -function hash() { - var i = 0, - args = arguments, - length = args.length, - obj = {}; - for (; i < length; i++) { - obj[args[i++]] = args[i]; - } - return obj; -} - -/** - * Shortcut for parseInt - * @param {Object} s - * @param {Number} mag Magnitude - */ -function pInt(s, mag) { - return parseInt(s, mag || 10); -} - -/** - * Check for string - * @param {Object} s - */ -function isString(s) { - return typeof s === 'string'; -} - -/** - * Check for object - * @param {Object} obj - */ -function isObject(obj) { - return typeof obj === 'object'; -} - -/** - * Check for array - * @param {Object} obj - */ -function isArray(obj) { - return Object.prototype.toString.call(obj) === '[object Array]'; -} - -/** - * Check for number - * @param {Object} n - */ -function isNumber(n) { - return typeof n === 'number'; -} - -function log2lin(num) { - return math.log(num) / math.LN10; -} -function lin2log(num) { - return math.pow(10, num); -} - -/** - * Remove last occurence of an item from an array - * @param {Array} arr - * @param {Mixed} item - */ -function erase(arr, item) { - var i = arr.length; - while (i--) { - if (arr[i] === item) { - arr.splice(i, 1); - break; - } - } - //return arr; -} - -/** - * Returns true if the object is not null or undefined. Like MooTools' $.defined. - * @param {Object} obj - */ -function defined(obj) { - return obj !== UNDEFINED && obj !== null; -} - -/** - * Set or get an attribute or an object of attributes. Can't use jQuery attr because - * it attempts to set expando properties on the SVG element, which is not allowed. - * - * @param {Object} elem The DOM element to receive the attribute(s) - * @param {String|Object} prop The property or an abject of key-value pairs - * @param {String} value The value if a single property is set - */ -function attr(elem, prop, value) { - var key, - setAttribute = 'setAttribute', - ret; - - // if the prop is a string - if (isString(prop)) { - // set the value - if (defined(value)) { - - elem[setAttribute](prop, value); - - // get the value - } else if (elem && elem.getAttribute) { // elem not defined when printing pie demo... - ret = elem.getAttribute(prop); - } - - // else if prop is defined, it is a hash of key/value pairs - } else if (defined(prop) && isObject(prop)) { - for (key in prop) { - elem[setAttribute](key, prop[key]); - } - } - return ret; -} -/** - * Check if an element is an array, and if not, make it into an array. Like - * MooTools' $.splat. - */ -function splat(obj) { - return isArray(obj) ? obj : [obj]; -} - - -/** - * Return the first value that is defined. Like MooTools' $.pick. - */ -function pick() { - var args = arguments, - i, - arg, - length = args.length; - for (i = 0; i < length; i++) { - arg = args[i]; - if (typeof arg !== 'undefined' && arg !== null) { - return arg; - } - } -} - -/** - * Set CSS on a given element - * @param {Object} el - * @param {Object} styles Style object with camel case property names - */ -function css(el, styles) { - if (isIE) { - if (styles && styles.opacity !== UNDEFINED) { - styles.filter = 'alpha(opacity=' + (styles.opacity * 100) + ')'; - } - } - extend(el.style, styles); -} - -/** - * Utility function to create element with attributes and styles - * @param {Object} tag - * @param {Object} attribs - * @param {Object} styles - * @param {Object} parent - * @param {Object} nopad - */ -function createElement(tag, attribs, styles, parent, nopad) { - var el = doc.createElement(tag); - if (attribs) { - extend(el, attribs); - } - if (nopad) { - css(el, {padding: 0, border: NONE, margin: 0}); - } - if (styles) { - css(el, styles); - } - if (parent) { - parent.appendChild(el); - } - return el; -} - -/** - * Extend a prototyped class by new members - * @param {Object} parent - * @param {Object} members - */ -function extendClass(parent, members) { - var object = function () {}; - object.prototype = new parent(); - extend(object.prototype, members); - return object; -} - -/** - * Format a number and return a string based on input settings - * @param {Number} number The input number to format - * @param {Number} decimals The amount of decimals - * @param {String} decPoint The decimal point, defaults to the one given in the lang options - * @param {String} thousandsSep The thousands separator, defaults to the one given in the lang options - */ -function numberFormat(number, decimals, decPoint, thousandsSep) { - var lang = defaultOptions.lang, - // http://kevin.vanzonneveld.net/techblog/article/javascript_equivalent_for_phps_number_format/ - n = number, - c = decimals === -1 ? - ((n || 0).toString().split('.')[1] || '').length : // preserve decimals - (isNaN(decimals = mathAbs(decimals)) ? 2 : decimals), - d = decPoint === undefined ? lang.decimalPoint : decPoint, - t = thousandsSep === undefined ? lang.thousandsSep : thousandsSep, - s = n < 0 ? "-" : "", - i = String(pInt(n = mathAbs(+n || 0).toFixed(c))), - j = i.length > 3 ? i.length % 3 : 0; - - return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + - (c ? d + mathAbs(n - i).toFixed(c).slice(2) : ""); -} - -/** - * Pad a string to a given length by adding 0 to the beginning - * @param {Number} number - * @param {Number} length - */ -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; -} - -/** - * Wrap a method with extended functionality, preserving the original function - * @param {Object} obj The context object that the method belongs to - * @param {String} method The name of the method to extend - * @param {Function} func A wrapper function callback. This function is called with the same arguments - * as the original function, except that the original function is unshifted and passed as the first - * argument. - */ -function wrap(obj, method, func) { - var proceed = obj[method]; - obj[method] = function () { - var args = Array.prototype.slice.call(arguments); - args.unshift(proceed); - return func.apply(this, args); - }; -} - -/** - * Based on http://www.php.net/manual/en/function.strftime.php - * @param {String} format - * @param {Number} timestamp - * @param {Boolean} capitalize - */ -dateFormat = function (format, timestamp, capitalize) { - if (!defined(timestamp) || isNaN(timestamp)) { - return 'Invalid date'; - } - format = pick(format, '%Y-%m-%d %H:%M:%S'); - - var date = new Date(timestamp), - key, // used in for constuct below - // get the basic time values - hours = date[getHours](), - day = date[getDay](), - dayOfMonth = date[getDate](), - month = date[getMonth](), - fullYear = date[getFullYear](), - lang = defaultOptions.lang, - langWeekdays = lang.weekdays, - - // List all format keys. Custom formats can be added from the outside. - replacements = extend({ - - // Day - 'a': langWeekdays[day].substr(0, 3), // Short weekday, like 'Mon' - 'A': langWeekdays[day], // Long weekday, like 'Monday' - 'd': pad(dayOfMonth), // Two digit day of the month, 01 to 31 - 'e': dayOfMonth, // Day of the month, 1 through 31 - - // Week (none implemented) - //'W': weekNumber(), - - // Month - 'b': lang.shortMonths[month], // Short month, like 'Jan' - 'B': lang.months[month], // Long month, like 'January' - 'm': pad(month + 1), // Two digit month number, 01 through 12 - - // Year - 'y': fullYear.toString().substr(2, 2), // Two digits year, like 09 for 2009 - 'Y': fullYear, // Four digits year, like 2009 - - // Time - 'H': pad(hours), // Two digits hours in 24h format, 00 through 23 - 'I': pad((hours % 12) || 12), // Two digits hours in 12h format, 00 through 11 - 'l': (hours % 12) || 12, // Hours in 12h format, 1 through 12 - 'M': pad(date[getMinutes]()), // Two digits minutes, 00 through 59 - 'p': hours < 12 ? 'AM' : 'PM', // Upper case AM or PM - 'P': hours < 12 ? 'am' : 'pm', // Lower case AM or PM - 'S': pad(date.getSeconds()), // Two digits seconds, 00 through 59 - 'L': pad(mathRound(timestamp % 1000), 3) // Milliseconds (naming from Ruby) - }, Highcharts.dateFormats); - - - // do the replaces - for (key in replacements) { - while (format.indexOf('%' + key) !== -1) { // regex would do it in one line, but this is faster - format = format.replace('%' + key, typeof replacements[key] === 'function' ? replacements[key](timestamp) : replacements[key]); - } - } - - // Optionally capitalize the string and return - return capitalize ? format.substr(0, 1).toUpperCase() + format.substr(1) : format; -}; - -/** - * Format a single variable. Similar to sprintf, without the % prefix. - */ -function formatSingle(format, val) { - var floatRegex = /f$/, - decRegex = /\.([0-9])/, - lang = defaultOptions.lang, - decimals; - - if (floatRegex.test(format)) { // float - decimals = format.match(decRegex); - decimals = decimals ? decimals[1] : -1; - val = numberFormat( - val, - decimals, - lang.decimalPoint, - format.indexOf(',') > -1 ? lang.thousandsSep : '' - ); - } else { - val = dateFormat(format, val); - } - return val; -} - -/** - * Format a string according to a subset of the rules of Python's String.format method. - */ -function format(str, ctx) { - var splitter = '{', - isInside = false, - segment, - valueAndFormat, - path, - i, - len, - ret = [], - val, - index; - - while ((index = str.indexOf(splitter)) !== -1) { - - segment = str.slice(0, index); - if (isInside) { // we're on the closing bracket looking back - - valueAndFormat = segment.split(':'); - path = valueAndFormat.shift().split('.'); // get first and leave format - len = path.length; - val = ctx; - - // Assign deeper paths - for (i = 0; i < len; i++) { - val = val[path[i]]; - } - - // Format the replacement - if (valueAndFormat.length) { - val = formatSingle(valueAndFormat.join(':'), val); - } - - // Push the result and advance the cursor - ret.push(val); - - } else { - ret.push(segment); - - } - str = str.slice(index + 1); // the rest - isInside = !isInside; // toggle - splitter = isInside ? '}' : '{'; // now look for next matching bracket - } - ret.push(str); - return ret.join(''); -} - -/** - * Take an interval and normalize it to multiples of 1, 2, 2.5 and 5 - * @param {Number} interval - * @param {Array} multiples - * @param {Number} magnitude - * @param {Object} options - */ -function normalizeTickInterval(interval, multiples, magnitude, options) { - var normalized, i; - - // round to a tenfold of 1, 2, 2.5 or 5 - magnitude = pick(magnitude, 1); - normalized = interval / magnitude; - - // multiples for a linear scale - if (!multiples) { - multiples = [1, 2, 2.5, 5, 10]; - - // the allowDecimals option - if (options && options.allowDecimals === false) { - if (magnitude === 1) { - multiples = [1, 2, 5, 10]; - } else if (magnitude <= 0.1) { - multiples = [1 / magnitude]; - } - } - } - - // normalize the interval to the nearest multiple - for (i = 0; i < multiples.length; i++) { - interval = multiples[i]; - if (normalized <= (multiples[i] + (multiples[i + 1] || multiples[i])) / 2) { - break; - } - } - - // multiply back to the correct magnitude - interval *= magnitude; - - return interval; -} - -/** - * Get a normalized tick interval for dates. Returns a configuration object with - * unit range (interval), count and name. Used to prepare data for getTimeTicks. - * Previously this logic was part of getTimeTicks, but as getTimeTicks now runs - * of segments in stock charts, the normalizing logic was extracted in order to - * prevent it for running over again for each segment having the same interval. - * #662, #697. - */ -function normalizeTimeTickInterval(tickInterval, unitsOption) { - var units = unitsOption || [[ - MILLISECOND, // unit name - [1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples - ], [ - SECOND, - [1, 2, 5, 10, 15, 30] - ], [ - MINUTE, - [1, 2, 5, 10, 15, 30] - ], [ - HOUR, - [1, 2, 3, 4, 6, 8, 12] - ], [ - DAY, - [1, 2] - ], [ - WEEK, - [1, 2] - ], [ - MONTH, - [1, 2, 3, 4, 6] - ], [ - YEAR, - null - ]], - unit = units[units.length - 1], // default unit is years - interval = timeUnits[unit[0]], - multiples = unit[1], - count, - i; - - // loop through the units to find the one that best fits the tickInterval - for (i = 0; i < units.length; i++) { - unit = units[i]; - interval = timeUnits[unit[0]]; - multiples = unit[1]; - - - if (units[i + 1]) { - // lessThan is in the middle between the highest multiple and the next unit. - var lessThan = (interval * multiples[multiples.length - 1] + - timeUnits[units[i + 1][0]]) / 2; - - // break and keep the current unit - if (tickInterval <= lessThan) { - break; - } - } - } - - // prevent 2.5 years intervals, though 25, 250 etc. are allowed - if (interval === timeUnits[YEAR] && tickInterval < 5 * interval) { - multiples = [1, 2, 5]; - } - - // prevent 2.5 years intervals, though 25, 250 etc. are allowed - if (interval === timeUnits[YEAR] && tickInterval < 5 * interval) { - multiples = [1, 2, 5]; - } - - // get the count - count = normalizeTickInterval(tickInterval / interval, multiples); - - return { - unitRange: interval, - count: count, - unitName: unit[0] - }; -} - -/** - * Set the tick positions to a time unit that makes sense, for example - * on the first of each month or on every Monday. Return an array - * with the time positions. Used in datetime axes as well as for grouping - * data on a datetime axis. - * - * @param {Object} normalizedInterval The interval in axis values (ms) and the count - * @param {Number} min The minimum in axis values - * @param {Number} max The maximum in axis values - * @param {Number} startOfWeek - */ -function getTimeTicks(normalizedInterval, min, max, startOfWeek) { - var tickPositions = [], - i, - higherRanks = {}, - useUTC = defaultOptions.global.useUTC, - minYear, // used in months and years as a basis for Date.UTC() - minDate = new Date(min), - interval = normalizedInterval.unitRange, - count = normalizedInterval.count; - - if (defined(min)) { // #1300 - if (interval >= timeUnits[SECOND]) { // second - minDate.setMilliseconds(0); - minDate.setSeconds(interval >= timeUnits[MINUTE] ? 0 : - count * mathFloor(minDate.getSeconds() / count)); - } - - if (interval >= timeUnits[MINUTE]) { // minute - minDate[setMinutes](interval >= timeUnits[HOUR] ? 0 : - count * mathFloor(minDate[getMinutes]() / count)); - } - - if (interval >= timeUnits[HOUR]) { // hour - minDate[setHours](interval >= timeUnits[DAY] ? 0 : - count * mathFloor(minDate[getHours]() / count)); - } - - if (interval >= timeUnits[DAY]) { // day - minDate[setDate](interval >= timeUnits[MONTH] ? 1 : - count * mathFloor(minDate[getDate]() / count)); - } - - if (interval >= timeUnits[MONTH]) { // month - minDate[setMonth](interval >= timeUnits[YEAR] ? 0 : - count * mathFloor(minDate[getMonth]() / count)); - minYear = minDate[getFullYear](); - } - - if (interval >= timeUnits[YEAR]) { // year - minYear -= minYear % count; - minDate[setFullYear](minYear); - } - - // week is a special case that runs outside the hierarchy - if (interval === timeUnits[WEEK]) { - // get start of current week, independent of count - minDate[setDate](minDate[getDate]() - minDate[getDay]() + - pick(startOfWeek, 1)); - } - - - // get tick positions - i = 1; - minYear = minDate[getFullYear](); - var time = minDate.getTime(), - minMonth = minDate[getMonth](), - minDateDate = minDate[getDate](), - timezoneOffset = useUTC ? - 0 : - (24 * 3600 * 1000 + minDate.getTimezoneOffset() * 60 * 1000) % (24 * 3600 * 1000); // #950 - - // iterate and add tick positions at appropriate values - while (time < max) { - tickPositions.push(time); - - // if the interval is years, use Date.UTC to increase years - if (interval === timeUnits[YEAR]) { - time = makeTime(minYear + i * count, 0); - - // if the interval is months, use Date.UTC to increase months - } else if (interval === timeUnits[MONTH]) { - time = makeTime(minYear, minMonth + i * count); - - // if we're using global time, the interval is not fixed as it jumps - // one hour at the DST crossover - } else if (!useUTC && (interval === timeUnits[DAY] || interval === timeUnits[WEEK])) { - time = makeTime(minYear, minMonth, minDateDate + - i * count * (interval === timeUnits[DAY] ? 1 : 7)); - - // else, the interval is fixed and we use simple addition - } else { - - // mark new days if the time is dividable by day - if (interval <= timeUnits[HOUR] && time % timeUnits[DAY] === timezoneOffset) { - higherRanks[time] = DAY; - } - - time += interval * count; - - } - - i++; - } - - // push the last time - tickPositions.push(time); - } - - // record information on the chosen unit - for dynamic label formatter - tickPositions.info = extend(normalizedInterval, { - higherRanks: higherRanks, - totalRange: interval * count - }); - - return tickPositions; -} - -/** - * Helper class that contains variuos counters that are local to the chart. - */ -function ChartCounters() { - this.color = 0; - this.symbol = 0; -} - -ChartCounters.prototype = { - /** - * Wraps the color counter if it reaches the specified length. - */ - wrapColor: function (length) { - if (this.color >= length) { - this.color = 0; - } - }, - - /** - * Wraps the symbol counter if it reaches the specified length. - */ - wrapSymbol: function (length) { - if (this.symbol >= length) { - this.symbol = 0; - } - } -}; - - -/** - * Utility method that sorts an object array and keeping the order of equal items. - * ECMA script standard does not specify the behaviour when items are equal. - */ -function stableSort(arr, sortFunction) { - var length = arr.length, - sortValue, - i; - - // Add index to each item - for (i = 0; i < length; i++) { - arr[i].ss_i = i; // stable sort index - } - - arr.sort(function (a, b) { - sortValue = sortFunction(a, b); - return sortValue === 0 ? a.ss_i - b.ss_i : sortValue; - }); - - // Remove index from items - for (i = 0; i < length; i++) { - delete arr[i].ss_i; // stable sort index - } -} - -/** - * Non-recursive method to find the lowest member of an array. Math.min raises a maximum - * call stack size exceeded error in Chrome when trying to apply more than 150.000 points. This - * method is slightly slower, but safe. - */ -function arrayMin(data) { - var i = data.length, - min = data[0]; - - while (i--) { - if (data[i] < min) { - min = data[i]; - } - } - return min; -} - -/** - * Non-recursive method to find the lowest member of an array. Math.min raises a maximum - * call stack size exceeded error in Chrome when trying to apply more than 150.000 points. This - * method is slightly slower, but safe. - */ -function arrayMax(data) { - var i = data.length, - max = data[0]; - - while (i--) { - if (data[i] > max) { - max = data[i]; - } - } - return max; -} - -/** - * Utility method that destroys any SVGElement or VMLElement that are properties on the given object. - * It loops all properties and invokes destroy if there is a destroy method. The property is - * then delete'ed. - * @param {Object} The object to destroy properties on - * @param {Object} Exception, do not destroy this property, only delete it. - */ -function destroyObjectProperties(obj, except) { - var n; - for (n in obj) { - // If the object is non-null and destroy is defined - if (obj[n] && obj[n] !== except && obj[n].destroy) { - // Invoke the destroy - obj[n].destroy(); - } - - // Delete the property from the object. - delete obj[n]; - } -} - - -/** - * Discard an element by moving it to the bin and delete - * @param {Object} The HTML node to discard - */ -function discardElement(element) { - // create a garbage bin element, not part of the DOM - if (!garbageBin) { - garbageBin = createElement(DIV); - } - - // move the node and empty bin - if (element) { - garbageBin.appendChild(element); - } - garbageBin.innerHTML = ''; -} - -/** - * Provide error messages for debugging, with links to online explanation - */ -function error(code, stop) { - var msg = 'Highcharts error #' + code + ': www.highcharts.com/errors/' + code; - if (stop) { - throw msg; - } else if (win.console) { - console.log(msg); - } -} - -/** - * Fix JS round off float errors - * @param {Number} num - */ -function correctFloat(num) { - return parseFloat( - num.toPrecision(14) - ); -} - -/** - * Set the global animation to either a given value, or fall back to the - * given chart's animation option - * @param {Object} animation - * @param {Object} chart - */ -function setAnimation(animation, chart) { - globalAnimation = pick(animation, chart.animation); -} - -/** - * The time unit lookup - */ -/*jslint white: true*/ -timeUnits = hash( - MILLISECOND, 1, - SECOND, 1000, - MINUTE, 60000, - HOUR, 3600000, - DAY, 24 * 3600000, - WEEK, 7 * 24 * 3600000, - MONTH, 31 * 24 * 3600000, - YEAR, 31556952000 -); -/*jslint white: false*/ -/** - * Path interpolation algorithm used across adapters - */ -pathAnim = { - /** - * Prepare start and end values so that the path can be animated one to one - */ - init: function (elem, fromD, toD) { - fromD = fromD || ''; - var shift = elem.shift, - bezier = fromD.indexOf('C') > -1, - numParams = bezier ? 7 : 3, - endLength, - slice, - i, - start = fromD.split(' '), - end = [].concat(toD), // copy - startBaseLine, - endBaseLine, - sixify = function (arr) { // in splines make move points have six parameters like bezier curves - i = arr.length; - while (i--) { - if (arr[i] === M) { - arr.splice(i + 1, 0, arr[i + 1], arr[i + 2], arr[i + 1], arr[i + 2]); - } - } - }; - - if (bezier) { - sixify(start); - sixify(end); - } - - // pull out the base lines before padding - if (elem.isArea) { - startBaseLine = start.splice(start.length - 6, 6); - endBaseLine = end.splice(end.length - 6, 6); - } - - // if shifting points, prepend a dummy point to the end path - if (shift <= end.length / numParams) { - while (shift--) { - end = [].concat(end).splice(0, numParams).concat(end); - } - } - elem.shift = 0; // reset for following animations - - // copy and append last point until the length matches the end length - if (start.length) { - endLength = end.length; - while (start.length < endLength) { - - //bezier && sixify(start); - slice = [].concat(start).splice(start.length - numParams, numParams); - if (bezier) { // disable first control point - slice[numParams - 6] = slice[numParams - 2]; - slice[numParams - 5] = slice[numParams - 1]; - } - start = start.concat(slice); - } - } - - if (startBaseLine) { // append the base lines for areas - start = start.concat(startBaseLine); - end = end.concat(endBaseLine); - } - return [start, end]; - }, - - /** - * Interpolate each value of the path and return the array - */ - step: function (start, end, pos, complete) { - var ret = [], - i = start.length, - startVal; - - if (pos === 1) { // land on the final path without adjustment points appended in the ends - ret = complete; - - } else if (i === end.length && pos < 1) { - while (i--) { - startVal = parseFloat(start[i]); - ret[i] = - isNaN(startVal) ? // a letter instruction like M or L - start[i] : - pos * (parseFloat(end[i] - startVal)) + startVal; - - } - } else { // if animation is finished or length not matching, land on right value - ret = end; - } - return ret; - } -}; - -(function ($) { - /** - * The default HighchartsAdapter for jQuery - */ - win.HighchartsAdapter = win.HighchartsAdapter || ($ && { - - /** - * Initialize the adapter by applying some extensions to jQuery - */ - init: function (pathAnim) { - - // extend the animate function to allow SVG animations - var Fx = $.fx, - Step = Fx.step, - dSetter, - Tween = $.Tween, - propHooks = Tween && Tween.propHooks; - - /*jslint unparam: true*//* allow unused param x in this function */ - $.extend($.easing, { - easeOutQuad: function (x, t, b, c, d) { - return -c * (t /= d) * (t - 2) + b; - } - }); - /*jslint unparam: false*/ - - - // extend some methods to check for elem.attr, which means it is a Highcharts SVG object - $.each(['cur', '_default', 'width', 'height', 'opacity'], function (i, fn) { - var obj = Step, - base, - elem; - - // Handle different parent objects - if (fn === 'cur') { - obj = Fx.prototype; // 'cur', the getter, relates to Fx.prototype - - } else if (fn === '_default' && Tween) { // jQuery 1.8 model - obj = propHooks[fn]; - fn = 'set'; - } - - // Overwrite the method - base = obj[fn]; - if (base) { // step.width and step.height don't exist in jQuery < 1.7 - - // create the extended function replacement - obj[fn] = function (fx) { - - // Fx.prototype.cur does not use fx argument - fx = i ? fx : this; - - // shortcut - elem = fx.elem; - - // Fx.prototype.cur returns the current value. The other ones are setters - // and returning a value has no effect. - return elem.attr ? // is SVG element wrapper - elem.attr(fx.prop, fn === 'cur' ? UNDEFINED : fx.now) : // apply the SVG wrapper's method - base.apply(this, arguments); // use jQuery's built-in method - }; - } - }); - - - // Define the setter function for d (path definitions) - dSetter = function (fx) { - var elem = fx.elem, - ends; - - // Normally start and end should be set in state == 0, but sometimes, - // for reasons unknown, this doesn't happen. Perhaps state == 0 is skipped - // in these cases - if (!fx.started) { - ends = pathAnim.init(elem, elem.d, elem.toD); - fx.start = ends[0]; - fx.end = ends[1]; - fx.started = true; - } - - - // interpolate each value of the path - elem.attr('d', pathAnim.step(fx.start, fx.end, fx.pos, elem.toD)); - }; - - // jQuery 1.8 style - if (Tween) { - propHooks.d = { - set: dSetter - }; - // pre 1.8 - } else { - // animate paths - Step.d = dSetter; - } - - /** - * Utility for iterating over an array. Parameters are reversed compared to jQuery. - * @param {Array} arr - * @param {Function} fn - */ - this.each = Array.prototype.forEach ? - function (arr, fn) { // modern browsers - return Array.prototype.forEach.call(arr, fn); - - } : - function (arr, fn) { // legacy - var i = 0, - len = arr.length; - for (; i < len; i++) { - if (fn.call(arr[i], arr[i], i, arr) === false) { - return i; - } - } - }; - - /** - * Register Highcharts as a plugin in the respective framework - */ - $.fn.highcharts = function () { - var constr = 'Chart', // default constructor - args = arguments, - options, - ret, - chart; - - if (isString(args[0])) { - constr = args[0]; - args = Array.prototype.slice.call(args, 1); - } - options = args[0]; - - // Create the chart - if (options !== UNDEFINED) { - /*jslint unused:false*/ - options.chart = options.chart || {}; - options.chart.renderTo = this[0]; - chart = new Highcharts[constr](options, args[1]); - ret = this; - /*jslint unused:true*/ - } - - // When called without parameters or with the return argument, get a predefined chart - if (options === UNDEFINED) { - ret = charts[attr(this[0], 'data-highcharts-chart')]; - } - - return ret; - }; - - }, - - - /** - * Downloads a script and executes a callback when done. - * @param {String} scriptLocation - * @param {Function} callback - */ - getScript: $.getScript, - - /** - * Return the index of an item in an array, or -1 if not found - */ - inArray: $.inArray, - - /** - * A direct link to jQuery methods. MooTools and Prototype adapters must be implemented for each case of method. - * @param {Object} elem The HTML element - * @param {String} method Which method to run on the wrapped element - */ - adapterRun: function (elem, method) { - return $(elem)[method](); - }, - - /** - * Filter an array - */ - grep: $.grep, - - /** - * Map an array - * @param {Array} arr - * @param {Function} fn - */ - map: function (arr, fn) { - //return jQuery.map(arr, fn); - var results = [], - i = 0, - len = arr.length; - for (; i < len; i++) { - results[i] = fn.call(arr[i], arr[i], i, arr); - } - return results; - - }, - - /** - * Get the position of an element relative to the top left of the page - */ - offset: function (el) { - return $(el).offset(); - }, - - /** - * Add an event listener - * @param {Object} el A HTML element or custom object - * @param {String} event The event type - * @param {Function} fn The event handler - */ - addEvent: function (el, event, fn) { - $(el).bind(event, fn); - }, - - /** - * Remove event added with addEvent - * @param {Object} el The object - * @param {String} eventType The event type. Leave blank to remove all events. - * @param {Function} handler The function to remove - */ - removeEvent: function (el, eventType, handler) { - // workaround for jQuery issue with unbinding custom events: - // http://forum.jQuery.com/topic/javascript-error-when-unbinding-a-custom-event-using-jQuery-1-4-2 - var func = doc.removeEventListener ? 'removeEventListener' : 'detachEvent'; - if (doc[func] && el && !el[func]) { - el[func] = function () {}; - } - - $(el).unbind(eventType, handler); - }, - - /** - * Fire an event on a custom object - * @param {Object} el - * @param {String} type - * @param {Object} eventArguments - * @param {Function} defaultFunction - */ - fireEvent: function (el, type, eventArguments, defaultFunction) { - var event = $.Event(type), - detachedType = 'detached' + type, - defaultPrevented; - - // Remove warnings in Chrome when accessing layerX and layerY. Although Highcharts - // never uses these properties, Chrome includes them in the default click event and - // raises the warning when they are copied over in the extend statement below. - // - // To avoid problems in IE (see #1010) where we cannot delete the properties and avoid - // testing if they are there (warning in chrome) the only option is to test if running IE. - if (!isIE && eventArguments) { - delete eventArguments.layerX; - delete eventArguments.layerY; - } - - extend(event, eventArguments); - - // Prevent jQuery from triggering the object method that is named the - // same as the event. For example, if the event is 'select', jQuery - // attempts calling el.select and it goes into a loop. - if (el[type]) { - el[detachedType] = el[type]; - el[type] = null; - } - - // Wrap preventDefault and stopPropagation in try/catch blocks in - // order to prevent JS errors when cancelling events on non-DOM - // objects. #615. - /*jslint unparam: true*/ - $.each(['preventDefault', 'stopPropagation'], function (i, fn) { - var base = event[fn]; - event[fn] = function () { - try { - base.call(event); - } catch (e) { - if (fn === 'preventDefault') { - defaultPrevented = true; - } - } - }; - }); - /*jslint unparam: false*/ - - // trigger it - $(el).trigger(event); - - // attach the method - if (el[detachedType]) { - el[type] = el[detachedType]; - el[detachedType] = null; - } - - if (defaultFunction && !event.isDefaultPrevented() && !defaultPrevented) { - defaultFunction(event); - } - }, - - /** - * Extension method needed for MooTools - */ - washMouseEvent: function (e) { - var ret = e.originalEvent || e; - - // computed by jQuery, needed by IE8 - if (ret.pageX === UNDEFINED) { // #1236 - ret.pageX = e.pageX; - ret.pageY = e.pageY; - } - - return ret; - }, - - /** - * Animate a HTML element or SVG element wrapper - * @param {Object} el - * @param {Object} params - * @param {Object} options jQuery-like animation options: duration, easing, callback - */ - animate: function (el, params, options) { - var $el = $(el); - if (params.d) { - el.toD = params.d; // keep the array form for paths, used in $.fx.step.d - params.d = 1; // because in jQuery, animating to an array has a different meaning - } - - $el.stop(); - if (params.opacity !== UNDEFINED && el.attr) { - params.opacity += 'px'; // force jQuery to use same logic as width and height - } - $el.animate(params, options); - - }, - /** - * Stop running animation - */ - stop: function (el) { - $(el).stop(); - } - }); -}(win.jQuery)); - - -// check for a custom HighchartsAdapter defined prior to this file -var globalAdapter = win.HighchartsAdapter, - adapter = globalAdapter || {}; - -// Initialize the adapter -if (globalAdapter) { - globalAdapter.init.call(globalAdapter, pathAnim); -} - - -// Utility functions. If the HighchartsAdapter is not defined, adapter is an empty object -// and all the utility functions will be null. In that case they are populated by the -// default adapters below. -var adapterRun = adapter.adapterRun, - getScript = adapter.getScript, - inArray = adapter.inArray, - each = adapter.each, - grep = adapter.grep, - offset = adapter.offset, - map = adapter.map, - addEvent = adapter.addEvent, - removeEvent = adapter.removeEvent, - fireEvent = adapter.fireEvent, - washMouseEvent = adapter.washMouseEvent, - animate = adapter.animate, - stop = adapter.stop; - - - -/* **************************************************************************** - * Handle the options * - *****************************************************************************/ -var - -defaultLabelOptions = { - enabled: true, - // rotation: 0, - align: 'center', - x: 0, - y: 15, - /*formatter: function () { - return this.value; - },*/ - style: { - color: '#666', - cursor: 'default', - fontSize: '11px', - lineHeight: '14px' - } -}; - -defaultOptions = { - colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', - '#f28f43', '#77a1e5', '#c42525', '#a6c96a'], - symbols: ['circle', 'diamond', 'square', 'triangle', 'triangle-down'], - lang: { - loading: 'Loading...', - months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', - 'August', 'September', 'October', 'November', 'December'], - shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], - weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], - decimalPoint: '.', - numericSymbols: ['k', 'M', 'G', 'T', 'P', 'E'], // SI prefixes used in axis labels - resetZoom: 'Reset zoom', - resetZoomTitle: 'Reset zoom level 1:1', - thousandsSep: ',' - }, - global: { - useUTC: true, - canvasToolsURL: 'http://code.highcharts.com/3.0.1/modules/canvas-tools.js', - VMLRadialGradientURL: 'http://code.highcharts.com/3.0.1/gfx/vml-radial-gradient.png' - }, - chart: { - //animation: true, - //alignTicks: false, - //reflow: true, - //className: null, - //events: { load, selection }, - //margin: [null], - //marginTop: null, - //marginRight: null, - //marginBottom: null, - //marginLeft: null, - borderColor: '#4572A7', - //borderWidth: 0, - borderRadius: 5, - defaultSeriesType: 'line', - ignoreHiddenSeries: true, - //inverted: false, - //shadow: false, - spacingTop: 10, - spacingRight: 10, - spacingBottom: 15, - spacingLeft: 10, - style: { - fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font - fontSize: '12px' - }, - backgroundColor: '#FFFFFF', - //plotBackgroundColor: null, - plotBorderColor: '#C0C0C0', - //plotBorderWidth: 0, - //plotShadow: false, - //zoomType: '' - resetZoomButton: { - theme: { - zIndex: 20 - }, - position: { - align: 'right', - x: -10, - //verticalAlign: 'top', - y: 10 - } - // relativeTo: 'plot' - } - }, - title: { - text: 'Chart title', - align: 'center', - // floating: false, - // margin: 15, - // x: 0, - // verticalAlign: 'top', - y: 15, - style: { - color: '#274b6d',//#3E576F', - fontSize: '16px' - } - - }, - subtitle: { - text: '', - align: 'center', - // floating: false - // x: 0, - // verticalAlign: 'top', - y: 30, - style: { - color: '#4d759e' - } - }, - - plotOptions: { - line: { // base series options - allowPointSelect: false, - showCheckbox: false, - animation: { - duration: 1000 - }, - //connectNulls: false, - //cursor: 'default', - //clip: true, - //dashStyle: null, - //enableMouseTracking: true, - events: {}, - //legendIndex: 0, - lineWidth: 2, - //shadow: false, - // stacking: null, - marker: { - enabled: true, - //symbol: null, - lineWidth: 0, - radius: 4, - lineColor: '#FFFFFF', - //fillColor: null, - states: { // states for a single point - hover: { - enabled: true - //radius: base + 2 - }, - select: { - fillColor: '#FFFFFF', - lineColor: '#000000', - lineWidth: 2 - } - } - }, - point: { - events: {} - }, - dataLabels: merge(defaultLabelOptions, { - enabled: false, - formatter: function () { - return this.y; - }, - verticalAlign: 'bottom', // above singular point - y: 0 - // backgroundColor: undefined, - // borderColor: undefined, - // borderRadius: undefined, - // borderWidth: undefined, - // padding: 3, - // shadow: false - }), - cropThreshold: 300, // draw points outside the plot area when the number of points is less than this - pointRange: 0, - //pointStart: 0, - //pointInterval: 1, - showInLegend: true, - states: { // states for the entire series - hover: { - //enabled: false, - //lineWidth: base + 1, - marker: { - // lineWidth: base + 1, - // radius: base + 1 - } - }, - select: { - marker: {} - } - }, - stickyTracking: true - //tooltip: { - //pointFormat: '{series.name}: {point.y}' - //valueDecimals: null, - //xDateFormat: '%A, %b %e, %Y', - //valuePrefix: '', - //ySuffix: '' - //} - // turboThreshold: 1000 - // zIndex: null - } - }, - labels: { - //items: [], - style: { - //font: defaultFont, - position: ABSOLUTE, - color: '#3E576F' - } - }, - legend: { - enabled: true, - align: 'center', - //floating: false, - layout: 'horizontal', - labelFormatter: function () { - return this.name; - }, - borderWidth: 1, - borderColor: '#909090', - borderRadius: 5, - navigation: { - // animation: true, - activeColor: '#274b6d', - // arrowSize: 12 - inactiveColor: '#CCC' - // style: {} // text styles - }, - // margin: 10, - // reversed: false, - shadow: false, - // backgroundColor: null, - /*style: { - padding: '5px' - },*/ - itemStyle: { - cursor: 'pointer', - color: '#274b6d', - fontSize: '12px' - }, - itemHoverStyle: { - //cursor: 'pointer', removed as of #601 - color: '#000' - }, - itemHiddenStyle: { - color: '#CCC' - }, - itemCheckboxStyle: { - position: ABSOLUTE, - width: '13px', // for IE precision - height: '13px' - }, - // itemWidth: undefined, - symbolWidth: 16, - symbolPadding: 5, - verticalAlign: 'bottom', - // width: undefined, - x: 0, - y: 0, - title: { - //text: null, - style: { - fontWeight: 'bold' - } - } - }, - - loading: { - // hideDuration: 100, - labelStyle: { - fontWeight: 'bold', - position: RELATIVE, - top: '1em' - }, - // showDuration: 0, - style: { - position: ABSOLUTE, - backgroundColor: 'white', - opacity: 0.5, - textAlign: 'center' - } - }, - - tooltip: { - enabled: true, - animation: hasSVG, - //crosshairs: null, - backgroundColor: 'rgba(255, 255, 255, .85)', - borderWidth: 1, - borderRadius: 3, - dateTimeLabelFormats: { - millisecond: '%A, %b %e, %H:%M:%S.%L', - second: '%A, %b %e, %H:%M:%S', - minute: '%A, %b %e, %H:%M', - hour: '%A, %b %e, %H:%M', - day: '%A, %b %e, %Y', - week: 'Week from %A, %b %e, %Y', - month: '%B %Y', - year: '%Y' - }, - //formatter: defaultFormatter, - headerFormat: '{point.key}
', - pointFormat: '{series.name}: {point.y}
', - shadow: true, - //shared: false, - snap: isTouchDevice ? 25 : 10, - style: { - color: '#333333', - cursor: 'default', - fontSize: '12px', - padding: '8px', - whiteSpace: 'nowrap' - } - //xDateFormat: '%A, %b %e, %Y', - //valueDecimals: null, - //valuePrefix: '', - //valueSuffix: '' - }, - - credits: { - enabled: true, - text: 'Highcharts.com', - href: 'http://www.highcharts.com', - position: { - align: 'right', - x: -10, - verticalAlign: 'bottom', - y: -5 - }, - style: { - cursor: 'pointer', - color: '#909090', - fontSize: '9px' - } - } -}; - - - - -// Series defaults -var defaultPlotOptions = defaultOptions.plotOptions, - defaultSeriesOptions = defaultPlotOptions.line; - -// set the default time methods -setTimeMethods(); - - - -/** - * Set the time methods globally based on the useUTC option. Time method can be either - * local time or UTC (default). - */ -function setTimeMethods() { - var useUTC = defaultOptions.global.useUTC, - GET = useUTC ? 'getUTC' : 'get', - SET = useUTC ? 'setUTC' : 'set'; - - makeTime = useUTC ? Date.UTC : function (year, month, date, hours, minutes, seconds) { - return new Date( - year, - month, - pick(date, 1), - pick(hours, 0), - pick(minutes, 0), - pick(seconds, 0) - ).getTime(); - }; - getMinutes = GET + 'Minutes'; - getHours = GET + 'Hours'; - getDay = GET + 'Day'; - getDate = GET + 'Date'; - getMonth = GET + 'Month'; - getFullYear = GET + 'FullYear'; - setMinutes = SET + 'Minutes'; - setHours = SET + 'Hours'; - setDate = SET + 'Date'; - setMonth = SET + 'Month'; - setFullYear = SET + 'FullYear'; - -} - -/** - * Merge the default options with custom options and return the new options structure - * @param {Object} options The new custom options - */ -function setOptions(options) { - - // Pull out axis options and apply them to the respective default axis options - /*defaultXAxisOptions = merge(defaultXAxisOptions, options.xAxis); - defaultYAxisOptions = merge(defaultYAxisOptions, options.yAxis); - options.xAxis = options.yAxis = UNDEFINED;*/ - - // Merge in the default options - defaultOptions = merge(defaultOptions, options); - - // Apply UTC - setTimeMethods(); - - return defaultOptions; -} - -/** - * Get the updated default options. Merely exposing defaultOptions for outside modules - * isn't enough because the setOptions method creates a new object. - */ -function getOptions() { - return defaultOptions; -} - - -/** - * Handle color operations. The object methods are chainable. - * @param {String} input The input color in either rbga or hex format - */ -var Color = function (input) { - // declare variables - var rgba = [], result, stops; - - /** - * Parse the input color to rgba array - * @param {String} input - */ - function init(input) { - - // Gradients - if (input && input.stops) { - stops = map(input.stops, function (stop) { - return Color(stop[1]); - }); - - // Solid colors - } else { - // rgba - result = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]?(?:\.[0-9]+)?)\s*\)/.exec(input); - if (result) { - rgba = [pInt(result[1]), pInt(result[2]), pInt(result[3]), parseFloat(result[4], 10)]; - } else { - // hex - result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(input); - if (result) { - rgba = [pInt(result[1], 16), pInt(result[2], 16), pInt(result[3], 16), 1]; - } else { - // rgb - result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(input); - if (result) { - rgba = [pInt(result[1]), pInt(result[2]), pInt(result[3]), 1]; - } - } - } - } - - } - /** - * Return the color a specified format - * @param {String} format - */ - function get(format) { - var ret; - - if (stops) { - ret = merge(input); - ret.stops = [].concat(ret.stops); - each(stops, function (stop, i) { - ret.stops[i] = [ret.stops[i][0], stop.get(format)]; - }); - - // it's NaN if gradient colors on a column chart - } else if (rgba && !isNaN(rgba[0])) { - if (format === 'rgb') { - ret = 'rgb(' + rgba[0] + ',' + rgba[1] + ',' + rgba[2] + ')'; - } else if (format === 'a') { - ret = rgba[3]; - } else { - ret = 'rgba(' + rgba.join(',') + ')'; - } - } else { - ret = input; - } - return ret; - } - - /** - * Brighten the color - * @param {Number} alpha - */ - function brighten(alpha) { - if (stops) { - each(stops, function (stop) { - stop.brighten(alpha); - }); - - } else if (isNumber(alpha) && alpha !== 0) { - var i; - for (i = 0; i < 3; i++) { - rgba[i] += pInt(alpha * 255); - - if (rgba[i] < 0) { - rgba[i] = 0; - } - if (rgba[i] > 255) { - rgba[i] = 255; - } - } - } - return this; - } - /** - * Set the color's opacity to a given alpha value - * @param {Number} alpha - */ - function setOpacity(alpha) { - rgba[3] = alpha; - return this; - } - - // initialize: parse the input - init(input); - - // public methods - return { - get: get, - brighten: brighten, - rgba: rgba, - setOpacity: setOpacity - }; -}; - - -/** - * A wrapper object for SVG elements - */ -function SVGElement() {} - -SVGElement.prototype = { - /** - * Initialize the SVG renderer - * @param {Object} renderer - * @param {String} nodeName - */ - init: function (renderer, nodeName) { - var wrapper = this; - wrapper.element = nodeName === 'span' ? - createElement(nodeName) : - doc.createElementNS(SVG_NS, nodeName); - wrapper.renderer = renderer; - /** - * A collection of attribute setters. These methods, if defined, are called right before a certain - * attribute is set on an element wrapper. Returning false prevents the default attribute - * setter to run. Returning a value causes the default setter to set that value. Used in - * Renderer.label. - */ - wrapper.attrSetters = {}; - }, - /** - * Default base for animation - */ - opacity: 1, - /** - * Animate a given attribute - * @param {Object} params - * @param {Number} options The same options as in jQuery animation - * @param {Function} complete Function to perform at the end of animation - */ - animate: function (params, options, complete) { - var animOptions = pick(options, globalAnimation, true); - stop(this); // stop regardless of animation actually running, or reverting to .attr (#607) - if (animOptions) { - animOptions = merge(animOptions); - if (complete) { // allows using a callback with the global animation without overwriting it - animOptions.complete = complete; - } - animate(this, params, animOptions); - } else { - this.attr(params); - if (complete) { - complete(); - } - } - }, - /** - * Set or get a given attribute - * @param {Object|String} hash - * @param {Mixed|Undefined} val - */ - attr: function (hash, val) { - var wrapper = this, - key, - value, - result, - i, - child, - element = wrapper.element, - nodeName = element.nodeName.toLowerCase(), // Android2 requires lower for "text" - renderer = wrapper.renderer, - skipAttr, - titleNode, - attrSetters = wrapper.attrSetters, - shadows = wrapper.shadows, - hasSetSymbolSize, - doTransform, - ret = wrapper; - - // single key-value pair - if (isString(hash) && defined(val)) { - key = hash; - hash = {}; - hash[key] = val; - } - - // used as a getter: first argument is a string, second is undefined - if (isString(hash)) { - key = hash; - if (nodeName === 'circle') { - key = { x: 'cx', y: 'cy' }[key] || key; - } else if (key === 'strokeWidth') { - key = 'stroke-width'; - } - ret = attr(element, key) || wrapper[key] || 0; - if (key !== 'd' && key !== 'visibility') { // 'd' is string in animation step - ret = parseFloat(ret); - } - - // setter - } else { - - for (key in hash) { - skipAttr = false; // reset - value = hash[key]; - - // check for a specific attribute setter - result = attrSetters[key] && attrSetters[key].call(wrapper, value, key); - - if (result !== false) { - if (result !== UNDEFINED) { - value = result; // the attribute setter has returned a new value to set - } - - - // paths - if (key === 'd') { - if (value && value.join) { // join path - value = value.join(' '); - } - if (/(NaN| {2}|^$)/.test(value)) { - value = 'M 0 0'; - } - //wrapper.d = value; // shortcut for animations - - // update child tspans x values - } else if (key === 'x' && nodeName === 'text') { - for (i = 0; i < element.childNodes.length; i++) { - child = element.childNodes[i]; - // if the x values are equal, the tspan represents a linebreak - if (attr(child, 'x') === attr(element, 'x')) { - //child.setAttribute('x', value); - attr(child, 'x', value); - } - } - - } else if (wrapper.rotation && (key === 'x' || key === 'y')) { - doTransform = true; - - // apply gradients - } else if (key === 'fill') { - value = renderer.color(value, element, key); - - // circle x and y - } else if (nodeName === 'circle' && (key === 'x' || key === 'y')) { - key = { x: 'cx', y: 'cy' }[key] || key; - - // rectangle border radius - } else if (nodeName === 'rect' && key === 'r') { - attr(element, { - rx: value, - ry: value - }); - skipAttr = true; - - // translation and text rotation - } else if (key === 'translateX' || key === 'translateY' || key === 'rotation' || - key === 'verticalAlign' || key === 'scaleX' || key === 'scaleY') { - doTransform = true; - skipAttr = true; - - // apply opacity as subnode (required by legacy WebKit and Batik) - } else if (key === 'stroke') { - value = renderer.color(value, element, key); - - // emulate VML's dashstyle implementation - } else if (key === 'dashstyle') { - key = 'stroke-dasharray'; - value = value && value.toLowerCase(); - if (value === 'solid') { - value = NONE; - } else if (value) { - value = value - .replace('shortdashdotdot', '3,1,1,1,1,1,') - .replace('shortdashdot', '3,1,1,1') - .replace('shortdot', '1,1,') - .replace('shortdash', '3,1,') - .replace('longdash', '8,3,') - .replace(/dot/g, '1,3,') - .replace('dash', '4,3,') - .replace(/,$/, '') - .split(','); // ending comma - - i = value.length; - while (i--) { - value[i] = pInt(value[i]) * hash['stroke-width']; - } - value = value.join(','); - } - - // IE9/MooTools combo: MooTools returns objects instead of numbers and IE9 Beta 2 - // is unable to cast them. Test again with final IE9. - } else if (key === 'width') { - value = pInt(value); - - // Text alignment - } else if (key === 'align') { - key = 'text-anchor'; - value = { left: 'start', center: 'middle', right: 'end' }[value]; - - // Title requires a subnode, #431 - } else if (key === 'title') { - titleNode = element.getElementsByTagName('title')[0]; - if (!titleNode) { - titleNode = doc.createElementNS(SVG_NS, 'title'); - element.appendChild(titleNode); - } - titleNode.textContent = value; - } - - // jQuery animate changes case - if (key === 'strokeWidth') { - key = 'stroke-width'; - } - - // In Chrome/Win < 6 as well as Batik, the stroke attribute can't be set when the stroke- - // width is 0. #1369 - if (key === 'stroke-width' || key === 'stroke') { - wrapper[key] = value; - // Only apply the stroke attribute if the stroke width is defined and larger than 0 - if (wrapper.stroke && wrapper['stroke-width']) { - attr(element, 'stroke', wrapper.stroke); - attr(element, 'stroke-width', wrapper['stroke-width']); - wrapper.hasStroke = true; - } else if (key === 'stroke-width' && value === 0 && wrapper.hasStroke) { - element.removeAttribute('stroke'); - wrapper.hasStroke = false; - } - skipAttr = true; - } - - // symbols - if (wrapper.symbolName && /^(x|y|width|height|r|start|end|innerR|anchorX|anchorY)/.test(key)) { - - - if (!hasSetSymbolSize) { - wrapper.symbolAttr(hash); - hasSetSymbolSize = true; - } - skipAttr = true; - } - - // let the shadow follow the main element - if (shadows && /^(width|height|visibility|x|y|d|transform)$/.test(key)) { - i = shadows.length; - while (i--) { - attr( - shadows[i], - key, - key === 'height' ? - mathMax(value - (shadows[i].cutHeight || 0), 0) : - value - ); - } - } - - // validate heights - if ((key === 'width' || key === 'height') && nodeName === 'rect' && value < 0) { - value = 0; - } - - // Record for animation and quick access without polling the DOM - wrapper[key] = value; - - - if (key === 'text') { - // Delete bBox memo when the text changes - if (value !== wrapper.textStr) { - delete wrapper.bBox; - } - wrapper.textStr = value; - if (wrapper.added) { - renderer.buildText(wrapper); - } - } else if (!skipAttr) { - attr(element, key, value); - } - - } - - } - - // Update transform. Do this outside the loop to prevent redundant updating for batch setting - // of attributes. - if (doTransform) { - wrapper.updateTransform(); - } - - } - - return ret; - }, - - - /** - * Add a class name to an element - */ - addClass: function (className) { - attr(this.element, 'class', attr(this.element, 'class') + ' ' + className); - return this; - }, - /* hasClass and removeClass are not (yet) needed - hasClass: function (className) { - return attr(this.element, 'class').indexOf(className) !== -1; - }, - removeClass: function (className) { - attr(this.element, 'class', attr(this.element, 'class').replace(className, '')); - return this; - }, - */ - - /** - * If one of the symbol size affecting parameters are changed, - * check all the others only once for each call to an element's - * .attr() method - * @param {Object} hash - */ - symbolAttr: function (hash) { - var wrapper = this; - - each(['x', 'y', 'r', 'start', 'end', 'width', 'height', 'innerR', 'anchorX', 'anchorY'], function (key) { - wrapper[key] = pick(hash[key], wrapper[key]); - }); - - wrapper.attr({ - d: wrapper.renderer.symbols[wrapper.symbolName](wrapper.x, wrapper.y, wrapper.width, wrapper.height, wrapper) - }); - }, - - /** - * Apply a clipping path to this object - * @param {String} id - */ - clip: function (clipRect) { - return this.attr('clip-path', clipRect ? 'url(' + this.renderer.url + '#' + clipRect.id + ')' : NONE); - }, - - /** - * Calculate the coordinates needed for drawing a rectangle crisply and return the - * calculated attributes - * @param {Number} strokeWidth - * @param {Number} x - * @param {Number} y - * @param {Number} width - * @param {Number} height - */ - crisp: function (strokeWidth, x, y, width, height) { - - var wrapper = this, - key, - attribs = {}, - values = {}, - normalizer; - - strokeWidth = strokeWidth || wrapper.strokeWidth || (wrapper.attr && wrapper.attr('stroke-width')) || 0; - normalizer = mathRound(strokeWidth) % 2 / 2; // mathRound because strokeWidth can sometimes have roundoff errors - - // normalize for crisp edges - values.x = mathFloor(x || wrapper.x || 0) + normalizer; - values.y = mathFloor(y || wrapper.y || 0) + normalizer; - values.width = mathFloor((width || wrapper.width || 0) - 2 * normalizer); - values.height = mathFloor((height || wrapper.height || 0) - 2 * normalizer); - values.strokeWidth = strokeWidth; - - for (key in values) { - if (wrapper[key] !== values[key]) { // only set attribute if changed - wrapper[key] = attribs[key] = values[key]; - } - } - - return attribs; - }, - - /** - * Set styles for the element - * @param {Object} styles - */ - css: function (styles) { - /*jslint unparam: true*//* allow unused param a in the regexp function below */ - var elemWrapper = this, - elem = elemWrapper.element, - textWidth = styles && styles.width && elem.nodeName.toLowerCase() === 'text', - n, - serializedCss = '', - hyphenate = function (a, b) { return '-' + b.toLowerCase(); }; - /*jslint unparam: false*/ - - // convert legacy - if (styles && styles.color) { - styles.fill = styles.color; - } - - // Merge the new styles with the old ones - styles = extend( - elemWrapper.styles, - styles - ); - - // store object - elemWrapper.styles = styles; - - - // Don't handle line wrap on canvas - if (useCanVG && textWidth) { - delete styles.width; - } - - // serialize and set style attribute - if (isIE && !hasSVG) { // legacy IE doesn't support setting style attribute - if (textWidth) { - delete styles.width; - } - css(elemWrapper.element, styles); - } else { - for (n in styles) { - serializedCss += n.replace(/([A-Z])/g, hyphenate) + ':' + styles[n] + ';'; - } - elemWrapper.attr({ - style: serializedCss - }); - } - - - // re-build text - if (textWidth && elemWrapper.added) { - elemWrapper.renderer.buildText(elemWrapper); - } - - return elemWrapper; - }, - - /** - * Add an event listener - * @param {String} eventType - * @param {Function} handler - */ - on: function (eventType, handler) { - // touch - if (hasTouch && eventType === 'click') { - this.element.ontouchstart = function (e) { - e.preventDefault(); - handler(); - }; - } - // simplest possible event model for internal use - this.element['on' + eventType] = handler; - return this; - }, - - /** - * Set the coordinates needed to draw a consistent radial gradient across - * pie slices regardless of positioning inside the chart. The format is - * [centerX, centerY, diameter] in pixels. - */ - setRadialReference: function (coordinates) { - this.element.radialReference = coordinates; - return this; - }, - - /** - * Move an object and its children by x and y values - * @param {Number} x - * @param {Number} y - */ - translate: function (x, y) { - return this.attr({ - translateX: x, - translateY: y - }); - }, - - /** - * Invert a group, rotate and flip - */ - invert: function () { - var wrapper = this; - wrapper.inverted = true; - wrapper.updateTransform(); - return wrapper; - }, - - /** - * Apply CSS to HTML elements. This is used in text within SVG rendering and - * by the VML renderer - */ - htmlCss: function (styles) { - var wrapper = this, - element = wrapper.element, - textWidth = styles && element.tagName === 'SPAN' && styles.width; - - if (textWidth) { - delete styles.width; - wrapper.textWidth = textWidth; - wrapper.updateTransform(); - } - - wrapper.styles = extend(wrapper.styles, styles); - css(wrapper.element, styles); - - return wrapper; - }, - - - - /** - * VML and useHTML method for calculating the bounding box based on offsets - * @param {Boolean} refresh Whether to force a fresh value from the DOM or to - * use the cached value - * - * @return {Object} A hash containing values for x, y, width and height - */ - - htmlGetBBox: function () { - var wrapper = this, - element = wrapper.element, - bBox = wrapper.bBox; - - // faking getBBox in exported SVG in legacy IE - if (!bBox) { - // faking getBBox in exported SVG in legacy IE (is this a duplicate of the fix for #1079?) - if (element.nodeName === 'text') { - element.style.position = ABSOLUTE; - } - - bBox = wrapper.bBox = { - x: element.offsetLeft, - y: element.offsetTop, - width: element.offsetWidth, - height: element.offsetHeight - }; - } - - return bBox; - }, - - /** - * VML override private method to update elements based on internal - * properties based on SVG transform - */ - htmlUpdateTransform: function () { - // aligning non added elements is expensive - if (!this.added) { - this.alignOnAdd = true; - return; - } - - var wrapper = this, - renderer = wrapper.renderer, - elem = wrapper.element, - translateX = wrapper.translateX || 0, - translateY = wrapper.translateY || 0, - x = wrapper.x || 0, - y = wrapper.y || 0, - align = wrapper.textAlign || 'left', - alignCorrection = { left: 0, center: 0.5, right: 1 }[align], - nonLeft = align && align !== 'left', - shadows = wrapper.shadows; - - // apply translate - if (translateX || translateY) { - css(elem, { - marginLeft: translateX, - marginTop: translateY - }); - if (shadows) { // used in labels/tooltip - each(shadows, function (shadow) { - css(shadow, { - marginLeft: translateX + 1, - marginTop: translateY + 1 - }); - }); - } - } - - // apply inversion - if (wrapper.inverted) { // wrapper is a group - each(elem.childNodes, function (child) { - renderer.invertChild(child, elem); - }); - } - - if (elem.tagName === 'SPAN') { - - var width, height, - rotation = wrapper.rotation, - baseline, - radians = 0, - costheta = 1, - sintheta = 0, - quad, - textWidth = pInt(wrapper.textWidth), - xCorr = wrapper.xCorr || 0, - yCorr = wrapper.yCorr || 0, - currentTextTransform = [rotation, align, elem.innerHTML, wrapper.textWidth].join(','), - rotationStyle = {}, - cssTransformKey; - - if (currentTextTransform !== wrapper.cTT) { // do the calculations and DOM access only if properties changed - - if (defined(rotation)) { - - if (renderer.isSVG) { // #916 - cssTransformKey = isIE ? '-ms-transform' : isWebKit ? '-webkit-transform' : isFirefox ? 'MozTransform' : isOpera ? '-o-transform' : ''; - rotationStyle[cssTransformKey] = rotationStyle.transform = 'rotate(' + rotation + 'deg)'; - - } else { - radians = rotation * deg2rad; // deg to rad - costheta = mathCos(radians); - sintheta = mathSin(radians); - - // Adjust for alignment and rotation. Rotation of useHTML content is not yet implemented - // but it can probably be implemented for Firefox 3.5+ on user request. FF3.5+ - // has support for CSS3 transform. The getBBox method also needs to be updated - // to compensate for the rotation, like it currently does for SVG. - // Test case: http://highcharts.com/tests/?file=text-rotation - rotationStyle.filter = rotation ? ['progid:DXImageTransform.Microsoft.Matrix(M11=', costheta, - ', M12=', -sintheta, ', M21=', sintheta, ', M22=', costheta, - ', sizingMethod=\'auto expand\')'].join('') : NONE; - } - css(elem, rotationStyle); - } - - width = pick(wrapper.elemWidth, elem.offsetWidth); - height = pick(wrapper.elemHeight, elem.offsetHeight); - - // update textWidth - if (width > textWidth && /[ \-]/.test(elem.textContent || elem.innerText)) { // #983, #1254 - css(elem, { - width: textWidth + PX, - display: 'block', - whiteSpace: 'normal' - }); - width = textWidth; - } - - // correct x and y - baseline = renderer.fontMetrics(elem.style.fontSize).b; - xCorr = costheta < 0 && -width; - yCorr = sintheta < 0 && -height; - - // correct for baseline and corners spilling out after rotation - quad = costheta * sintheta < 0; - xCorr += sintheta * baseline * (quad ? 1 - alignCorrection : alignCorrection); - yCorr -= costheta * baseline * (rotation ? (quad ? alignCorrection : 1 - alignCorrection) : 1); - - // correct for the length/height of the text - if (nonLeft) { - xCorr -= width * alignCorrection * (costheta < 0 ? -1 : 1); - if (rotation) { - yCorr -= height * alignCorrection * (sintheta < 0 ? -1 : 1); - } - css(elem, { - textAlign: align - }); - } - - // record correction - wrapper.xCorr = xCorr; - wrapper.yCorr = yCorr; - } - - // apply position with correction - css(elem, { - left: (x + xCorr) + PX, - top: (y + yCorr) + PX - }); - - // force reflow in webkit to apply the left and top on useHTML element (#1249) - if (isWebKit) { - height = elem.offsetHeight; // assigned to height for JSLint purpose - } - - // record current text transform - wrapper.cTT = currentTextTransform; - } - }, - - /** - * Private method to update the transform attribute based on internal - * properties - */ - updateTransform: function () { - var wrapper = this, - translateX = wrapper.translateX || 0, - translateY = wrapper.translateY || 0, - scaleX = wrapper.scaleX, - scaleY = wrapper.scaleY, - inverted = wrapper.inverted, - rotation = wrapper.rotation, - transform = []; - - // flipping affects translate as adjustment for flipping around the group's axis - if (inverted) { - translateX += wrapper.attr('width'); - translateY += wrapper.attr('height'); - } - - // apply translate - if (translateX || translateY) { - transform.push('translate(' + translateX + ',' + translateY + ')'); - } - - // apply rotation - if (inverted) { - transform.push('rotate(90) scale(-1,1)'); - } else if (rotation) { // text rotation - transform.push('rotate(' + rotation + ' ' + (wrapper.x || 0) + ' ' + (wrapper.y || 0) + ')'); - } - - // apply scale - if (defined(scaleX) || defined(scaleY)) { - transform.push('scale(' + pick(scaleX, 1) + ' ' + pick(scaleY, 1) + ')'); - } - - if (transform.length) { - attr(wrapper.element, 'transform', transform.join(' ')); - } - }, - /** - * Bring the element to the front - */ - toFront: function () { - var element = this.element; - element.parentNode.appendChild(element); - return this; - }, - - - /** - * Break down alignment options like align, verticalAlign, x and y - * to x and y relative to the chart. - * - * @param {Object} alignOptions - * @param {Boolean} alignByTranslate - * @param {String[Object} box The box to align to, needs a width and height. When the - * box is a string, it refers to an object in the Renderer. For example, when - * box is 'spacingBox', it refers to Renderer.spacingBox which holds width, height - * x and y properties. - * - */ - align: function (alignOptions, alignByTranslate, box) { - var align, - vAlign, - x, - y, - attribs = {}, - alignTo, - renderer = this.renderer, - alignedObjects = renderer.alignedObjects; - - // First call on instanciate - if (alignOptions) { - this.alignOptions = alignOptions; - this.alignByTranslate = alignByTranslate; - if (!box || isString(box)) { // boxes other than renderer handle this internally - this.alignTo = alignTo = box || 'renderer'; - erase(alignedObjects, this); // prevent duplicates, like legendGroup after resize - alignedObjects.push(this); - box = null; // reassign it below - } - - // When called on resize, no arguments are supplied - } else { - alignOptions = this.alignOptions; - alignByTranslate = this.alignByTranslate; - alignTo = this.alignTo; - } - - box = pick(box, renderer[alignTo], renderer); - - // Assign variables - align = alignOptions.align; - vAlign = alignOptions.verticalAlign; - x = (box.x || 0) + (alignOptions.x || 0); // default: left align - y = (box.y || 0) + (alignOptions.y || 0); // default: top align - - // Align - if (align === 'right' || align === 'center') { - x += (box.width - (alignOptions.width || 0)) / - { right: 1, center: 2 }[align]; - } - attribs[alignByTranslate ? 'translateX' : 'x'] = mathRound(x); - - - // Vertical align - if (vAlign === 'bottom' || vAlign === 'middle') { - y += (box.height - (alignOptions.height || 0)) / - ({ bottom: 1, middle: 2 }[vAlign] || 1); - - } - attribs[alignByTranslate ? 'translateY' : 'y'] = mathRound(y); - - // Animate only if already placed - this[this.placed ? 'animate' : 'attr'](attribs); - this.placed = true; - this.alignAttr = attribs; - - return this; - }, - - /** - * Get the bounding box (width, height, x and y) for the element - */ - getBBox: function () { - var wrapper = this, - bBox = wrapper.bBox, - renderer = wrapper.renderer, - width, - height, - rotation = wrapper.rotation, - element = wrapper.element, - styles = wrapper.styles, - rad = rotation * deg2rad; - - if (!bBox) { - // SVG elements - if (element.namespaceURI === SVG_NS || renderer.forExport) { - try { // Fails in Firefox if the container has display: none. - - bBox = element.getBBox ? - // SVG: use extend because IE9 is not allowed to change width and height in case - // of rotation (below) - extend({}, element.getBBox()) : - // Canvas renderer and legacy IE in export mode - { - width: element.offsetWidth, - height: element.offsetHeight - }; - } catch (e) {} - - // If the bBox is not set, the try-catch block above failed. The other condition - // is for Opera that returns a width of -Infinity on hidden elements. - if (!bBox || bBox.width < 0) { - bBox = { width: 0, height: 0 }; - } - - - // VML Renderer or useHTML within SVG - } else { - - bBox = wrapper.htmlGetBBox(); - - } - - // True SVG elements as well as HTML elements in modern browsers using the .useHTML option - // need to compensated for rotation - if (renderer.isSVG) { - width = bBox.width; - height = bBox.height; - - // Workaround for wrong bounding box in IE9 and IE10 (#1101, #1505, #1669) - if (isIE && styles && styles.fontSize === '11px' && height.toPrecision(3) === '22.7') { - bBox.height = height = 14; - } - - // Adjust for rotated text - if (rotation) { - bBox.width = mathAbs(height * mathSin(rad)) + mathAbs(width * mathCos(rad)); - bBox.height = mathAbs(height * mathCos(rad)) + mathAbs(width * mathSin(rad)); - } - } - - wrapper.bBox = bBox; - } - return bBox; - }, - - /** - * Show the element - */ - show: function () { - return this.attr({ visibility: VISIBLE }); - }, - - /** - * Hide the element - */ - hide: function () { - return this.attr({ visibility: HIDDEN }); - }, - - fadeOut: function (duration) { - var elemWrapper = this; - elemWrapper.animate({ - opacity: 0 - }, { - duration: duration || 150, - complete: function () { - elemWrapper.hide(); - } - }); - }, - - /** - * Add the element - * @param {Object|Undefined} parent Can be an element, an element wrapper or undefined - * to append the element to the renderer.box. - */ - add: function (parent) { - - var renderer = this.renderer, - parentWrapper = parent || renderer, - parentNode = parentWrapper.element || renderer.box, - childNodes = parentNode.childNodes, - element = this.element, - zIndex = attr(element, 'zIndex'), - otherElement, - otherZIndex, - i, - inserted; - - if (parent) { - this.parentGroup = parent; - } - - // mark as inverted - this.parentInverted = parent && parent.inverted; - - // build formatted text - if (this.textStr !== undefined) { - renderer.buildText(this); - } - - // mark the container as having z indexed children - if (zIndex) { - parentWrapper.handleZ = true; - zIndex = pInt(zIndex); - } - - // insert according to this and other elements' zIndex - if (parentWrapper.handleZ) { // this element or any of its siblings has a z index - for (i = 0; i < childNodes.length; i++) { - otherElement = childNodes[i]; - otherZIndex = attr(otherElement, 'zIndex'); - if (otherElement !== element && ( - // insert before the first element with a higher zIndex - pInt(otherZIndex) > zIndex || - // if no zIndex given, insert before the first element with a zIndex - (!defined(zIndex) && defined(otherZIndex)) - - )) { - parentNode.insertBefore(element, otherElement); - inserted = true; - break; - } - } - } - - // default: append at the end - if (!inserted) { - parentNode.appendChild(element); - } - - // mark as added - this.added = true; - - // fire an event for internal hooks - fireEvent(this, 'add'); - - return this; - }, - - /** - * Removes a child either by removeChild or move to garbageBin. - * Issue 490; in VML removeChild results in Orphaned nodes according to sIEve, discardElement does not. - */ - safeRemoveChild: function (element) { - var parentNode = element.parentNode; - if (parentNode) { - parentNode.removeChild(element); - } - }, - - /** - * Destroy the element and element wrapper - */ - destroy: function () { - var wrapper = this, - element = wrapper.element || {}, - shadows = wrapper.shadows, - key, - i; - - // remove events - element.onclick = element.onmouseout = element.onmouseover = element.onmousemove = element.point = null; - stop(wrapper); // stop running animations - - if (wrapper.clipPath) { - wrapper.clipPath = wrapper.clipPath.destroy(); - } - - // Destroy stops in case this is a gradient object - if (wrapper.stops) { - for (i = 0; i < wrapper.stops.length; i++) { - wrapper.stops[i] = wrapper.stops[i].destroy(); - } - wrapper.stops = null; - } - - // remove element - wrapper.safeRemoveChild(element); - - // destroy shadows - if (shadows) { - each(shadows, function (shadow) { - wrapper.safeRemoveChild(shadow); - }); - } - - // remove from alignObjects - if (wrapper.alignTo) { - erase(wrapper.renderer.alignedObjects, wrapper); - } - - for (key in wrapper) { - delete wrapper[key]; - } - - return null; - }, - - /** - * Add a shadow to the element. Must be done after the element is added to the DOM - * @param {Boolean|Object} shadowOptions - */ - shadow: function (shadowOptions, group, cutOff) { - var shadows = [], - i, - shadow, - element = this.element, - strokeWidth, - shadowWidth, - shadowElementOpacity, - - // compensate for inverted plot area - transform; - - - if (shadowOptions) { - shadowWidth = pick(shadowOptions.width, 3); - shadowElementOpacity = (shadowOptions.opacity || 0.15) / shadowWidth; - transform = this.parentInverted ? - '(-1,-1)' : - '(' + pick(shadowOptions.offsetX, 1) + ', ' + pick(shadowOptions.offsetY, 1) + ')'; - for (i = 1; i <= shadowWidth; i++) { - shadow = element.cloneNode(0); - strokeWidth = (shadowWidth * 2) + 1 - (2 * i); - attr(shadow, { - 'isShadow': 'true', - 'stroke': shadowOptions.color || 'black', - 'stroke-opacity': shadowElementOpacity * i, - 'stroke-width': strokeWidth, - 'transform': 'translate' + transform, - 'fill': NONE - }); - if (cutOff) { - attr(shadow, 'height', mathMax(attr(shadow, 'height') - strokeWidth, 0)); - shadow.cutHeight = strokeWidth; - } - - if (group) { - group.element.appendChild(shadow); - } else { - element.parentNode.insertBefore(shadow, element); - } - - shadows.push(shadow); - } - - this.shadows = shadows; - } - return this; - - } -}; - - -/** - * The default SVG renderer - */ -var SVGRenderer = function () { - this.init.apply(this, arguments); -}; -SVGRenderer.prototype = { - Element: SVGElement, - - /** - * Initialize the SVGRenderer - * @param {Object} container - * @param {Number} width - * @param {Number} height - * @param {Boolean} forExport - */ - init: function (container, width, height, forExport) { - var renderer = this, - loc = location, - boxWrapper, - desc; - - boxWrapper = renderer.createElement('svg') - .attr({ - xmlns: SVG_NS, - version: '1.1' - }); - container.appendChild(boxWrapper.element); - - // object properties - renderer.isSVG = true; - renderer.box = boxWrapper.element; - renderer.boxWrapper = boxWrapper; - renderer.alignedObjects = []; - - // Page url used for internal references. #24, #672, #1070 - renderer.url = (isFirefox || isWebKit) && doc.getElementsByTagName('base').length ? - loc.href - .replace(/#.*?$/, '') // remove the hash - .replace(/([\('\)])/g, '\\$1') // escape parantheses and quotes - .replace(/ /g, '%20') : // replace spaces (needed for Safari only) - ''; - - // Add description - desc = this.createElement('desc').add(); - desc.element.appendChild(doc.createTextNode('Created with ' + PRODUCT + ' ' + VERSION)); - - - renderer.defs = this.createElement('defs').add(); - renderer.forExport = forExport; - renderer.gradients = {}; // Object where gradient SvgElements are stored - - renderer.setSize(width, height, false); - - - - // Issue 110 workaround: - // In Firefox, if a div is positioned by percentage, its pixel position may land - // between pixels. The container itself doesn't display this, but an SVG element - // inside this container will be drawn at subpixel precision. In order to draw - // sharp lines, this must be compensated for. This doesn't seem to work inside - // iframes though (like in jsFiddle). - var subPixelFix, rect; - if (isFirefox && container.getBoundingClientRect) { - renderer.subPixelFix = subPixelFix = function () { - css(container, { left: 0, top: 0 }); - rect = container.getBoundingClientRect(); - css(container, { - left: (mathCeil(rect.left) - rect.left) + PX, - top: (mathCeil(rect.top) - rect.top) + PX - }); - }; - - // run the fix now - subPixelFix(); - - // run it on resize - addEvent(win, 'resize', subPixelFix); - } - }, - - /** - * Detect whether the renderer is hidden. This happens when one of the parent elements - * has display: none. #608. - */ - isHidden: function () { - return !this.boxWrapper.getBBox().width; - }, - - /** - * Destroys the renderer and its allocated members. - */ - destroy: function () { - var renderer = this, - rendererDefs = renderer.defs; - renderer.box = null; - renderer.boxWrapper = renderer.boxWrapper.destroy(); - - // Call destroy on all gradient elements - destroyObjectProperties(renderer.gradients || {}); - renderer.gradients = null; - - // Defs are null in VMLRenderer - // Otherwise, destroy them here. - if (rendererDefs) { - renderer.defs = rendererDefs.destroy(); - } - - // Remove sub pixel fix handler - // We need to check that there is a handler, otherwise all functions that are registered for event 'resize' are removed - // See issue #982 - if (renderer.subPixelFix) { - removeEvent(win, 'resize', renderer.subPixelFix); - } - - renderer.alignedObjects = null; - - return null; - }, - - /** - * Create a wrapper for an SVG element - * @param {Object} nodeName - */ - createElement: function (nodeName) { - var wrapper = new this.Element(); - wrapper.init(this, nodeName); - return wrapper; - }, - - /** - * Dummy function for use in canvas renderer - */ - draw: function () {}, - - /** - * Parse a simple HTML string into SVG tspans - * - * @param {Object} textNode The parent text SVG node - */ - buildText: function (wrapper) { - var textNode = wrapper.element, - renderer = this, - forExport = renderer.forExport, - lines = pick(wrapper.textStr, '').toString() - .replace(/<(b|strong)>/g, '') - .replace(/<(i|em)>/g, '') - .replace(//g, '') - .split(//g), - childNodes = textNode.childNodes, - styleRegex = /style="([^"]+)"/, - hrefRegex = /href="([^"]+)"/, - parentX = attr(textNode, 'x'), - textStyles = wrapper.styles, - width = textStyles && textStyles.width && pInt(textStyles.width), - textLineHeight = textStyles && textStyles.lineHeight, - i = childNodes.length; - - /// remove old text - while (i--) { - textNode.removeChild(childNodes[i]); - } - - if (width && !wrapper.added) { - this.box.appendChild(textNode); // attach it to the DOM to read offset width - } - - // remove empty line at end - if (lines[lines.length - 1] === '') { - lines.pop(); - } - - // build the lines - each(lines, function (line, lineNo) { - var spans, spanNo = 0; - - line = line.replace(//g, '|||'); - spans = line.split('|||'); - - each(spans, function (span) { - if (span !== '' || spans.length === 1) { - var attributes = {}, - tspan = doc.createElementNS(SVG_NS, 'tspan'), - spanStyle; // #390 - if (styleRegex.test(span)) { - spanStyle = span.match(styleRegex)[1].replace(/(;| |^)color([ :])/, '$1fill$2'); - attr(tspan, 'style', spanStyle); - } - if (hrefRegex.test(span) && !forExport) { // Not for export - #1529 - attr(tspan, 'onclick', 'location.href=\"' + span.match(hrefRegex)[1] + '\"'); - css(tspan, { cursor: 'pointer' }); - } - - span = (span.replace(/<(.|\n)*?>/g, '') || ' ') - .replace(/</g, '<') - .replace(/>/g, '>'); - - // add the text node - tspan.appendChild(doc.createTextNode(span)); - - if (!spanNo) { // first span in a line, align it to the left - attributes.x = parentX; - } else { - attributes.dx = 0; // #16 - } - - // add attributes - attr(tspan, attributes); - - // first span on subsequent line, add the line height - if (!spanNo && lineNo) { - - // allow getting the right offset height in exporting in IE - if (!hasSVG && forExport) { - css(tspan, { display: 'block' }); - } - - // Set the line height based on the font size of either - // the text element or the tspan element - attr( - tspan, - 'dy', - textLineHeight || renderer.fontMetrics( - /px$/.test(tspan.style.fontSize) ? - tspan.style.fontSize : - textStyles.fontSize - ).h, - // Safari 6.0.2 - too optimized for its own good (#1539) - // TODO: revisit this with future versions of Safari - isWebKit && tspan.offsetHeight - ); - } - - // Append it - textNode.appendChild(tspan); - - spanNo++; - - // check width and apply soft breaks - if (width) { - var words = span.replace(/([^\^])-/g, '$1- ').split(' '), // #1273 - tooLong, - actualWidth, - rest = []; - - while (words.length || rest.length) { - delete wrapper.bBox; // delete cache - actualWidth = wrapper.getBBox().width; - tooLong = actualWidth > width; - if (!tooLong || words.length === 1) { // new line needed - words = rest; - rest = []; - if (words.length) { - tspan = doc.createElementNS(SVG_NS, 'tspan'); - attr(tspan, { - dy: textLineHeight || 16, - x: parentX - }); - if (spanStyle) { // #390 - attr(tspan, 'style', spanStyle); - } - textNode.appendChild(tspan); - - if (actualWidth > width) { // a single word is pressing it out - width = actualWidth; - } - } - } else { // append to existing line tspan - tspan.removeChild(tspan.firstChild); - rest.unshift(words.pop()); - } - if (words.length) { - tspan.appendChild(doc.createTextNode(words.join(' ').replace(/- /g, '-'))); - } - } - } - } - }); - }); - }, - - /** - * Create a button with preset states - * @param {String} text - * @param {Number} x - * @param {Number} y - * @param {Function} callback - * @param {Object} normalState - * @param {Object} hoverState - * @param {Object} pressedState - */ - button: function (text, x, y, callback, normalState, hoverState, pressedState) { - var label = this.label(text, x, y, null, null, null, null, null, 'button'), - curState = 0, - stateOptions, - stateStyle, - normalStyle, - hoverStyle, - pressedStyle, - STYLE = 'style', - verticalGradient = { x1: 0, y1: 0, x2: 0, y2: 1 }; - - // Normal state - prepare the attributes - normalState = merge({ - 'stroke-width': 1, - stroke: '#CCCCCC', - fill: { - linearGradient: verticalGradient, - stops: [ - [0, '#FEFEFE'], - [1, '#F6F6F6'] - ] - }, - r: 2, - padding: 5, - style: { - color: 'black' - } - }, normalState); - normalStyle = normalState[STYLE]; - delete normalState[STYLE]; - - // Hover state - hoverState = merge(normalState, { - stroke: '#68A', - fill: { - linearGradient: verticalGradient, - stops: [ - [0, '#FFF'], - [1, '#ACF'] - ] - } - }, hoverState); - hoverStyle = hoverState[STYLE]; - delete hoverState[STYLE]; - - // Pressed state - pressedState = merge(normalState, { - stroke: '#68A', - fill: { - linearGradient: verticalGradient, - stops: [ - [0, '#9BD'], - [1, '#CDF'] - ] - } - }, pressedState); - pressedStyle = pressedState[STYLE]; - delete pressedState[STYLE]; - - // add the events - addEvent(label.element, 'mouseenter', function () { - label.attr(hoverState) - .css(hoverStyle); - }); - addEvent(label.element, 'mouseleave', function () { - stateOptions = [normalState, hoverState, pressedState][curState]; - stateStyle = [normalStyle, hoverStyle, pressedStyle][curState]; - label.attr(stateOptions) - .css(stateStyle); - }); - - label.setState = function (state) { - curState = state; - if (!state) { - label.attr(normalState) - .css(normalStyle); - } else if (state === 2) { - label.attr(pressedState) - .css(pressedStyle); - } - }; - - return label - .on('click', function () { - callback.call(label); - }) - .attr(normalState) - .css(extend({ cursor: 'default' }, normalStyle)); - }, - - /** - * Make a straight line crisper by not spilling out to neighbour pixels - * @param {Array} points - * @param {Number} width - */ - crispLine: function (points, width) { - // points format: [M, 0, 0, L, 100, 0] - // normalize to a crisp line - if (points[1] === points[4]) { - // Substract due to #1129. Now bottom and left axis gridlines behave the same. - points[1] = points[4] = mathRound(points[1]) - (width % 2 / 2); - } - if (points[2] === points[5]) { - points[2] = points[5] = mathRound(points[2]) + (width % 2 / 2); - } - return points; - }, - - - /** - * Draw a path - * @param {Array} path An SVG path in array form - */ - path: function (path) { - var attr = { - fill: NONE - }; - if (isArray(path)) { - attr.d = path; - } else if (isObject(path)) { // attributes - extend(attr, path); - } - return this.createElement('path').attr(attr); - }, - - /** - * Draw and return an SVG circle - * @param {Number} x The x position - * @param {Number} y The y position - * @param {Number} r The radius - */ - circle: function (x, y, r) { - var attr = isObject(x) ? - x : - { - x: x, - y: y, - r: r - }; - - return this.createElement('circle').attr(attr); - }, - - /** - * Draw and return an arc - * @param {Number} x X position - * @param {Number} y Y position - * @param {Number} r Radius - * @param {Number} innerR Inner radius like used in donut charts - * @param {Number} start Starting angle - * @param {Number} end Ending angle - */ - arc: function (x, y, r, innerR, start, end) { - // arcs are defined as symbols for the ability to set - // attributes in attr and animate - - if (isObject(x)) { - y = x.y; - r = x.r; - innerR = x.innerR; - start = x.start; - end = x.end; - x = x.x; - } - return this.symbol('arc', x || 0, y || 0, r || 0, r || 0, { - innerR: innerR || 0, - start: start || 0, - end: end || 0 - }); - }, - - /** - * Draw and return a rectangle - * @param {Number} x Left position - * @param {Number} y Top position - * @param {Number} width - * @param {Number} height - * @param {Number} r Border corner radius - * @param {Number} strokeWidth A stroke width can be supplied to allow crisp drawing - */ - rect: function (x, y, width, height, r, strokeWidth) { - - r = isObject(x) ? x.r : r; - - var wrapper = this.createElement('rect').attr({ - rx: r, - ry: r, - fill: NONE - }); - return wrapper.attr( - isObject(x) ? - x : - // do not crispify when an object is passed in (as in column charts) - wrapper.crisp(strokeWidth, x, y, mathMax(width, 0), mathMax(height, 0)) - ); - }, - - /** - * Resize the box and re-align all aligned elements - * @param {Object} width - * @param {Object} height - * @param {Boolean} animate - * - */ - setSize: function (width, height, animate) { - var renderer = this, - alignedObjects = renderer.alignedObjects, - i = alignedObjects.length; - - renderer.width = width; - renderer.height = height; - - renderer.boxWrapper[pick(animate, true) ? 'animate' : 'attr']({ - width: width, - height: height - }); - - while (i--) { - alignedObjects[i].align(); - } - }, - - /** - * Create a group - * @param {String} name The group will be given a class name of 'highcharts-{name}'. - * This can be used for styling and scripting. - */ - g: function (name) { - var elem = this.createElement('g'); - return defined(name) ? elem.attr({ 'class': PREFIX + name }) : elem; - }, - - /** - * Display an image - * @param {String} src - * @param {Number} x - * @param {Number} y - * @param {Number} width - * @param {Number} height - */ - image: function (src, x, y, width, height) { - var attribs = { - preserveAspectRatio: NONE - }, - elemWrapper; - - // optional properties - if (arguments.length > 1) { - extend(attribs, { - x: x, - y: y, - width: width, - height: height - }); - } - - elemWrapper = this.createElement('image').attr(attribs); - - // set the href in the xlink namespace - if (elemWrapper.element.setAttributeNS) { - elemWrapper.element.setAttributeNS('http://www.w3.org/1999/xlink', - 'href', src); - } else { - // could be exporting in IE - // using href throws "not supported" in ie7 and under, requries regex shim to fix later - elemWrapper.element.setAttribute('hc-svg-href', src); - } - - return elemWrapper; - }, - - /** - * Draw a symbol out of pre-defined shape paths from the namespace 'symbol' object. - * - * @param {Object} symbol - * @param {Object} x - * @param {Object} y - * @param {Object} radius - * @param {Object} options - */ - symbol: function (symbol, x, y, width, height, options) { - - var obj, - - // get the symbol definition function - symbolFn = this.symbols[symbol], - - // check if there's a path defined for this symbol - path = symbolFn && symbolFn( - mathRound(x), - mathRound(y), - width, - height, - options - ), - - imageElement, - imageRegex = /^url\((.*?)\)$/, - imageSrc, - imageSize, - centerImage; - - if (path) { - - obj = this.path(path); - // expando properties for use in animate and attr - extend(obj, { - symbolName: symbol, - x: x, - y: y, - width: width, - height: height - }); - if (options) { - extend(obj, options); - } - - - // image symbols - } else if (imageRegex.test(symbol)) { - - // On image load, set the size and position - centerImage = function (img, size) { - if (img.element) { // it may be destroyed in the meantime (#1390) - img.attr({ - width: size[0], - height: size[1] - }); - - if (!img.alignByTranslate) { // #185 - img.translate( - mathRound((width - size[0]) / 2), // #1378 - mathRound((height - size[1]) / 2) - ); - } - } - }; - - imageSrc = symbol.match(imageRegex)[1]; - imageSize = symbolSizes[imageSrc]; - - // Ireate the image synchronously, add attribs async - obj = this.image(imageSrc) - .attr({ - x: x, - y: y - }); - obj.isImg = true; - - if (imageSize) { - centerImage(obj, imageSize); - } else { - // Initialize image to be 0 size so export will still function if there's no cached sizes. - // - obj.attr({ width: 0, height: 0 }); - - // Create a dummy JavaScript image to get the width and height. Due to a bug in IE < 8, - // the created element must be assigned to a variable in order to load (#292). - imageElement = createElement('img', { - onload: function () { - centerImage(obj, symbolSizes[imageSrc] = [this.width, this.height]); - }, - src: imageSrc - }); - } - } - - return obj; - }, - - /** - * An extendable collection of functions for defining symbol paths. - */ - symbols: { - 'circle': function (x, y, w, h) { - var cpw = 0.166 * w; - return [ - M, x + w / 2, y, - 'C', x + w + cpw, y, x + w + cpw, y + h, x + w / 2, y + h, - 'C', x - cpw, y + h, x - cpw, y, x + w / 2, y, - 'Z' - ]; - }, - - 'square': function (x, y, w, h) { - return [ - M, x, y, - L, x + w, y, - x + w, y + h, - x, y + h, - 'Z' - ]; - }, - - 'triangle': function (x, y, w, h) { - return [ - M, x + w / 2, y, - L, x + w, y + h, - x, y + h, - 'Z' - ]; - }, - - 'triangle-down': function (x, y, w, h) { - return [ - M, x, y, - L, x + w, y, - x + w / 2, y + h, - 'Z' - ]; - }, - 'diamond': function (x, y, w, h) { - return [ - M, x + w / 2, y, - L, x + w, y + h / 2, - x + w / 2, y + h, - x, y + h / 2, - 'Z' - ]; - }, - 'arc': function (x, y, w, h, options) { - var start = options.start, - radius = options.r || w || h, - end = options.end - 0.001, // to prevent cos and sin of start and end from becoming equal on 360 arcs (related: #1561) - innerRadius = options.innerR, - open = options.open, - cosStart = mathCos(start), - sinStart = mathSin(start), - cosEnd = mathCos(end), - sinEnd = mathSin(end), - longArc = options.end - start < mathPI ? 0 : 1; - - return [ - M, - x + radius * cosStart, - y + radius * sinStart, - 'A', // arcTo - radius, // x radius - radius, // y radius - 0, // slanting - longArc, // long or short arc - 1, // clockwise - x + radius * cosEnd, - y + radius * sinEnd, - open ? M : L, - x + innerRadius * cosEnd, - y + innerRadius * sinEnd, - 'A', // arcTo - innerRadius, // x radius - innerRadius, // y radius - 0, // slanting - longArc, // long or short arc - 0, // clockwise - x + innerRadius * cosStart, - y + innerRadius * sinStart, - - open ? '' : 'Z' // close - ]; - } - }, - - /** - * Define a clipping rectangle - * @param {String} id - * @param {Number} x - * @param {Number} y - * @param {Number} width - * @param {Number} height - */ - clipRect: function (x, y, width, height) { - var wrapper, - id = PREFIX + idCounter++, - - clipPath = this.createElement('clipPath').attr({ - id: id - }).add(this.defs); - - wrapper = this.rect(x, y, width, height, 0).add(clipPath); - wrapper.id = id; - wrapper.clipPath = clipPath; - - return wrapper; - }, - - - /** - * Take a color and return it if it's a string, make it a gradient if it's a - * gradient configuration object. Prior to Highstock, an array was used to define - * a linear gradient with pixel positions relative to the SVG. In newer versions - * we change the coordinates to apply relative to the shape, using coordinates - * 0-1 within the shape. To preserve backwards compatibility, linearGradient - * in this definition is an object of x1, y1, x2 and y2. - * - * @param {Object} color The color or config object - */ - color: function (color, elem, prop) { - var renderer = this, - colorObject, - regexRgba = /^rgba/, - gradName, - gradAttr, - gradients, - gradientObject, - stops, - stopColor, - stopOpacity, - radialReference, - n, - id, - key = []; - - // Apply linear or radial gradients - if (color && color.linearGradient) { - gradName = 'linearGradient'; - } else if (color && color.radialGradient) { - gradName = 'radialGradient'; - } - - if (gradName) { - gradAttr = color[gradName]; - gradients = renderer.gradients; - stops = color.stops; - radialReference = elem.radialReference; - - // Keep < 2.2 kompatibility - if (isArray(gradAttr)) { - color[gradName] = gradAttr = { - x1: gradAttr[0], - y1: gradAttr[1], - x2: gradAttr[2], - y2: gradAttr[3], - gradientUnits: 'userSpaceOnUse' - }; - } - - // Correct the radial gradient for the radial reference system - if (gradName === 'radialGradient' && radialReference && !defined(gradAttr.gradientUnits)) { - gradAttr = merge(gradAttr, { - cx: (radialReference[0] - radialReference[2] / 2) + gradAttr.cx * radialReference[2], - cy: (radialReference[1] - radialReference[2] / 2) + gradAttr.cy * radialReference[2], - r: gradAttr.r * radialReference[2], - gradientUnits: 'userSpaceOnUse' - }); - } - - // Build the unique key to detect whether we need to create a new element (#1282) - for (n in gradAttr) { - if (n !== 'id') { - key.push(n, gradAttr[n]); - } - } - for (n in stops) { - key.push(stops[n]); - } - key = key.join(','); - - // Check if a gradient object with the same config object is created within this renderer - if (gradients[key]) { - id = gradients[key].id; - - } else { - - // Set the id and create the element - gradAttr.id = id = PREFIX + idCounter++; - gradients[key] = gradientObject = renderer.createElement(gradName) - .attr(gradAttr) - .add(renderer.defs); - - - // The gradient needs to keep a list of stops to be able to destroy them - gradientObject.stops = []; - each(stops, function (stop) { - var stopObject; - if (regexRgba.test(stop[1])) { - colorObject = Color(stop[1]); - stopColor = colorObject.get('rgb'); - stopOpacity = colorObject.get('a'); - } else { - stopColor = stop[1]; - stopOpacity = 1; - } - stopObject = renderer.createElement('stop').attr({ - offset: stop[0], - 'stop-color': stopColor, - 'stop-opacity': stopOpacity - }).add(gradientObject); - - // Add the stop element to the gradient - gradientObject.stops.push(stopObject); - }); - } - - // Return the reference to the gradient object - return 'url(' + renderer.url + '#' + id + ')'; - - // Webkit and Batik can't show rgba. - } else if (regexRgba.test(color)) { - colorObject = Color(color); - attr(elem, prop + '-opacity', colorObject.get('a')); - - return colorObject.get('rgb'); - - - } else { - // Remove the opacity attribute added above. Does not throw if the attribute is not there. - elem.removeAttribute(prop + '-opacity'); - - return color; - } - - }, - - - /** - * Add text to the SVG object - * @param {String} str - * @param {Number} x Left position - * @param {Number} y Top position - * @param {Boolean} useHTML Use HTML to render the text - */ - text: function (str, x, y, useHTML) { - - // declare variables - var renderer = this, - defaultChartStyle = defaultOptions.chart.style, - fakeSVG = useCanVG || (!hasSVG && renderer.forExport), - wrapper; - - if (useHTML && !renderer.forExport) { - return renderer.html(str, x, y); - } - - x = mathRound(pick(x, 0)); - y = mathRound(pick(y, 0)); - - wrapper = renderer.createElement('text') - .attr({ - x: x, - y: y, - text: str - }) - .css({ - fontFamily: defaultChartStyle.fontFamily, - fontSize: defaultChartStyle.fontSize - }); - - // Prevent wrapping from creating false offsetWidths in export in legacy IE (#1079, #1063) - if (fakeSVG) { - wrapper.css({ - position: ABSOLUTE - }); - } - - wrapper.x = x; - wrapper.y = y; - return wrapper; - }, - - - /** - * Create HTML text node. This is used by the VML renderer as well as the SVG - * renderer through the useHTML option. - * - * @param {String} str - * @param {Number} x - * @param {Number} y - */ - html: function (str, x, y) { - var defaultChartStyle = defaultOptions.chart.style, - wrapper = this.createElement('span'), - attrSetters = wrapper.attrSetters, - element = wrapper.element, - renderer = wrapper.renderer; - - // Text setter - attrSetters.text = function (value) { - if (value !== element.innerHTML) { - delete this.bBox; - } - element.innerHTML = value; - return false; - }; - - // Various setters which rely on update transform - attrSetters.x = attrSetters.y = attrSetters.align = function (value, key) { - if (key === 'align') { - key = 'textAlign'; // Do not overwrite the SVGElement.align method. Same as VML. - } - wrapper[key] = value; - wrapper.htmlUpdateTransform(); - return false; - }; - - // Set the default attributes - wrapper.attr({ - text: str, - x: mathRound(x), - y: mathRound(y) - }) - .css({ - position: ABSOLUTE, - whiteSpace: 'nowrap', - fontFamily: defaultChartStyle.fontFamily, - fontSize: defaultChartStyle.fontSize - }); - - // Use the HTML specific .css method - wrapper.css = wrapper.htmlCss; - - // This is specific for HTML within SVG - if (renderer.isSVG) { - wrapper.add = function (svgGroupWrapper) { - - var htmlGroup, - container = renderer.box.parentNode, - parentGroup, - parents = []; - - // Create a mock group to hold the HTML elements - if (svgGroupWrapper) { - htmlGroup = svgGroupWrapper.div; - if (!htmlGroup) { - - // Read the parent chain into an array and read from top down - parentGroup = svgGroupWrapper; - while (parentGroup) { - - parents.push(parentGroup); - - // Move up to the next parent group - parentGroup = parentGroup.parentGroup; - } - - // Ensure dynamically updating position when any parent is translated - each(parents.reverse(), function (parentGroup) { - var htmlGroupStyle; - - // Create a HTML div and append it to the parent div to emulate - // the SVG group structure - htmlGroup = parentGroup.div = parentGroup.div || createElement(DIV, { - className: attr(parentGroup.element, 'class') - }, { - position: ABSOLUTE, - left: (parentGroup.translateX || 0) + PX, - top: (parentGroup.translateY || 0) + PX - }, htmlGroup || container); // the top group is appended to container - - // Shortcut - htmlGroupStyle = htmlGroup.style; - - // Set listeners to update the HTML div's position whenever the SVG group - // position is changed - extend(parentGroup.attrSetters, { - translateX: function (value) { - htmlGroupStyle.left = value + PX; - }, - translateY: function (value) { - htmlGroupStyle.top = value + PX; - }, - visibility: function (value, key) { - htmlGroupStyle[key] = value; - } - }); - }); - - } - } else { - htmlGroup = container; - } - - htmlGroup.appendChild(element); - - // Shared with VML: - wrapper.added = true; - if (wrapper.alignOnAdd) { - wrapper.htmlUpdateTransform(); - } - - return wrapper; - }; - } - return wrapper; - }, - - /** - * Utility to return the baseline offset and total line height from the font size - */ - fontMetrics: function (fontSize) { - fontSize = pInt(fontSize || 11); - - // Empirical values found by comparing font size and bounding box height. - // Applies to the default font family. http://jsfiddle.net/highcharts/7xvn7/ - var lineHeight = fontSize < 24 ? fontSize + 4 : mathRound(fontSize * 1.2), - baseline = mathRound(lineHeight * 0.8); - - return { - h: lineHeight, - b: baseline - }; - }, - - /** - * Add a label, a text item that can hold a colored or gradient background - * as well as a border and shadow. - * @param {string} str - * @param {Number} x - * @param {Number} y - * @param {String} shape - * @param {Number} anchorX In case the shape has a pointer, like a flag, this is the - * coordinates it should be pinned to - * @param {Number} anchorY - * @param {Boolean} baseline Whether to position the label relative to the text baseline, - * like renderer.text, or to the upper border of the rectangle. - * @param {String} className Class name for the group - */ - label: function (str, x, y, shape, anchorX, anchorY, useHTML, baseline, className) { - - var renderer = this, - wrapper = renderer.g(className), - text = renderer.text('', 0, 0, useHTML) - .attr({ - zIndex: 1 - }), - //.add(wrapper), - box, - bBox, - alignFactor = 0, - padding = 3, - paddingLeft = 0, - width, - height, - wrapperX, - wrapperY, - crispAdjust = 0, - deferredAttr = {}, - baselineOffset, - attrSetters = wrapper.attrSetters, - needsBox; - - /** - * This function runs after the label is added to the DOM (when the bounding box is - * available), and after the text of the label is updated to detect the new bounding - * box and reflect it in the border box. - */ - function updateBoxSize() { - var boxX, - boxY, - style = text.element.style; - - bBox = (width === undefined || height === undefined || wrapper.styles.textAlign) && - text.getBBox(); - wrapper.width = (width || bBox.width || 0) + 2 * padding + paddingLeft; - wrapper.height = (height || bBox.height || 0) + 2 * padding; - - // update the label-scoped y offset - baselineOffset = padding + renderer.fontMetrics(style && style.fontSize).b; - - if (needsBox) { - - // create the border box if it is not already present - if (!box) { - boxX = mathRound(-alignFactor * padding); - boxY = baseline ? -baselineOffset : 0; - - wrapper.box = box = shape ? - renderer.symbol(shape, boxX, boxY, wrapper.width, wrapper.height) : - renderer.rect(boxX, boxY, wrapper.width, wrapper.height, 0, deferredAttr[STROKE_WIDTH]); - box.add(wrapper); - } - - // apply the box attributes - if (!box.isImg) { // #1630 - box.attr(merge({ - width: wrapper.width, - height: wrapper.height - }, deferredAttr)); - } - deferredAttr = null; - } - } - - /** - * This function runs after setting text or padding, but only if padding is changed - */ - function updateTextPadding() { - var styles = wrapper.styles, - textAlign = styles && styles.textAlign, - x = paddingLeft + padding * (1 - alignFactor), - y; - - // determin y based on the baseline - y = baseline ? 0 : baselineOffset; - - // compensate for alignment - if (defined(width) && (textAlign === 'center' || textAlign === 'right')) { - x += { center: 0.5, right: 1 }[textAlign] * (width - bBox.width); - } - - // update if anything changed - if (x !== text.x || y !== text.y) { - text.attr({ - x: x, - y: y - }); - } - - // record current values - text.x = x; - text.y = y; - } - - /** - * Set a box attribute, or defer it if the box is not yet created - * @param {Object} key - * @param {Object} value - */ - function boxAttr(key, value) { - if (box) { - box.attr(key, value); - } else { - deferredAttr[key] = value; - } - } - - function getSizeAfterAdd() { - text.add(wrapper); - wrapper.attr({ - text: str, // alignment is available now - x: x, - y: y - }); - - if (box && defined(anchorX)) { - wrapper.attr({ - anchorX: anchorX, - anchorY: anchorY - }); - } - } - - /** - * After the text element is added, get the desired size of the border box - * and add it before the text in the DOM. - */ - addEvent(wrapper, 'add', getSizeAfterAdd); - - /* - * Add specific attribute setters. - */ - - // only change local variables - attrSetters.width = function (value) { - width = value; - return false; - }; - attrSetters.height = function (value) { - height = value; - return false; - }; - attrSetters.padding = function (value) { - if (defined(value) && value !== padding) { - padding = value; - updateTextPadding(); - } - return false; - }; - attrSetters.paddingLeft = function (value) { - if (defined(value) && value !== paddingLeft) { - paddingLeft = value; - updateTextPadding(); - } - return false; - }; - - - // change local variable and set attribue as well - attrSetters.align = function (value) { - alignFactor = { left: 0, center: 0.5, right: 1 }[value]; - return false; // prevent setting text-anchor on the group - }; - - // apply these to the box and the text alike - attrSetters.text = function (value, key) { - text.attr(key, value); - updateBoxSize(); - updateTextPadding(); - return false; - }; - - // apply these to the box but not to the text - attrSetters[STROKE_WIDTH] = function (value, key) { - needsBox = true; - crispAdjust = value % 2 / 2; - boxAttr(key, value); - return false; - }; - attrSetters.stroke = attrSetters.fill = attrSetters.r = function (value, key) { - if (key === 'fill') { - needsBox = true; - } - boxAttr(key, value); - return false; - }; - attrSetters.anchorX = function (value, key) { - anchorX = value; - boxAttr(key, value + crispAdjust - wrapperX); - return false; - }; - attrSetters.anchorY = function (value, key) { - anchorY = value; - boxAttr(key, value - wrapperY); - return false; - }; - - // rename attributes - attrSetters.x = function (value) { - wrapper.x = value; // for animation getter - value -= alignFactor * ((width || bBox.width) + padding); - wrapperX = mathRound(value); - - wrapper.attr('translateX', wrapperX); - return false; - }; - attrSetters.y = function (value) { - wrapperY = wrapper.y = mathRound(value); - wrapper.attr('translateY', wrapperY); - return false; - }; - - // Redirect certain methods to either the box or the text - var baseCss = wrapper.css; - return extend(wrapper, { - /** - * Pick up some properties and apply them to the text instead of the wrapper - */ - css: function (styles) { - if (styles) { - var textStyles = {}; - styles = merge(styles); // create a copy to avoid altering the original object (#537) - each(['fontSize', 'fontWeight', 'fontFamily', 'color', 'lineHeight', 'width'], function (prop) { - if (styles[prop] !== UNDEFINED) { - textStyles[prop] = styles[prop]; - delete styles[prop]; - } - }); - text.css(textStyles); - } - return baseCss.call(wrapper, styles); - }, - /** - * Return the bounding box of the box, not the group - */ - getBBox: function () { - return { - width: bBox.width + 2 * padding, - height: bBox.height + 2 * padding, - x: bBox.x - padding, - y: bBox.y - padding - }; - }, - /** - * Apply the shadow to the box - */ - shadow: function (b) { - if (box) { - box.shadow(b); - } - return wrapper; - }, - /** - * Destroy and release memory. - */ - destroy: function () { - removeEvent(wrapper, 'add', getSizeAfterAdd); - - // Added by button implementation - removeEvent(wrapper.element, 'mouseenter'); - removeEvent(wrapper.element, 'mouseleave'); - - if (text) { - text = text.destroy(); - } - if (box) { - box = box.destroy(); - } - // Call base implementation to destroy the rest - SVGElement.prototype.destroy.call(wrapper); - - // Release local pointers (#1298) - wrapper = renderer = updateBoxSize = updateTextPadding = boxAttr = getSizeAfterAdd = null; - } - }); - } -}; // end SVGRenderer - - -// general renderer -Renderer = SVGRenderer; - - -/* **************************************************************************** - * * - * START OF INTERNET EXPLORER <= 8 SPECIFIC CODE * - * * - * For applications and websites that don't need IE support, like platform * - * targeted mobile apps and web apps, this code can be removed. * - * * - *****************************************************************************/ - -/** - * @constructor - */ -var VMLRenderer, VMLElement; -if (!hasSVG && !useCanVG) { - -/** - * The VML element wrapper. - */ -Highcharts.VMLElement = VMLElement = { - - /** - * Initialize a new VML element wrapper. It builds the markup as a string - * to minimize DOM traffic. - * @param {Object} renderer - * @param {Object} nodeName - */ - init: function (renderer, nodeName) { - var wrapper = this, - markup = ['<', nodeName, ' filled="f" stroked="f"'], - style = ['position: ', ABSOLUTE, ';'], - isDiv = nodeName === DIV; - - // divs and shapes need size - if (nodeName === 'shape' || isDiv) { - style.push('left:0;top:0;width:1px;height:1px;'); - } - style.push('visibility: ', isDiv ? HIDDEN : VISIBLE); - - markup.push(' style="', style.join(''), '"/>'); - - // create element with default attributes and style - if (nodeName) { - markup = isDiv || nodeName === 'span' || nodeName === 'img' ? - markup.join('') - : renderer.prepVML(markup); - wrapper.element = createElement(markup); - } - - wrapper.renderer = renderer; - wrapper.attrSetters = {}; - }, - - /** - * Add the node to the given parent - * @param {Object} parent - */ - add: function (parent) { - var wrapper = this, - renderer = wrapper.renderer, - element = wrapper.element, - box = renderer.box, - inverted = parent && parent.inverted, - - // get the parent node - parentNode = parent ? - parent.element || parent : - box; - - - // if the parent group is inverted, apply inversion on all children - if (inverted) { // only on groups - renderer.invertChild(element, parentNode); - } - - // append it - parentNode.appendChild(element); - - // align text after adding to be able to read offset - wrapper.added = true; - if (wrapper.alignOnAdd && !wrapper.deferUpdateTransform) { - wrapper.updateTransform(); - } - - // fire an event for internal hooks - fireEvent(wrapper, 'add'); - - return wrapper; - }, - - /** - * VML always uses htmlUpdateTransform - */ - updateTransform: SVGElement.prototype.htmlUpdateTransform, - - /** - * Get or set attributes - */ - attr: function (hash, val) { - var wrapper = this, - key, - value, - i, - result, - element = wrapper.element || {}, - elemStyle = element.style, - nodeName = element.nodeName, - renderer = wrapper.renderer, - symbolName = wrapper.symbolName, - hasSetSymbolSize, - shadows = wrapper.shadows, - skipAttr, - attrSetters = wrapper.attrSetters, - ret = wrapper; - - // single key-value pair - if (isString(hash) && defined(val)) { - key = hash; - hash = {}; - hash[key] = val; - } - - // used as a getter, val is undefined - if (isString(hash)) { - key = hash; - if (key === 'strokeWidth' || key === 'stroke-width') { - ret = wrapper.strokeweight; - } else { - ret = wrapper[key]; - } - - // setter - } else { - for (key in hash) { - value = hash[key]; - skipAttr = false; - - // check for a specific attribute setter - result = attrSetters[key] && attrSetters[key].call(wrapper, value, key); - - if (result !== false && value !== null) { // #620 - - if (result !== UNDEFINED) { - value = result; // the attribute setter has returned a new value to set - } - - - // prepare paths - // symbols - if (symbolName && /^(x|y|r|start|end|width|height|innerR|anchorX|anchorY)/.test(key)) { - // if one of the symbol size affecting parameters are changed, - // check all the others only once for each call to an element's - // .attr() method - if (!hasSetSymbolSize) { - wrapper.symbolAttr(hash); - - hasSetSymbolSize = true; - } - skipAttr = true; - - } else if (key === 'd') { - value = value || []; - wrapper.d = value.join(' '); // used in getter for animation - - // convert paths - i = value.length; - var convertedPath = [], - clockwise; - while (i--) { - - // Multiply by 10 to allow subpixel precision. - // Substracting half a pixel seems to make the coordinates - // align with SVG, but this hasn't been tested thoroughly - if (isNumber(value[i])) { - convertedPath[i] = mathRound(value[i] * 10) - 5; - } else if (value[i] === 'Z') { // close the path - convertedPath[i] = 'x'; - } else { - convertedPath[i] = value[i]; - - // When the start X and end X coordinates of an arc are too close, - // they are rounded to the same value above. In this case, substract 1 from the end X - // position. #760, #1371. - if (value.isArc && (value[i] === 'wa' || value[i] === 'at')) { - clockwise = value[i] === 'wa' ? 1 : -1; // #1642 - if (convertedPath[i + 5] === convertedPath[i + 7]) { - convertedPath[i + 7] -= clockwise; - } - // Start and end Y (#1410) - if (convertedPath[i + 6] === convertedPath[i + 8]) { - convertedPath[i + 8] -= clockwise; - } - } - } - - } - value = convertedPath.join(' ') || 'x'; - element.path = value; - - // update shadows - if (shadows) { - i = shadows.length; - while (i--) { - shadows[i].path = shadows[i].cutOff ? this.cutOffPath(value, shadows[i].cutOff) : value; - } - } - skipAttr = true; - - // handle visibility - } else if (key === 'visibility') { - - // let the shadow follow the main element - if (shadows) { - i = shadows.length; - while (i--) { - shadows[i].style[key] = value; - } - } - - // Instead of toggling the visibility CSS property, move the div out of the viewport. - // This works around #61 and #586 - if (nodeName === 'DIV') { - value = value === HIDDEN ? '-999em' : 0; - - // In order to redraw, IE7 needs the div to be visible when tucked away - // outside the viewport. So the visibility is actually opposite of - // the expected value. This applies to the tooltip only. - if (!docMode8) { - elemStyle[key] = value ? VISIBLE : HIDDEN; - } - key = 'top'; - } - elemStyle[key] = value; - skipAttr = true; - - // directly mapped to css - } else if (key === 'zIndex') { - - if (value) { - elemStyle[key] = value; - } - skipAttr = true; - - // x, y, width, height - } else if (inArray(key, ['x', 'y', 'width', 'height']) !== -1) { - - wrapper[key] = value; // used in getter - - if (key === 'x' || key === 'y') { - key = { x: 'left', y: 'top' }[key]; - } else { - value = mathMax(0, value); // don't set width or height below zero (#311) - } - - // clipping rectangle special - if (wrapper.updateClipping) { - wrapper[key] = value; // the key is now 'left' or 'top' for 'x' and 'y' - wrapper.updateClipping(); - } else { - // normal - elemStyle[key] = value; - } - - skipAttr = true; - - // class name - } else if (key === 'class' && nodeName === 'DIV') { - // IE8 Standards mode has problems retrieving the className - element.className = value; - - // stroke - } else if (key === 'stroke') { - - value = renderer.color(value, element, key); - - key = 'strokecolor'; - - // stroke width - } else if (key === 'stroke-width' || key === 'strokeWidth') { - element.stroked = value ? true : false; - key = 'strokeweight'; - wrapper[key] = value; // used in getter, issue #113 - if (isNumber(value)) { - value += PX; - } - - // dashStyle - } else if (key === 'dashstyle') { - var strokeElem = element.getElementsByTagName('stroke')[0] || - createElement(renderer.prepVML(['']), null, null, element); - strokeElem[key] = value || 'solid'; - wrapper.dashstyle = value; /* because changing stroke-width will change the dash length - and cause an epileptic effect */ - skipAttr = true; - - // fill - } else if (key === 'fill') { - - if (nodeName === 'SPAN') { // text color - elemStyle.color = value; - } else if (nodeName !== 'IMG') { // #1336 - element.filled = value !== NONE ? true : false; - - value = renderer.color(value, element, key, wrapper); - - key = 'fillcolor'; - } - - // opacity: don't bother - animation is too slow and filters introduce artifacts - } else if (key === 'opacity') { - /*css(element, { - opacity: value - });*/ - skipAttr = true; - - // rotation on VML elements - } else if (nodeName === 'shape' && key === 'rotation') { - wrapper[key] = value; - // Correction for the 1x1 size of the shape container. Used in gauge needles. - element.style.left = -mathRound(mathSin(value * deg2rad) + 1) + PX; - element.style.top = mathRound(mathCos(value * deg2rad)) + PX; - - // translation for animation - } else if (key === 'translateX' || key === 'translateY' || key === 'rotation') { - wrapper[key] = value; - wrapper.updateTransform(); - - skipAttr = true; - - // text for rotated and non-rotated elements - } else if (key === 'text') { - this.bBox = null; - element.innerHTML = value; - skipAttr = true; - } - - - if (!skipAttr) { - if (docMode8) { // IE8 setAttribute bug - element[key] = value; - } else { - attr(element, key, value); - } - } - - } - } - } - return ret; - }, - - /** - * Set the element's clipping to a predefined rectangle - * - * @param {String} id The id of the clip rectangle - */ - clip: function (clipRect) { - var wrapper = this, - clipMembers, - cssRet; - - if (clipRect) { - clipMembers = clipRect.members; - erase(clipMembers, wrapper); // Ensure unique list of elements (#1258) - clipMembers.push(wrapper); - wrapper.destroyClip = function () { - erase(clipMembers, wrapper); - }; - cssRet = clipRect.getCSS(wrapper); - - } else { - if (wrapper.destroyClip) { - wrapper.destroyClip(); - } - cssRet = { clip: docMode8 ? 'inherit' : 'rect(auto)' }; // #1214 - } - - return wrapper.css(cssRet); - - }, - - /** - * Set styles for the element - * @param {Object} styles - */ - css: SVGElement.prototype.htmlCss, - - /** - * Removes a child either by removeChild or move to garbageBin. - * Issue 490; in VML removeChild results in Orphaned nodes according to sIEve, discardElement does not. - */ - safeRemoveChild: function (element) { - // discardElement will detach the node from its parent before attaching it - // to the garbage bin. Therefore it is important that the node is attached and have parent. - if (element.parentNode) { - discardElement(element); - } - }, - - /** - * Extend element.destroy by removing it from the clip members array - */ - destroy: function () { - if (this.destroyClip) { - this.destroyClip(); - } - - return SVGElement.prototype.destroy.apply(this); - }, - - /** - * Add an event listener. VML override for normalizing event parameters. - * @param {String} eventType - * @param {Function} handler - */ - on: function (eventType, handler) { - // simplest possible event model for internal use - this.element['on' + eventType] = function () { - var evt = win.event; - evt.target = evt.srcElement; - handler(evt); - }; - return this; - }, - - /** - * In stacked columns, cut off the shadows so that they don't overlap - */ - cutOffPath: function (path, length) { - - var len; - - path = path.split(/[ ,]/); - len = path.length; - - if (len === 9 || len === 11) { - path[len - 4] = path[len - 2] = pInt(path[len - 2]) - 10 * length; - } - return path.join(' '); - }, - - /** - * Apply a drop shadow by copying elements and giving them different strokes - * @param {Boolean|Object} shadowOptions - */ - shadow: function (shadowOptions, group, cutOff) { - var shadows = [], - i, - element = this.element, - renderer = this.renderer, - shadow, - elemStyle = element.style, - markup, - path = element.path, - strokeWidth, - modifiedPath, - shadowWidth, - shadowElementOpacity; - - // some times empty paths are not strings - if (path && typeof path.value !== 'string') { - path = 'x'; - } - modifiedPath = path; - - if (shadowOptions) { - shadowWidth = pick(shadowOptions.width, 3); - shadowElementOpacity = (shadowOptions.opacity || 0.15) / shadowWidth; - for (i = 1; i <= 3; i++) { - - strokeWidth = (shadowWidth * 2) + 1 - (2 * i); - - // Cut off shadows for stacked column items - if (cutOff) { - modifiedPath = this.cutOffPath(path.value, strokeWidth + 0.5); - } - - markup = ['']; - - shadow = createElement(renderer.prepVML(markup), - null, { - left: pInt(elemStyle.left) + pick(shadowOptions.offsetX, 1), - top: pInt(elemStyle.top) + pick(shadowOptions.offsetY, 1) - } - ); - if (cutOff) { - shadow.cutOff = strokeWidth + 1; - } - - // apply the opacity - markup = ['']; - createElement(renderer.prepVML(markup), null, null, shadow); - - - // insert it - if (group) { - group.element.appendChild(shadow); - } else { - element.parentNode.insertBefore(shadow, element); - } - - // record it - shadows.push(shadow); - - } - - this.shadows = shadows; - } - return this; - - } -}; -VMLElement = extendClass(SVGElement, VMLElement); - -/** - * The VML renderer - */ -var VMLRendererExtension = { // inherit SVGRenderer - - Element: VMLElement, - isIE8: userAgent.indexOf('MSIE 8.0') > -1, - - - /** - * Initialize the VMLRenderer - * @param {Object} container - * @param {Number} width - * @param {Number} height - */ - init: function (container, width, height) { - var renderer = this, - boxWrapper, - box; - - renderer.alignedObjects = []; - - boxWrapper = renderer.createElement(DIV); - box = boxWrapper.element; - box.style.position = RELATIVE; // for freeform drawing using renderer directly - container.appendChild(boxWrapper.element); - - - // generate the containing box - renderer.isVML = true; - renderer.box = box; - renderer.boxWrapper = boxWrapper; - - - renderer.setSize(width, height, false); - - // The only way to make IE6 and IE7 print is to use a global namespace. However, - // with IE8 the only way to make the dynamic shapes visible in screen and print mode - // seems to be to add the xmlns attribute and the behaviour style inline. - if (!doc.namespaces.hcv) { - - doc.namespaces.add('hcv', 'urn:schemas-microsoft-com:vml'); - - // setup default css - doc.createStyleSheet().cssText = - 'hcv\\:fill, hcv\\:path, hcv\\:shape, hcv\\:stroke' + - '{ behavior:url(#default#VML); display: inline-block; } '; - - } - }, - - - /** - * Detect whether the renderer is hidden. This happens when one of the parent elements - * has display: none - */ - isHidden: function () { - return !this.box.offsetWidth; - }, - - /** - * Define a clipping rectangle. In VML it is accomplished by storing the values - * for setting the CSS style to all associated members. - * - * @param {Number} x - * @param {Number} y - * @param {Number} width - * @param {Number} height - */ - clipRect: function (x, y, width, height) { - - // create a dummy element - var clipRect = this.createElement(), - isObj = isObject(x); - - // mimic a rectangle with its style object for automatic updating in attr - return extend(clipRect, { - members: [], - left: isObj ? x.x : x, - top: isObj ? x.y : y, - width: isObj ? x.width : width, - height: isObj ? x.height : height, - getCSS: function (wrapper) { - var element = wrapper.element, - nodeName = element.nodeName, - isShape = nodeName === 'shape', - inverted = wrapper.inverted, - rect = this, - top = rect.top - (isShape ? element.offsetTop : 0), - left = rect.left, - right = left + rect.width, - bottom = top + rect.height, - ret = { - clip: 'rect(' + - mathRound(inverted ? left : top) + 'px,' + - mathRound(inverted ? bottom : right) + 'px,' + - mathRound(inverted ? right : bottom) + 'px,' + - mathRound(inverted ? top : left) + 'px)' - }; - - // issue 74 workaround - if (!inverted && docMode8 && nodeName === 'DIV') { - extend(ret, { - width: right + PX, - height: bottom + PX - }); - } - return ret; - }, - - // used in attr and animation to update the clipping of all members - updateClipping: function () { - each(clipRect.members, function (member) { - member.css(clipRect.getCSS(member)); - }); - } - }); - - }, - - - /** - * Take a color and return it if it's a string, make it a gradient if it's a - * gradient configuration object, and apply opacity. - * - * @param {Object} color The color or config object - */ - color: function (color, elem, prop, wrapper) { - var renderer = this, - colorObject, - regexRgba = /^rgba/, - markup, - fillType, - ret = NONE; - - // Check for linear or radial gradient - if (color && color.linearGradient) { - fillType = 'gradient'; - } else if (color && color.radialGradient) { - fillType = 'pattern'; - } - - - if (fillType) { - - var stopColor, - stopOpacity, - gradient = color.linearGradient || color.radialGradient, - x1, - y1, - x2, - y2, - opacity1, - opacity2, - color1, - color2, - fillAttr = '', - stops = color.stops, - firstStop, - lastStop, - colors = [], - addFillNode = function () { - // Add the fill subnode. When colors attribute is used, the meanings of opacity and o:opacity2 - // are reversed. - markup = ['']; - createElement(renderer.prepVML(markup), null, null, elem); - }; - - // Extend from 0 to 1 - firstStop = stops[0]; - lastStop = stops[stops.length - 1]; - if (firstStop[0] > 0) { - stops.unshift([ - 0, - firstStop[1] - ]); - } - if (lastStop[0] < 1) { - stops.push([ - 1, - lastStop[1] - ]); - } - - // Compute the stops - each(stops, function (stop, i) { - if (regexRgba.test(stop[1])) { - colorObject = Color(stop[1]); - stopColor = colorObject.get('rgb'); - stopOpacity = colorObject.get('a'); - } else { - stopColor = stop[1]; - stopOpacity = 1; - } - - // Build the color attribute - colors.push((stop[0] * 100) + '% ' + stopColor); - - // Only start and end opacities are allowed, so we use the first and the last - if (!i) { - opacity1 = stopOpacity; - color2 = stopColor; - } else { - opacity2 = stopOpacity; - color1 = stopColor; - } - }); - - // Apply the gradient to fills only. - if (prop === 'fill') { - - // Handle linear gradient angle - if (fillType === 'gradient') { - x1 = gradient.x1 || gradient[0] || 0; - y1 = gradient.y1 || gradient[1] || 0; - x2 = gradient.x2 || gradient[2] || 0; - y2 = gradient.y2 || gradient[3] || 0; - fillAttr = 'angle="' + (90 - math.atan( - (y2 - y1) / // y vector - (x2 - x1) // x vector - ) * 180 / mathPI) + '"'; - - addFillNode(); - - // Radial (circular) gradient - } else { - - var r = gradient.r, - sizex = r * 2, - sizey = r * 2, - cx = gradient.cx, - cy = gradient.cy, - radialReference = elem.radialReference, - bBox, - applyRadialGradient = function () { - if (radialReference) { - bBox = wrapper.getBBox(); - cx += (radialReference[0] - bBox.x) / bBox.width - 0.5; - cy += (radialReference[1] - bBox.y) / bBox.height - 0.5; - sizex *= radialReference[2] / bBox.width; - sizey *= radialReference[2] / bBox.height; - } - fillAttr = 'src="' + defaultOptions.global.VMLRadialGradientURL + '" ' + - 'size="' + sizex + ',' + sizey + '" ' + - 'origin="0.5,0.5" ' + - 'position="' + cx + ',' + cy + '" ' + - 'color2="' + color2 + '" '; - - addFillNode(); - }; - - // Apply radial gradient - if (wrapper.added) { - applyRadialGradient(); - } else { - // We need to know the bounding box to get the size and position right - addEvent(wrapper, 'add', applyRadialGradient); - } - - // The fill element's color attribute is broken in IE8 standards mode, so we - // need to set the parent shape's fillcolor attribute instead. - ret = color1; - } - - // Gradients are not supported for VML stroke, return the first color. #722. - } else { - ret = stopColor; - } - - // if the color is an rgba color, split it and add a fill node - // to hold the opacity component - } else if (regexRgba.test(color) && elem.tagName !== 'IMG') { - - colorObject = Color(color); - - markup = ['<', prop, ' opacity="', colorObject.get('a'), '"/>']; - createElement(this.prepVML(markup), null, null, elem); - - ret = colorObject.get('rgb'); - - - } else { - var propNodes = elem.getElementsByTagName(prop); // 'stroke' or 'fill' node - if (propNodes.length) { - propNodes[0].opacity = 1; - propNodes[0].type = 'solid'; - } - ret = color; - } - - return ret; - }, - - /** - * Take a VML string and prepare it for either IE8 or IE6/IE7. - * @param {Array} markup A string array of the VML markup to prepare - */ - prepVML: function (markup) { - var vmlStyle = 'display:inline-block;behavior:url(#default#VML);', - isIE8 = this.isIE8; - - markup = markup.join(''); - - if (isIE8) { // add xmlns and style inline - markup = markup.replace('/>', ' xmlns="urn:schemas-microsoft-com:vml" />'); - if (markup.indexOf('style="') === -1) { - markup = markup.replace('/>', ' style="' + vmlStyle + '" />'); - } else { - markup = markup.replace('style="', 'style="' + vmlStyle); - } - - } else { // add namespace - markup = markup.replace('<', ' 1) { - obj.attr({ - x: x, - y: y, - width: width, - height: height - }); - } - return obj; - }, - - /** - * VML uses a shape for rect to overcome bugs and rotation problems - */ - rect: function (x, y, width, height, r, strokeWidth) { - - if (isObject(x)) { - y = x.y; - width = x.width; - height = x.height; - strokeWidth = x.strokeWidth; - x = x.x; - } - var wrapper = this.symbol('rect'); - wrapper.r = r; - - return wrapper.attr(wrapper.crisp(strokeWidth, x, y, mathMax(width, 0), mathMax(height, 0))); - }, - - /** - * In the VML renderer, each child of an inverted div (group) is inverted - * @param {Object} element - * @param {Object} parentNode - */ - invertChild: function (element, parentNode) { - var parentStyle = parentNode.style; - css(element, { - flip: 'x', - left: pInt(parentStyle.width) - 1, - top: pInt(parentStyle.height) - 1, - rotation: -90 - }); - }, - - /** - * Symbol definitions that override the parent SVG renderer's symbols - * - */ - symbols: { - // VML specific arc function - arc: function (x, y, w, h, options) { - var start = options.start, - end = options.end, - radius = options.r || w || h, - innerRadius = options.innerR, - cosStart = mathCos(start), - sinStart = mathSin(start), - cosEnd = mathCos(end), - sinEnd = mathSin(end), - ret; - - if (end - start === 0) { // no angle, don't show it. - return ['x']; - } - - ret = [ - 'wa', // clockwise arc to - x - radius, // left - y - radius, // top - x + radius, // right - y + radius, // bottom - x + radius * cosStart, // start x - y + radius * sinStart, // start y - x + radius * cosEnd, // end x - y + radius * sinEnd // end y - ]; - - if (options.open && !innerRadius) { - ret.push( - 'e', - M, - x,// - innerRadius, - y// - innerRadius - ); - } - - ret.push( - 'at', // anti clockwise arc to - x - innerRadius, // left - y - innerRadius, // top - x + innerRadius, // right - y + innerRadius, // bottom - x + innerRadius * cosEnd, // start x - y + innerRadius * sinEnd, // start y - x + innerRadius * cosStart, // end x - y + innerRadius * sinStart, // end y - 'x', // finish path - 'e' // close - ); - - ret.isArc = true; - return ret; - - }, - // Add circle symbol path. This performs significantly faster than v:oval. - circle: function (x, y, w, h) { - - return [ - 'wa', // clockwisearcto - x, // left - y, // top - x + w, // right - y + h, // bottom - x + w, // start x - y + h / 2, // start y - x + w, // end x - y + h / 2, // end y - //'x', // finish path - 'e' // close - ]; - }, - /** - * Add rectangle symbol path which eases rotation and omits arcsize problems - * compared to the built-in VML roundrect shape - * - * @param {Number} left Left position - * @param {Number} top Top position - * @param {Number} r Border radius - * @param {Object} options Width and height - */ - - rect: function (left, top, width, height, options) { - - var right = left + width, - bottom = top + height, - ret, - r; - - // No radius, return the more lightweight square - if (!defined(options) || !options.r) { - ret = SVGRenderer.prototype.symbols.square.apply(0, arguments); - - // Has radius add arcs for the corners - } else { - - r = mathMin(options.r, width, height); - ret = [ - M, - left + r, top, - - L, - right - r, top, - 'wa', - right - 2 * r, top, - right, top + 2 * r, - right - r, top, - right, top + r, - - L, - right, bottom - r, - 'wa', - right - 2 * r, bottom - 2 * r, - right, bottom, - right, bottom - r, - right - r, bottom, - - L, - left + r, bottom, - 'wa', - left, bottom - 2 * r, - left + 2 * r, bottom, - left + r, bottom, - left, bottom - r, - - L, - left, top + r, - 'wa', - left, top, - left + 2 * r, top + 2 * r, - left, top + r, - left + r, top, - - - 'x', - 'e' - ]; - } - return ret; - } - } -}; -Highcharts.VMLRenderer = VMLRenderer = function () { - this.init.apply(this, arguments); -}; -VMLRenderer.prototype = merge(SVGRenderer.prototype, VMLRendererExtension); - - // general renderer - Renderer = VMLRenderer; -} - -/* **************************************************************************** - * * - * END OF INTERNET EXPLORER <= 8 SPECIFIC CODE * - * * - *****************************************************************************/ -/* **************************************************************************** - * * - * START OF ANDROID < 3 SPECIFIC CODE. THIS CAN BE REMOVED IF YOU'RE NOT * - * TARGETING THAT SYSTEM. * - * * - *****************************************************************************/ -var CanVGRenderer, - CanVGController; - -if (useCanVG) { - /** - * The CanVGRenderer is empty from start to keep the source footprint small. - * When requested, the CanVGController downloads the rest of the source packaged - * together with the canvg library. - */ - Highcharts.CanVGRenderer = CanVGRenderer = function () { - // Override the global SVG namespace to fake SVG/HTML that accepts CSS - SVG_NS = 'http://www.w3.org/1999/xhtml'; - }; - - /** - * Start with an empty symbols object. This is needed when exporting is used (exporting.src.js will add a few symbols), but - * the implementation from SvgRenderer will not be merged in until first render. - */ - CanVGRenderer.prototype.symbols = {}; - - /** - * Handles on demand download of canvg rendering support. - */ - CanVGController = (function () { - // List of renderering calls - var deferredRenderCalls = []; - - /** - * When downloaded, we are ready to draw deferred charts. - */ - function drawDeferred() { - var callLength = deferredRenderCalls.length, - callIndex; - - // Draw all pending render calls - for (callIndex = 0; callIndex < callLength; callIndex++) { - deferredRenderCalls[callIndex](); - } - // Clear the list - deferredRenderCalls = []; - } - - return { - push: function (func, scriptLocation) { - // Only get the script once - if (deferredRenderCalls.length === 0) { - getScript(scriptLocation, drawDeferred); - } - // Register render call - deferredRenderCalls.push(func); - } - }; - }()); - - Renderer = CanVGRenderer; -} // end CanVGRenderer - -/* **************************************************************************** - * * - * END OF ANDROID < 3 SPECIFIC CODE * - * * - *****************************************************************************/ - -/** - * The Tick class - */ -function Tick(axis, pos, type, noLabel) { - this.axis = axis; - this.pos = pos; - this.type = type || ''; - this.isNew = true; - - if (!type && !noLabel) { - this.addLabel(); - } -} - -Tick.prototype = { - /** - * Write the tick label - */ - addLabel: function () { - var tick = this, - axis = tick.axis, - options = axis.options, - chart = axis.chart, - horiz = axis.horiz, - categories = axis.categories, - names = axis.series[0] && axis.series[0].names, - pos = tick.pos, - labelOptions = options.labels, - str, - tickPositions = axis.tickPositions, - width = (horiz && categories && - !labelOptions.step && !labelOptions.staggerLines && - !labelOptions.rotation && - chart.plotWidth / tickPositions.length) || - (!horiz && (chart.optionsMarginLeft || chart.plotWidth / 2)), // #1580 - isFirst = pos === tickPositions[0], - isLast = pos === tickPositions[tickPositions.length - 1], - css, - attr, - value = categories ? - pick(categories[pos], names && names[pos], pos) : - pos, - label = tick.label, - tickPositionInfo = tickPositions.info, - dateTimeLabelFormat; - - // Set the datetime label format. If a higher rank is set for this position, use that. If not, - // use the general format. - if (axis.isDatetimeAxis && tickPositionInfo) { - dateTimeLabelFormat = options.dateTimeLabelFormats[tickPositionInfo.higherRanks[pos] || tickPositionInfo.unitName]; - } - - // set properties for access in render method - tick.isFirst = isFirst; - tick.isLast = isLast; - - // get the string - str = axis.labelFormatter.call({ - axis: axis, - chart: chart, - isFirst: isFirst, - isLast: isLast, - dateTimeLabelFormat: dateTimeLabelFormat, - value: axis.isLog ? correctFloat(lin2log(value)) : value - }); - - // prepare CSS - css = width && { width: mathMax(1, mathRound(width - 2 * (labelOptions.padding || 10))) + PX }; - css = extend(css, labelOptions.style); - - // first call - if (!defined(label)) { - attr = { - align: labelOptions.align - }; - if (isNumber(labelOptions.rotation)) { - attr.rotation = labelOptions.rotation; - } - tick.label = - defined(str) && labelOptions.enabled ? - chart.renderer.text( - str, - 0, - 0, - labelOptions.useHTML - ) - .attr(attr) - // without position absolute, IE export sometimes is wrong - .css(css) - .add(axis.labelGroup) : - null; - - // update - } else if (label) { - label.attr({ - text: str - }) - .css(css); - } - }, - - /** - * Get the offset height or width of the label - */ - getLabelSize: function () { - var label = this.label, - axis = this.axis; - return label ? - ((this.labelBBox = label.getBBox()))[axis.horiz ? 'height' : 'width'] : - 0; - }, - - /** - * Find how far the labels extend to the right and left of the tick's x position. Used for anti-collision - * detection with overflow logic. - */ - getLabelSides: function () { - var bBox = this.labelBBox, // assume getLabelSize has run at this point - axis = this.axis, - options = axis.options, - labelOptions = options.labels, - width = bBox.width, - leftSide = width * { left: 0, center: 0.5, right: 1 }[labelOptions.align] - labelOptions.x; - - return [-leftSide, width - leftSide]; - }, - - /** - * Handle the label overflow by adjusting the labels to the left and right edge, or - * hide them if they collide into the neighbour label. - */ - handleOverflow: function (index, xy) { - var show = true, - axis = this.axis, - chart = axis.chart, - isFirst = this.isFirst, - isLast = this.isLast, - x = xy.x, - reversed = axis.reversed, - tickPositions = axis.tickPositions; - - if (isFirst || isLast) { - - var sides = this.getLabelSides(), - leftSide = sides[0], - rightSide = sides[1], - plotLeft = chart.plotLeft, - plotRight = plotLeft + axis.len, - neighbour = axis.ticks[tickPositions[index + (isFirst ? 1 : -1)]], - neighbourEdge = neighbour && neighbour.label.xy && neighbour.label.xy.x + neighbour.getLabelSides()[isFirst ? 0 : 1]; - - if ((isFirst && !reversed) || (isLast && reversed)) { - // Is the label spilling out to the left of the plot area? - if (x + leftSide < plotLeft) { - - // Align it to plot left - x = plotLeft - leftSide; - - // Hide it if it now overlaps the neighbour label - if (neighbour && x + rightSide > neighbourEdge) { - show = false; - } - } - - } else { - // Is the label spilling out to the right of the plot area? - if (x + rightSide > plotRight) { - - // Align it to plot right - x = plotRight - rightSide; - - // Hide it if it now overlaps the neighbour label - if (neighbour && x + leftSide < neighbourEdge) { - show = false; - } - - } - } - - // Set the modified x position of the label - xy.x = x; - } - return show; - }, - - /** - * Get the x and y position for ticks and labels - */ - getPosition: function (horiz, pos, tickmarkOffset, old) { - var axis = this.axis, - chart = axis.chart, - cHeight = (old && chart.oldChartHeight) || chart.chartHeight; - - return { - x: horiz ? - axis.translate(pos + tickmarkOffset, null, null, old) + axis.transB : - axis.left + axis.offset + (axis.opposite ? ((old && chart.oldChartWidth) || chart.chartWidth) - axis.right - axis.left : 0), - - y: horiz ? - cHeight - axis.bottom + axis.offset - (axis.opposite ? axis.height : 0) : - cHeight - axis.translate(pos + tickmarkOffset, null, null, old) - axis.transB - }; - - }, - - /** - * Get the x, y position of the tick label - */ - getLabelPosition: function (x, y, label, horiz, labelOptions, tickmarkOffset, index, step) { - var axis = this.axis, - transA = axis.transA, - reversed = axis.reversed, - staggerLines = axis.staggerLines; - - x = x + labelOptions.x - (tickmarkOffset && horiz ? - tickmarkOffset * transA * (reversed ? -1 : 1) : 0); - y = y + labelOptions.y - (tickmarkOffset && !horiz ? - tickmarkOffset * transA * (reversed ? 1 : -1) : 0); - - // Vertically centered - if (!defined(labelOptions.y)) { - y += pInt(label.styles.lineHeight) * 0.9 - label.getBBox().height / 2; - } - - // Correct for staggered labels - if (staggerLines) { - y += (index / (step || 1) % staggerLines) * 16; - } - - return { - x: x, - y: y - }; - }, - - /** - * Extendible method to return the path of the marker - */ - getMarkPath: function (x, y, tickLength, tickWidth, horiz, renderer) { - return renderer.crispLine([ - M, - x, - y, - L, - x + (horiz ? 0 : -tickLength), - y + (horiz ? tickLength : 0) - ], tickWidth); - }, - - /** - * Put everything in place - * - * @param index {Number} - * @param old {Boolean} Use old coordinates to prepare an animation into new position - */ - render: function (index, old, opacity) { - var tick = this, - axis = tick.axis, - options = axis.options, - chart = axis.chart, - renderer = chart.renderer, - horiz = axis.horiz, - type = tick.type, - label = tick.label, - pos = tick.pos, - labelOptions = options.labels, - gridLine = tick.gridLine, - gridPrefix = type ? type + 'Grid' : 'grid', - tickPrefix = type ? type + 'Tick' : 'tick', - gridLineWidth = options[gridPrefix + 'LineWidth'], - gridLineColor = options[gridPrefix + 'LineColor'], - dashStyle = options[gridPrefix + 'LineDashStyle'], - tickLength = options[tickPrefix + 'Length'], - tickWidth = options[tickPrefix + 'Width'] || 0, - tickColor = options[tickPrefix + 'Color'], - tickPosition = options[tickPrefix + 'Position'], - gridLinePath, - mark = tick.mark, - markPath, - step = labelOptions.step, - attribs, - show = true, - tickmarkOffset = axis.tickmarkOffset, - xy = tick.getPosition(horiz, pos, tickmarkOffset, old), - x = xy.x, - y = xy.y, - reverseCrisp = ((horiz && x === axis.pos) || (!horiz && y === axis.pos + axis.len)) ? -1 : 1, // #1480 - staggerLines = axis.staggerLines; - - this.isActive = true; - - // create the grid line - if (gridLineWidth) { - gridLinePath = axis.getPlotLinePath(pos + tickmarkOffset, gridLineWidth * reverseCrisp, old, true); - - if (gridLine === UNDEFINED) { - attribs = { - stroke: gridLineColor, - 'stroke-width': gridLineWidth - }; - if (dashStyle) { - attribs.dashstyle = dashStyle; - } - if (!type) { - attribs.zIndex = 1; - } - if (old) { - attribs.opacity = 0; - } - tick.gridLine = gridLine = - gridLineWidth ? - renderer.path(gridLinePath) - .attr(attribs).add(axis.gridGroup) : - null; - } - - // If the parameter 'old' is set, the current call will be followed - // by another call, therefore do not do any animations this time - if (!old && gridLine && gridLinePath) { - gridLine[tick.isNew ? 'attr' : 'animate']({ - d: gridLinePath, - opacity: opacity - }); - } - } - - // create the tick mark - if (tickWidth && tickLength) { - - // negate the length - if (tickPosition === 'inside') { - tickLength = -tickLength; - } - if (axis.opposite) { - tickLength = -tickLength; - } - - markPath = tick.getMarkPath(x, y, tickLength, tickWidth * reverseCrisp, horiz, renderer); - - if (mark) { // updating - mark.animate({ - d: markPath, - opacity: opacity - }); - } else { // first time - tick.mark = renderer.path( - markPath - ).attr({ - stroke: tickColor, - 'stroke-width': tickWidth, - opacity: opacity - }).add(axis.axisGroup); - } - } - - // the label is created on init - now move it into place - if (label && !isNaN(x)) { - label.xy = xy = tick.getLabelPosition(x, y, label, horiz, labelOptions, tickmarkOffset, index, step); - - // apply show first and show last - if ((tick.isFirst && !pick(options.showFirstLabel, 1)) || - (tick.isLast && !pick(options.showLastLabel, 1))) { - show = false; - - // Handle label overflow and show or hide accordingly - } else if (!staggerLines && horiz && labelOptions.overflow === 'justify' && !tick.handleOverflow(index, xy)) { - show = false; - } - - // apply step - if (step && index % step) { - // show those indices dividable by step - show = false; - } - - // Set the new position, and show or hide - if (show && !isNaN(xy.y)) { - xy.opacity = opacity; - label[tick.isNew ? 'attr' : 'animate'](xy); - tick.isNew = false; - } else { - label.attr('y', -9999); // #1338 - } - } - }, - - /** - * Destructor for the tick prototype - */ - destroy: function () { - destroyObjectProperties(this, this.axis); - } -}; - -/** - * The object wrapper for plot lines and plot bands - * @param {Object} options - */ -function PlotLineOrBand(axis, options) { - this.axis = axis; - - if (options) { - this.options = options; - this.id = options.id; - } -} - -PlotLineOrBand.prototype = { - - /** - * Render the plot line or plot band. If it is already existing, - * move it. - */ - render: function () { - var plotLine = this, - axis = plotLine.axis, - horiz = axis.horiz, - halfPointRange = (axis.pointRange || 0) / 2, - options = plotLine.options, - optionsLabel = options.label, - label = plotLine.label, - width = options.width, - to = options.to, - from = options.from, - isBand = defined(from) && defined(to), - value = options.value, - dashStyle = options.dashStyle, - svgElem = plotLine.svgElem, - path = [], - addEvent, - eventType, - xs, - ys, - x, - y, - color = options.color, - zIndex = options.zIndex, - events = options.events, - attribs, - renderer = axis.chart.renderer; - - // logarithmic conversion - if (axis.isLog) { - from = log2lin(from); - to = log2lin(to); - value = log2lin(value); - } - - // plot line - if (width) { - path = axis.getPlotLinePath(value, width); - attribs = { - stroke: color, - 'stroke-width': width - }; - if (dashStyle) { - attribs.dashstyle = dashStyle; - } - } else if (isBand) { // plot band - - // keep within plot area - from = mathMax(from, axis.min - halfPointRange); - to = mathMin(to, axis.max + halfPointRange); - - path = axis.getPlotBandPath(from, to, options); - attribs = { - fill: color - }; - if (options.borderWidth) { - attribs.stroke = options.borderColor; - attribs['stroke-width'] = options.borderWidth; - } - } else { - return; - } - // zIndex - if (defined(zIndex)) { - attribs.zIndex = zIndex; - } - - // common for lines and bands - if (svgElem) { - if (path) { - svgElem.animate({ - d: path - }, null, svgElem.onGetPath); - } else { - svgElem.hide(); - svgElem.onGetPath = function () { - svgElem.show(); - }; - } - } else if (path && path.length) { - plotLine.svgElem = svgElem = renderer.path(path) - .attr(attribs).add(); - - // events - if (events) { - addEvent = function (eventType) { - svgElem.on(eventType, function (e) { - events[eventType].apply(plotLine, [e]); - }); - }; - for (eventType in events) { - addEvent(eventType); - } - } - } - - // the plot band/line label - if (optionsLabel && defined(optionsLabel.text) && path && path.length && axis.width > 0 && axis.height > 0) { - // apply defaults - optionsLabel = merge({ - align: horiz && isBand && 'center', - x: horiz ? !isBand && 4 : 10, - verticalAlign : !horiz && isBand && 'middle', - y: horiz ? isBand ? 16 : 10 : isBand ? 6 : -4, - rotation: horiz && !isBand && 90 - }, optionsLabel); - - // add the SVG element - if (!label) { - plotLine.label = label = renderer.text( - optionsLabel.text, - 0, - 0 - ) - .attr({ - align: optionsLabel.textAlign || optionsLabel.align, - rotation: optionsLabel.rotation, - zIndex: zIndex - }) - .css(optionsLabel.style) - .add(); - } - - // get the bounding box and align the label - xs = [path[1], path[4], pick(path[6], path[1])]; - ys = [path[2], path[5], pick(path[7], path[2])]; - x = arrayMin(xs); - y = arrayMin(ys); - - label.align(optionsLabel, false, { - x: x, - y: y, - width: arrayMax(xs) - x, - height: arrayMax(ys) - y - }); - label.show(); - - } else if (label) { // move out of sight - label.hide(); - } - - // chainable - return plotLine; - }, - - /** - * Remove the plot line or band - */ - destroy: function () { - var plotLine = this, - axis = plotLine.axis; - - // remove it from the lookup - erase(axis.plotLinesAndBands, plotLine); - - destroyObjectProperties(plotLine, this.axis); - } -}; -/** - * The class for stack items - */ -function StackItem(axis, options, isNegative, x, stackOption, stacking) { - - var inverted = axis.chart.inverted; - - this.axis = axis; - - // Tells if the stack is negative - this.isNegative = isNegative; - - // Save the options to be able to style the label - this.options = options; - - // Save the x value to be able to position the label later - this.x = x; - - // Save the stack option on the series configuration object, and whether to treat it as percent - this.stack = stackOption; - this.percent = stacking === 'percent'; - - // The align options and text align varies on whether the stack is negative and - // if the chart is inverted or not. - // First test the user supplied value, then use the dynamic. - this.alignOptions = { - align: options.align || (inverted ? (isNegative ? 'left' : 'right') : 'center'), - verticalAlign: options.verticalAlign || (inverted ? 'middle' : (isNegative ? 'bottom' : 'top')), - y: pick(options.y, inverted ? 4 : (isNegative ? 14 : -6)), - x: pick(options.x, inverted ? (isNegative ? -6 : 6) : 0) - }; - - this.textAlign = options.textAlign || (inverted ? (isNegative ? 'right' : 'left') : 'center'); -} - -StackItem.prototype = { - destroy: function () { - destroyObjectProperties(this, this.axis); - }, - - /** - * Sets the total of this stack. Should be called when a serie is hidden or shown - * since that will affect the total of other stacks. - */ - setTotal: function (total) { - this.total = total; - this.cum = total; - }, - - /** - * Renders the stack total label and adds it to the stack label group. - */ - render: function (group) { - var options = this.options, - str = options.formatter.call(this); // format the text in the label - - // Change the text to reflect the new total and set visibility to hidden in case the serie is hidden - if (this.label) { - this.label.attr({text: str, visibility: HIDDEN}); - // Create new label - } else { - this.label = - this.axis.chart.renderer.text(str, 0, 0, options.useHTML) // dummy positions, actual position updated with setOffset method in columnseries - .css(options.style) // apply style - .attr({ - align: this.textAlign, // fix the text-anchor - rotation: options.rotation, // rotation - visibility: HIDDEN // hidden until setOffset is called - }) - .add(group); // add to the labels-group - } - }, - - /** - * Sets the offset that the stack has from the x value and repositions the label. - */ - setOffset: function (xOffset, xWidth) { - var stackItem = this, - axis = stackItem.axis, - chart = axis.chart, - inverted = chart.inverted, - neg = this.isNegative, // special treatment is needed for negative stacks - y = axis.translate(this.percent ? 100 : this.total, 0, 0, 0, 1), // stack value translated mapped to chart coordinates - yZero = axis.translate(0), // stack origin - h = mathAbs(y - yZero), // stack height - x = chart.xAxis[0].translate(this.x) + xOffset, // stack x position - plotHeight = chart.plotHeight, - stackBox = { // this is the box for the complete stack - x: inverted ? (neg ? y : y - h) : x, - y: inverted ? plotHeight - x - xWidth : (neg ? (plotHeight - y - h) : plotHeight - y), - width: inverted ? h : xWidth, - height: inverted ? xWidth : h - }, - label = this.label, - alignAttr; - - if (label) { - label.align(this.alignOptions, null, stackBox); // align the label to the box - - // Set visibility (#678) - alignAttr = label.alignAttr; - label.attr({ - visibility: this.options.crop === false || chart.isInsidePlot(alignAttr.x, alignAttr.y) ? - (hasSVG ? 'inherit' : VISIBLE) : - HIDDEN - }); - } - } -}; -/** - * Create a new axis object - * @param {Object} chart - * @param {Object} options - */ -function Axis() { - this.init.apply(this, arguments); -} - -Axis.prototype = { - - /** - * Default options for the X axis - the Y axis has extended defaults - */ - defaultOptions: { - // allowDecimals: null, - // alternateGridColor: null, - // categories: [], - dateTimeLabelFormats: { - millisecond: '%H:%M:%S.%L', - second: '%H:%M:%S', - minute: '%H:%M', - hour: '%H:%M', - day: '%e. %b', - week: '%e. %b', - month: '%b \'%y', - year: '%Y' - }, - endOnTick: false, - gridLineColor: '#C0C0C0', - // gridLineDashStyle: 'solid', - // gridLineWidth: 0, - // reversed: false, - - labels: defaultLabelOptions, - // { step: null }, - lineColor: '#C0D0E0', - lineWidth: 1, - //linkedTo: null, - //max: undefined, - //min: undefined, - minPadding: 0.01, - maxPadding: 0.01, - //minRange: null, - minorGridLineColor: '#E0E0E0', - // minorGridLineDashStyle: null, - minorGridLineWidth: 1, - minorTickColor: '#A0A0A0', - //minorTickInterval: null, - minorTickLength: 2, - minorTickPosition: 'outside', // inside or outside - //minorTickWidth: 0, - //opposite: false, - //offset: 0, - //plotBands: [{ - // events: {}, - // zIndex: 1, - // labels: { align, x, verticalAlign, y, style, rotation, textAlign } - //}], - //plotLines: [{ - // events: {} - // dashStyle: {} - // zIndex: - // labels: { align, x, verticalAlign, y, style, rotation, textAlign } - //}], - //reversed: false, - // showFirstLabel: true, - // showLastLabel: true, - startOfWeek: 1, - startOnTick: false, - tickColor: '#C0D0E0', - //tickInterval: null, - tickLength: 5, - tickmarkPlacement: 'between', // on or between - tickPixelInterval: 100, - tickPosition: 'outside', - tickWidth: 1, - title: { - //text: null, - align: 'middle', // low, middle or high - //margin: 0 for horizontal, 10 for vertical axes, - //rotation: 0, - //side: 'outside', - style: { - color: '#4d759e', - //font: defaultFont.replace('normal', 'bold') - fontWeight: 'bold' - } - //x: 0, - //y: 0 - }, - type: 'linear' // linear, logarithmic or datetime - }, - - /** - * This options set extends the defaultOptions for Y axes - */ - defaultYAxisOptions: { - endOnTick: true, - gridLineWidth: 1, - tickPixelInterval: 72, - showLastLabel: true, - labels: { - align: 'right', - x: -8, - y: 3 - }, - lineWidth: 0, - maxPadding: 0.05, - minPadding: 0.05, - startOnTick: true, - tickWidth: 0, - title: { - rotation: 270, - text: 'Values' - }, - stackLabels: { - enabled: false, - //align: dynamic, - //y: dynamic, - //x: dynamic, - //verticalAlign: dynamic, - //textAlign: dynamic, - //rotation: 0, - formatter: function () { - return this.total; - }, - style: defaultLabelOptions.style - } - }, - - /** - * These options extend the defaultOptions for left axes - */ - defaultLeftAxisOptions: { - labels: { - align: 'right', - x: -8, - y: null - }, - title: { - rotation: 270 - } - }, - - /** - * These options extend the defaultOptions for right axes - */ - defaultRightAxisOptions: { - labels: { - align: 'left', - x: 8, - y: null - }, - title: { - rotation: 90 - } - }, - - /** - * These options extend the defaultOptions for bottom axes - */ - defaultBottomAxisOptions: { - labels: { - align: 'center', - x: 0, - y: 14 - // overflow: undefined, - // staggerLines: null - }, - title: { - rotation: 0 - } - }, - /** - * These options extend the defaultOptions for left axes - */ - defaultTopAxisOptions: { - labels: { - align: 'center', - x: 0, - y: -5 - // overflow: undefined - // staggerLines: null - }, - title: { - rotation: 0 - } - }, - - /** - * Initialize the axis - */ - init: function (chart, userOptions) { - - - var isXAxis = userOptions.isX, - axis = this; - - // Flag, is the axis horizontal - axis.horiz = chart.inverted ? !isXAxis : isXAxis; - - // Flag, isXAxis - axis.isXAxis = isXAxis; - axis.xOrY = isXAxis ? 'x' : 'y'; - - - axis.opposite = userOptions.opposite; // needed in setOptions - axis.side = axis.horiz ? - (axis.opposite ? 0 : 2) : // top : bottom - (axis.opposite ? 1 : 3); // right : left - - axis.setOptions(userOptions); - - - var options = this.options, - type = options.type, - isDatetimeAxis = type === 'datetime'; - - axis.labelFormatter = options.labels.formatter || axis.defaultLabelFormatter; // can be overwritten by dynamic format - - - // Flag, stagger lines or not - axis.staggerLines = axis.horiz && options.labels.staggerLines; - axis.userOptions = userOptions; - - //axis.axisTitleMargin = UNDEFINED,// = options.title.margin, - axis.minPixelPadding = 0; - //axis.ignoreMinPadding = UNDEFINED; // can be set to true by a column or bar series - //axis.ignoreMaxPadding = UNDEFINED; - - axis.chart = chart; - axis.reversed = options.reversed; - axis.zoomEnabled = options.zoomEnabled !== false; - - // Initial categories - axis.categories = options.categories || type === 'category'; - - // Elements - //axis.axisGroup = UNDEFINED; - //axis.gridGroup = UNDEFINED; - //axis.axisTitle = UNDEFINED; - //axis.axisLine = UNDEFINED; - - // Shorthand types - axis.isLog = type === 'logarithmic'; - axis.isDatetimeAxis = isDatetimeAxis; - - // Flag, if axis is linked to another axis - axis.isLinked = defined(options.linkedTo); - // Linked axis. - //axis.linkedParent = UNDEFINED; - - - // Flag if percentage mode - //axis.usePercentage = UNDEFINED; - - - // Tick positions - //axis.tickPositions = UNDEFINED; // array containing predefined positions - // Tick intervals - //axis.tickInterval = UNDEFINED; - //axis.minorTickInterval = UNDEFINED; - - axis.tickmarkOffset = (axis.categories && options.tickmarkPlacement === 'between') ? 0.5 : 0; - - // Major ticks - axis.ticks = {}; - // Minor ticks - axis.minorTicks = {}; - //axis.tickAmount = UNDEFINED; - - // List of plotLines/Bands - axis.plotLinesAndBands = []; - - // Alternate bands - axis.alternateBands = {}; - - // Axis metrics - //axis.left = UNDEFINED; - //axis.top = UNDEFINED; - //axis.width = UNDEFINED; - //axis.height = UNDEFINED; - //axis.bottom = UNDEFINED; - //axis.right = UNDEFINED; - //axis.transA = UNDEFINED; - //axis.transB = UNDEFINED; - //axis.oldTransA = UNDEFINED; - axis.len = 0; - //axis.oldMin = UNDEFINED; - //axis.oldMax = UNDEFINED; - //axis.oldUserMin = UNDEFINED; - //axis.oldUserMax = UNDEFINED; - //axis.oldAxisLength = UNDEFINED; - axis.minRange = axis.userMinRange = options.minRange || options.maxZoom; - axis.range = options.range; - axis.offset = options.offset || 0; - - - // Dictionary for stacks - axis.stacks = {}; - axis._stacksTouched = 0; - - // Min and max in the data - //axis.dataMin = UNDEFINED, - //axis.dataMax = UNDEFINED, - - // The axis range - axis.max = null; - axis.min = null; - - // User set min and max - //axis.userMin = UNDEFINED, - //axis.userMax = UNDEFINED, - - // Run Axis - - var eventType, - events = axis.options.events; - - // Register - if (inArray(axis, chart.axes) === -1) { // don't add it again on Axis.update() - chart.axes.push(axis); - chart[isXAxis ? 'xAxis' : 'yAxis'].push(axis); - } - - axis.series = axis.series || []; // populated by Series - - // inverted charts have reversed xAxes as default - if (chart.inverted && isXAxis && axis.reversed === UNDEFINED) { - axis.reversed = true; - } - - axis.removePlotBand = axis.removePlotBandOrLine; - axis.removePlotLine = axis.removePlotBandOrLine; - - - // register event listeners - for (eventType in events) { - addEvent(axis, eventType, events[eventType]); - } - - // extend logarithmic axis - if (axis.isLog) { - axis.val2lin = log2lin; - axis.lin2val = lin2log; - } - }, - - /** - * Merge and set options - */ - setOptions: function (userOptions) { - this.options = merge( - this.defaultOptions, - this.isXAxis ? {} : this.defaultYAxisOptions, - [this.defaultTopAxisOptions, this.defaultRightAxisOptions, - this.defaultBottomAxisOptions, this.defaultLeftAxisOptions][this.side], - merge( - defaultOptions[this.isXAxis ? 'xAxis' : 'yAxis'], // if set in setOptions (#1053) - userOptions - ) - ); - }, - - /** - * Update the axis with a new options structure - */ - update: function (newOptions, redraw) { - var chart = this.chart; - - newOptions = chart.options[this.xOrY + 'Axis'][this.options.index] = merge(this.userOptions, newOptions); - - this.destroy(); - this._addedPlotLB = false; // #1611 - - this.init(chart, newOptions); - - chart.isDirtyBox = true; - if (pick(redraw, true)) { - chart.redraw(); - } - }, - - /** - * Remove the axis from the chart - */ - remove: function (redraw) { - var chart = this.chart, - key = this.xOrY + 'Axis'; // xAxis or yAxis - - // Remove associated series - each(this.series, function (series) { - series.remove(false); - }); - - // Remove the axis - erase(chart.axes, this); - erase(chart[key], this); - chart.options[key].splice(this.options.index, 1); - this.destroy(); - chart.isDirtyBox = true; - - if (pick(redraw, true)) { - chart.redraw(); - } - }, - - /** - * The default label formatter. The context is a special config object for the label. - */ - defaultLabelFormatter: function () { - var axis = this.axis, - value = this.value, - categories = axis.categories, - dateTimeLabelFormat = this.dateTimeLabelFormat, - numericSymbols = defaultOptions.lang.numericSymbols, - i = numericSymbols && numericSymbols.length, - multi, - ret, - formatOption = axis.options.labels.format, - - // make sure the same symbol is added for all labels on a linear axis - numericSymbolDetector = axis.isLog ? value : axis.tickInterval; - - if (formatOption) { - ret = format(formatOption, this); - - } else if (categories) { - ret = value; - - } else if (dateTimeLabelFormat) { // datetime axis - ret = dateFormat(dateTimeLabelFormat, value); - - } else if (i && numericSymbolDetector >= 1000) { - // Decide whether we should add a numeric symbol like k (thousands) or M (millions). - // If we are to enable this in tooltip or other places as well, we can move this - // logic to the numberFormatter and enable it by a parameter. - while (i-- && ret === UNDEFINED) { - multi = Math.pow(1000, i + 1); - if (numericSymbolDetector >= multi && numericSymbols[i] !== null) { - ret = numberFormat(value / multi, -1) + numericSymbols[i]; - } - } - } - - if (ret === UNDEFINED) { - if (value >= 1000) { // add thousands separators - ret = numberFormat(value, 0); - - } else { // small numbers - ret = numberFormat(value, -1); - } - } - - return ret; - }, - - /** - * Get the minimum and maximum for the series of each axis - */ - getSeriesExtremes: function () { - var axis = this, - chart = axis.chart, - stacks = axis.stacks, - posStack = [], - negStack = [], - stacksTouched = axis._stacksTouched = axis._stacksTouched + 1, - type, - i; - - axis.hasVisibleSeries = false; - - // reset dataMin and dataMax in case we're redrawing - axis.dataMin = axis.dataMax = null; - - // loop through this axis' series - each(axis.series, function (series) { - - if (series.visible || !chart.options.chart.ignoreHiddenSeries) { - - var seriesOptions = series.options, - stacking, - posPointStack, - negPointStack, - stackKey, - stackOption, - negKey, - xData, - yData, - x, - y, - threshold = seriesOptions.threshold, - yDataLength, - activeYData = [], - seriesDataMin, - seriesDataMax, - activeCounter = 0; - - axis.hasVisibleSeries = true; - - // Validate threshold in logarithmic axes - if (axis.isLog && threshold <= 0) { - threshold = seriesOptions.threshold = null; - } - - // Get dataMin and dataMax for X axes - if (axis.isXAxis) { - xData = series.xData; - if (xData.length) { - axis.dataMin = mathMin(pick(axis.dataMin, xData[0]), arrayMin(xData)); - axis.dataMax = mathMax(pick(axis.dataMax, xData[0]), arrayMax(xData)); - } - - // Get dataMin and dataMax for Y axes, as well as handle stacking and processed data - } else { - var isNegative, - pointStack, - key, - cropped = series.cropped, - xExtremes = series.xAxis.getExtremes(), - //findPointRange, - //pointRange, - j, - hasModifyValue = !!series.modifyValue; - - // Handle stacking - stacking = seriesOptions.stacking; - axis.usePercentage = stacking === 'percent'; - - // create a stack for this particular series type - if (stacking) { - stackOption = seriesOptions.stack; - stackKey = series.type + pick(stackOption, ''); - negKey = '-' + stackKey; - series.stackKey = stackKey; // used in translate - - posPointStack = posStack[stackKey] || []; // contains the total values for each x - posStack[stackKey] = posPointStack; - - negPointStack = negStack[negKey] || []; - negStack[negKey] = negPointStack; - } - if (axis.usePercentage) { - axis.dataMin = 0; - axis.dataMax = 99; - } - - // processData can alter series.pointRange, so this goes after - //findPointRange = series.pointRange === null; - - xData = series.processedXData; - yData = series.processedYData; - yDataLength = yData.length; - - // loop over the non-null y values and read them into a local array - for (i = 0; i < yDataLength; i++) { - x = xData[i]; - y = yData[i]; - - // Read stacked values into a stack based on the x value, - // the sign of y and the stack key. Stacking is also handled for null values (#739) - if (stacking) { - isNegative = y < threshold; - pointStack = isNegative ? negPointStack : posPointStack; - key = isNegative ? negKey : stackKey; - - // Set the stack value and y for extremes - if (defined(pointStack[x])) { // we're adding to the stack - pointStack[x] = correctFloat(pointStack[x] + y); - y = [y, pointStack[x]]; // consider both the actual value and the stack (#1376) - - } else { // it's the first point in the stack - pointStack[x] = y; - } - - // add the series - if (!stacks[key]) { - stacks[key] = {}; - } - - // If the StackItem is there, just update the values, - // if not, create one first - if (!stacks[key][x]) { - stacks[key][x] = new StackItem(axis, axis.options.stackLabels, isNegative, x, stackOption, stacking); - } - stacks[key][x].setTotal(pointStack[x]); - stacks[key][x].touched = stacksTouched; - } - - // Handle non null values - if (y !== null && y !== UNDEFINED && (!axis.isLog || (y.length || y > 0))) { - - // general hook, used for Highstock compare values feature - if (hasModifyValue) { - y = series.modifyValue(y); - } - - // For points within the visible range, including the first point outside the - // visible range, consider y extremes - if (series.getExtremesFromAll || cropped || ((xData[i + 1] || x) >= xExtremes.min && - (xData[i - 1] || x) <= xExtremes.max)) { - - j = y.length; - if (j) { // array, like ohlc or range data - while (j--) { - if (y[j] !== null) { - activeYData[activeCounter++] = y[j]; - } - } - } else { - activeYData[activeCounter++] = y; - } - } - } - } - - // Get the dataMin and dataMax so far. If percentage is used, the min and max are - // always 0 and 100. If the length of activeYData is 0, continue with null values. - if (!axis.usePercentage && activeYData.length) { - series.dataMin = seriesDataMin = arrayMin(activeYData); - series.dataMax = seriesDataMax = arrayMax(activeYData); - axis.dataMin = mathMin(pick(axis.dataMin, seriesDataMin), seriesDataMin); - axis.dataMax = mathMax(pick(axis.dataMax, seriesDataMax), seriesDataMax); - } - - // Adjust to threshold - if (defined(threshold)) { - if (axis.dataMin >= threshold) { - axis.dataMin = threshold; - axis.ignoreMinPadding = true; - } else if (axis.dataMax < threshold) { - axis.dataMax = threshold; - axis.ignoreMaxPadding = true; - } - } - } - } - }); - - // Destroy unused stacks (#1044) - for (type in stacks) { - for (i in stacks[type]) { - if (stacks[type][i].touched < stacksTouched) { - stacks[type][i].destroy(); - delete stacks[type][i]; - } - } - } - - }, - - /** - * Translate from axis value to pixel position on the chart, or back - * - */ - translate: function (val, backwards, cvsCoord, old, handleLog, pointPlacementBetween) { - var axis = this, - axisLength = axis.len, - sign = 1, - cvsOffset = 0, - localA = old ? axis.oldTransA : axis.transA, - localMin = old ? axis.oldMin : axis.min, - returnValue, - minPixelPadding = axis.minPixelPadding, - postTranslate = (axis.options.ordinal || (axis.isLog && handleLog)) && axis.lin2val; - - if (!localA) { - localA = axis.transA; - } - - // In vertical axes, the canvas coordinates start from 0 at the top like in - // SVG. - if (cvsCoord) { - sign *= -1; // canvas coordinates inverts the value - cvsOffset = axisLength; - } - - // Handle reversed axis - if (axis.reversed) { - sign *= -1; - cvsOffset -= sign * axisLength; - } - - // From pixels to value - if (backwards) { // reverse translation - - val = val * sign + cvsOffset; - val -= minPixelPadding; - returnValue = val / localA + localMin; // from chart pixel to value - if (postTranslate) { // log and ordinal axes - returnValue = axis.lin2val(returnValue); - } - - // From value to pixels - } else { - if (postTranslate) { // log and ordinal axes - val = axis.val2lin(val); - } - - returnValue = sign * (val - localMin) * localA + cvsOffset + (sign * minPixelPadding) + - (pointPlacementBetween ? localA * axis.pointRange / 2 : 0); - } - - return returnValue; - }, - - /** - * Utility method to translate an axis value to pixel position. - * @param {Number} value A value in terms of axis units - * @param {Boolean} paneCoordinates Whether to return the pixel coordinate relative to the chart - * or just the axis/pane itself. - */ - toPixels: function (value, paneCoordinates) { - return this.translate(value, false, !this.horiz, null, true) + (paneCoordinates ? 0 : this.pos); - }, - - /* - * Utility method to translate a pixel position in to an axis value - * @param {Number} pixel The pixel value coordinate - * @param {Boolean} paneCoordiantes Whether the input pixel is relative to the chart or just the - * axis/pane itself. - */ - toValue: function (pixel, paneCoordinates) { - return this.translate(pixel - (paneCoordinates ? 0 : this.pos), true, !this.horiz, null, true); - }, - - /** - * Create the path for a plot line that goes from the given value on - * this axis, across the plot to the opposite side - * @param {Number} value - * @param {Number} lineWidth Used for calculation crisp line - * @param {Number] old Use old coordinates (for resizing and rescaling) - */ - getPlotLinePath: function (value, lineWidth, old, force) { - var axis = this, - chart = axis.chart, - axisLeft = axis.left, - axisTop = axis.top, - x1, - y1, - x2, - y2, - translatedValue = axis.translate(value, null, null, old), - cHeight = (old && chart.oldChartHeight) || chart.chartHeight, - cWidth = (old && chart.oldChartWidth) || chart.chartWidth, - skip, - transB = axis.transB; - - x1 = x2 = mathRound(translatedValue + transB); - y1 = y2 = mathRound(cHeight - translatedValue - transB); - - if (isNaN(translatedValue)) { // no min or max - skip = true; - - } else if (axis.horiz) { - y1 = axisTop; - y2 = cHeight - axis.bottom; - if (x1 < axisLeft || x1 > axisLeft + axis.width) { - skip = true; - } - } else { - x1 = axisLeft; - x2 = cWidth - axis.right; - - if (y1 < axisTop || y1 > axisTop + axis.height) { - skip = true; - } - } - return skip && !force ? - null : - chart.renderer.crispLine([M, x1, y1, L, x2, y2], lineWidth || 0); - }, - - /** - * Create the path for a plot band - */ - getPlotBandPath: function (from, to) { - - var toPath = this.getPlotLinePath(to), - path = this.getPlotLinePath(from); - - if (path && toPath) { - path.push( - toPath[4], - toPath[5], - toPath[1], - toPath[2] - ); - } else { // outside the axis area - path = null; - } - - return path; - }, - - /** - * Set the tick positions of a linear axis to round values like whole tens or every five. - */ - getLinearTickPositions: function (tickInterval, min, max) { - var pos, - lastPos, - roundedMin = correctFloat(mathFloor(min / tickInterval) * tickInterval), - roundedMax = correctFloat(mathCeil(max / tickInterval) * tickInterval), - tickPositions = []; - - // Populate the intermediate values - pos = roundedMin; - while (pos <= roundedMax) { - - // Place the tick on the rounded value - tickPositions.push(pos); - - // Always add the raw tickInterval, not the corrected one. - pos = correctFloat(pos + tickInterval); - - // If the interval is not big enough in the current min - max range to actually increase - // the loop variable, we need to break out to prevent endless loop. Issue #619 - if (pos === lastPos) { - break; - } - - // Record the last value - lastPos = pos; - } - return tickPositions; - }, - - /** - * Set the tick positions of a logarithmic axis - */ - getLogTickPositions: function (interval, min, max, minor) { - var axis = this, - options = axis.options, - axisLength = axis.len, - // Since we use this method for both major and minor ticks, - // use a local variable and return the result - positions = []; - - // Reset - if (!minor) { - axis._minorAutoInterval = null; - } - - // First case: All ticks fall on whole logarithms: 1, 10, 100 etc. - if (interval >= 0.5) { - interval = mathRound(interval); - positions = axis.getLinearTickPositions(interval, min, max); - - // Second case: We need intermediary ticks. For example - // 1, 2, 4, 6, 8, 10, 20, 40 etc. - } else if (interval >= 0.08) { - var roundedMin = mathFloor(min), - intermediate, - i, - j, - len, - pos, - lastPos, - break2; - - if (interval > 0.3) { - intermediate = [1, 2, 4]; - } else if (interval > 0.15) { // 0.2 equals five minor ticks per 1, 10, 100 etc - intermediate = [1, 2, 4, 6, 8]; - } else { // 0.1 equals ten minor ticks per 1, 10, 100 etc - intermediate = [1, 2, 3, 4, 5, 6, 7, 8, 9]; - } - - for (i = roundedMin; i < max + 1 && !break2; i++) { - len = intermediate.length; - for (j = 0; j < len && !break2; j++) { - pos = log2lin(lin2log(i) * intermediate[j]); - - if (pos > min && (!minor || lastPos <= max)) { // #1670 - positions.push(lastPos); - } - - if (lastPos > max) { - break2 = true; - } - lastPos = pos; - } - } - - // Third case: We are so deep in between whole logarithmic values that - // we might as well handle the tick positions like a linear axis. For - // example 1.01, 1.02, 1.03, 1.04. - } else { - var realMin = lin2log(min), - realMax = lin2log(max), - tickIntervalOption = options[minor ? 'minorTickInterval' : 'tickInterval'], - filteredTickIntervalOption = tickIntervalOption === 'auto' ? null : tickIntervalOption, - tickPixelIntervalOption = options.tickPixelInterval / (minor ? 5 : 1), - totalPixelLength = minor ? axisLength / axis.tickPositions.length : axisLength; - - interval = pick( - filteredTickIntervalOption, - axis._minorAutoInterval, - (realMax - realMin) * tickPixelIntervalOption / (totalPixelLength || 1) - ); - - interval = normalizeTickInterval( - interval, - null, - math.pow(10, mathFloor(math.log(interval) / math.LN10)) - ); - - positions = map(axis.getLinearTickPositions( - interval, - realMin, - realMax - ), log2lin); - - if (!minor) { - axis._minorAutoInterval = interval / 5; - } - } - - // Set the axis-level tickInterval variable - if (!minor) { - axis.tickInterval = interval; - } - return positions; - }, - - /** - * Return the minor tick positions. For logarithmic axes, reuse the same logic - * as for major ticks. - */ - getMinorTickPositions: function () { - var axis = this, - options = axis.options, - tickPositions = axis.tickPositions, - minorTickInterval = axis.minorTickInterval, - minorTickPositions = [], - pos, - i, - len; - - if (axis.isLog) { - len = tickPositions.length; - for (i = 1; i < len; i++) { - minorTickPositions = minorTickPositions.concat( - axis.getLogTickPositions(minorTickInterval, tickPositions[i - 1], tickPositions[i], true) - ); - } - } else if (axis.isDatetimeAxis && options.minorTickInterval === 'auto') { // #1314 - minorTickPositions = minorTickPositions.concat( - getTimeTicks( - normalizeTimeTickInterval(minorTickInterval), - axis.min, - axis.max, - options.startOfWeek - ) - ); - if (minorTickPositions[0] < axis.min) { - minorTickPositions.shift(); - } - } else { - for (pos = axis.min + (tickPositions[0] - axis.min) % minorTickInterval; pos <= axis.max; pos += minorTickInterval) { - minorTickPositions.push(pos); - } - } - return minorTickPositions; - }, - - /** - * Adjust the min and max for the minimum range. Keep in mind that the series data is - * not yet processed, so we don't have information on data cropping and grouping, or - * updated axis.pointRange or series.pointRange. The data can't be processed until - * we have finally established min and max. - */ - adjustForMinRange: function () { - var axis = this, - options = axis.options, - min = axis.min, - max = axis.max, - zoomOffset, - spaceAvailable = axis.dataMax - axis.dataMin >= axis.minRange, - closestDataRange, - i, - distance, - xData, - loopLength, - minArgs, - maxArgs; - - // Set the automatic minimum range based on the closest point distance - if (axis.isXAxis && axis.minRange === UNDEFINED && !axis.isLog) { - - if (defined(options.min) || defined(options.max)) { - axis.minRange = null; // don't do this again - - } else { - - // Find the closest distance between raw data points, as opposed to - // closestPointRange that applies to processed points (cropped and grouped) - each(axis.series, function (series) { - xData = series.xData; - loopLength = series.xIncrement ? 1 : xData.length - 1; - for (i = loopLength; i > 0; i--) { - distance = xData[i] - xData[i - 1]; - if (closestDataRange === UNDEFINED || distance < closestDataRange) { - closestDataRange = distance; - } - } - }); - axis.minRange = mathMin(closestDataRange * 5, axis.dataMax - axis.dataMin); - } - } - - // if minRange is exceeded, adjust - if (max - min < axis.minRange) { - var minRange = axis.minRange; - zoomOffset = (minRange - max + min) / 2; - - // if min and max options have been set, don't go beyond it - minArgs = [min - zoomOffset, pick(options.min, min - zoomOffset)]; - if (spaceAvailable) { // if space is available, stay within the data range - minArgs[2] = axis.dataMin; - } - min = arrayMax(minArgs); - - maxArgs = [min + minRange, pick(options.max, min + minRange)]; - if (spaceAvailable) { // if space is availabe, stay within the data range - maxArgs[2] = axis.dataMax; - } - - max = arrayMin(maxArgs); - - // now if the max is adjusted, adjust the min back - if (max - min < minRange) { - minArgs[0] = max - minRange; - minArgs[1] = pick(options.min, max - minRange); - min = arrayMax(minArgs); - } - } - - // Record modified extremes - axis.min = min; - axis.max = max; - }, - - /** - * Update translation information - */ - setAxisTranslation: function (saveOld) { - var axis = this, - range = axis.max - axis.min, - pointRange = 0, - closestPointRange, - minPointOffset = 0, - pointRangePadding = 0, - linkedParent = axis.linkedParent, - ordinalCorrection, - transA = axis.transA; - - // adjust translation for padding - if (axis.isXAxis) { - if (linkedParent) { - minPointOffset = linkedParent.minPointOffset; - pointRangePadding = linkedParent.pointRangePadding; - - } else { - each(axis.series, function (series) { - var seriesPointRange = series.pointRange, - pointPlacement = series.options.pointPlacement, - seriesClosestPointRange = series.closestPointRange; - - if (seriesPointRange > range) { // #1446 - seriesPointRange = 0; - } - pointRange = mathMax(pointRange, seriesPointRange); - - // minPointOffset is the value padding to the left of the axis in order to make - // room for points with a pointRange, typically columns. When the pointPlacement option - // is 'between' or 'on', this padding does not apply. - minPointOffset = mathMax( - minPointOffset, - pointPlacement ? 0 : seriesPointRange / 2 - ); - - // Determine the total padding needed to the length of the axis to make room for the - // pointRange. If the series' pointPlacement is 'on', no padding is added. - pointRangePadding = mathMax( - pointRangePadding, - pointPlacement === 'on' ? 0 : seriesPointRange - ); - - // Set the closestPointRange - if (!series.noSharedTooltip && defined(seriesClosestPointRange)) { - closestPointRange = defined(closestPointRange) ? - mathMin(closestPointRange, seriesClosestPointRange) : - seriesClosestPointRange; - } - }); - } - - // Record minPointOffset and pointRangePadding - ordinalCorrection = axis.ordinalSlope ? axis.ordinalSlope / closestPointRange : 1; // #988 - axis.minPointOffset = minPointOffset = minPointOffset * ordinalCorrection; - axis.pointRangePadding = pointRangePadding = pointRangePadding * ordinalCorrection; - - // pointRange means the width reserved for each point, like in a column chart - axis.pointRange = mathMin(pointRange, range); - - // closestPointRange means the closest distance between points. In columns - // it is mostly equal to pointRange, but in lines pointRange is 0 while closestPointRange - // is some other value - axis.closestPointRange = closestPointRange; - } - - // Secondary values - if (saveOld) { - axis.oldTransA = transA; - } - axis.translationSlope = axis.transA = transA = axis.len / ((range + pointRangePadding) || 1); - axis.transB = axis.horiz ? axis.left : axis.bottom; // translation addend - axis.minPixelPadding = transA * minPointOffset; - }, - - /** - * Set the tick positions to round values and optionally extend the extremes - * to the nearest tick - */ - setTickPositions: function (secondPass) { - var axis = this, - chart = axis.chart, - options = axis.options, - isLog = axis.isLog, - isDatetimeAxis = axis.isDatetimeAxis, - isXAxis = axis.isXAxis, - isLinked = axis.isLinked, - tickPositioner = axis.options.tickPositioner, - magnitude, - maxPadding = options.maxPadding, - minPadding = options.minPadding, - length, - linkedParentExtremes, - tickIntervalOption = options.tickInterval, - minTickIntervalOption = options.minTickInterval, - tickPixelIntervalOption = options.tickPixelInterval, - tickPositions, - categories = axis.categories; - - // linked axis gets the extremes from the parent axis - if (isLinked) { - axis.linkedParent = chart[isXAxis ? 'xAxis' : 'yAxis'][options.linkedTo]; - linkedParentExtremes = axis.linkedParent.getExtremes(); - axis.min = pick(linkedParentExtremes.min, linkedParentExtremes.dataMin); - axis.max = pick(linkedParentExtremes.max, linkedParentExtremes.dataMax); - if (options.type !== axis.linkedParent.options.type) { - error(11, 1); // Can't link axes of different type - } - } else { // initial min and max from the extreme data values - axis.min = pick(axis.userMin, options.min, axis.dataMin); - axis.max = pick(axis.userMax, options.max, axis.dataMax); - } - - if (isLog) { - if (!secondPass && mathMin(axis.min, pick(axis.dataMin, axis.min)) <= 0) { // #978 - error(10, 1); // Can't plot negative values on log axis - } - axis.min = correctFloat(log2lin(axis.min)); // correctFloat cures #934 - axis.max = correctFloat(log2lin(axis.max)); - } - - // handle zoomed range - if (axis.range) { - axis.userMin = axis.min = mathMax(axis.min, axis.max - axis.range); // #618 - axis.userMax = axis.max; - if (secondPass) { - axis.range = null; // don't use it when running setExtremes - } - } - - // Hook for adjusting this.min and this.max. Used by bubble series. - if (axis.beforePadding) { - axis.beforePadding(); - } - - // adjust min and max for the minimum range - axis.adjustForMinRange(); - - // Pad the values to get clear of the chart's edges. To avoid tickInterval taking the padding - // into account, we do this after computing tick interval (#1337). - if (!categories && !axis.usePercentage && !isLinked && defined(axis.min) && defined(axis.max)) { - length = axis.max - axis.min; - if (length) { - if (!defined(options.min) && !defined(axis.userMin) && minPadding && (axis.dataMin < 0 || !axis.ignoreMinPadding)) { - axis.min -= length * minPadding; - } - if (!defined(options.max) && !defined(axis.userMax) && maxPadding && (axis.dataMax > 0 || !axis.ignoreMaxPadding)) { - axis.max += length * maxPadding; - } - } - } - - // get tickInterval - if (axis.min === axis.max || axis.min === undefined || axis.max === undefined) { - axis.tickInterval = 1; - } else if (isLinked && !tickIntervalOption && - tickPixelIntervalOption === axis.linkedParent.options.tickPixelInterval) { - axis.tickInterval = axis.linkedParent.tickInterval; - } else { - axis.tickInterval = pick( - tickIntervalOption, - categories ? // for categoried axis, 1 is default, for linear axis use tickPix - 1 : - (axis.max - axis.min) * tickPixelIntervalOption / (axis.len || 1) - ); - } - - // Now we're finished detecting min and max, crop and group series data. This - // is in turn needed in order to find tick positions in ordinal axes. - if (isXAxis && !secondPass) { - each(axis.series, function (series) { - series.processData(axis.min !== axis.oldMin || axis.max !== axis.oldMax); - }); - } - - // set the translation factor used in translate function - axis.setAxisTranslation(true); - - // hook for ordinal axes and radial axes - if (axis.beforeSetTickPositions) { - axis.beforeSetTickPositions(); - } - - // hook for extensions, used in Highstock ordinal axes - if (axis.postProcessTickInterval) { - axis.tickInterval = axis.postProcessTickInterval(axis.tickInterval); - } - - // Before normalizing the tick interval, handle minimum tick interval. This applies only if tickInterval is not defined. - if (!tickIntervalOption && axis.tickInterval < minTickIntervalOption) { - axis.tickInterval = minTickIntervalOption; - } - - // for linear axes, get magnitude and normalize the interval - if (!isDatetimeAxis && !isLog) { // linear - magnitude = math.pow(10, mathFloor(math.log(axis.tickInterval) / math.LN10)); - if (!tickIntervalOption) { - axis.tickInterval = normalizeTickInterval(axis.tickInterval, null, magnitude, options); - } - } - - // get minorTickInterval - axis.minorTickInterval = options.minorTickInterval === 'auto' && axis.tickInterval ? - axis.tickInterval / 5 : options.minorTickInterval; - - // find the tick positions - axis.tickPositions = tickPositions = options.tickPositions ? - [].concat(options.tickPositions) : // Work on a copy (#1565) - (tickPositioner && tickPositioner.apply(axis, [axis.min, axis.max])); - if (!tickPositions) { - if (isDatetimeAxis) { - tickPositions = (axis.getNonLinearTimeTicks || getTimeTicks)( - normalizeTimeTickInterval(axis.tickInterval, options.units), - axis.min, - axis.max, - options.startOfWeek, - axis.ordinalPositions, - axis.closestPointRange, - true - ); - } else if (isLog) { - tickPositions = axis.getLogTickPositions(axis.tickInterval, axis.min, axis.max); - } else { - tickPositions = axis.getLinearTickPositions(axis.tickInterval, axis.min, axis.max); - } - axis.tickPositions = tickPositions; - } - - if (!isLinked) { - - // reset min/max or remove extremes based on start/end on tick - var roundedMin = tickPositions[0], - roundedMax = tickPositions[tickPositions.length - 1], - minPointOffset = axis.minPointOffset || 0, - singlePad; - - if (options.startOnTick) { - axis.min = roundedMin; - } else if (axis.min - minPointOffset > roundedMin) { - tickPositions.shift(); - } - - if (options.endOnTick) { - axis.max = roundedMax; - } else if (axis.max + minPointOffset < roundedMax) { - tickPositions.pop(); - } - - // When there is only one point, or all points have the same value on this axis, then min - // and max are equal and tickPositions.length is 1. In this case, add some padding - // in order to center the point, but leave it with one tick. #1337. - if (tickPositions.length === 1) { - singlePad = 0.001; // The lowest possible number to avoid extra padding on columns - axis.min -= singlePad; - axis.max += singlePad; - } - } - }, - - /** - * Set the max ticks of either the x and y axis collection - */ - setMaxTicks: function () { - - var chart = this.chart, - maxTicks = chart.maxTicks || {}, - tickPositions = this.tickPositions, - key = this._maxTicksKey = [this.xOrY, this.pos, this.len].join('-'); - - if (!this.isLinked && !this.isDatetimeAxis && tickPositions && tickPositions.length > (maxTicks[key] || 0) && this.options.alignTicks !== false) { - maxTicks[key] = tickPositions.length; - } - chart.maxTicks = maxTicks; - }, - - /** - * When using multiple axes, adjust the number of ticks to match the highest - * number of ticks in that group - */ - adjustTickAmount: function () { - var axis = this, - chart = axis.chart, - key = axis._maxTicksKey, - tickPositions = axis.tickPositions, - maxTicks = chart.maxTicks; - - if (maxTicks && maxTicks[key] && !axis.isDatetimeAxis && !axis.categories && !axis.isLinked && axis.options.alignTicks !== false) { // only apply to linear scale - var oldTickAmount = axis.tickAmount, - calculatedTickAmount = tickPositions.length, - tickAmount; - - // set the axis-level tickAmount to use below - axis.tickAmount = tickAmount = maxTicks[key]; - - if (calculatedTickAmount < tickAmount) { - while (tickPositions.length < tickAmount) { - tickPositions.push(correctFloat( - tickPositions[tickPositions.length - 1] + axis.tickInterval - )); - } - axis.transA *= (calculatedTickAmount - 1) / (tickAmount - 1); - axis.max = tickPositions[tickPositions.length - 1]; - - } - if (defined(oldTickAmount) && tickAmount !== oldTickAmount) { - axis.isDirty = true; - } - } - }, - - /** - * Set the scale based on data min and max, user set min and max or options - * - */ - setScale: function () { - var axis = this, - stacks = axis.stacks, - type, - i, - isDirtyData, - isDirtyAxisLength; - - axis.oldMin = axis.min; - axis.oldMax = axis.max; - axis.oldAxisLength = axis.len; - - // set the new axisLength - axis.setAxisSize(); - //axisLength = horiz ? axisWidth : axisHeight; - isDirtyAxisLength = axis.len !== axis.oldAxisLength; - - // is there new data? - each(axis.series, function (series) { - if (series.isDirtyData || series.isDirty || - series.xAxis.isDirty) { // when x axis is dirty, we need new data extremes for y as well - isDirtyData = true; - } - }); - - // do we really need to go through all this? - if (isDirtyAxisLength || isDirtyData || axis.isLinked || axis.forceRedraw || - axis.userMin !== axis.oldUserMin || axis.userMax !== axis.oldUserMax) { - - axis.forceRedraw = false; - - // get data extremes if needed - axis.getSeriesExtremes(); - - // get fixed positions based on tickInterval - axis.setTickPositions(); - - // record old values to decide whether a rescale is necessary later on (#540) - axis.oldUserMin = axis.userMin; - axis.oldUserMax = axis.userMax; - - // Mark as dirty if it is not already set to dirty and extremes have changed. #595. - if (!axis.isDirty) { - axis.isDirty = isDirtyAxisLength || axis.min !== axis.oldMin || axis.max !== axis.oldMax; - } - } - - - // reset stacks - if (!axis.isXAxis) { - for (type in stacks) { - for (i in stacks[type]) { - stacks[type][i].cum = stacks[type][i].total; - } - } - } - - // Set the maximum tick amount - axis.setMaxTicks(); - }, - - /** - * Set the extremes and optionally redraw - * @param {Number} newMin - * @param {Number} newMax - * @param {Boolean} redraw - * @param {Boolean|Object} animation Whether to apply animation, and optionally animation - * configuration - * @param {Object} eventArguments - * - */ - setExtremes: function (newMin, newMax, redraw, animation, eventArguments) { - var axis = this, - chart = axis.chart; - - redraw = pick(redraw, true); // defaults to true - - // Extend the arguments with min and max - eventArguments = extend(eventArguments, { - min: newMin, - max: newMax - }); - - // Fire the event - fireEvent(axis, 'setExtremes', eventArguments, function () { // the default event handler - - axis.userMin = newMin; - axis.userMax = newMax; - - // Mark for running afterSetExtremes - axis.isDirtyExtremes = true; - - // redraw - if (redraw) { - chart.redraw(animation); - } - }); - }, - - /** - * Overridable method for zooming chart. Pulled out in a separate method to allow overriding - * in stock charts. - */ - zoom: function (newMin, newMax) { - - // Prevent pinch zooming out of range - if (!this.allowZoomOutside) { - if (newMin <= this.dataMin) { - newMin = UNDEFINED; - } - if (newMax >= this.dataMax) { - newMax = UNDEFINED; - } - } - - // In full view, displaying the reset zoom button is not required - this.displayBtn = newMin !== UNDEFINED || newMax !== UNDEFINED; - - // Do it - this.setExtremes( - newMin, - newMax, - false, - UNDEFINED, - { trigger: 'zoom' } - ); - return true; - }, - - /** - * Update the axis metrics - */ - setAxisSize: function () { - var chart = this.chart, - options = this.options, - offsetLeft = options.offsetLeft || 0, - offsetRight = options.offsetRight || 0, - horiz = this.horiz, - width, - height, - top, - left; - - // Expose basic values to use in Series object and navigator - this.left = left = pick(options.left, chart.plotLeft + offsetLeft); - this.top = top = pick(options.top, chart.plotTop); - this.width = width = pick(options.width, chart.plotWidth - offsetLeft + offsetRight); - this.height = height = pick(options.height, chart.plotHeight); - this.bottom = chart.chartHeight - height - top; - this.right = chart.chartWidth - width - left; - - // Direction agnostic properties - this.len = mathMax(horiz ? width : height, 0); // mathMax fixes #905 - this.pos = horiz ? left : top; // distance from SVG origin - }, - - /** - * Get the actual axis extremes - */ - getExtremes: function () { - var axis = this, - isLog = axis.isLog; - - return { - min: isLog ? correctFloat(lin2log(axis.min)) : axis.min, - max: isLog ? correctFloat(lin2log(axis.max)) : axis.max, - dataMin: axis.dataMin, - dataMax: axis.dataMax, - userMin: axis.userMin, - userMax: axis.userMax - }; - }, - - /** - * Get the zero plane either based on zero or on the min or max value. - * Used in bar and area plots - */ - getThreshold: function (threshold) { - var axis = this, - isLog = axis.isLog; - - var realMin = isLog ? lin2log(axis.min) : axis.min, - realMax = isLog ? lin2log(axis.max) : axis.max; - - if (realMin > threshold || threshold === null) { - threshold = realMin; - } else if (realMax < threshold) { - threshold = realMax; - } - - return axis.translate(threshold, 0, 1, 0, 1); - }, - - addPlotBand: function (options) { - this.addPlotBandOrLine(options, 'plotBands'); - }, - - addPlotLine: function (options) { - this.addPlotBandOrLine(options, 'plotLines'); - }, - - /** - * Add a plot band or plot line after render time - * - * @param options {Object} The plotBand or plotLine configuration object - */ - addPlotBandOrLine: function (options, coll) { - var obj = new PlotLineOrBand(this, options).render(), - userOptions = this.userOptions; - - // Add it to the user options for exporting and Axis.update - if (coll) { - userOptions[coll] = userOptions[coll] || []; - userOptions[coll].push(options); - } - - this.plotLinesAndBands.push(obj); - - return obj; - }, - - /** - * Render the tick labels to a preliminary position to get their sizes - */ - getOffset: function () { - var axis = this, - chart = axis.chart, - renderer = chart.renderer, - options = axis.options, - tickPositions = axis.tickPositions, - ticks = axis.ticks, - horiz = axis.horiz, - side = axis.side, - invertedSide = chart.inverted ? [1, 0, 3, 2][side] : side, - hasData, - showAxis, - titleOffset = 0, - titleOffsetOption, - titleMargin = 0, - axisTitleOptions = options.title, - labelOptions = options.labels, - labelOffset = 0, // reset - axisOffset = chart.axisOffset, - clipOffset = chart.clipOffset, - directionFactor = [-1, 1, 1, -1][side], - n; - - // For reuse in Axis.render - axis.hasData = hasData = (axis.hasVisibleSeries || (defined(axis.min) && defined(axis.max) && !!tickPositions)); - axis.showAxis = showAxis = hasData || pick(options.showEmpty, true); - - // Create the axisGroup and gridGroup elements on first iteration - if (!axis.axisGroup) { - axis.gridGroup = renderer.g('grid') - .attr({ zIndex: options.gridZIndex || 1 }) - .add(); - axis.axisGroup = renderer.g('axis') - .attr({ zIndex: options.zIndex || 2 }) - .add(); - axis.labelGroup = renderer.g('axis-labels') - .attr({ zIndex: labelOptions.zIndex || 7 }) - .add(); - } - - if (hasData || axis.isLinked) { - each(tickPositions, function (pos) { - if (!ticks[pos]) { - ticks[pos] = new Tick(axis, pos); - } else { - ticks[pos].addLabel(); // update labels depending on tick interval - } - - }); - - each(tickPositions, function (pos) { - // left side must be align: right and right side must have align: left for labels - if (side === 0 || side === 2 || { 1: 'left', 3: 'right' }[side] === labelOptions.align) { - - // get the highest offset - labelOffset = mathMax( - ticks[pos].getLabelSize(), - labelOffset - ); - } - - }); - - if (axis.staggerLines) { - labelOffset += (axis.staggerLines - 1) * 16; - } - - } else { // doesn't have data - for (n in ticks) { - ticks[n].destroy(); - delete ticks[n]; - } - } - - if (axisTitleOptions && axisTitleOptions.text && axisTitleOptions.enabled !== false) { - if (!axis.axisTitle) { - axis.axisTitle = renderer.text( - axisTitleOptions.text, - 0, - 0, - axisTitleOptions.useHTML - ) - .attr({ - zIndex: 7, - rotation: axisTitleOptions.rotation || 0, - align: - axisTitleOptions.textAlign || - { low: 'left', middle: 'center', high: 'right' }[axisTitleOptions.align] - }) - .css(axisTitleOptions.style) - .add(axis.axisGroup); - axis.axisTitle.isNew = true; - } - - if (showAxis) { - titleOffset = axis.axisTitle.getBBox()[horiz ? 'height' : 'width']; - titleMargin = pick(axisTitleOptions.margin, horiz ? 5 : 10); - titleOffsetOption = axisTitleOptions.offset; - } - - // hide or show the title depending on whether showEmpty is set - axis.axisTitle[showAxis ? 'show' : 'hide'](); - } - - // handle automatic or user set offset - axis.offset = directionFactor * pick(options.offset, axisOffset[side]); - - axis.axisTitleMargin = - pick(titleOffsetOption, - labelOffset + titleMargin + - (side !== 2 && labelOffset && directionFactor * options.labels[horiz ? 'y' : 'x']) - ); - - axisOffset[side] = mathMax( - axisOffset[side], - axis.axisTitleMargin + titleOffset + directionFactor * axis.offset - ); - clipOffset[invertedSide] = mathMax(clipOffset[invertedSide], options.lineWidth); - - }, - - /** - * Get the path for the axis line - */ - getLinePath: function (lineWidth) { - var chart = this.chart, - opposite = this.opposite, - offset = this.offset, - horiz = this.horiz, - lineLeft = this.left + (opposite ? this.width : 0) + offset, - lineTop = chart.chartHeight - this.bottom - (opposite ? this.height : 0) + offset; - - this.lineTop = lineTop; // used by flag series - if (!opposite) { - lineWidth *= -1; // crispify the other way - #1480 - } - - return chart.renderer.crispLine([ - M, - horiz ? - this.left : - lineLeft, - horiz ? - lineTop : - this.top, - L, - horiz ? - chart.chartWidth - this.right : - lineLeft, - horiz ? - lineTop : - chart.chartHeight - this.bottom - ], lineWidth); - }, - - /** - * Position the title - */ - getTitlePosition: function () { - // compute anchor points for each of the title align options - var horiz = this.horiz, - axisLeft = this.left, - axisTop = this.top, - axisLength = this.len, - axisTitleOptions = this.options.title, - margin = horiz ? axisLeft : axisTop, - opposite = this.opposite, - offset = this.offset, - fontSize = pInt(axisTitleOptions.style.fontSize || 12), - - // the position in the length direction of the axis - alongAxis = { - low: margin + (horiz ? 0 : axisLength), - middle: margin + axisLength / 2, - high: margin + (horiz ? axisLength : 0) - }[axisTitleOptions.align], - - // the position in the perpendicular direction of the axis - offAxis = (horiz ? axisTop + this.height : axisLeft) + - (horiz ? 1 : -1) * // horizontal axis reverses the margin - (opposite ? -1 : 1) * // so does opposite axes - this.axisTitleMargin + - (this.side === 2 ? fontSize : 0); - - return { - x: horiz ? - alongAxis : - offAxis + (opposite ? this.width : 0) + offset + - (axisTitleOptions.x || 0), // x - y: horiz ? - offAxis - (opposite ? this.height : 0) + offset : - alongAxis + (axisTitleOptions.y || 0) // y - }; - }, - - /** - * Render the axis - */ - render: function () { - var axis = this, - chart = axis.chart, - renderer = chart.renderer, - options = axis.options, - isLog = axis.isLog, - isLinked = axis.isLinked, - tickPositions = axis.tickPositions, - axisTitle = axis.axisTitle, - stacks = axis.stacks, - ticks = axis.ticks, - minorTicks = axis.minorTicks, - alternateBands = axis.alternateBands, - stackLabelOptions = options.stackLabels, - alternateGridColor = options.alternateGridColor, - tickmarkOffset = axis.tickmarkOffset, - lineWidth = options.lineWidth, - linePath, - hasRendered = chart.hasRendered, - slideInTicks = hasRendered && defined(axis.oldMin) && !isNaN(axis.oldMin), - hasData = axis.hasData, - showAxis = axis.showAxis, - from, - to; - - // Mark all elements inActive before we go over and mark the active ones - each([ticks, minorTicks, alternateBands], function (coll) { - var pos; - for (pos in coll) { - coll[pos].isActive = false; - } - }); - - // If the series has data draw the ticks. Else only the line and title - if (hasData || isLinked) { - - // minor ticks - if (axis.minorTickInterval && !axis.categories) { - each(axis.getMinorTickPositions(), function (pos) { - if (!minorTicks[pos]) { - minorTicks[pos] = new Tick(axis, pos, 'minor'); - } - - // render new ticks in old position - if (slideInTicks && minorTicks[pos].isNew) { - minorTicks[pos].render(null, true); - } - - minorTicks[pos].render(null, false, 1); - }); - } - - // Major ticks. Pull out the first item and render it last so that - // we can get the position of the neighbour label. #808. - if (tickPositions.length) { // #1300 - each(tickPositions.slice(1).concat([tickPositions[0]]), function (pos, i) { - - // Reorganize the indices - i = (i === tickPositions.length - 1) ? 0 : i + 1; - - // linked axes need an extra check to find out if - if (!isLinked || (pos >= axis.min && pos <= axis.max)) { - - if (!ticks[pos]) { - ticks[pos] = new Tick(axis, pos); - } - - // render new ticks in old position - if (slideInTicks && ticks[pos].isNew) { - ticks[pos].render(i, true); - } - - ticks[pos].render(i, false, 1); - } - - }); - // In a categorized axis, the tick marks are displayed between labels. So - // we need to add a tick mark and grid line at the left edge of the X axis. - if (tickmarkOffset && axis.min === 0) { - if (!ticks[-1]) { - ticks[-1] = new Tick(axis, -1, null, true); - } - ticks[-1].render(-1); - } - - } - - // alternate grid color - if (alternateGridColor) { - each(tickPositions, function (pos, i) { - if (i % 2 === 0 && pos < axis.max) { - if (!alternateBands[pos]) { - alternateBands[pos] = new PlotLineOrBand(axis); - } - from = pos + tickmarkOffset; // #949 - to = tickPositions[i + 1] !== UNDEFINED ? tickPositions[i + 1] + tickmarkOffset : axis.max; - alternateBands[pos].options = { - from: isLog ? lin2log(from) : from, - to: isLog ? lin2log(to) : to, - color: alternateGridColor - }; - alternateBands[pos].render(); - alternateBands[pos].isActive = true; - } - }); - } - - // custom plot lines and bands - if (!axis._addedPlotLB) { // only first time - each((options.plotLines || []).concat(options.plotBands || []), function (plotLineOptions) { - axis.addPlotBandOrLine(plotLineOptions); - }); - axis._addedPlotLB = true; - } - - } // end if hasData - - // Remove inactive ticks - each([ticks, minorTicks, alternateBands], function (coll) { - var pos, - i, - forDestruction = [], - delay = globalAnimation ? globalAnimation.duration || 500 : 0, - destroyInactiveItems = function () { - i = forDestruction.length; - while (i--) { - // When resizing rapidly, the same items may be destroyed in different timeouts, - // or the may be reactivated - if (coll[forDestruction[i]] && !coll[forDestruction[i]].isActive) { - coll[forDestruction[i]].destroy(); - delete coll[forDestruction[i]]; - } - } - - }; - - for (pos in coll) { - - if (!coll[pos].isActive) { - // Render to zero opacity - coll[pos].render(pos, false, 0); - coll[pos].isActive = false; - forDestruction.push(pos); - } - } - - // When the objects are finished fading out, destroy them - if (coll === alternateBands || !chart.hasRendered || !delay) { - destroyInactiveItems(); - } else if (delay) { - setTimeout(destroyInactiveItems, delay); - } - }); - - // Static items. As the axis group is cleared on subsequent calls - // to render, these items are added outside the group. - // axis line - if (lineWidth) { - linePath = axis.getLinePath(lineWidth); - if (!axis.axisLine) { - axis.axisLine = renderer.path(linePath) - .attr({ - stroke: options.lineColor, - 'stroke-width': lineWidth, - zIndex: 7 - }) - .add(axis.axisGroup); - } else { - axis.axisLine.animate({ d: linePath }); - } - - // show or hide the line depending on options.showEmpty - axis.axisLine[showAxis ? 'show' : 'hide'](); - } - - if (axisTitle && showAxis) { - - axisTitle[axisTitle.isNew ? 'attr' : 'animate']( - axis.getTitlePosition() - ); - axisTitle.isNew = false; - } - - // Stacked totals: - if (stackLabelOptions && stackLabelOptions.enabled) { - var stackKey, oneStack, stackCategory, - stackTotalGroup = axis.stackTotalGroup; - - // Create a separate group for the stack total labels - if (!stackTotalGroup) { - axis.stackTotalGroup = stackTotalGroup = - renderer.g('stack-labels') - .attr({ - visibility: VISIBLE, - zIndex: 6 - }) - .add(); - } - - // plotLeft/Top will change when y axis gets wider so we need to translate the - // stackTotalGroup at every render call. See bug #506 and #516 - stackTotalGroup.translate(chart.plotLeft, chart.plotTop); - - // Render each stack total - for (stackKey in stacks) { - oneStack = stacks[stackKey]; - for (stackCategory in oneStack) { - oneStack[stackCategory].render(stackTotalGroup); - } - } - } - // End stacked totals - - axis.isDirty = false; - }, - - /** - * Remove a plot band or plot line from the chart by id - * @param {Object} id - */ - removePlotBandOrLine: function (id) { - var plotLinesAndBands = this.plotLinesAndBands, - i = plotLinesAndBands.length; - while (i--) { - if (plotLinesAndBands[i].id === id) { - plotLinesAndBands[i].destroy(); - } - } - }, - - /** - * Update the axis title by options - */ - setTitle: function (newTitleOptions, redraw) { - this.update({ title: newTitleOptions }, redraw); - }, - - /** - * Redraw the axis to reflect changes in the data or axis extremes - */ - redraw: function () { - var axis = this, - chart = axis.chart, - pointer = chart.pointer; - - // hide tooltip and hover states - if (pointer.reset) { - pointer.reset(true); - } - - // render the axis - axis.render(); - - // move plot lines and bands - each(axis.plotLinesAndBands, function (plotLine) { - plotLine.render(); - }); - - // mark associated series as dirty and ready for redraw - each(axis.series, function (series) { - series.isDirty = true; - }); - - }, - - /** - * Set new axis categories and optionally redraw - * @param {Array} categories - * @param {Boolean} redraw - */ - setCategories: function (categories, redraw) { - this.update({ categories: categories }, redraw); - }, - - /** - * Destroys an Axis instance. - */ - destroy: function () { - var axis = this, - stacks = axis.stacks, - stackKey; - - // Remove the events - removeEvent(axis); - - // Destroy each stack total - for (stackKey in stacks) { - destroyObjectProperties(stacks[stackKey]); - - stacks[stackKey] = null; - } - - // Destroy collections - each([axis.ticks, axis.minorTicks, axis.alternateBands, axis.plotLinesAndBands], function (coll) { - destroyObjectProperties(coll); - }); - - // Destroy local variables - each(['stackTotalGroup', 'axisLine', 'axisGroup', 'gridGroup', 'labelGroup', 'axisTitle'], function (prop) { - if (axis[prop]) { - axis[prop] = axis[prop].destroy(); - } - }); - } - - -}; // end Axis - -/** - * The tooltip object - * @param {Object} chart The chart instance - * @param {Object} options Tooltip options - */ -function Tooltip() { - this.init.apply(this, arguments); -} - -Tooltip.prototype = { - - init: function (chart, options) { - - var borderWidth = options.borderWidth, - style = options.style, - padding = pInt(style.padding); - - // Save the chart and options - this.chart = chart; - this.options = options; - - // Keep track of the current series - //this.currentSeries = UNDEFINED; - - // List of crosshairs - this.crosshairs = []; - - // Current values of x and y when animating - this.now = { x: 0, y: 0 }; - - // The tooltip is initially hidden - this.isHidden = true; - - - // create the label - this.label = chart.renderer.label('', 0, 0, options.shape, null, null, options.useHTML, null, 'tooltip') - .attr({ - padding: padding, - fill: options.backgroundColor, - 'stroke-width': borderWidth, - r: options.borderRadius, - zIndex: 8 - }) - .css(style) - .css({ padding: 0 }) // Remove it from VML, the padding is applied as an attribute instead (#1117) - .hide() - .add(); - - // When using canVG the shadow shows up as a gray circle - // even if the tooltip is hidden. - if (!useCanVG) { - this.label.shadow(options.shadow); - } - - // Public property for getting the shared state. - this.shared = options.shared; - }, - - /** - * Destroy the tooltip and its elements. - */ - destroy: function () { - each(this.crosshairs, function (crosshair) { - if (crosshair) { - crosshair.destroy(); - } - }); - - // Destroy and clear local variables - if (this.label) { - this.label = this.label.destroy(); - } - }, - - /** - * Provide a soft movement for the tooltip - * - * @param {Number} x - * @param {Number} y - * @private - */ - move: function (x, y, anchorX, anchorY) { - var tooltip = this, - now = tooltip.now, - animate = tooltip.options.animation !== false && !tooltip.isHidden; - - // get intermediate values for animation - extend(now, { - x: animate ? (2 * now.x + x) / 3 : x, - y: animate ? (now.y + y) / 2 : y, - anchorX: animate ? (2 * now.anchorX + anchorX) / 3 : anchorX, - anchorY: animate ? (now.anchorY + anchorY) / 2 : anchorY - }); - - // move to the intermediate value - tooltip.label.attr(now); - - - // run on next tick of the mouse tracker - if (animate && (mathAbs(x - now.x) > 1 || mathAbs(y - now.y) > 1)) { - - // never allow two timeouts - clearTimeout(this.tooltipTimeout); - - // set the fixed interval ticking for the smooth tooltip - this.tooltipTimeout = setTimeout(function () { - // The interval function may still be running during destroy, so check that the chart is really there before calling. - if (tooltip) { - tooltip.move(x, y, anchorX, anchorY); - } - }, 32); - - } - }, - - /** - * Hide the tooltip - */ - hide: function () { - var tooltip = this, - hoverPoints; - - if (!this.isHidden) { - hoverPoints = this.chart.hoverPoints; - - this.hideTimer = setTimeout(function () { - tooltip.label.fadeOut(); - tooltip.isHidden = true; - }, pick(this.options.hideDelay, 500)); - - // hide previous hoverPoints and set new - if (hoverPoints) { - each(hoverPoints, function (point) { - point.setState(); - }); - } - - this.chart.hoverPoints = null; - } - }, - - /** - * Hide the crosshairs - */ - hideCrosshairs: function () { - each(this.crosshairs, function (crosshair) { - if (crosshair) { - crosshair.hide(); - } - }); - }, - - /** - * Extendable method to get the anchor position of the tooltip - * from a point or set of points - */ - getAnchor: function (points, mouseEvent) { - var ret, - chart = this.chart, - inverted = chart.inverted, - plotTop = chart.plotTop, - plotX = 0, - plotY = 0, - yAxis; - - points = splat(points); - - // Pie uses a special tooltipPos - ret = points[0].tooltipPos; - - // When tooltip follows mouse, relate the position to the mouse - if (this.followPointer && mouseEvent) { - if (mouseEvent.chartX === UNDEFINED) { - mouseEvent = chart.pointer.normalize(mouseEvent); - } - ret = [ - mouseEvent.chartX - chart.plotLeft, - mouseEvent.chartY - plotTop - ]; - } - // When shared, use the average position - if (!ret) { - each(points, function (point) { - yAxis = point.series.yAxis; - plotX += point.plotX; - plotY += (point.plotLow ? (point.plotLow + point.plotHigh) / 2 : point.plotY) + - (!inverted && yAxis ? yAxis.top - plotTop : 0); // #1151 - }); - - plotX /= points.length; - plotY /= points.length; - - ret = [ - inverted ? chart.plotWidth - plotY : plotX, - this.shared && !inverted && points.length > 1 && mouseEvent ? - mouseEvent.chartY - plotTop : // place shared tooltip next to the mouse (#424) - inverted ? chart.plotHeight - plotX : plotY - ]; - } - - return map(ret, mathRound); - }, - - /** - * Place the tooltip in a chart without spilling over - * and not covering the point it self. - */ - getPosition: function (boxWidth, boxHeight, point) { - - // Set up the variables - var chart = this.chart, - plotLeft = chart.plotLeft, - plotTop = chart.plotTop, - plotWidth = chart.plotWidth, - plotHeight = chart.plotHeight, - distance = pick(this.options.distance, 12), - pointX = point.plotX, - pointY = point.plotY, - x = pointX + plotLeft + (chart.inverted ? distance : -boxWidth - distance), - y = pointY - boxHeight + plotTop + 15, // 15 means the point is 15 pixels up from the bottom of the tooltip - alignedRight; - - // It is too far to the left, adjust it - if (x < 7) { - x = plotLeft + mathMax(pointX, 0) + distance; - } - - // Test to see if the tooltip is too far to the right, - // if it is, move it back to be inside and then up to not cover the point. - if ((x + boxWidth) > (plotLeft + plotWidth)) { - x -= (x + boxWidth) - (plotLeft + plotWidth); - y = pointY - boxHeight + plotTop - distance; - alignedRight = true; - } - - // If it is now above the plot area, align it to the top of the plot area - if (y < plotTop + 5) { - y = plotTop + 5; - - // If the tooltip is still covering the point, move it below instead - if (alignedRight && pointY >= y && pointY <= (y + boxHeight)) { - y = pointY + plotTop + distance; // below - } - } - - // Now if the tooltip is below the chart, move it up. It's better to cover the - // point than to disappear outside the chart. #834. - if (y + boxHeight > plotTop + plotHeight) { - y = mathMax(plotTop, plotTop + plotHeight - boxHeight - distance); // below - } - - return {x: x, y: y}; - }, - - /** - * In case no user defined formatter is given, this will be used. Note that the context - * here is an object holding point, series, x, y etc. - */ - defaultFormatter: function (tooltip) { - var items = this.points || splat(this), - series = items[0].series, - s; - - // build the header - s = [series.tooltipHeaderFormatter(items[0])]; - - // build the values - each(items, function (item) { - series = item.series; - s.push((series.tooltipFormatter && series.tooltipFormatter(item)) || - item.point.tooltipFormatter(series.tooltipOptions.pointFormat)); - }); - - // footer - s.push(tooltip.options.footerFormat || ''); - - return s.join(''); - }, - - /** - * Refresh the tooltip's text and position. - * @param {Object} point - */ - refresh: function (point, mouseEvent) { - var tooltip = this, - chart = tooltip.chart, - label = tooltip.label, - options = tooltip.options, - x, - y, - show, - anchor, - textConfig = {}, - text, - pointConfig = [], - formatter = options.formatter || tooltip.defaultFormatter, - hoverPoints = chart.hoverPoints, - borderColor, - crosshairsOptions = options.crosshairs, - shared = tooltip.shared, - currentSeries; - - clearTimeout(this.hideTimer); - - // get the reference point coordinates (pie charts use tooltipPos) - tooltip.followPointer = splat(point)[0].series.tooltipOptions.followPointer; - anchor = tooltip.getAnchor(point, mouseEvent); - x = anchor[0]; - y = anchor[1]; - - // shared tooltip, array is sent over - if (shared && !(point.series && point.series.noSharedTooltip)) { - - // hide previous hoverPoints and set new - - chart.hoverPoints = point; - if (hoverPoints) { - each(hoverPoints, function (point) { - point.setState(); - }); - } - - each(point, function (item) { - item.setState(HOVER_STATE); - - pointConfig.push(item.getLabelConfig()); - }); - - textConfig = { - x: point[0].category, - y: point[0].y - }; - textConfig.points = pointConfig; - point = point[0]; - - // single point tooltip - } else { - textConfig = point.getLabelConfig(); - } - text = formatter.call(textConfig, tooltip); - - // register the current series - currentSeries = point.series; - - - // For line type series, hide tooltip if the point falls outside the plot - show = shared || !currentSeries.isCartesian || currentSeries.tooltipOutsidePlot || chart.isInsidePlot(x, y); - - // update the inner HTML - if (text === false || !show) { - this.hide(); - } else { - - // show it - if (tooltip.isHidden) { - stop(label); - label.attr('opacity', 1).show(); - } - - // update text - label.attr({ - text: text - }); - - // set the stroke color of the box - borderColor = options.borderColor || point.color || currentSeries.color || '#606060'; - label.attr({ - stroke: borderColor - }); - - tooltip.updatePosition({ plotX: x, plotY: y }); - - this.isHidden = false; - } - - // crosshairs - if (crosshairsOptions) { - crosshairsOptions = splat(crosshairsOptions); // [x, y] - - var path, - i = crosshairsOptions.length, - attribs, - axis, - val; - - while (i--) { - axis = point.series[i ? 'yAxis' : 'xAxis']; - if (crosshairsOptions[i] && axis) { - val = i ? pick(point.stackY, point.y) : point.x; // #814 - if (axis.isLog) { // #1671 - val = log2lin(val); - } - - path = axis.getPlotLinePath( - val, - 1 - ); - - if (tooltip.crosshairs[i]) { - tooltip.crosshairs[i].attr({ d: path, visibility: VISIBLE }); - } else { - attribs = { - 'stroke-width': crosshairsOptions[i].width || 1, - stroke: crosshairsOptions[i].color || '#C0C0C0', - zIndex: crosshairsOptions[i].zIndex || 2 - }; - if (crosshairsOptions[i].dashStyle) { - attribs.dashstyle = crosshairsOptions[i].dashStyle; - } - tooltip.crosshairs[i] = chart.renderer.path(path) - .attr(attribs) - .add(); - } - } - } - } - fireEvent(chart, 'tooltipRefresh', { - text: text, - x: x + chart.plotLeft, - y: y + chart.plotTop, - borderColor: borderColor - }); - }, - - /** - * Find the new position and perform the move - */ - updatePosition: function (point) { - var chart = this.chart, - label = this.label, - pos = (this.options.positioner || this.getPosition).call( - this, - label.width, - label.height, - point - ); - - // do the move - this.move( - mathRound(pos.x), - mathRound(pos.y), - point.plotX + chart.plotLeft, - point.plotY + chart.plotTop - ); - } -}; -/** - * The mouse tracker object. All methods starting with "on" are primary DOM event handlers. - * Subsequent methods should be named differently from what they are doing. - * @param {Object} chart The Chart instance - * @param {Object} options The root options object - */ -function Pointer(chart, options) { - this.init(chart, options); -} - -Pointer.prototype = { - /** - * Initialize Pointer - */ - init: function (chart, options) { - - var zoomType = useCanVG ? '' : options.chart.zoomType, - inverted = chart.inverted, - zoomX, - zoomY; - - // Store references - this.options = options; - this.chart = chart; - - // Zoom status - this.zoomX = zoomX = /x/.test(zoomType); - this.zoomY = zoomY = /y/.test(zoomType); - this.zoomHor = (zoomX && !inverted) || (zoomY && inverted); - this.zoomVert = (zoomY && !inverted) || (zoomX && inverted); - - this.pinchDown = []; - this.lastValidTouch = {}; - - if (options.tooltip.enabled) { - chart.tooltip = new Tooltip(chart, options.tooltip); - } - - this.setDOMEvents(); - }, - - /** - * Add crossbrowser support for chartX and chartY - * @param {Object} e The event object in standard browsers - */ - normalize: function (e) { - var chartPosition, - chartX, - chartY, - ePos; - - // common IE normalizing - e = e || win.event; - if (!e.target) { - e.target = e.srcElement; - } - - // Framework specific normalizing (#1165) - e = washMouseEvent(e); - - // iOS - ePos = e.touches ? e.touches.item(0) : e; - - // get mouse position - this.chartPosition = chartPosition = offset(this.chart.container); - - // chartX and chartY - if (ePos.pageX === UNDEFINED) { // IE < 9. #886. - chartX = e.x; - chartY = e.y; - } else { - chartX = ePos.pageX - chartPosition.left; - chartY = ePos.pageY - chartPosition.top; - } - - return extend(e, { - chartX: mathRound(chartX), - chartY: mathRound(chartY) - }); - }, - - /** - * Get the click position in terms of axis values. - * - * @param {Object} e A pointer event - */ - getCoordinates: function (e) { - var coordinates = { - xAxis: [], - yAxis: [] - }; - - each(this.chart.axes, function (axis) { - coordinates[axis.isXAxis ? 'xAxis' : 'yAxis'].push({ - axis: axis, - value: axis.toValue(e[axis.horiz ? 'chartX' : 'chartY']) - }); - }); - return coordinates; - }, - - /** - * Return the index in the tooltipPoints array, corresponding to pixel position in - * the plot area. - */ - getIndex: function (e) { - var chart = this.chart; - return chart.inverted ? - chart.plotHeight + chart.plotTop - e.chartY : - e.chartX - chart.plotLeft; - }, - - /** - * With line type charts with a single tracker, get the point closest to the mouse. - * Run Point.onMouseOver and display tooltip for the point or points. - */ - runPointActions: function (e) { - var pointer = this, - chart = pointer.chart, - series = chart.series, - tooltip = chart.tooltip, - point, - points, - hoverPoint = chart.hoverPoint, - hoverSeries = chart.hoverSeries, - i, - j, - distance = chart.chartWidth, - index = pointer.getIndex(e), - anchor; - - // shared tooltip - if (tooltip && pointer.options.tooltip.shared && !(hoverSeries && hoverSeries.noSharedTooltip)) { - points = []; - - // loop over all series and find the ones with points closest to the mouse - i = series.length; - for (j = 0; j < i; j++) { - if (series[j].visible && - series[j].options.enableMouseTracking !== false && - !series[j].noSharedTooltip && series[j].tooltipPoints.length) { - point = series[j].tooltipPoints[index]; - if (point.series) { // not a dummy point, #1544 - point._dist = mathAbs(index - point.clientX); - distance = mathMin(distance, point._dist); - points.push(point); - } - } - } - // remove furthest points - i = points.length; - while (i--) { - if (points[i]._dist > distance) { - points.splice(i, 1); - } - } - // refresh the tooltip if necessary - if (points.length && (points[0].clientX !== pointer.hoverX)) { - tooltip.refresh(points, e); - pointer.hoverX = points[0].clientX; - } - } - - // separate tooltip and general mouse events - if (hoverSeries && hoverSeries.tracker) { // only use for line-type series with common tracker - - // get the point - point = hoverSeries.tooltipPoints[index]; - - // a new point is hovered, refresh the tooltip - if (point && point !== hoverPoint) { - - // trigger the events - point.onMouseOver(e); - - } - - } else if (tooltip && tooltip.followPointer && !tooltip.isHidden) { - anchor = tooltip.getAnchor([{}], e); - tooltip.updatePosition({ plotX: anchor[0], plotY: anchor[1] }); - } - }, - - - - /** - * Reset the tracking by hiding the tooltip, the hover series state and the hover point - * - * @param allowMove {Boolean} Instead of destroying the tooltip altogether, allow moving it if possible - */ - reset: function (allowMove) { - var pointer = this, - chart = pointer.chart, - hoverSeries = chart.hoverSeries, - hoverPoint = chart.hoverPoint, - tooltip = chart.tooltip, - tooltipPoints = tooltip && tooltip.shared ? chart.hoverPoints : hoverPoint; - - // Narrow in allowMove - allowMove = allowMove && tooltip && tooltipPoints; - - // Check if the points have moved outside the plot area, #1003 - if (allowMove && splat(tooltipPoints)[0].plotX === UNDEFINED) { - allowMove = false; - } - - // Just move the tooltip, #349 - if (allowMove) { - tooltip.refresh(tooltipPoints); - - // Full reset - } else { - - if (hoverPoint) { - hoverPoint.onMouseOut(); - } - - if (hoverSeries) { - hoverSeries.onMouseOut(); - } - - if (tooltip) { - tooltip.hide(); - tooltip.hideCrosshairs(); - } - - pointer.hoverX = null; - - } - }, - - /** - * Scale series groups to a certain scale and translation - */ - scaleGroups: function (attribs, clip) { - - var chart = this.chart; - - // Scale each series - each(chart.series, function (series) { - if (series.xAxis.zoomEnabled) { - series.group.attr(attribs); - if (series.markerGroup) { - series.markerGroup.attr(attribs); - series.markerGroup.clip(clip ? chart.clipRect : null); - } - if (series.dataLabelsGroup) { - series.dataLabelsGroup.attr(attribs); - } - } - }); - - // Clip - chart.clipRect.attr(clip || chart.clipBox); - }, - - /** - * Run translation operations for each direction (horizontal and vertical) independently - */ - pinchTranslateDirection: function (horiz, pinchDown, touches, transform, selectionMarker, clip, lastValidTouch) { - var chart = this.chart, - xy = horiz ? 'x' : 'y', - XY = horiz ? 'X' : 'Y', - sChartXY = 'chart' + XY, - wh = horiz ? 'width' : 'height', - plotLeftTop = chart['plot' + (horiz ? 'Left' : 'Top')], - selectionWH, - selectionXY, - clipXY, - scale = 1, - inverted = chart.inverted, - bounds = chart.bounds[horiz ? 'h' : 'v'], - singleTouch = pinchDown.length === 1, - touch0Start = pinchDown[0][sChartXY], - touch0Now = touches[0][sChartXY], - touch1Start = !singleTouch && pinchDown[1][sChartXY], - touch1Now = !singleTouch && touches[1][sChartXY], - outOfBounds, - transformScale, - scaleKey, - setScale = function () { - if (!singleTouch && mathAbs(touch0Start - touch1Start) > 20) { // Don't zoom if fingers are too close on this axis - scale = mathAbs(touch0Now - touch1Now) / mathAbs(touch0Start - touch1Start); - } - - clipXY = ((plotLeftTop - touch0Now) / scale) + touch0Start; - selectionWH = chart['plot' + (horiz ? 'Width' : 'Height')] / scale; - }; - - // Set the scale, first pass - setScale(); - - selectionXY = clipXY; // the clip position (x or y) is altered if out of bounds, the selection position is not - - // Out of bounds - if (selectionXY < bounds.min) { - selectionXY = bounds.min; - outOfBounds = true; - } else if (selectionXY + selectionWH > bounds.max) { - selectionXY = bounds.max - selectionWH; - outOfBounds = true; - } - - // Is the chart dragged off its bounds, determined by dataMin and dataMax? - if (outOfBounds) { - - // Modify the touchNow position in order to create an elastic drag movement. This indicates - // to the user that the chart is responsive but can't be dragged further. - touch0Now -= 0.8 * (touch0Now - lastValidTouch[xy][0]); - if (!singleTouch) { - touch1Now -= 0.8 * (touch1Now - lastValidTouch[xy][1]); - } - - // Set the scale, second pass to adapt to the modified touchNow positions - setScale(); - - } else { - lastValidTouch[xy] = [touch0Now, touch1Now]; - } - - - // Set geometry for clipping, selection and transformation - if (!inverted) { // TODO: implement clipping for inverted charts - clip[xy] = clipXY - plotLeftTop; - clip[wh] = selectionWH; - } - scaleKey = inverted ? (horiz ? 'scaleY' : 'scaleX') : 'scale' + XY; - transformScale = inverted ? 1 / scale : scale; - - selectionMarker[wh] = selectionWH; - selectionMarker[xy] = selectionXY; - transform[scaleKey] = scale; - transform['translate' + XY] = (transformScale * plotLeftTop) + (touch0Now - (transformScale * touch0Start)); - }, - - /** - * Handle touch events with two touches - */ - pinch: function (e) { - - var self = this, - chart = self.chart, - pinchDown = self.pinchDown, - followTouchMove = chart.tooltip.options.followTouchMove, - touches = e.touches, - touchesLength = touches.length, - lastValidTouch = self.lastValidTouch, - zoomHor = self.zoomHor || self.pinchHor, - zoomVert = self.zoomVert || self.pinchVert, - hasZoom = zoomHor || zoomVert, - selectionMarker = self.selectionMarker, - transform = {}, - clip = {}; - - // On touch devices, only proceed to trigger click if a handler is defined - if (e.type === 'touchstart' && followTouchMove) { - if (self.inClass(e.target, PREFIX + 'tracker')) { - if (!chart.runTrackerClick || touchesLength > 1) { - e.preventDefault(); - } - } else if (!chart.runChartClick || touchesLength > 1) { - e.preventDefault(); - } - } - - // Normalize each touch - map(touches, function (e) { - return self.normalize(e); - }); - - // Register the touch start position - if (e.type === 'touchstart') { - each(touches, function (e, i) { - pinchDown[i] = { chartX: e.chartX, chartY: e.chartY }; - }); - lastValidTouch.x = [pinchDown[0].chartX, pinchDown[1] && pinchDown[1].chartX]; - lastValidTouch.y = [pinchDown[0].chartY, pinchDown[1] && pinchDown[1].chartY]; - - // Identify the data bounds in pixels - each(chart.axes, function (axis) { - if (axis.zoomEnabled) { - var bounds = chart.bounds[axis.horiz ? 'h' : 'v'], - minPixelPadding = axis.minPixelPadding, - min = axis.toPixels(axis.dataMin), - max = axis.toPixels(axis.dataMax), - absMin = mathMin(min, max), - absMax = mathMax(min, max); - - // Store the bounds for use in the touchmove handler - bounds.min = mathMin(axis.pos, absMin - minPixelPadding); - bounds.max = mathMax(axis.pos + axis.len, absMax + minPixelPadding); - } - }); - - // Event type is touchmove, handle panning and pinching - } else if (pinchDown.length) { // can be 0 when releasing, if touchend fires first - - - // Set the marker - if (!selectionMarker) { - self.selectionMarker = selectionMarker = extend({ - destroy: noop - }, chart.plotBox); - } - - - - if (zoomHor) { - self.pinchTranslateDirection(true, pinchDown, touches, transform, selectionMarker, clip, lastValidTouch); - } - if (zoomVert) { - self.pinchTranslateDirection(false, pinchDown, touches, transform, selectionMarker, clip, lastValidTouch); - } - - self.hasPinched = hasZoom; - - // Scale and translate the groups to provide visual feedback during pinching - self.scaleGroups(transform, clip); - - // Optionally move the tooltip on touchmove - if (!hasZoom && followTouchMove && touchesLength === 1) { - this.runPointActions(self.normalize(e)); - } - } - }, - - /** - * Start a drag operation - */ - dragStart: function (e) { - var chart = this.chart; - - // Record the start position - chart.mouseIsDown = e.type; - chart.cancelClick = false; - chart.mouseDownX = this.mouseDownX = e.chartX; - this.mouseDownY = e.chartY; - }, - - /** - * Perform a drag operation in response to a mousemove event while the mouse is down - */ - drag: function (e) { - - var chart = this.chart, - chartOptions = chart.options.chart, - chartX = e.chartX, - chartY = e.chartY, - zoomHor = this.zoomHor, - zoomVert = this.zoomVert, - plotLeft = chart.plotLeft, - plotTop = chart.plotTop, - plotWidth = chart.plotWidth, - plotHeight = chart.plotHeight, - clickedInside, - size, - mouseDownX = this.mouseDownX, - mouseDownY = this.mouseDownY; - - // If the mouse is outside the plot area, adjust to cooordinates - // inside to prevent the selection marker from going outside - if (chartX < plotLeft) { - chartX = plotLeft; - } else if (chartX > plotLeft + plotWidth) { - chartX = plotLeft + plotWidth; - } - - if (chartY < plotTop) { - chartY = plotTop; - } else if (chartY > plotTop + plotHeight) { - chartY = plotTop + plotHeight; - } - - // determine if the mouse has moved more than 10px - this.hasDragged = Math.sqrt( - Math.pow(mouseDownX - chartX, 2) + - Math.pow(mouseDownY - chartY, 2) - ); - if (this.hasDragged > 10) { - clickedInside = chart.isInsidePlot(mouseDownX - plotLeft, mouseDownY - plotTop); - - // make a selection - if (chart.hasCartesianSeries && (this.zoomX || this.zoomY) && clickedInside) { - if (!this.selectionMarker) { - this.selectionMarker = chart.renderer.rect( - plotLeft, - plotTop, - zoomHor ? 1 : plotWidth, - zoomVert ? 1 : plotHeight, - 0 - ) - .attr({ - fill: chartOptions.selectionMarkerFill || 'rgba(69,114,167,0.25)', - zIndex: 7 - }) - .add(); - } - } - - // adjust the width of the selection marker - if (this.selectionMarker && zoomHor) { - size = chartX - mouseDownX; - this.selectionMarker.attr({ - width: mathAbs(size), - x: (size > 0 ? 0 : size) + mouseDownX - }); - } - // adjust the height of the selection marker - if (this.selectionMarker && zoomVert) { - size = chartY - mouseDownY; - this.selectionMarker.attr({ - height: mathAbs(size), - y: (size > 0 ? 0 : size) + mouseDownY - }); - } - - // panning - if (clickedInside && !this.selectionMarker && chartOptions.panning) { - chart.pan(chartX); - } - } - }, - - /** - * On mouse up or touch end across the entire document, drop the selection. - */ - drop: function (e) { - var chart = this.chart, - hasPinched = this.hasPinched; - - if (this.selectionMarker) { - var selectionData = { - xAxis: [], - yAxis: [], - originalEvent: e.originalEvent || e - }, - selectionBox = this.selectionMarker, - selectionLeft = selectionBox.x, - selectionTop = selectionBox.y, - runZoom; - // a selection has been made - if (this.hasDragged || hasPinched) { - - // record each axis' min and max - each(chart.axes, function (axis) { - if (axis.zoomEnabled) { - var horiz = axis.horiz, - minPixelPadding = axis.minPixelPadding, - selectionMin = axis.toValue((horiz ? selectionLeft : selectionTop) + minPixelPadding), - selectionMax = axis.toValue((horiz ? selectionLeft + selectionBox.width : selectionTop + selectionBox.height) - minPixelPadding); - - if (!isNaN(selectionMin) && !isNaN(selectionMax)) { // #859 - selectionData[axis.xOrY + 'Axis'].push({ - axis: axis, - min: mathMin(selectionMin, selectionMax), // for reversed axes, - max: mathMax(selectionMin, selectionMax) - }); - runZoom = true; - } - } - }); - if (runZoom) { - fireEvent(chart, 'selection', selectionData, function (args) { - chart.zoom(extend(args, hasPinched ? { animation: false } : null)); - }); - } - - } - this.selectionMarker = this.selectionMarker.destroy(); - - // Reset scaling preview - if (hasPinched) { - this.scaleGroups({ - translateX: chart.plotLeft, - translateY: chart.plotTop, - scaleX: 1, - scaleY: 1 - }); - } - } - - // Reset all - if (chart) { // it may be destroyed on mouse up - #877 - css(chart.container, { cursor: chart._cursor }); - chart.cancelClick = this.hasDragged; // #370 - chart.mouseIsDown = this.hasDragged = this.hasPinched = false; - this.pinchDown = []; - } - }, - - onContainerMouseDown: function (e) { - - e = this.normalize(e); - - // issue #295, dragging not always working in Firefox - if (e.preventDefault) { - e.preventDefault(); - } - - this.dragStart(e); - }, - - - - onDocumentMouseUp: function (e) { - this.drop(e); - }, - - /** - * Special handler for mouse move that will hide the tooltip when the mouse leaves the plotarea. - * Issue #149 workaround. The mouseleave event does not always fire. - */ - onDocumentMouseMove: function (e) { - var chart = this.chart, - chartPosition = this.chartPosition, - hoverSeries = chart.hoverSeries; - - // Get e.pageX and e.pageY back in MooTools - e = washMouseEvent(e); - - // If we're outside, hide the tooltip - if (chartPosition && hoverSeries && hoverSeries.isCartesian && - !chart.isInsidePlot(e.pageX - chartPosition.left - chart.plotLeft, - e.pageY - chartPosition.top - chart.plotTop)) { - this.reset(); - } - }, - - /** - * When mouse leaves the container, hide the tooltip. - */ - onContainerMouseLeave: function () { - this.reset(); - this.chartPosition = null; // also reset the chart position, used in #149 fix - }, - - // The mousemove, touchmove and touchstart event handler - onContainerMouseMove: function (e) { - - var chart = this.chart; - - // normalize - e = this.normalize(e); - - // #295 - e.returnValue = false; - - - if (chart.mouseIsDown === 'mousedown') { - this.drag(e); - } - - // Show the tooltip and run mouse over events (#977) - if (chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) { - this.runPointActions(e); - } - }, - - /** - * Utility to detect whether an element has, or has a parent with, a specific - * class name. Used on detection of tracker objects and on deciding whether - * hovering the tooltip should cause the active series to mouse out. - */ - inClass: function (element, className) { - var elemClassName; - while (element) { - elemClassName = attr(element, 'class'); - if (elemClassName) { - if (elemClassName.indexOf(className) !== -1) { - return true; - } else if (elemClassName.indexOf(PREFIX + 'container') !== -1) { - return false; - } - } - element = element.parentNode; - } - }, - - onTrackerMouseOut: function (e) { - var series = this.chart.hoverSeries; - if (series && !series.options.stickyTracking && !this.inClass(e.toElement || e.relatedTarget, PREFIX + 'tooltip')) { - series.onMouseOut(); - } - }, - - onContainerClick: function (e) { - var chart = this.chart, - hoverPoint = chart.hoverPoint, - plotLeft = chart.plotLeft, - plotTop = chart.plotTop, - inverted = chart.inverted, - chartPosition, - plotX, - plotY; - - e = this.normalize(e); - e.cancelBubble = true; // IE specific - - if (!chart.cancelClick) { - - // On tracker click, fire the series and point events. #783, #1583 - if (hoverPoint && this.inClass(e.target, PREFIX + 'tracker')) { - chartPosition = this.chartPosition; - plotX = hoverPoint.plotX; - plotY = hoverPoint.plotY; - - // add page position info - extend(hoverPoint, { - pageX: chartPosition.left + plotLeft + - (inverted ? chart.plotWidth - plotY : plotX), - pageY: chartPosition.top + plotTop + - (inverted ? chart.plotHeight - plotX : plotY) - }); - - // the series click event - fireEvent(hoverPoint.series, 'click', extend(e, { - point: hoverPoint - })); - - // the point click event - hoverPoint.firePointEvent('click', e); - - // When clicking outside a tracker, fire a chart event - } else { - extend(e, this.getCoordinates(e)); - - // fire a click event in the chart - if (chart.isInsidePlot(e.chartX - plotLeft, e.chartY - plotTop)) { - fireEvent(chart, 'click', e); - } - } - - - } - }, - - onContainerTouchStart: function (e) { - var chart = this.chart; - - if (e.touches.length === 1) { - - e = this.normalize(e); - - if (chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) { - - // Prevent the click pseudo event from firing unless it is set in the options - /*if (!chart.runChartClick) { - e.preventDefault(); - }*/ - - // Run mouse events and display tooltip etc - this.runPointActions(e); - - this.pinch(e); - } - - } else if (e.touches.length === 2) { - this.pinch(e); - } - }, - - onContainerTouchMove: function (e) { - if (e.touches.length === 1 || e.touches.length === 2) { - this.pinch(e); - } - }, - - onDocumentTouchEnd: function (e) { - this.drop(e); - }, - - /** - * Set the JS DOM events on the container and document. This method should contain - * a one-to-one assignment between methods and their handlers. Any advanced logic should - * be moved to the handler reflecting the event's name. - */ - setDOMEvents: function () { - - var pointer = this, - container = pointer.chart.container, - events; - - this._events = events = [ - [container, 'onmousedown', 'onContainerMouseDown'], - [container, 'onmousemove', 'onContainerMouseMove'], - [container, 'onclick', 'onContainerClick'], - [container, 'mouseleave', 'onContainerMouseLeave'], - [doc, 'mousemove', 'onDocumentMouseMove'], - [doc, 'mouseup', 'onDocumentMouseUp'] - ]; - - if (hasTouch) { - events.push( - [container, 'ontouchstart', 'onContainerTouchStart'], - [container, 'ontouchmove', 'onContainerTouchMove'], - [doc, 'touchend', 'onDocumentTouchEnd'] - ); - } - - each(events, function (eventConfig) { - - // First, create the callback function that in turn calls the method on Pointer - pointer['_' + eventConfig[2]] = function (e) { - pointer[eventConfig[2]](e); - }; - - // Now attach the function, either as a direct property or through addEvent - if (eventConfig[1].indexOf('on') === 0) { - eventConfig[0][eventConfig[1]] = pointer['_' + eventConfig[2]]; - } else { - addEvent(eventConfig[0], eventConfig[1], pointer['_' + eventConfig[2]]); - } - }); - - - }, - - /** - * Destroys the Pointer object and disconnects DOM events. - */ - destroy: function () { - var pointer = this; - - // Release all DOM events - each(pointer._events, function (eventConfig) { - if (eventConfig[1].indexOf('on') === 0) { - eventConfig[0][eventConfig[1]] = null; // delete breaks oldIE - } else { - removeEvent(eventConfig[0], eventConfig[1], pointer['_' + eventConfig[2]]); - } - }); - delete pointer._events; - - // memory and CPU leak - clearInterval(pointer.tooltipTimeout); - } -}; -/** - * The overview of the chart's series - */ -function Legend(chart, options) { - this.init(chart, options); -} - -Legend.prototype = { - - /** - * Initialize the legend - */ - init: function (chart, options) { - - var legend = this, - itemStyle = options.itemStyle, - padding = pick(options.padding, 8), - itemMarginTop = options.itemMarginTop || 0; - - this.options = options; - - if (!options.enabled) { - return; - } - - legend.baseline = pInt(itemStyle.fontSize) + 3 + itemMarginTop; // used in Series prototype - legend.itemStyle = itemStyle; - legend.itemHiddenStyle = merge(itemStyle, options.itemHiddenStyle); - legend.itemMarginTop = itemMarginTop; - legend.padding = padding; - legend.initialItemX = padding; - legend.initialItemY = padding - 5; // 5 is the number of pixels above the text - legend.maxItemWidth = 0; - legend.chart = chart; - legend.itemHeight = 0; - legend.lastLineHeight = 0; - - // Render it - legend.render(); - - // move checkboxes - addEvent(legend.chart, 'endResize', function () { - legend.positionCheckboxes(); - }); - - }, - - /** - * Set the colors for the legend item - * @param {Object} item A Series or Point instance - * @param {Object} visible Dimmed or colored - */ - colorizeItem: function (item, visible) { - var legend = this, - options = legend.options, - legendItem = item.legendItem, - legendLine = item.legendLine, - legendSymbol = item.legendSymbol, - hiddenColor = legend.itemHiddenStyle.color, - textColor = visible ? options.itemStyle.color : hiddenColor, - symbolColor = visible ? item.color : hiddenColor, - markerOptions = item.options && item.options.marker, - symbolAttr = { - stroke: symbolColor, - fill: symbolColor - }, - key, - val; - - - if (legendItem) { - legendItem.css({ fill: textColor, color: textColor }); // color for #1553, oldIE - } - if (legendLine) { - legendLine.attr({ stroke: symbolColor }); - } - - if (legendSymbol) { - - // Apply marker options - if (markerOptions) { - markerOptions = item.convertAttribs(markerOptions); - for (key in markerOptions) { - val = markerOptions[key]; - if (val !== UNDEFINED) { - symbolAttr[key] = val; - } - } - } - - legendSymbol.attr(symbolAttr); - } - }, - - /** - * Position the legend item - * @param {Object} item A Series or Point instance - */ - positionItem: function (item) { - var legend = this, - options = legend.options, - symbolPadding = options.symbolPadding, - ltr = !options.rtl, - legendItemPos = item._legendItemPos, - itemX = legendItemPos[0], - itemY = legendItemPos[1], - checkbox = item.checkbox; - - if (item.legendGroup) { - item.legendGroup.translate( - ltr ? itemX : legend.legendWidth - itemX - 2 * symbolPadding - 4, - itemY - ); - } - - if (checkbox) { - checkbox.x = itemX; - checkbox.y = itemY; - } - }, - - /** - * Destroy a single legend item - * @param {Object} item The series or point - */ - destroyItem: function (item) { - var checkbox = item.checkbox; - - // destroy SVG elements - each(['legendItem', 'legendLine', 'legendSymbol', 'legendGroup'], function (key) { - if (item[key]) { - item[key].destroy(); - } - }); - - if (checkbox) { - discardElement(item.checkbox); - } - }, - - /** - * Destroys the legend. - */ - destroy: function () { - var legend = this, - legendGroup = legend.group, - box = legend.box; - - if (box) { - legend.box = box.destroy(); - } - - if (legendGroup) { - legend.group = legendGroup.destroy(); - } - }, - - /** - * Position the checkboxes after the width is determined - */ - positionCheckboxes: function (scrollOffset) { - var alignAttr = this.group.alignAttr, - translateY, - clipHeight = this.clipHeight || this.legendHeight; - - if (alignAttr) { - translateY = alignAttr.translateY; - each(this.allItems, function (item) { - var checkbox = item.checkbox, - top; - - if (checkbox) { - top = (translateY + checkbox.y + (scrollOffset || 0) + 3); - css(checkbox, { - left: (alignAttr.translateX + item.legendItemWidth + checkbox.x - 20) + PX, - top: top + PX, - display: top > translateY - 6 && top < translateY + clipHeight - 6 ? '' : NONE - }); - } - }); - } - }, - - /** - * Render the legend title on top of the legend - */ - renderTitle: function () { - var options = this.options, - padding = this.padding, - titleOptions = options.title, - titleHeight = 0; - - if (titleOptions.text) { - if (!this.title) { - this.title = this.chart.renderer.label(titleOptions.text, padding - 3, padding - 4, null, null, null, null, null, 'legend-title') - .attr({ zIndex: 1 }) - .css(titleOptions.style) - .add(this.group); - } - titleHeight = this.title.getBBox().height; - this.contentGroup.attr({ translateY: titleHeight }); - } - this.titleHeight = titleHeight; - }, - - /** - * Render a single specific legend item - * @param {Object} item A series or point - */ - renderItem: function (item) { - var legend = this, - chart = legend.chart, - renderer = chart.renderer, - options = legend.options, - horizontal = options.layout === 'horizontal', - symbolWidth = options.symbolWidth, - symbolPadding = options.symbolPadding, - itemStyle = legend.itemStyle, - itemHiddenStyle = legend.itemHiddenStyle, - padding = legend.padding, - ltr = !options.rtl, - itemHeight, - widthOption = options.width, - itemMarginBottom = options.itemMarginBottom || 0, - itemMarginTop = legend.itemMarginTop, - initialItemX = legend.initialItemX, - bBox, - itemWidth, - li = item.legendItem, - series = item.series || item, - itemOptions = series.options, - showCheckbox = itemOptions.showCheckbox, - useHTML = options.useHTML; - - if (!li) { // generate it once, later move it - - // Generate the group box - // A group to hold the symbol and text. Text is to be appended in Legend class. - item.legendGroup = renderer.g('legend-item') - .attr({ zIndex: 1 }) - .add(legend.scrollGroup); - - // Draw the legend symbol inside the group box - series.drawLegendSymbol(legend, item); - - // Generate the list item text and add it to the group - item.legendItem = li = renderer.text( - options.labelFormat ? format(options.labelFormat, item) : options.labelFormatter.call(item), - ltr ? symbolWidth + symbolPadding : -symbolPadding, - legend.baseline, - useHTML - ) - .css(merge(item.visible ? itemStyle : itemHiddenStyle)) // merge to prevent modifying original (#1021) - .attr({ - align: ltr ? 'left' : 'right', - zIndex: 2 - }) - .add(item.legendGroup); - - // Set the events on the item group, or in case of useHTML, the item itself (#1249) - (useHTML ? li : item.legendGroup).on('mouseover', function () { - item.setState(HOVER_STATE); - li.css(legend.options.itemHoverStyle); - }) - .on('mouseout', function () { - li.css(item.visible ? itemStyle : itemHiddenStyle); - item.setState(); - }) - .on('click', function (event) { - var strLegendItemClick = 'legendItemClick', - fnLegendItemClick = function () { - item.setVisible(); - }; - - // Pass over the click/touch event. #4. - event = { - browserEvent: event - }; - - // click the name or symbol - if (item.firePointEvent) { // point - item.firePointEvent(strLegendItemClick, event, fnLegendItemClick); - } else { - fireEvent(item, strLegendItemClick, event, fnLegendItemClick); - } - }); - - // Colorize the items - legend.colorizeItem(item, item.visible); - - // add the HTML checkbox on top - if (itemOptions && showCheckbox) { - item.checkbox = createElement('input', { - type: 'checkbox', - checked: item.selected, - defaultChecked: item.selected // required by IE7 - }, options.itemCheckboxStyle, chart.container); - - addEvent(item.checkbox, 'click', function (event) { - var target = event.target; - fireEvent(item, 'checkboxClick', { - checked: target.checked - }, - function () { - item.select(); - } - ); - }); - } - } - - // calculate the positions for the next line - bBox = li.getBBox(); - - itemWidth = item.legendItemWidth = - options.itemWidth || symbolWidth + symbolPadding + bBox.width + padding + - (showCheckbox ? 20 : 0); - legend.itemHeight = itemHeight = bBox.height; - - // if the item exceeds the width, start a new line - if (horizontal && legend.itemX - initialItemX + itemWidth > - (widthOption || (chart.chartWidth - 2 * padding - initialItemX))) { - legend.itemX = initialItemX; - legend.itemY += itemMarginTop + legend.lastLineHeight + itemMarginBottom; - legend.lastLineHeight = 0; // reset for next line - } - - // If the item exceeds the height, start a new column - /*if (!horizontal && legend.itemY + options.y + itemHeight > chart.chartHeight - spacingTop - spacingBottom) { - legend.itemY = legend.initialItemY; - legend.itemX += legend.maxItemWidth; - legend.maxItemWidth = 0; - }*/ - - // Set the edge positions - legend.maxItemWidth = mathMax(legend.maxItemWidth, itemWidth); - legend.lastItemY = itemMarginTop + legend.itemY + itemMarginBottom; - legend.lastLineHeight = mathMax(itemHeight, legend.lastLineHeight); // #915 - - // cache the position of the newly generated or reordered items - item._legendItemPos = [legend.itemX, legend.itemY]; - - // advance - if (horizontal) { - legend.itemX += itemWidth; - - } else { - legend.itemY += itemMarginTop + itemHeight + itemMarginBottom; - legend.lastLineHeight = itemHeight; - } - - // the width of the widest item - legend.offsetWidth = widthOption || mathMax( - horizontal ? legend.itemX - initialItemX : itemWidth, - legend.offsetWidth - ); - }, - - /** - * Render the legend. This method can be called both before and after - * chart.render. If called after, it will only rearrange items instead - * of creating new ones. - */ - render: function () { - var legend = this, - chart = legend.chart, - renderer = chart.renderer, - legendGroup = legend.group, - allItems, - display, - legendWidth, - legendHeight, - box = legend.box, - options = legend.options, - padding = legend.padding, - legendBorderWidth = options.borderWidth, - legendBackgroundColor = options.backgroundColor; - - legend.itemX = legend.initialItemX; - legend.itemY = legend.initialItemY; - legend.offsetWidth = 0; - legend.lastItemY = 0; - - if (!legendGroup) { - legend.group = legendGroup = renderer.g('legend') - .attr({ zIndex: 7 }) - .add(); - legend.contentGroup = renderer.g() - .attr({ zIndex: 1 }) // above background - .add(legendGroup); - legend.scrollGroup = renderer.g() - .add(legend.contentGroup); - legend.clipRect = renderer.clipRect(0, 0, 9999, chart.chartHeight); - legend.contentGroup.clip(legend.clipRect); - } - - legend.renderTitle(); - - // add each series or point - allItems = []; - each(chart.series, function (serie) { - var seriesOptions = serie.options; - - if (!seriesOptions.showInLegend || defined(seriesOptions.linkedTo)) { - return; - } - - // use points or series for the legend item depending on legendType - allItems = allItems.concat( - serie.legendItems || - (seriesOptions.legendType === 'point' ? - serie.data : - serie) - ); - }); - - // sort by legendIndex - stableSort(allItems, function (a, b) { - return ((a.options && a.options.legendIndex) || 0) - ((b.options && b.options.legendIndex) || 0); - }); - - // reversed legend - if (options.reversed) { - allItems.reverse(); - } - - legend.allItems = allItems; - legend.display = display = !!allItems.length; - - // render the items - each(allItems, function (item) { - legend.renderItem(item); - }); - - // Draw the border - legendWidth = options.width || legend.offsetWidth; - legendHeight = legend.lastItemY + legend.lastLineHeight + legend.titleHeight; - - - legendHeight = legend.handleOverflow(legendHeight); - - if (legendBorderWidth || legendBackgroundColor) { - legendWidth += padding; - legendHeight += padding; - - if (!box) { - legend.box = box = renderer.rect( - 0, - 0, - legendWidth, - legendHeight, - options.borderRadius, - legendBorderWidth || 0 - ).attr({ - stroke: options.borderColor, - 'stroke-width': legendBorderWidth || 0, - fill: legendBackgroundColor || NONE - }) - .add(legendGroup) - .shadow(options.shadow); - box.isNew = true; - - } else if (legendWidth > 0 && legendHeight > 0) { - box[box.isNew ? 'attr' : 'animate']( - box.crisp(null, null, null, legendWidth, legendHeight) - ); - box.isNew = false; - } - - // hide the border if no items - box[display ? 'show' : 'hide'](); - } - - legend.legendWidth = legendWidth; - legend.legendHeight = legendHeight; - - // Now that the legend width and height are established, put the items in the - // final position - each(allItems, function (item) { - legend.positionItem(item); - }); - - // 1.x compatibility: positioning based on style - /*var props = ['left', 'right', 'top', 'bottom'], - prop, - i = 4; - while (i--) { - prop = props[i]; - if (options.style[prop] && options.style[prop] !== 'auto') { - options[i < 2 ? 'align' : 'verticalAlign'] = prop; - options[i < 2 ? 'x' : 'y'] = pInt(options.style[prop]) * (i % 2 ? -1 : 1); - } - }*/ - - if (display) { - legendGroup.align(extend({ - width: legendWidth, - height: legendHeight - }, options), true, 'spacingBox'); - } - - if (!chart.isResizing) { - this.positionCheckboxes(); - } - }, - - /** - * Set up the overflow handling by adding navigation with up and down arrows below the - * legend. - */ - handleOverflow: function (legendHeight) { - var legend = this, - chart = this.chart, - renderer = chart.renderer, - pageCount, - options = this.options, - optionsY = options.y, - alignTop = options.verticalAlign === 'top', - spaceHeight = chart.spacingBox.height + (alignTop ? -optionsY : optionsY) - this.padding, - maxHeight = options.maxHeight, - clipHeight, - clipRect = this.clipRect, - navOptions = options.navigation, - animation = pick(navOptions.animation, true), - arrowSize = navOptions.arrowSize || 12, - nav = this.nav; - - // Adjust the height - if (options.layout === 'horizontal') { - spaceHeight /= 2; - } - if (maxHeight) { - spaceHeight = mathMin(spaceHeight, maxHeight); - } - - // Reset the legend height and adjust the clipping rectangle - if (legendHeight > spaceHeight && !options.useHTML) { - - this.clipHeight = clipHeight = spaceHeight - 20 - this.titleHeight; - this.pageCount = pageCount = mathCeil(legendHeight / clipHeight); - this.currentPage = pick(this.currentPage, 1); - this.fullHeight = legendHeight; - - clipRect.attr({ - height: clipHeight - }); - - // Add navigation elements - if (!nav) { - this.nav = nav = renderer.g().attr({ zIndex: 1 }).add(this.group); - this.up = renderer.symbol('triangle', 0, 0, arrowSize, arrowSize) - .on('click', function () { - legend.scroll(-1, animation); - }) - .add(nav); - this.pager = renderer.text('', 15, 10) - .css(navOptions.style) - .add(nav); - this.down = renderer.symbol('triangle-down', 0, 0, arrowSize, arrowSize) - .on('click', function () { - legend.scroll(1, animation); - }) - .add(nav); - } - - // Set initial position - legend.scroll(0); - - legendHeight = spaceHeight; - - } else if (nav) { - clipRect.attr({ - height: chart.chartHeight - }); - nav.hide(); - this.scrollGroup.attr({ - translateY: 1 - }); - this.clipHeight = 0; // #1379 - } - - return legendHeight; - }, - - /** - * Scroll the legend by a number of pages - * @param {Object} scrollBy - * @param {Object} animation - */ - scroll: function (scrollBy, animation) { - var pageCount = this.pageCount, - currentPage = this.currentPage + scrollBy, - clipHeight = this.clipHeight, - navOptions = this.options.navigation, - activeColor = navOptions.activeColor, - inactiveColor = navOptions.inactiveColor, - pager = this.pager, - padding = this.padding, - scrollOffset; - - // When resizing while looking at the last page - if (currentPage > pageCount) { - currentPage = pageCount; - } - - if (currentPage > 0) { - - if (animation !== UNDEFINED) { - setAnimation(animation, this.chart); - } - - this.nav.attr({ - translateX: padding, - translateY: clipHeight + 7 + this.titleHeight, - visibility: VISIBLE - }); - this.up.attr({ - fill: currentPage === 1 ? inactiveColor : activeColor - }) - .css({ - cursor: currentPage === 1 ? 'default' : 'pointer' - }); - pager.attr({ - text: currentPage + '/' + this.pageCount - }); - this.down.attr({ - x: 18 + this.pager.getBBox().width, // adjust to text width - fill: currentPage === pageCount ? inactiveColor : activeColor - }) - .css({ - cursor: currentPage === pageCount ? 'default' : 'pointer' - }); - - scrollOffset = -mathMin(clipHeight * (currentPage - 1), this.fullHeight - clipHeight + padding) + 1; - this.scrollGroup.animate({ - translateY: scrollOffset - }); - pager.attr({ - text: currentPage + '/' + pageCount - }); - - - this.currentPage = currentPage; - this.positionCheckboxes(scrollOffset); - } - - } - -}; - -/** - * The chart class - * @param {Object} options - * @param {Function} callback Function to run when the chart has loaded - */ -function Chart() { - this.init.apply(this, arguments); -} - -Chart.prototype = { - - /** - * Initialize the chart - */ - init: function (userOptions, callback) { - - // Handle regular options - var options, - seriesOptions = userOptions.series; // skip merging data points to increase performance - - userOptions.series = null; - options = merge(defaultOptions, userOptions); // do the merge - options.series = userOptions.series = seriesOptions; // set back the series data - - var optionsChart = options.chart, - optionsMargin = optionsChart.margin, - margin = isObject(optionsMargin) ? - optionsMargin : - [optionsMargin, optionsMargin, optionsMargin, optionsMargin]; - - this.optionsMarginTop = pick(optionsChart.marginTop, margin[0]); - this.optionsMarginRight = pick(optionsChart.marginRight, margin[1]); - this.optionsMarginBottom = pick(optionsChart.marginBottom, margin[2]); - this.optionsMarginLeft = pick(optionsChart.marginLeft, margin[3]); - - var chartEvents = optionsChart.events; - - this.runChartClick = chartEvents && !!chartEvents.click; - this.bounds = { h: {}, v: {} }; // Pixel data bounds for touch zoom - - this.callback = callback; - this.isResizing = 0; - this.options = options; - //chartTitleOptions = UNDEFINED; - //chartSubtitleOptions = UNDEFINED; - - this.axes = []; - this.series = []; - this.hasCartesianSeries = optionsChart.showAxes; - //this.axisOffset = UNDEFINED; - //this.maxTicks = UNDEFINED; // handle the greatest amount of ticks on grouped axes - //this.inverted = UNDEFINED; - //this.loadingShown = UNDEFINED; - //this.container = UNDEFINED; - //this.chartWidth = UNDEFINED; - //this.chartHeight = UNDEFINED; - //this.marginRight = UNDEFINED; - //this.marginBottom = UNDEFINED; - //this.containerWidth = UNDEFINED; - //this.containerHeight = UNDEFINED; - //this.oldChartWidth = UNDEFINED; - //this.oldChartHeight = UNDEFINED; - - //this.renderTo = UNDEFINED; - //this.renderToClone = UNDEFINED; - - //this.spacingBox = UNDEFINED - - //this.legend = UNDEFINED; - - // Elements - //this.chartBackground = UNDEFINED; - //this.plotBackground = UNDEFINED; - //this.plotBGImage = UNDEFINED; - //this.plotBorder = UNDEFINED; - //this.loadingDiv = UNDEFINED; - //this.loadingSpan = UNDEFINED; - - var chart = this, - eventType; - - // Add the chart to the global lookup - chart.index = charts.length; - charts.push(chart); - - // Set up auto resize - if (optionsChart.reflow !== false) { - addEvent(chart, 'load', function () { - chart.initReflow(); - }); - } - - // Chart event handlers - if (chartEvents) { - for (eventType in chartEvents) { - addEvent(chart, eventType, chartEvents[eventType]); - } - } - - chart.xAxis = []; - chart.yAxis = []; - - // Expose methods and variables - chart.animation = useCanVG ? false : pick(optionsChart.animation, true); - chart.pointCount = 0; - chart.counters = new ChartCounters(); - - chart.firstRender(); - }, - - /** - * Initialize an individual series, called internally before render time - */ - initSeries: function (options) { - var chart = this, - optionsChart = chart.options.chart, - type = options.type || optionsChart.type || optionsChart.defaultSeriesType, - series, - constr = seriesTypes[type]; - - // No such series type - if (!constr) { - error(17, true); - } - - series = new constr(); - series.init(this, options); - return series; - }, - - /** - * Add a series dynamically after time - * - * @param {Object} options The config options - * @param {Boolean} redraw Whether to redraw the chart after adding. Defaults to true. - * @param {Boolean|Object} animation Whether to apply animation, and optionally animation - * configuration - * - * @return {Object} series The newly created series object - */ - addSeries: function (options, redraw, animation) { - var series, - chart = this; - - if (options) { - redraw = pick(redraw, true); // defaults to true - - fireEvent(chart, 'addSeries', { options: options }, function () { - series = chart.initSeries(options); - - chart.isDirtyLegend = true; // the series array is out of sync with the display - if (redraw) { - chart.redraw(animation); - } - }); - } - - return series; - }, - - /** - * Add an axis to the chart - * @param {Object} options The axis option - * @param {Boolean} isX Whether it is an X axis or a value axis - */ - addAxis: function (options, isX, redraw, animation) { - var key = isX ? 'xAxis' : 'yAxis', - chartOptions = this.options, - axis; - - /*jslint unused: false*/ - axis = new Axis(this, merge(options, { - index: this[key].length - })); - /*jslint unused: true*/ - - // Push the new axis options to the chart options - chartOptions[key] = splat(chartOptions[key] || {}); - chartOptions[key].push(options); - - if (pick(redraw, true)) { - this.redraw(animation); - } - }, - - /** - * Check whether a given point is within the plot area - * - * @param {Number} plotX Pixel x relative to the plot area - * @param {Number} plotY Pixel y relative to the plot area - * @param {Boolean} inverted Whether the chart is inverted - */ - isInsidePlot: function (plotX, plotY, inverted) { - var x = inverted ? plotY : plotX, - y = inverted ? plotX : plotY; - - return x >= 0 && - x <= this.plotWidth && - y >= 0 && - y <= this.plotHeight; - }, - - /** - * Adjust all axes tick amounts - */ - adjustTickAmounts: function () { - if (this.options.chart.alignTicks !== false) { - each(this.axes, function (axis) { - axis.adjustTickAmount(); - }); - } - this.maxTicks = null; - }, - - /** - * Redraw legend, axes or series based on updated data - * - * @param {Boolean|Object} animation Whether to apply animation, and optionally animation - * configuration - */ - redraw: function (animation) { - var chart = this, - axes = chart.axes, - series = chart.series, - pointer = chart.pointer, - legend = chart.legend, - redrawLegend = chart.isDirtyLegend, - hasStackedSeries, - isDirtyBox = chart.isDirtyBox, // todo: check if it has actually changed? - seriesLength = series.length, - i = seriesLength, - serie, - renderer = chart.renderer, - isHiddenChart = renderer.isHidden(), - afterRedraw = []; - - setAnimation(animation, chart); - - if (isHiddenChart) { - chart.cloneRenderTo(); - } - - // link stacked series - while (i--) { - serie = series[i]; - if (serie.isDirty && serie.options.stacking) { - hasStackedSeries = true; - break; - } - } - if (hasStackedSeries) { // mark others as dirty - i = seriesLength; - while (i--) { - serie = series[i]; - if (serie.options.stacking) { - serie.isDirty = true; - } - } - } - - // handle updated data in the series - each(series, function (serie) { - if (serie.isDirty) { // prepare the data so axis can read it - if (serie.options.legendType === 'point') { - redrawLegend = true; - } - } - }); - - // handle added or removed series - if (redrawLegend && legend.options.enabled) { // series or pie points are added or removed - // draw legend graphics - legend.render(); - - chart.isDirtyLegend = false; - } - - - if (chart.hasCartesianSeries) { - if (!chart.isResizing) { - - // reset maxTicks - chart.maxTicks = null; - - // set axes scales - each(axes, function (axis) { - axis.setScale(); - }); - } - chart.adjustTickAmounts(); - chart.getMargins(); - - // redraw axes - each(axes, function (axis) { - - // Fire 'afterSetExtremes' only if extremes are set - if (axis.isDirtyExtremes) { // #821 - axis.isDirtyExtremes = false; - afterRedraw.push(function () { // prevent a recursive call to chart.redraw() (#1119) - fireEvent(axis, 'afterSetExtremes', axis.getExtremes()); // #747, #751 - }); - } - - if (axis.isDirty || isDirtyBox || hasStackedSeries) { - axis.redraw(); - isDirtyBox = true; // #792 - } - }); - - - } - // the plot areas size has changed - if (isDirtyBox) { - chart.drawChartBox(); - } - - - - // redraw affected series - each(series, function (serie) { - if (serie.isDirty && serie.visible && - (!serie.isCartesian || serie.xAxis)) { // issue #153 - serie.redraw(); - } - }); - - // move tooltip or reset - if (pointer && pointer.reset) { - pointer.reset(true); - } - - // redraw if canvas - renderer.draw(); - - // fire the event - fireEvent(chart, 'redraw'); // jQuery breaks this when calling it from addEvent. Overwrites chart.redraw - - if (isHiddenChart) { - chart.cloneRenderTo(true); - } - - // Fire callbacks that are put on hold until after the redraw - each(afterRedraw, function (callback) { - callback.call(); - }); - }, - - - - /** - * Dim the chart and show a loading text or symbol - * @param {String} str An optional text to show in the loading label instead of the default one - */ - showLoading: function (str) { - var chart = this, - options = chart.options, - loadingDiv = chart.loadingDiv; - - var loadingOptions = options.loading; - - // create the layer at the first call - if (!loadingDiv) { - chart.loadingDiv = loadingDiv = createElement(DIV, { - className: PREFIX + 'loading' - }, extend(loadingOptions.style, { - zIndex: 10, - display: NONE - }), chart.container); - - chart.loadingSpan = createElement( - 'span', - null, - loadingOptions.labelStyle, - loadingDiv - ); - - } - - // update text - chart.loadingSpan.innerHTML = str || options.lang.loading; - - // show it - if (!chart.loadingShown) { - css(loadingDiv, { - opacity: 0, - display: '', - left: chart.plotLeft + PX, - top: chart.plotTop + PX, - width: chart.plotWidth + PX, - height: chart.plotHeight + PX - }); - animate(loadingDiv, { - opacity: loadingOptions.style.opacity - }, { - duration: loadingOptions.showDuration || 0 - }); - chart.loadingShown = true; - } - }, - - /** - * Hide the loading layer - */ - hideLoading: function () { - var options = this.options, - loadingDiv = this.loadingDiv; - - if (loadingDiv) { - animate(loadingDiv, { - opacity: 0 - }, { - duration: options.loading.hideDuration || 100, - complete: function () { - css(loadingDiv, { display: NONE }); - } - }); - } - this.loadingShown = false; - }, - - /** - * Get an axis, series or point object by id. - * @param id {String} The id as given in the configuration options - */ - get: function (id) { - var chart = this, - axes = chart.axes, - series = chart.series; - - var i, - j, - points; - - // search axes - for (i = 0; i < axes.length; i++) { - if (axes[i].options.id === id) { - return axes[i]; - } - } - - // search series - for (i = 0; i < series.length; i++) { - if (series[i].options.id === id) { - return series[i]; - } - } - - // search points - for (i = 0; i < series.length; i++) { - points = series[i].points || []; - for (j = 0; j < points.length; j++) { - if (points[j].id === id) { - return points[j]; - } - } - } - return null; - }, - - /** - * Create the Axis instances based on the config options - */ - getAxes: function () { - var chart = this, - options = this.options, - xAxisOptions = options.xAxis = splat(options.xAxis || {}), - yAxisOptions = options.yAxis = splat(options.yAxis || {}), - optionsArray, - axis; - - // make sure the options are arrays and add some members - each(xAxisOptions, function (axis, i) { - axis.index = i; - axis.isX = true; - }); - - each(yAxisOptions, function (axis, i) { - axis.index = i; - }); - - // concatenate all axis options into one array - optionsArray = xAxisOptions.concat(yAxisOptions); - - each(optionsArray, function (axisOptions) { - axis = new Axis(chart, axisOptions); - }); - - chart.adjustTickAmounts(); - }, - - - /** - * Get the currently selected points from all series - */ - getSelectedPoints: function () { - var points = []; - each(this.series, function (serie) { - points = points.concat(grep(serie.points || [], function (point) { - return point.selected; - })); - }); - return points; - }, - - /** - * Get the currently selected series - */ - getSelectedSeries: function () { - return grep(this.series, function (serie) { - return serie.selected; - }); - }, - - /** - * Display the zoom button - */ - showResetZoom: function () { - var chart = this, - lang = defaultOptions.lang, - btnOptions = chart.options.chart.resetZoomButton, - theme = btnOptions.theme, - states = theme.states, - alignTo = btnOptions.relativeTo === 'chart' ? null : 'plotBox'; - - this.resetZoomButton = chart.renderer.button(lang.resetZoom, null, null, function () { chart.zoomOut(); }, theme, states && states.hover) - .attr({ - align: btnOptions.position.align, - title: lang.resetZoomTitle - }) - .add() - .align(btnOptions.position, false, alignTo); - - }, - - /** - * Zoom out to 1:1 - */ - zoomOut: function () { - var chart = this; - fireEvent(chart, 'selection', { resetSelection: true }, function () { - chart.zoom(); - }); - }, - - /** - * Zoom into a given portion of the chart given by axis coordinates - * @param {Object} event - */ - zoom: function (event) { - var chart = this, - hasZoomed, - pointer = chart.pointer, - displayButton = false, - resetZoomButton; - - // If zoom is called with no arguments, reset the axes - if (!event || event.resetSelection) { - each(chart.axes, function (axis) { - hasZoomed = axis.zoom(); - }); - } else { // else, zoom in on all axes - each(event.xAxis.concat(event.yAxis), function (axisData) { - var axis = axisData.axis, - isXAxis = axis.isXAxis; - - // don't zoom more than minRange - if (pointer[isXAxis ? 'zoomX' : 'zoomY'] || pointer[isXAxis ? 'pinchX' : 'pinchY']) { - hasZoomed = axis.zoom(axisData.min, axisData.max); - if (axis.displayBtn) { - displayButton = true; - } - } - }); - } - - // Show or hide the Reset zoom button - resetZoomButton = chart.resetZoomButton; - if (displayButton && !resetZoomButton) { - chart.showResetZoom(); - } else if (!displayButton && isObject(resetZoomButton)) { - chart.resetZoomButton = resetZoomButton.destroy(); - } - - - // Redraw - if (hasZoomed) { - chart.redraw( - pick(chart.options.chart.animation, event && event.animation, chart.pointCount < 100) // animation - ); - } - }, - - /** - * Pan the chart by dragging the mouse across the pane. This function is called - * on mouse move, and the distance to pan is computed from chartX compared to - * the first chartX position in the dragging operation. - */ - pan: function (chartX) { - var chart = this, - xAxis = chart.xAxis[0], - mouseDownX = chart.mouseDownX, - halfPointRange = xAxis.pointRange / 2, - extremes = xAxis.getExtremes(), - newMin = xAxis.translate(mouseDownX - chartX, true) + halfPointRange, - newMax = xAxis.translate(mouseDownX + chart.plotWidth - chartX, true) - halfPointRange, - hoverPoints = chart.hoverPoints; - - // remove active points for shared tooltip - if (hoverPoints) { - each(hoverPoints, function (point) { - point.setState(); - }); - } - - if (xAxis.series.length && newMin > mathMin(extremes.dataMin, extremes.min) && newMax < mathMax(extremes.dataMax, extremes.max)) { - xAxis.setExtremes(newMin, newMax, true, false, { trigger: 'pan' }); - } - - chart.mouseDownX = chartX; // set new reference for next run - css(chart.container, { cursor: 'move' }); - }, - - /** - * Show the title and subtitle of the chart - * - * @param titleOptions {Object} New title options - * @param subtitleOptions {Object} New subtitle options - * - */ - setTitle: function (titleOptions, subtitleOptions) { - var chart = this, - options = chart.options, - chartTitleOptions, - chartSubtitleOptions; - - chartTitleOptions = options.title = merge(options.title, titleOptions); - chartSubtitleOptions = options.subtitle = merge(options.subtitle, subtitleOptions); - - // add title and subtitle - each([ - ['title', titleOptions, chartTitleOptions], - ['subtitle', subtitleOptions, chartSubtitleOptions] - ], function (arr) { - var name = arr[0], - title = chart[name], - titleOptions = arr[1], - chartTitleOptions = arr[2]; - - if (title && titleOptions) { - chart[name] = title = title.destroy(); // remove old - } - - if (chartTitleOptions && chartTitleOptions.text && !title) { - chart[name] = chart.renderer.text( - chartTitleOptions.text, - 0, - 0, - chartTitleOptions.useHTML - ) - .attr({ - align: chartTitleOptions.align, - 'class': PREFIX + name, - zIndex: chartTitleOptions.zIndex || 4 - }) - .css(chartTitleOptions.style) - .add() - .align(chartTitleOptions, false, 'spacingBox'); - } - }); - - }, - - /** - * Get chart width and height according to options and container size - */ - getChartSize: function () { - var chart = this, - optionsChart = chart.options.chart, - renderTo = chart.renderToClone || chart.renderTo; - - // get inner width and height from jQuery (#824) - chart.containerWidth = adapterRun(renderTo, 'width'); - chart.containerHeight = adapterRun(renderTo, 'height'); - - chart.chartWidth = mathMax(0, optionsChart.width || chart.containerWidth || 600); // #1393, 1460 - chart.chartHeight = mathMax(0, pick(optionsChart.height, - // the offsetHeight of an empty container is 0 in standard browsers, but 19 in IE7: - chart.containerHeight > 19 ? chart.containerHeight : 400)); - }, - - /** - * Create a clone of the chart's renderTo div and place it outside the viewport to allow - * size computation on chart.render and chart.redraw - */ - cloneRenderTo: function (revert) { - var clone = this.renderToClone, - container = this.container; - - // Destroy the clone and bring the container back to the real renderTo div - if (revert) { - if (clone) { - this.renderTo.appendChild(container); - discardElement(clone); - delete this.renderToClone; - } - - // Set up the clone - } else { - if (container) { - this.renderTo.removeChild(container); // do not clone this - } - this.renderToClone = clone = this.renderTo.cloneNode(0); - css(clone, { - position: ABSOLUTE, - top: '-9999px', - display: 'block' // #833 - }); - doc.body.appendChild(clone); - if (container) { - clone.appendChild(container); - } - } - }, - - /** - * Get the containing element, determine the size and create the inner container - * div to hold the chart - */ - getContainer: function () { - var chart = this, - container, - optionsChart = chart.options.chart, - chartWidth, - chartHeight, - renderTo, - indexAttrName = 'data-highcharts-chart', - oldChartIndex, - containerId; - - chart.renderTo = renderTo = optionsChart.renderTo; - containerId = PREFIX + idCounter++; - - if (isString(renderTo)) { - chart.renderTo = renderTo = doc.getElementById(renderTo); - } - - // Display an error if the renderTo is wrong - if (!renderTo) { - error(13, true); - } - - // If the container already holds a chart, destroy it - oldChartIndex = pInt(attr(renderTo, indexAttrName)); - if (!isNaN(oldChartIndex) && charts[oldChartIndex]) { - charts[oldChartIndex].destroy(); - } - - // Make a reference to the chart from the div - attr(renderTo, indexAttrName, chart.index); - - // remove previous chart - renderTo.innerHTML = ''; - - // If the container doesn't have an offsetWidth, it has or is a child of a node - // that has display:none. We need to temporarily move it out to a visible - // state to determine the size, else the legend and tooltips won't render - // properly - if (!renderTo.offsetWidth) { - chart.cloneRenderTo(); - } - - // get the width and height - chart.getChartSize(); - chartWidth = chart.chartWidth; - chartHeight = chart.chartHeight; - - // create the inner container - chart.container = container = createElement(DIV, { - className: PREFIX + 'container' + - (optionsChart.className ? ' ' + optionsChart.className : ''), - id: containerId - }, extend({ - position: RELATIVE, - overflow: HIDDEN, // needed for context menu (avoid scrollbars) and - // content overflow in IE - width: chartWidth + PX, - height: chartHeight + PX, - textAlign: 'left', - lineHeight: 'normal', // #427 - zIndex: 0 // #1072 - }, optionsChart.style), - chart.renderToClone || renderTo - ); - - // cache the cursor (#1650) - chart._cursor = container.style.cursor; - - chart.renderer = - optionsChart.forExport ? // force SVG, used for SVG export - new SVGRenderer(container, chartWidth, chartHeight, true) : - new Renderer(container, chartWidth, chartHeight); - - if (useCanVG) { - // If we need canvg library, extend and configure the renderer - // to get the tracker for translating mouse events - chart.renderer.create(chart, container, chartWidth, chartHeight); - } - }, - - /** - * Calculate margins by rendering axis labels in a preliminary position. Title, - * subtitle and legend have already been rendered at this stage, but will be - * moved into their final positions - */ - getMargins: function () { - var chart = this, - optionsChart = chart.options.chart, - spacingTop = optionsChart.spacingTop, - spacingRight = optionsChart.spacingRight, - spacingBottom = optionsChart.spacingBottom, - spacingLeft = optionsChart.spacingLeft, - axisOffset, - legend = chart.legend, - optionsMarginTop = chart.optionsMarginTop, - optionsMarginLeft = chart.optionsMarginLeft, - optionsMarginRight = chart.optionsMarginRight, - optionsMarginBottom = chart.optionsMarginBottom, - chartTitleOptions = chart.options.title, - chartSubtitleOptions = chart.options.subtitle, - legendOptions = chart.options.legend, - legendMargin = pick(legendOptions.margin, 10), - legendX = legendOptions.x, - legendY = legendOptions.y, - align = legendOptions.align, - verticalAlign = legendOptions.verticalAlign, - titleOffset; - - chart.resetMargins(); - axisOffset = chart.axisOffset; - - // adjust for title and subtitle - if ((chart.title || chart.subtitle) && !defined(chart.optionsMarginTop)) { - titleOffset = mathMax( - (chart.title && !chartTitleOptions.floating && !chartTitleOptions.verticalAlign && chartTitleOptions.y) || 0, - (chart.subtitle && !chartSubtitleOptions.floating && !chartSubtitleOptions.verticalAlign && chartSubtitleOptions.y) || 0 - ); - if (titleOffset) { - chart.plotTop = mathMax(chart.plotTop, titleOffset + pick(chartTitleOptions.margin, 15) + spacingTop); - } - } - // adjust for legend - if (legend.display && !legendOptions.floating) { - if (align === 'right') { // horizontal alignment handled first - if (!defined(optionsMarginRight)) { - chart.marginRight = mathMax( - chart.marginRight, - legend.legendWidth - legendX + legendMargin + spacingRight - ); - } - } else if (align === 'left') { - if (!defined(optionsMarginLeft)) { - chart.plotLeft = mathMax( - chart.plotLeft, - legend.legendWidth + legendX + legendMargin + spacingLeft - ); - } - - } else if (verticalAlign === 'top') { - if (!defined(optionsMarginTop)) { - chart.plotTop = mathMax( - chart.plotTop, - legend.legendHeight + legendY + legendMargin + spacingTop - ); - } - - } else if (verticalAlign === 'bottom') { - if (!defined(optionsMarginBottom)) { - chart.marginBottom = mathMax( - chart.marginBottom, - legend.legendHeight - legendY + legendMargin + spacingBottom - ); - } - } - } - - // adjust for scroller - if (chart.extraBottomMargin) { - chart.marginBottom += chart.extraBottomMargin; - } - if (chart.extraTopMargin) { - chart.plotTop += chart.extraTopMargin; - } - - // pre-render axes to get labels offset width - if (chart.hasCartesianSeries) { - each(chart.axes, function (axis) { - axis.getOffset(); - }); - } - - if (!defined(optionsMarginLeft)) { - chart.plotLeft += axisOffset[3]; - } - if (!defined(optionsMarginTop)) { - chart.plotTop += axisOffset[0]; - } - if (!defined(optionsMarginBottom)) { - chart.marginBottom += axisOffset[2]; - } - if (!defined(optionsMarginRight)) { - chart.marginRight += axisOffset[1]; - } - - chart.setChartSize(); - - }, - - /** - * Add the event handlers necessary for auto resizing - * - */ - initReflow: function () { - var chart = this, - optionsChart = chart.options.chart, - renderTo = chart.renderTo, - reflowTimeout; - - function reflow(e) { - var width = optionsChart.width || adapterRun(renderTo, 'width'), - height = optionsChart.height || adapterRun(renderTo, 'height'), - target = e ? e.target : win; // #805 - MooTools doesn't supply e - - // Width and height checks for display:none. Target is doc in IE8 and Opera, - // win in Firefox, Chrome and IE9. - if (!chart.hasUserSize && width && height && (target === win || target === doc)) { - - if (width !== chart.containerWidth || height !== chart.containerHeight) { - clearTimeout(reflowTimeout); - chart.reflowTimeout = reflowTimeout = setTimeout(function () { - if (chart.container) { // It may have been destroyed in the meantime (#1257) - chart.setSize(width, height, false); - chart.hasUserSize = null; - } - }, 100); - } - chart.containerWidth = width; - chart.containerHeight = height; - } - } - addEvent(win, 'resize', reflow); - addEvent(chart, 'destroy', function () { - removeEvent(win, 'resize', reflow); - }); - }, - - /** - * Resize the chart to a given width and height - * @param {Number} width - * @param {Number} height - * @param {Object|Boolean} animation - */ - setSize: function (width, height, animation) { - var chart = this, - chartWidth, - chartHeight, - fireEndResize; - - // Handle the isResizing counter - chart.isResizing += 1; - fireEndResize = function () { - if (chart) { - fireEvent(chart, 'endResize', null, function () { - chart.isResizing -= 1; - }); - } - }; - - // set the animation for the current process - setAnimation(animation, chart); - - chart.oldChartHeight = chart.chartHeight; - chart.oldChartWidth = chart.chartWidth; - if (defined(width)) { - chart.chartWidth = chartWidth = mathMax(0, mathRound(width)); - chart.hasUserSize = !!chartWidth; - } - if (defined(height)) { - chart.chartHeight = chartHeight = mathMax(0, mathRound(height)); - } - - css(chart.container, { - width: chartWidth + PX, - height: chartHeight + PX - }); - chart.setChartSize(true); - chart.renderer.setSize(chartWidth, chartHeight, animation); - - // handle axes - chart.maxTicks = null; - each(chart.axes, function (axis) { - axis.isDirty = true; - axis.setScale(); - }); - - // make sure non-cartesian series are also handled - each(chart.series, function (serie) { - serie.isDirty = true; - }); - - chart.isDirtyLegend = true; // force legend redraw - chart.isDirtyBox = true; // force redraw of plot and chart border - - chart.getMargins(); - - chart.redraw(animation); - - - chart.oldChartHeight = null; - fireEvent(chart, 'resize'); - - // fire endResize and set isResizing back - // If animation is disabled, fire without delay - if (globalAnimation === false) { - fireEndResize(); - } else { // else set a timeout with the animation duration - setTimeout(fireEndResize, (globalAnimation && globalAnimation.duration) || 500); - } - }, - - /** - * Set the public chart properties. This is done before and after the pre-render - * to determine margin sizes - */ - setChartSize: function (skipAxes) { - var chart = this, - inverted = chart.inverted, - renderer = chart.renderer, - chartWidth = chart.chartWidth, - chartHeight = chart.chartHeight, - optionsChart = chart.options.chart, - spacingTop = optionsChart.spacingTop, - spacingRight = optionsChart.spacingRight, - spacingBottom = optionsChart.spacingBottom, - spacingLeft = optionsChart.spacingLeft, - clipOffset = chart.clipOffset, - clipX, - clipY, - plotLeft, - plotTop, - plotWidth, - plotHeight, - plotBorderWidth; - - chart.plotLeft = plotLeft = mathRound(chart.plotLeft); - chart.plotTop = plotTop = mathRound(chart.plotTop); - chart.plotWidth = plotWidth = mathMax(0, mathRound(chartWidth - plotLeft - chart.marginRight)); - chart.plotHeight = plotHeight = mathMax(0, mathRound(chartHeight - plotTop - chart.marginBottom)); - - chart.plotSizeX = inverted ? plotHeight : plotWidth; - chart.plotSizeY = inverted ? plotWidth : plotHeight; - - chart.plotBorderWidth = plotBorderWidth = optionsChart.plotBorderWidth || 0; - - // Set boxes used for alignment - chart.spacingBox = renderer.spacingBox = { - x: spacingLeft, - y: spacingTop, - width: chartWidth - spacingLeft - spacingRight, - height: chartHeight - spacingTop - spacingBottom - }; - chart.plotBox = renderer.plotBox = { - x: plotLeft, - y: plotTop, - width: plotWidth, - height: plotHeight - }; - clipX = mathCeil(mathMax(plotBorderWidth, clipOffset[3]) / 2); - clipY = mathCeil(mathMax(plotBorderWidth, clipOffset[0]) / 2); - chart.clipBox = { - x: clipX, - y: clipY, - width: mathFloor(chart.plotSizeX - mathMax(plotBorderWidth, clipOffset[1]) / 2 - clipX), - height: mathFloor(chart.plotSizeY - mathMax(plotBorderWidth, clipOffset[2]) / 2 - clipY) - }; - - if (!skipAxes) { - each(chart.axes, function (axis) { - axis.setAxisSize(); - axis.setAxisTranslation(); - }); - } - }, - - /** - * Initial margins before auto size margins are applied - */ - resetMargins: function () { - var chart = this, - optionsChart = chart.options.chart, - spacingTop = optionsChart.spacingTop, - spacingRight = optionsChart.spacingRight, - spacingBottom = optionsChart.spacingBottom, - spacingLeft = optionsChart.spacingLeft; - - chart.plotTop = pick(chart.optionsMarginTop, spacingTop); - chart.marginRight = pick(chart.optionsMarginRight, spacingRight); - chart.marginBottom = pick(chart.optionsMarginBottom, spacingBottom); - chart.plotLeft = pick(chart.optionsMarginLeft, spacingLeft); - chart.axisOffset = [0, 0, 0, 0]; // top, right, bottom, left - chart.clipOffset = [0, 0, 0, 0]; - }, - - /** - * Draw the borders and backgrounds for chart and plot area - */ - drawChartBox: function () { - var chart = this, - optionsChart = chart.options.chart, - renderer = chart.renderer, - chartWidth = chart.chartWidth, - chartHeight = chart.chartHeight, - chartBackground = chart.chartBackground, - plotBackground = chart.plotBackground, - plotBorder = chart.plotBorder, - plotBGImage = chart.plotBGImage, - chartBorderWidth = optionsChart.borderWidth || 0, - chartBackgroundColor = optionsChart.backgroundColor, - plotBackgroundColor = optionsChart.plotBackgroundColor, - plotBackgroundImage = optionsChart.plotBackgroundImage, - plotBorderWidth = optionsChart.plotBorderWidth || 0, - mgn, - bgAttr, - plotLeft = chart.plotLeft, - plotTop = chart.plotTop, - plotWidth = chart.plotWidth, - plotHeight = chart.plotHeight, - plotBox = chart.plotBox, - clipRect = chart.clipRect, - clipBox = chart.clipBox; - - // Chart area - mgn = chartBorderWidth + (optionsChart.shadow ? 8 : 0); - - if (chartBorderWidth || chartBackgroundColor) { - if (!chartBackground) { - - bgAttr = { - fill: chartBackgroundColor || NONE - }; - if (chartBorderWidth) { // #980 - bgAttr.stroke = optionsChart.borderColor; - bgAttr['stroke-width'] = chartBorderWidth; - } - chart.chartBackground = renderer.rect(mgn / 2, mgn / 2, chartWidth - mgn, chartHeight - mgn, - optionsChart.borderRadius, chartBorderWidth) - .attr(bgAttr) - .add() - .shadow(optionsChart.shadow); - - } else { // resize - chartBackground.animate( - chartBackground.crisp(null, null, null, chartWidth - mgn, chartHeight - mgn) - ); - } - } - - - // Plot background - if (plotBackgroundColor) { - if (!plotBackground) { - chart.plotBackground = renderer.rect(plotLeft, plotTop, plotWidth, plotHeight, 0) - .attr({ - fill: plotBackgroundColor - }) - .add() - .shadow(optionsChart.plotShadow); - } else { - plotBackground.animate(plotBox); - } - } - if (plotBackgroundImage) { - if (!plotBGImage) { - chart.plotBGImage = renderer.image(plotBackgroundImage, plotLeft, plotTop, plotWidth, plotHeight) - .add(); - } else { - plotBGImage.animate(plotBox); - } - } - - // Plot clip - if (!clipRect) { - chart.clipRect = renderer.clipRect(clipBox); - } else { - clipRect.animate({ - width: clipBox.width, - height: clipBox.height - }); - } - - // Plot area border - if (plotBorderWidth) { - if (!plotBorder) { - chart.plotBorder = renderer.rect(plotLeft, plotTop, plotWidth, plotHeight, 0, plotBorderWidth) - .attr({ - stroke: optionsChart.plotBorderColor, - 'stroke-width': plotBorderWidth, - zIndex: 1 - }) - .add(); - } else { - plotBorder.animate( - plotBorder.crisp(null, plotLeft, plotTop, plotWidth, plotHeight) - ); - } - } - - // reset - chart.isDirtyBox = false; - }, - - /** - * Detect whether a certain chart property is needed based on inspecting its options - * and series. This mainly applies to the chart.invert property, and in extensions to - * the chart.angular and chart.polar properties. - */ - propFromSeries: function () { - var chart = this, - optionsChart = chart.options.chart, - klass, - seriesOptions = chart.options.series, - i, - value; - - - each(['inverted', 'angular', 'polar'], function (key) { - - // The default series type's class - klass = seriesTypes[optionsChart.type || optionsChart.defaultSeriesType]; - - // Get the value from available chart-wide properties - value = ( - chart[key] || // 1. it is set before - optionsChart[key] || // 2. it is set in the options - (klass && klass.prototype[key]) // 3. it's default series class requires it - ); - - // 4. Check if any the chart's series require it - i = seriesOptions && seriesOptions.length; - while (!value && i--) { - klass = seriesTypes[seriesOptions[i].type]; - if (klass && klass.prototype[key]) { - value = true; - } - } - - // Set the chart property - chart[key] = value; - }); - - }, - - /** - * Render all graphics for the chart - */ - render: function () { - var chart = this, - axes = chart.axes, - renderer = chart.renderer, - options = chart.options; - - var labels = options.labels, - credits = options.credits, - creditsHref; - - // Title - chart.setTitle(); - - - // Legend - chart.legend = new Legend(chart, options.legend); - - // Get margins by pre-rendering axes - // set axes scales - each(axes, function (axis) { - axis.setScale(); - }); - chart.getMargins(); - - chart.maxTicks = null; // reset for second pass - each(axes, function (axis) { - axis.setTickPositions(true); // update to reflect the new margins - axis.setMaxTicks(); - }); - chart.adjustTickAmounts(); - chart.getMargins(); // second pass to check for new labels - - - // Draw the borders and backgrounds - chart.drawChartBox(); - - - // Axes - if (chart.hasCartesianSeries) { - each(axes, function (axis) { - axis.render(); - }); - } - - // The series - if (!chart.seriesGroup) { - chart.seriesGroup = renderer.g('series-group') - .attr({ zIndex: 3 }) - .add(); - } - each(chart.series, function (serie) { - serie.translate(); - serie.setTooltipPoints(); - serie.render(); - }); - - // Labels - if (labels.items) { - each(labels.items, function (label) { - var style = extend(labels.style, label.style), - x = pInt(style.left) + chart.plotLeft, - y = pInt(style.top) + chart.plotTop + 12; - - // delete to prevent rewriting in IE - delete style.left; - delete style.top; - - renderer.text( - label.html, - x, - y - ) - .attr({ zIndex: 2 }) - .css(style) - .add(); - - }); - } - - // Credits - if (credits.enabled && !chart.credits) { - creditsHref = credits.href; - chart.credits = renderer.text( - credits.text, - 0, - 0 - ) - .on('click', function () { - if (creditsHref) { - location.href = creditsHref; - } - }) - .attr({ - align: credits.position.align, - zIndex: 8 - }) - .css(credits.style) - .add() - .align(credits.position); - } - - // Set flag - chart.hasRendered = true; - - }, - - /** - * Clean up memory usage - */ - destroy: function () { - var chart = this, - axes = chart.axes, - series = chart.series, - container = chart.container, - i, - parentNode = container && container.parentNode; - - // fire the chart.destoy event - fireEvent(chart, 'destroy'); - - // Delete the chart from charts lookup array - charts[chart.index] = UNDEFINED; - chart.renderTo.removeAttribute('data-highcharts-chart'); - - // remove events - removeEvent(chart); - - // ==== Destroy collections: - // Destroy axes - i = axes.length; - while (i--) { - axes[i] = axes[i].destroy(); - } - - // Destroy each series - i = series.length; - while (i--) { - series[i] = series[i].destroy(); - } - - // ==== Destroy chart properties: - each(['title', 'subtitle', 'chartBackground', 'plotBackground', 'plotBGImage', - 'plotBorder', 'seriesGroup', 'clipRect', 'credits', 'pointer', 'scroller', - 'rangeSelector', 'legend', 'resetZoomButton', 'tooltip', 'renderer'], function (name) { - var prop = chart[name]; - - if (prop && prop.destroy) { - chart[name] = prop.destroy(); - } - }); - - // remove container and all SVG - if (container) { // can break in IE when destroyed before finished loading - container.innerHTML = ''; - removeEvent(container); - if (parentNode) { - discardElement(container); - } - - } - - // clean it all up - for (i in chart) { - delete chart[i]; - } - - }, - - - /** - * VML namespaces can't be added until after complete. Listening - * for Perini's doScroll hack is not enough. - */ - isReadyToRender: function () { - var chart = this; - - // Note: in spite of JSLint's complaints, win == win.top is required - /*jslint eqeq: true*/ - if ((!hasSVG && (win == win.top && doc.readyState !== 'complete')) || (useCanVG && !win.canvg)) { - /*jslint eqeq: false*/ - if (useCanVG) { - // Delay rendering until canvg library is downloaded and ready - CanVGController.push(function () { chart.firstRender(); }, chart.options.global.canvasToolsURL); - } else { - doc.attachEvent('onreadystatechange', function () { - doc.detachEvent('onreadystatechange', chart.firstRender); - if (doc.readyState === 'complete') { - chart.firstRender(); - } - }); - } - return false; - } - return true; - }, - - /** - * Prepare for first rendering after all data are loaded - */ - firstRender: function () { - var chart = this, - options = chart.options, - callback = chart.callback; - - // Check whether the chart is ready to render - if (!chart.isReadyToRender()) { - return; - } - - // Create the container - chart.getContainer(); - - // Run an early event after the container and renderer are established - fireEvent(chart, 'init'); - - - chart.resetMargins(); - chart.setChartSize(); - - // Set the common chart properties (mainly invert) from the given series - chart.propFromSeries(); - - // get axes - chart.getAxes(); - - // Initialize the series - each(options.series || [], function (serieOptions) { - chart.initSeries(serieOptions); - }); - - // Run an event after axes and series are initialized, but before render. At this stage, - // the series data is indexed and cached in the xData and yData arrays, so we can access - // those before rendering. Used in Highstock. - fireEvent(chart, 'beforeRender'); - - // depends on inverted and on margins being set - chart.pointer = new Pointer(chart, options); - - chart.render(); - - // add canvas - chart.renderer.draw(); - // run callbacks - if (callback) { - callback.apply(chart, [chart]); - } - each(chart.callbacks, function (fn) { - fn.apply(chart, [chart]); - }); - - - // If the chart was rendered outside the top container, put it back in - chart.cloneRenderTo(true); - - fireEvent(chart, 'load'); - - } -}; // end Chart - -// Hook for exporting module -Chart.prototype.callbacks = []; -/** - * The Point object and prototype. Inheritable and used as base for PiePoint - */ -var Point = function () {}; -Point.prototype = { - - /** - * Initialize the point - * @param {Object} series The series object containing this point - * @param {Object} options The data in either number, array or object format - */ - init: function (series, options, x) { - - var point = this, - colors; - point.series = series; - point.applyOptions(options, x); - point.pointAttr = {}; - - if (series.options.colorByPoint) { - colors = series.options.colors || series.chart.options.colors; - point.color = point.color || colors[series.colorCounter++]; - // loop back to zero - if (series.colorCounter === colors.length) { - series.colorCounter = 0; - } - } - - series.chart.pointCount++; - return point; - }, - /** - * Apply the options containing the x and y data and possible some extra properties. - * This is called on point init or from point.update. - * - * @param {Object} options - */ - applyOptions: function (options, x) { - var point = this, - series = point.series, - pointValKey = series.pointValKey; - - options = Point.prototype.optionsToObject.call(this, options); - - // copy options directly to point - extend(point, options); - point.options = point.options ? extend(point.options, options) : options; - - // For higher dimension series types. For instance, for ranges, point.y is mapped to point.low. - if (pointValKey) { - point.y = point[pointValKey]; - } - - // If no x is set by now, get auto incremented value. All points must have an - // x value, however the y value can be null to create a gap in the series - if (point.x === UNDEFINED && series) { - point.x = x === UNDEFINED ? series.autoIncrement() : x; - } - - return point; - }, - - /** - * Transform number or array configs into objects - */ - optionsToObject: function (options) { - var ret, - series = this.series, - pointArrayMap = series.pointArrayMap || ['y'], - valueCount = pointArrayMap.length, - firstItemType, - i = 0, - j = 0; - - if (typeof options === 'number' || options === null) { - ret = { y: options }; - - } else if (isArray(options)) { - ret = {}; - // with leading x value - if (options.length > valueCount) { - firstItemType = typeof options[0]; - if (firstItemType === 'string') { - ret.name = options[0]; - } else if (firstItemType === 'number') { - ret.x = options[0]; - } - i++; - } - while (j < valueCount) { - ret[pointArrayMap[j++]] = options[i++]; - } - } else if (typeof options === 'object') { - ret = options; - - // This is the fastest way to detect if there are individual point dataLabels that need - // to be considered in drawDataLabels. These can only occur in object configs. - if (options.dataLabels) { - series._hasPointLabels = true; - } - - // Same approach as above for markers - if (options.marker) { - series._hasPointMarkers = true; - } - } - return ret; - }, - - /** - * Destroy a point to clear memory. Its reference still stays in series.data. - */ - destroy: function () { - var point = this, - series = point.series, - chart = series.chart, - hoverPoints = chart.hoverPoints, - prop; - - chart.pointCount--; - - if (hoverPoints) { - point.setState(); - erase(hoverPoints, point); - if (!hoverPoints.length) { - chart.hoverPoints = null; - } - - } - if (point === chart.hoverPoint) { - point.onMouseOut(); - } - - // remove all events - if (point.graphic || point.dataLabel) { // removeEvent and destroyElements are performance expensive - removeEvent(point); - point.destroyElements(); - } - - if (point.legendItem) { // pies have legend items - chart.legend.destroyItem(point); - } - - for (prop in point) { - point[prop] = null; - } - - - }, - - /** - * Destroy SVG elements associated with the point - */ - destroyElements: function () { - var point = this, - props = ['graphic', 'dataLabel', 'dataLabelUpper', 'group', 'connector', 'shadowGroup'], - prop, - i = 6; - while (i--) { - prop = props[i]; - if (point[prop]) { - point[prop] = point[prop].destroy(); - } - } - }, - - /** - * Return the configuration hash needed for the data label and tooltip formatters - */ - getLabelConfig: function () { - var point = this; - return { - x: point.category, - y: point.y, - key: point.name || point.category, - series: point.series, - point: point, - percentage: point.percentage, - total: point.total || point.stackTotal - }; - }, - - /** - * Toggle the selection status of a point - * @param {Boolean} selected Whether to select or unselect the point. - * @param {Boolean} accumulate Whether to add to the previous selection. By default, - * this happens if the control key (Cmd on Mac) was pressed during clicking. - */ - select: function (selected, accumulate) { - var point = this, - series = point.series, - chart = series.chart; - - selected = pick(selected, !point.selected); - - // fire the event with the defalut handler - point.firePointEvent(selected ? 'select' : 'unselect', { accumulate: accumulate }, function () { - point.selected = point.options.selected = selected; - series.options.data[inArray(point, series.data)] = point.options; - - point.setState(selected && SELECT_STATE); - - // unselect all other points unless Ctrl or Cmd + click - if (!accumulate) { - each(chart.getSelectedPoints(), function (loopPoint) { - if (loopPoint.selected && loopPoint !== point) { - loopPoint.selected = loopPoint.options.selected = false; - series.options.data[inArray(loopPoint, series.data)] = loopPoint.options; - loopPoint.setState(NORMAL_STATE); - loopPoint.firePointEvent('unselect'); - } - }); - } - }); - }, - - /** - * Runs on mouse over the point - */ - onMouseOver: function (e) { - var point = this, - series = point.series, - chart = series.chart, - tooltip = chart.tooltip, - hoverPoint = chart.hoverPoint; - - // set normal state to previous series - if (hoverPoint && hoverPoint !== point) { - hoverPoint.onMouseOut(); - } - - // trigger the event - point.firePointEvent('mouseOver'); - - // update the tooltip - if (tooltip && (!tooltip.shared || series.noSharedTooltip)) { - tooltip.refresh(point, e); - } - - // hover this - point.setState(HOVER_STATE); - chart.hoverPoint = point; - }, - - /** - * Runs on mouse out from the point - */ - onMouseOut: function () { - var chart = this.series.chart, - hoverPoints = chart.hoverPoints; - - if (!hoverPoints || inArray(this, hoverPoints) === -1) { // #887 - this.firePointEvent('mouseOut'); - - this.setState(); - chart.hoverPoint = null; - } - }, - - /** - * Extendable method for formatting each point's tooltip line - * - * @return {String} A string to be concatenated in to the common tooltip text - */ - tooltipFormatter: function (pointFormat) { - - // Insert options for valueDecimals, valuePrefix, and valueSuffix - var series = this.series, - seriesTooltipOptions = series.tooltipOptions, - valueDecimals = pick(seriesTooltipOptions.valueDecimals, ''), - valuePrefix = seriesTooltipOptions.valuePrefix || '', - valueSuffix = seriesTooltipOptions.valueSuffix || ''; - - // Loop over the point array map and replace unformatted values with sprintf formatting markup - each(series.pointArrayMap || ['y'], function (key) { - key = '{point.' + key; // without the closing bracket - if (valuePrefix || valueSuffix) { - pointFormat = pointFormat.replace(key + '}', valuePrefix + key + '}' + valueSuffix); - } - pointFormat = pointFormat.replace(key + '}', key + ':,.' + valueDecimals + 'f}'); - }); - - return format(pointFormat, { - point: this, - series: this.series - }); - }, - - /** - * Update the point with new options (typically x/y data) and optionally redraw the series. - * - * @param {Object} options Point options as defined in the series.data array - * @param {Boolean} redraw Whether to redraw the chart or wait for an explicit call - * @param {Boolean|Object} animation Whether to apply animation, and optionally animation - * configuration - * - */ - update: function (options, redraw, animation) { - var point = this, - series = point.series, - graphic = point.graphic, - i, - data = series.data, - chart = series.chart; - - redraw = pick(redraw, true); - - // fire the event with a default handler of doing the update - point.firePointEvent('update', { options: options }, function () { - - point.applyOptions(options); - - // update visuals - if (isObject(options)) { - series.getAttribs(); - if (graphic) { - graphic.attr(point.pointAttr[series.state]); - } - } - - // record changes in the parallel arrays - i = inArray(point, data); - series.xData[i] = point.x; - series.yData[i] = series.toYData ? series.toYData(point) : point.y; - series.zData[i] = point.z; - series.options.data[i] = point.options; - - // redraw - series.isDirty = true; - series.isDirtyData = true; - if (redraw) { - chart.redraw(animation); - } - }); - }, - - /** - * Remove a point and optionally redraw the series and if necessary the axes - * @param {Boolean} redraw Whether to redraw the chart or wait for an explicit call - * @param {Boolean|Object} animation Whether to apply animation, and optionally animation - * configuration - */ - remove: function (redraw, animation) { - var point = this, - series = point.series, - chart = series.chart, - i, - data = series.data; - - setAnimation(animation, chart); - redraw = pick(redraw, true); - - // fire the event with a default handler of removing the point - point.firePointEvent('remove', null, function () { - - // splice all the parallel arrays - i = inArray(point, data); - data.splice(i, 1); - series.options.data.splice(i, 1); - series.xData.splice(i, 1); - series.yData.splice(i, 1); - series.zData.splice(i, 1); - - point.destroy(); - - - // redraw - series.isDirty = true; - series.isDirtyData = true; - if (redraw) { - chart.redraw(); - } - }); - - - }, - - /** - * Fire an event on the Point object. Must not be renamed to fireEvent, as this - * causes a name clash in MooTools - * @param {String} eventType - * @param {Object} eventArgs Additional event arguments - * @param {Function} defaultFunction Default event handler - */ - firePointEvent: function (eventType, eventArgs, defaultFunction) { - var point = this, - series = this.series, - seriesOptions = series.options; - - // load event handlers on demand to save time on mouseover/out - if (seriesOptions.point.events[eventType] || (point.options && point.options.events && point.options.events[eventType])) { - this.importEvents(); - } - - // add default handler if in selection mode - if (eventType === 'click' && seriesOptions.allowPointSelect) { - defaultFunction = function (event) { - // Control key is for Windows, meta (= Cmd key) for Mac, Shift for Opera - point.select(null, event.ctrlKey || event.metaKey || event.shiftKey); - }; - } - - fireEvent(this, eventType, eventArgs, defaultFunction); - }, - /** - * Import events from the series' and point's options. Only do it on - * demand, to save processing time on hovering. - */ - importEvents: function () { - if (!this.hasImportedEvents) { - var point = this, - options = merge(point.series.options.point, point.options), - events = options.events, - eventType; - - point.events = events; - - for (eventType in events) { - addEvent(point, eventType, events[eventType]); - } - this.hasImportedEvents = true; - - } - }, - - /** - * Set the point's state - * @param {String} state - */ - setState: function (state) { - var point = this, - plotX = point.plotX, - plotY = point.plotY, - series = point.series, - stateOptions = series.options.states, - markerOptions = defaultPlotOptions[series.type].marker && series.options.marker, - normalDisabled = markerOptions && !markerOptions.enabled, - markerStateOptions = markerOptions && markerOptions.states[state], - stateDisabled = markerStateOptions && markerStateOptions.enabled === false, - stateMarkerGraphic = series.stateMarkerGraphic, - pointMarker = point.marker || {}, - chart = series.chart, - radius, - newSymbol, - pointAttr = point.pointAttr; - - state = state || NORMAL_STATE; // empty string - - if ( - // already has this state - state === point.state || - // selected points don't respond to hover - (point.selected && state !== SELECT_STATE) || - // series' state options is disabled - (stateOptions[state] && stateOptions[state].enabled === false) || - // point marker's state options is disabled - (state && (stateDisabled || (normalDisabled && !markerStateOptions.enabled))) - - ) { - return; - } - - // apply hover styles to the existing point - if (point.graphic) { - radius = markerOptions && point.graphic.symbolName && pointAttr[state].r; - point.graphic.attr(merge( - pointAttr[state], - radius ? { // new symbol attributes (#507, #612) - x: plotX - radius, - y: plotY - radius, - width: 2 * radius, - height: 2 * radius - } : {} - )); - } else { - // if a graphic is not applied to each point in the normal state, create a shared - // graphic for the hover state - if (state && markerStateOptions) { - radius = markerStateOptions.radius; - newSymbol = pointMarker.symbol || series.symbol; - - // If the point has another symbol than the previous one, throw away the - // state marker graphic and force a new one (#1459) - if (stateMarkerGraphic && stateMarkerGraphic.currentSymbol !== newSymbol) { - stateMarkerGraphic = stateMarkerGraphic.destroy(); - } - - // Add a new state marker graphic - if (!stateMarkerGraphic) { - series.stateMarkerGraphic = stateMarkerGraphic = chart.renderer.symbol( - newSymbol, - plotX - radius, - plotY - radius, - 2 * radius, - 2 * radius - ) - .attr(pointAttr[state]) - .add(series.markerGroup); - stateMarkerGraphic.currentSymbol = newSymbol; - - // Move the existing graphic - } else { - stateMarkerGraphic.attr({ // #1054 - x: plotX - radius, - y: plotY - radius - }); - } - } - - if (stateMarkerGraphic) { - stateMarkerGraphic[state && chart.isInsidePlot(plotX, plotY) ? 'show' : 'hide'](); - } - } - - point.state = state; - } -}; - -/** - * @classDescription The base function which all other series types inherit from. The data in the series is stored - * in various arrays. - * - * - First, series.options.data contains all the original config options for - * each point whether added by options or methods like series.addPoint. - * - Next, series.data contains those values converted to points, but in case the series data length - * exceeds the cropThreshold, or if the data is grouped, series.data doesn't contain all the points. It - * only contains the points that have been created on demand. - * - Then there's series.points that contains all currently visible point objects. In case of cropping, - * the cropped-away points are not part of this array. The series.points array starts at series.cropStart - * compared to series.data and series.options.data. If however the series data is grouped, these can't - * be correlated one to one. - * - series.xData and series.processedXData contain clean x values, equivalent to series.data and series.points. - * - series.yData and series.processedYData contain clean x values, equivalent to series.data and series.points. - * - * @param {Object} chart - * @param {Object} options - */ -var Series = function () {}; - -Series.prototype = { - - isCartesian: true, - type: 'line', - pointClass: Point, - sorted: true, // requires the data to be sorted - requireSorting: true, - pointAttrToOptions: { // mapping between SVG attributes and the corresponding options - stroke: 'lineColor', - 'stroke-width': 'lineWidth', - fill: 'fillColor', - r: 'radius' - }, - colorCounter: 0, - init: function (chart, options) { - var series = this, - eventType, - events, - linkedTo, - chartSeries = chart.series; - - series.chart = chart; - series.options = options = series.setOptions(options); // merge with plotOptions - - // bind the axes - series.bindAxes(); - - // set some variables - extend(series, { - name: options.name, - state: NORMAL_STATE, - pointAttr: {}, - visible: options.visible !== false, // true by default - selected: options.selected === true // false by default - }); - - // special - if (useCanVG) { - options.animation = false; - } - - // register event listeners - events = options.events; - for (eventType in events) { - addEvent(series, eventType, events[eventType]); - } - if ( - (events && events.click) || - (options.point && options.point.events && options.point.events.click) || - options.allowPointSelect - ) { - chart.runTrackerClick = true; - } - - series.getColor(); - series.getSymbol(); - - // set the data - series.setData(options.data, false); - - // Mark cartesian - if (series.isCartesian) { - chart.hasCartesianSeries = true; - } - - // Register it in the chart - chartSeries.push(series); - series._i = chartSeries.length - 1; - - // Sort series according to index option (#248, #1123) - stableSort(chartSeries, function (a, b) { - return pick(a.options.index, a._i) - pick(b.options.index, a._i); - }); - each(chartSeries, function (series, i) { - series.index = i; - series.name = series.name || 'Series ' + (i + 1); - }); - - // Linked series - linkedTo = options.linkedTo; - series.linkedSeries = []; - if (isString(linkedTo)) { - if (linkedTo === ':previous') { - linkedTo = chartSeries[series.index - 1]; - } else { - linkedTo = chart.get(linkedTo); - } - if (linkedTo) { - linkedTo.linkedSeries.push(series); - series.linkedParent = linkedTo; - } - } - }, - - /** - * Set the xAxis and yAxis properties of cartesian series, and register the series - * in the axis.series array - */ - bindAxes: function () { - var series = this, - seriesOptions = series.options, - chart = series.chart, - axisOptions; - - if (series.isCartesian) { - - each(['xAxis', 'yAxis'], function (AXIS) { // repeat for xAxis and yAxis - - each(chart[AXIS], function (axis) { // loop through the chart's axis objects - - axisOptions = axis.options; - - // apply if the series xAxis or yAxis option mathches the number of the - // axis, or if undefined, use the first axis - if ((seriesOptions[AXIS] === axisOptions.index) || - (seriesOptions[AXIS] !== UNDEFINED && seriesOptions[AXIS] === axisOptions.id) || - (seriesOptions[AXIS] === UNDEFINED && axisOptions.index === 0)) { - - // register this series in the axis.series lookup - axis.series.push(series); - - // set this series.xAxis or series.yAxis reference - series[AXIS] = axis; - - // mark dirty for redraw - axis.isDirty = true; - } - }); - - // The series needs an X and an Y axis - if (!series[AXIS]) { - error(17, true); - } - - }); - } - }, - - - /** - * Return an auto incremented x value based on the pointStart and pointInterval options. - * This is only used if an x value is not given for the point that calls autoIncrement. - */ - autoIncrement: function () { - var series = this, - options = series.options, - xIncrement = series.xIncrement; - - xIncrement = pick(xIncrement, options.pointStart, 0); - - series.pointInterval = pick(series.pointInterval, options.pointInterval, 1); - - series.xIncrement = xIncrement + series.pointInterval; - return xIncrement; - }, - - /** - * Divide the series data into segments divided by null values. - */ - getSegments: function () { - var series = this, - lastNull = -1, - segments = [], - i, - points = series.points, - pointsLength = points.length; - - if (pointsLength) { // no action required for [] - - // if connect nulls, just remove null points - if (series.options.connectNulls) { - i = pointsLength; - while (i--) { - if (points[i].y === null) { - points.splice(i, 1); - } - } - if (points.length) { - segments = [points]; - } - - // else, split on null points - } else { - each(points, function (point, i) { - if (point.y === null) { - if (i > lastNull + 1) { - segments.push(points.slice(lastNull + 1, i)); - } - lastNull = i; - } else if (i === pointsLength - 1) { // last value - segments.push(points.slice(lastNull + 1, i + 1)); - } - }); - } - } - - // register it - series.segments = segments; - }, - /** - * Set the series options by merging from the options tree - * @param {Object} itemOptions - */ - setOptions: function (itemOptions) { - var chart = this.chart, - chartOptions = chart.options, - plotOptions = chartOptions.plotOptions, - typeOptions = plotOptions[this.type], - options; - - this.userOptions = itemOptions; - - options = merge( - typeOptions, - plotOptions.series, - itemOptions - ); - - // the tooltip options are merged between global and series specific options - this.tooltipOptions = merge(chartOptions.tooltip, options.tooltip); - - // Delte marker object if not allowed (#1125) - if (typeOptions.marker === null) { - delete options.marker; - } - - return options; - - }, - /** - * Get the series' color - */ - getColor: function () { - var options = this.options, - userOptions = this.userOptions, - defaultColors = this.chart.options.colors, - counters = this.chart.counters, - color, - colorIndex; - - color = options.color || defaultPlotOptions[this.type].color; - - if (!color && !options.colorByPoint) { - if (defined(userOptions._colorIndex)) { // after Series.update() - colorIndex = userOptions._colorIndex; - } else { - userOptions._colorIndex = counters.color; - colorIndex = counters.color++; - } - color = defaultColors[colorIndex]; - } - - this.color = color; - counters.wrapColor(defaultColors.length); - }, - /** - * Get the series' symbol - */ - getSymbol: function () { - var series = this, - userOptions = series.userOptions, - seriesMarkerOption = series.options.marker, - chart = series.chart, - defaultSymbols = chart.options.symbols, - counters = chart.counters, - symbolIndex; - - series.symbol = seriesMarkerOption.symbol; - if (!series.symbol) { - if (defined(userOptions._symbolIndex)) { // after Series.update() - symbolIndex = userOptions._symbolIndex; - } else { - userOptions._symbolIndex = counters.symbol; - symbolIndex = counters.symbol++; - } - series.symbol = defaultSymbols[symbolIndex]; - } - - // don't substract radius in image symbols (#604) - if (/^url/.test(series.symbol)) { - seriesMarkerOption.radius = 0; - } - counters.wrapSymbol(defaultSymbols.length); - }, - - /** - * Get the series' symbol in the legend. This method should be overridable to create custom - * symbols through Highcharts.seriesTypes[type].prototype.drawLegendSymbols. - * - * @param {Object} legend The legend object - */ - drawLegendSymbol: function (legend) { - - var options = this.options, - markerOptions = options.marker, - radius, - legendOptions = legend.options, - legendSymbol, - symbolWidth = legendOptions.symbolWidth, - renderer = this.chart.renderer, - legendItemGroup = this.legendGroup, - baseline = legend.baseline, - attr; - - // Draw the line - if (options.lineWidth) { - attr = { - 'stroke-width': options.lineWidth - }; - if (options.dashStyle) { - attr.dashstyle = options.dashStyle; - } - this.legendLine = renderer.path([ - M, - 0, - baseline - 4, - L, - symbolWidth, - baseline - 4 - ]) - .attr(attr) - .add(legendItemGroup); - } - - // Draw the marker - if (markerOptions && markerOptions.enabled) { - radius = markerOptions.radius; - this.legendSymbol = legendSymbol = renderer.symbol( - this.symbol, - (symbolWidth / 2) - radius, - baseline - 4 - radius, - 2 * radius, - 2 * radius - ) - .add(legendItemGroup); - } - }, - - /** - * Add a point dynamically after chart load time - * @param {Object} options Point options as given in series.data - * @param {Boolean} redraw Whether to redraw the chart or wait for an explicit call - * @param {Boolean} shift If shift is true, a point is shifted off the start - * of the series as one is appended to the end. - * @param {Boolean|Object} animation Whether to apply animation, and optionally animation - * configuration - */ - addPoint: function (options, redraw, shift, animation) { - var series = this, - seriesOptions = series.options, - data = series.data, - graph = series.graph, - area = series.area, - chart = series.chart, - xData = series.xData, - yData = series.yData, - zData = series.zData, - names = series.names, - currentShift = (graph && graph.shift) || 0, - dataOptions = seriesOptions.data, - point; - - setAnimation(animation, chart); - - // Make graph animate sideways - if (graph && shift) { - graph.shift = currentShift + 1; - } - if (area) { - if (shift) { // #780 - area.shift = currentShift + 1; - } - area.isArea = true; // needed in animation, both with and without shift - } - - // Optional redraw, defaults to true - redraw = pick(redraw, true); - - // Get options and push the point to xData, yData and series.options. In series.generatePoints - // the Point instance will be created on demand and pushed to the series.data array. - point = { series: series }; - series.pointClass.prototype.applyOptions.apply(point, [options]); - xData.push(point.x); - yData.push(series.toYData ? series.toYData(point) : point.y); - zData.push(point.z); - if (names) { - names[point.x] = point.name; - } - dataOptions.push(options); - - // Generate points to be added to the legend (#1329) - if (seriesOptions.legendType === 'point') { - series.generatePoints(); - } - - // Shift the first point off the parallel arrays - // todo: consider series.removePoint(i) method - if (shift) { - if (data[0] && data[0].remove) { - data[0].remove(false); - } else { - data.shift(); - xData.shift(); - yData.shift(); - zData.shift(); - dataOptions.shift(); - } - } - series.getAttribs(); - - // redraw - series.isDirty = true; - series.isDirtyData = true; - if (redraw) { - chart.redraw(); - } - }, - - /** - * Replace the series data with a new set of data - * @param {Object} data - * @param {Object} redraw - */ - setData: function (data, redraw) { - var series = this, - oldData = series.points, - options = series.options, - chart = series.chart, - firstPoint = null, - xAxis = series.xAxis, - names = xAxis && xAxis.categories && !xAxis.categories.length ? [] : null, - i; - - // reset properties - series.xIncrement = null; - series.pointRange = xAxis && xAxis.categories ? 1 : options.pointRange; - - series.colorCounter = 0; // for series with colorByPoint (#1547) - - // parallel arrays - var xData = [], - yData = [], - zData = [], - dataLength = data ? data.length : [], - turboThreshold = options.turboThreshold || 1000, - pt, - pointArrayMap = series.pointArrayMap, - valueCount = pointArrayMap && pointArrayMap.length, - hasToYData = !!series.toYData; - - // In turbo mode, only one- or twodimensional arrays of numbers are allowed. The - // first value is tested, and we assume that all the rest are defined the same - // way. Although the 'for' loops are similar, they are repeated inside each - // if-else conditional for max performance. - if (dataLength > turboThreshold) { - - // find the first non-null point - i = 0; - while (firstPoint === null && i < dataLength) { - firstPoint = data[i]; - i++; - } - - - if (isNumber(firstPoint)) { // assume all points are numbers - var x = pick(options.pointStart, 0), - pointInterval = pick(options.pointInterval, 1); - - for (i = 0; i < dataLength; i++) { - xData[i] = x; - yData[i] = data[i]; - x += pointInterval; - } - series.xIncrement = x; - } else if (isArray(firstPoint)) { // assume all points are arrays - if (valueCount) { // [x, low, high] or [x, o, h, l, c] - for (i = 0; i < dataLength; i++) { - pt = data[i]; - xData[i] = pt[0]; - yData[i] = pt.slice(1, valueCount + 1); - } - } else { // [x, y] - for (i = 0; i < dataLength; i++) { - pt = data[i]; - xData[i] = pt[0]; - yData[i] = pt[1]; - } - } - } /* else { - error(12); // Highcharts expects configs to be numbers or arrays in turbo mode - }*/ - } else { - for (i = 0; i < dataLength; i++) { - if (data[i] !== UNDEFINED) { // stray commas in oldIE - pt = { series: series }; - series.pointClass.prototype.applyOptions.apply(pt, [data[i]]); - xData[i] = pt.x; - yData[i] = hasToYData ? series.toYData(pt) : pt.y; - zData[i] = pt.z; - if (names && pt.name) { - names[i] = pt.name; - } - } - } - } - - // Unsorted data is not supported by the line tooltip as well as data grouping and - // navigation in Stock charts (#725) - if (series.requireSorting && xData.length > 1 && xData[1] < xData[0]) { - error(15); - } - - // Forgetting to cast strings to numbers is a common caveat when handling CSV or JSON - if (isString(yData[0])) { - error(14, true); - } - - series.data = []; - series.options.data = data; - series.xData = xData; - series.yData = yData; - series.zData = zData; - series.names = names; - - // destroy old points - i = (oldData && oldData.length) || 0; - while (i--) { - if (oldData[i] && oldData[i].destroy) { - oldData[i].destroy(); - } - } - - // reset minRange (#878) - if (xAxis) { - xAxis.minRange = xAxis.userMinRange; - } - - // redraw - series.isDirty = series.isDirtyData = chart.isDirtyBox = true; - if (pick(redraw, true)) { - chart.redraw(false); - } - }, - - /** - * Remove a series and optionally redraw the chart - * - * @param {Boolean} redraw Whether to redraw the chart or wait for an explicit call - * @param {Boolean|Object} animation Whether to apply animation, and optionally animation - * configuration - */ - - remove: function (redraw, animation) { - var series = this, - chart = series.chart; - redraw = pick(redraw, true); - - if (!series.isRemoving) { /* prevent triggering native event in jQuery - (calling the remove function from the remove event) */ - series.isRemoving = true; - - // fire the event with a default handler of removing the point - fireEvent(series, 'remove', null, function () { - - - // destroy elements - series.destroy(); - - - // redraw - chart.isDirtyLegend = chart.isDirtyBox = true; - if (redraw) { - chart.redraw(animation); - } - }); - - } - series.isRemoving = false; - }, - - /** - * Process the data by cropping away unused data points if the series is longer - * than the crop threshold. This saves computing time for lage series. - */ - processData: function (force) { - var series = this, - processedXData = series.xData, // copied during slice operation below - processedYData = series.yData, - dataLength = processedXData.length, - cropStart = 0, - cropEnd = dataLength, - cropped, - distance, - closestPointRange, - xAxis = series.xAxis, - i, // loop variable - options = series.options, - cropThreshold = options.cropThreshold, - isCartesian = series.isCartesian; - - // If the series data or axes haven't changed, don't go through this. Return false to pass - // the message on to override methods like in data grouping. - if (isCartesian && !series.isDirty && !xAxis.isDirty && !series.yAxis.isDirty && !force) { - return false; - } - - // optionally filter out points outside the plot area - if (isCartesian && series.sorted && (!cropThreshold || dataLength > cropThreshold || series.forceCrop)) { - var extremes = xAxis.getExtremes(), - min = extremes.min, - max = extremes.max; - - // it's outside current extremes - if (processedXData[dataLength - 1] < min || processedXData[0] > max) { - processedXData = []; - processedYData = []; - - // only crop if it's actually spilling out - } else if (processedXData[0] < min || processedXData[dataLength - 1] > max) { - - // iterate up to find slice start - for (i = 0; i < dataLength; i++) { - if (processedXData[i] >= min) { - cropStart = mathMax(0, i - 1); - break; - } - } - // proceed to find slice end - for (; i < dataLength; i++) { - if (processedXData[i] > max) { - cropEnd = i + 1; - break; - } - - } - processedXData = processedXData.slice(cropStart, cropEnd); - processedYData = processedYData.slice(cropStart, cropEnd); - cropped = true; - } - } - - - // Find the closest distance between processed points - for (i = processedXData.length - 1; i > 0; i--) { - distance = processedXData[i] - processedXData[i - 1]; - if (distance > 0 && (closestPointRange === UNDEFINED || distance < closestPointRange)) { - closestPointRange = distance; - } - } - - // Record the properties - series.cropped = cropped; // undefined or true - series.cropStart = cropStart; - series.processedXData = processedXData; - series.processedYData = processedYData; - - if (options.pointRange === null) { // null means auto, as for columns, candlesticks and OHLC - series.pointRange = closestPointRange || 1; - } - series.closestPointRange = closestPointRange; - - }, - - /** - * Generate the data point after the data has been processed by cropping away - * unused points and optionally grouped in Highcharts Stock. - */ - generatePoints: function () { - var series = this, - options = series.options, - dataOptions = options.data, - data = series.data, - dataLength, - processedXData = series.processedXData, - processedYData = series.processedYData, - pointClass = series.pointClass, - processedDataLength = processedXData.length, - cropStart = series.cropStart || 0, - cursor, - hasGroupedData = series.hasGroupedData, - point, - points = [], - i; - - if (!data && !hasGroupedData) { - var arr = []; - arr.length = dataOptions.length; - data = series.data = arr; - } - - for (i = 0; i < processedDataLength; i++) { - cursor = cropStart + i; - if (!hasGroupedData) { - if (data[cursor]) { - point = data[cursor]; - } else if (dataOptions[cursor] !== UNDEFINED) { // #970 - data[cursor] = point = (new pointClass()).init(series, dataOptions[cursor], processedXData[i]); - } - points[i] = point; - } else { - // splat the y data in case of ohlc data array - points[i] = (new pointClass()).init(series, [processedXData[i]].concat(splat(processedYData[i]))); - } - } - - // Hide cropped-away points - this only runs when the number of points is above cropThreshold, or when - // swithching view from non-grouped data to grouped data (#637) - if (data && (processedDataLength !== (dataLength = data.length) || hasGroupedData)) { - for (i = 0; i < dataLength; i++) { - if (i === cropStart && !hasGroupedData) { // when has grouped data, clear all points - i += processedDataLength; - } - if (data[i]) { - data[i].destroyElements(); - data[i].plotX = UNDEFINED; // #1003 - } - } - } - - series.data = data; - series.points = points; - }, - - /** - * Translate data points from raw data values to chart specific positioning data - * needed later in drawPoints, drawGraph and drawTracker. - */ - translate: function () { - if (!this.processedXData) { // hidden series - this.processData(); - } - this.generatePoints(); - var series = this, - options = series.options, - stacking = options.stacking, - xAxis = series.xAxis, - categories = xAxis.categories, - yAxis = series.yAxis, - points = series.points, - dataLength = points.length, - hasModifyValue = !!series.modifyValue, - isBottomSeries, - allStackSeries = yAxis.series, - i = allStackSeries.length, - placeBetween = options.pointPlacement === 'between', - threshold = options.threshold; - //nextSeriesDown; - - // Is it the last visible series? - while (i--) { - if (allStackSeries[i].visible) { - if (allStackSeries[i] === series) { // #809 - isBottomSeries = true; - } - break; - } - } - - // Translate each point - for (i = 0; i < dataLength; i++) { - var point = points[i], - xValue = point.x, - yValue = point.y, - yBottom = point.low, - stack = yAxis.stacks[(yValue < threshold ? '-' : '') + series.stackKey], - pointStack, - pointStackTotal; - - // Discard disallowed y values for log axes - if (yAxis.isLog && yValue <= 0) { - point.y = yValue = null; - } - - // Get the plotX translation - point.plotX = xAxis.translate(xValue, 0, 0, 0, 1, placeBetween); // Math.round fixes #591 - - // Calculate the bottom y value for stacked series - if (stacking && series.visible && stack && stack[xValue]) { - pointStack = stack[xValue]; - pointStackTotal = pointStack.total; - pointStack.cum = yBottom = pointStack.cum - yValue; // start from top - yValue = yBottom + yValue; - - if (isBottomSeries) { - yBottom = pick(threshold, yAxis.min); - } - - if (yAxis.isLog && yBottom <= 0) { // #1200, #1232 - yBottom = null; - } - - if (stacking === 'percent') { - yBottom = pointStackTotal ? yBottom * 100 / pointStackTotal : 0; - yValue = pointStackTotal ? yValue * 100 / pointStackTotal : 0; - } - - point.percentage = pointStackTotal ? point.y * 100 / pointStackTotal : 0; - point.total = point.stackTotal = pointStackTotal; - point.stackY = yValue; - } - - // Set translated yBottom or remove it - point.yBottom = defined(yBottom) ? - yAxis.translate(yBottom, 0, 1, 0, 1) : - null; - - // general hook, used for Highstock compare mode - if (hasModifyValue) { - yValue = series.modifyValue(yValue, point); - } - - // Set the the plotY value, reset it for redraws - point.plotY = (typeof yValue === 'number' && yValue !== Infinity) ? - mathRound(yAxis.translate(yValue, 0, 1, 0, 1) * 10) / 10 : // Math.round fixes #591 - UNDEFINED; - - // Set client related positions for mouse tracking - point.clientX = placeBetween ? xAxis.translate(xValue, 0, 0, 0, 1) : point.plotX; // #1514 - - point.negative = point.y < (threshold || 0); - - // some API data - point.category = categories && categories[point.x] !== UNDEFINED ? - categories[point.x] : point.x; - - - } - - // now that we have the cropped data, build the segments - series.getSegments(); - }, - /** - * Memoize tooltip texts and positions - */ - setTooltipPoints: function (renew) { - var series = this, - points = [], - pointsLength, - low, - high, - xAxis = series.xAxis, - axisLength = xAxis ? (xAxis.tooltipLen || xAxis.len) : series.chart.plotSizeX, // tooltipLen and tooltipPosName used in polar - point, - i, - tooltipPoints = []; // a lookup array for each pixel in the x dimension - - // don't waste resources if tracker is disabled - if (series.options.enableMouseTracking === false) { - return; - } - - // renew - if (renew) { - series.tooltipPoints = null; - } - - // concat segments to overcome null values - each(series.segments || series.points, function (segment) { - points = points.concat(segment); - }); - - // Reverse the points in case the X axis is reversed - if (xAxis && xAxis.reversed) { - points = points.reverse(); - } - - // Assign each pixel position to the nearest point - pointsLength = points.length; - for (i = 0; i < pointsLength; i++) { - point = points[i]; - // Set this range's low to the last range's high plus one - low = points[i - 1] ? high + 1 : 0; - // Now find the new high - high = points[i + 1] ? - mathMax(0, mathFloor((point.clientX + (points[i + 1] ? points[i + 1].clientX : axisLength)) / 2)) : - axisLength; - - while (low >= 0 && low <= high) { - tooltipPoints[low++] = point; - } - } - series.tooltipPoints = tooltipPoints; - }, - - /** - * Format the header of the tooltip - */ - tooltipHeaderFormatter: function (point) { - var series = this, - tooltipOptions = series.tooltipOptions, - xDateFormat = tooltipOptions.xDateFormat, - xAxis = series.xAxis, - isDateTime = xAxis && xAxis.options.type === 'datetime', - headerFormat = tooltipOptions.headerFormat, - n; - - // Guess the best date format based on the closest point distance (#568) - if (isDateTime && !xDateFormat) { - for (n in timeUnits) { - if (timeUnits[n] >= xAxis.closestPointRange) { - xDateFormat = tooltipOptions.dateTimeLabelFormats[n]; - break; - } - } - } - - // Insert the header date format if any - if (isDateTime && xDateFormat && isNumber(point.key)) { - headerFormat = headerFormat.replace('{point.key}', '{point.key:' + xDateFormat + '}'); - } - - return format(headerFormat, { - point: point, - series: series - }); - }, - - /** - * Series mouse over handler - */ - onMouseOver: function () { - var series = this, - chart = series.chart, - hoverSeries = chart.hoverSeries; - - // set normal state to previous series - if (hoverSeries && hoverSeries !== series) { - hoverSeries.onMouseOut(); - } - - // trigger the event, but to save processing time, - // only if defined - if (series.options.events.mouseOver) { - fireEvent(series, 'mouseOver'); - } - - // hover this - series.setState(HOVER_STATE); - chart.hoverSeries = series; - }, - - /** - * Series mouse out handler - */ - onMouseOut: function () { - // trigger the event only if listeners exist - var series = this, - options = series.options, - chart = series.chart, - tooltip = chart.tooltip, - hoverPoint = chart.hoverPoint; - - // trigger mouse out on the point, which must be in this series - if (hoverPoint) { - hoverPoint.onMouseOut(); - } - - // fire the mouse out event - if (series && options.events.mouseOut) { - fireEvent(series, 'mouseOut'); - } - - - // hide the tooltip - if (tooltip && !options.stickyTracking && (!tooltip.shared || series.noSharedTooltip)) { - tooltip.hide(); - } - - // set normal state - series.setState(); - chart.hoverSeries = null; - }, - - /** - * Animate in the series - */ - animate: function (init) { - var series = this, - chart = series.chart, - renderer = chart.renderer, - clipRect, - markerClipRect, - animation = series.options.animation, - clipBox = chart.clipBox, - inverted = chart.inverted, - sharedClipKey; - - // Animation option is set to true - if (animation && !isObject(animation)) { - animation = defaultPlotOptions[series.type].animation; - } - sharedClipKey = '_sharedClip' + animation.duration + animation.easing; - - // Initialize the animation. Set up the clipping rectangle. - if (init) { - - // If a clipping rectangle with the same properties is currently present in the chart, use that. - clipRect = chart[sharedClipKey]; - markerClipRect = chart[sharedClipKey + 'm']; - if (!clipRect) { - chart[sharedClipKey] = clipRect = renderer.clipRect( - extend(clipBox, { width: 0 }) - ); - - chart[sharedClipKey + 'm'] = markerClipRect = renderer.clipRect( - -99, // include the width of the first marker - inverted ? -chart.plotLeft : -chart.plotTop, - 99, - inverted ? chart.chartWidth : chart.chartHeight - ); - } - series.group.clip(clipRect); - series.markerGroup.clip(markerClipRect); - series.sharedClipKey = sharedClipKey; - - // Run the animation - } else { - clipRect = chart[sharedClipKey]; - if (clipRect) { - clipRect.animate({ - width: chart.plotSizeX - }, animation); - chart[sharedClipKey + 'm'].animate({ - width: chart.plotSizeX + 99 - }, animation); - } - - // Delete this function to allow it only once - series.animate = null; - - // Call the afterAnimate function on animation complete (but don't overwrite the animation.complete option - // which should be available to the user). - series.animationTimeout = setTimeout(function () { - series.afterAnimate(); - }, animation.duration); - } - }, - - /** - * This runs after animation to land on the final plot clipping - */ - afterAnimate: function () { - var chart = this.chart, - sharedClipKey = this.sharedClipKey, - group = this.group; - - if (group && this.options.clip !== false) { - group.clip(chart.clipRect); - this.markerGroup.clip(); // no clip - } - - // Remove the shared clipping rectancgle when all series are shown - setTimeout(function () { - if (sharedClipKey && chart[sharedClipKey]) { - chart[sharedClipKey] = chart[sharedClipKey].destroy(); - chart[sharedClipKey + 'm'] = chart[sharedClipKey + 'm'].destroy(); - } - }, 100); - }, - - /** - * Draw the markers - */ - drawPoints: function () { - var series = this, - pointAttr, - points = series.points, - chart = series.chart, - plotX, - plotY, - i, - point, - radius, - symbol, - isImage, - graphic, - options = series.options, - seriesMarkerOptions = options.marker, - pointMarkerOptions, - enabled, - isInside, - markerGroup = series.markerGroup; - - if (seriesMarkerOptions.enabled || series._hasPointMarkers) { - - i = points.length; - while (i--) { - point = points[i]; - plotX = point.plotX; - plotY = point.plotY; - graphic = point.graphic; - pointMarkerOptions = point.marker || {}; - enabled = (seriesMarkerOptions.enabled && pointMarkerOptions.enabled === UNDEFINED) || pointMarkerOptions.enabled; - isInside = chart.isInsidePlot(plotX, plotY, chart.inverted); - - // only draw the point if y is defined - if (enabled && plotY !== UNDEFINED && !isNaN(plotY) && point.y !== null) { - - // shortcuts - pointAttr = point.pointAttr[point.selected ? SELECT_STATE : NORMAL_STATE]; - radius = pointAttr.r; - symbol = pick(pointMarkerOptions.symbol, series.symbol); - isImage = symbol.indexOf('url') === 0; - - if (graphic) { // update - graphic - .attr({ // Since the marker group isn't clipped, each individual marker must be toggled - visibility: isInside ? (hasSVG ? 'inherit' : VISIBLE) : HIDDEN - }) - .animate(extend({ - x: plotX - radius, - y: plotY - radius - }, graphic.symbolName ? { // don't apply to image symbols #507 - width: 2 * radius, - height: 2 * radius - } : {})); - } else if (isInside && (radius > 0 || isImage)) { - point.graphic = graphic = chart.renderer.symbol( - symbol, - plotX - radius, - plotY - radius, - 2 * radius, - 2 * radius - ) - .attr(pointAttr) - .add(markerGroup); - } - - } else if (graphic) { - point.graphic = graphic.destroy(); // #1269 - } - } - } - - }, - - /** - * Convert state properties from API naming conventions to SVG attributes - * - * @param {Object} options API options object - * @param {Object} base1 SVG attribute object to inherit from - * @param {Object} base2 Second level SVG attribute object to inherit from - */ - convertAttribs: function (options, base1, base2, base3) { - var conversion = this.pointAttrToOptions, - attr, - option, - obj = {}; - - options = options || {}; - base1 = base1 || {}; - base2 = base2 || {}; - base3 = base3 || {}; - - for (attr in conversion) { - option = conversion[attr]; - obj[attr] = pick(options[option], base1[attr], base2[attr], base3[attr]); - } - return obj; - }, - - /** - * Get the state attributes. Each series type has its own set of attributes - * that are allowed to change on a point's state change. Series wide attributes are stored for - * all series, and additionally point specific attributes are stored for all - * points with individual marker options. If such options are not defined for the point, - * a reference to the series wide attributes is stored in point.pointAttr. - */ - getAttribs: function () { - var series = this, - seriesOptions = series.options, - normalOptions = defaultPlotOptions[series.type].marker ? seriesOptions.marker : seriesOptions, - stateOptions = normalOptions.states, - stateOptionsHover = stateOptions[HOVER_STATE], - pointStateOptionsHover, - seriesColor = series.color, - normalDefaults = { - stroke: seriesColor, - fill: seriesColor - }, - points = series.points || [], // #927 - i, - point, - seriesPointAttr = [], - pointAttr, - pointAttrToOptions = series.pointAttrToOptions, - hasPointSpecificOptions, - negativeColor = seriesOptions.negativeColor, - key; - - // series type specific modifications - if (seriesOptions.marker) { // line, spline, area, areaspline, scatter - - // if no hover radius is given, default to normal radius + 2 - stateOptionsHover.radius = stateOptionsHover.radius || normalOptions.radius + 2; - stateOptionsHover.lineWidth = stateOptionsHover.lineWidth || normalOptions.lineWidth + 1; - - } else { // column, bar, pie - - // if no hover color is given, brighten the normal color - stateOptionsHover.color = stateOptionsHover.color || - Color(stateOptionsHover.color || seriesColor) - .brighten(stateOptionsHover.brightness).get(); - } - - // general point attributes for the series normal state - seriesPointAttr[NORMAL_STATE] = series.convertAttribs(normalOptions, normalDefaults); - - // HOVER_STATE and SELECT_STATE states inherit from normal state except the default radius - each([HOVER_STATE, SELECT_STATE], function (state) { - seriesPointAttr[state] = - series.convertAttribs(stateOptions[state], seriesPointAttr[NORMAL_STATE]); - }); - - // set it - series.pointAttr = seriesPointAttr; - - - // Generate the point-specific attribute collections if specific point - // options are given. If not, create a referance to the series wide point - // attributes - i = points.length; - while (i--) { - point = points[i]; - normalOptions = (point.options && point.options.marker) || point.options; - if (normalOptions && normalOptions.enabled === false) { - normalOptions.radius = 0; - } - - if (point.negative && negativeColor) { - point.color = point.fillColor = negativeColor; - } - - hasPointSpecificOptions = seriesOptions.colorByPoint || point.color; // #868 - - // check if the point has specific visual options - if (point.options) { - for (key in pointAttrToOptions) { - if (defined(normalOptions[pointAttrToOptions[key]])) { - hasPointSpecificOptions = true; - } - } - } - - // a specific marker config object is defined for the individual point: - // create it's own attribute collection - if (hasPointSpecificOptions) { - normalOptions = normalOptions || {}; - pointAttr = []; - stateOptions = normalOptions.states || {}; // reassign for individual point - pointStateOptionsHover = stateOptions[HOVER_STATE] = stateOptions[HOVER_STATE] || {}; - - // Handle colors for column and pies - if (!seriesOptions.marker) { // column, bar, point - // if no hover color is given, brighten the normal color - pointStateOptionsHover.color = - Color(pointStateOptionsHover.color || point.color) - .brighten(pointStateOptionsHover.brightness || - stateOptionsHover.brightness).get(); - - } - - // normal point state inherits series wide normal state - pointAttr[NORMAL_STATE] = series.convertAttribs(extend({ - color: point.color // #868 - }, normalOptions), seriesPointAttr[NORMAL_STATE]); - - // inherit from point normal and series hover - pointAttr[HOVER_STATE] = series.convertAttribs( - stateOptions[HOVER_STATE], - seriesPointAttr[HOVER_STATE], - pointAttr[NORMAL_STATE] - ); - - // inherit from point normal and series hover - pointAttr[SELECT_STATE] = series.convertAttribs( - stateOptions[SELECT_STATE], - seriesPointAttr[SELECT_STATE], - pointAttr[NORMAL_STATE] - ); - - // Force the fill to negativeColor on markers - if (point.negative && seriesOptions.marker) { - pointAttr[NORMAL_STATE].fill = pointAttr[HOVER_STATE].fill = pointAttr[SELECT_STATE].fill = - series.convertAttribs({ fillColor: negativeColor }).fill; - } - - - // no marker config object is created: copy a reference to the series-wide - // attribute collection - } else { - pointAttr = seriesPointAttr; - } - - point.pointAttr = pointAttr; - - } - - }, - /** - * Update the series with a new set of options - */ - update: function (newOptions, redraw) { - var chart = this.chart, - // must use user options when changing type because this.options is merged - // in with type specific plotOptions - oldOptions = this.userOptions, - oldType = this.type; - - // Do the merge, with some forced options - newOptions = merge(oldOptions, { - animation: false, - index: this.index, - pointStart: this.xData[0] // when updating after addPoint - }, newOptions); - - // Destroy the series and reinsert methods from the type prototype - this.remove(false); - extend(this, seriesTypes[newOptions.type || oldType].prototype); - - - this.init(chart, newOptions); - if (pick(redraw, true)) { - chart.redraw(false); - } - }, - - /** - * Clear DOM objects and free up memory - */ - destroy: function () { - var series = this, - chart = series.chart, - issue134 = /AppleWebKit\/533/.test(userAgent), - destroy, - i, - data = series.data || [], - point, - prop, - axis; - - // add event hook - fireEvent(series, 'destroy'); - - // remove all events - removeEvent(series); - - // erase from axes - each(['xAxis', 'yAxis'], function (AXIS) { - axis = series[AXIS]; - if (axis) { - erase(axis.series, series); - axis.isDirty = axis.forceRedraw = true; - } - }); - - // remove legend items - if (series.legendItem) { - series.chart.legend.destroyItem(series); - } - - // destroy all points with their elements - i = data.length; - while (i--) { - point = data[i]; - if (point && point.destroy) { - point.destroy(); - } - } - series.points = null; - - // Clear the animation timeout if we are destroying the series during initial animation - clearTimeout(series.animationTimeout); - - // destroy all SVGElements associated to the series - each(['area', 'graph', 'dataLabelsGroup', 'group', 'markerGroup', 'tracker', - 'graphNeg', 'areaNeg', 'posClip', 'negClip'], function (prop) { - if (series[prop]) { - - // issue 134 workaround - destroy = issue134 && prop === 'group' ? - 'hide' : - 'destroy'; - - series[prop][destroy](); - } - }); - - // remove from hoverSeries - if (chart.hoverSeries === series) { - chart.hoverSeries = null; - } - erase(chart.series, series); - - // clear all members - for (prop in series) { - delete series[prop]; - } - }, - - /** - * Draw the data labels - */ - drawDataLabels: function () { - - var series = this, - seriesOptions = series.options, - options = seriesOptions.dataLabels, - points = series.points, - pointOptions, - generalOptions, - str, - dataLabelsGroup; - - if (options.enabled || series._hasPointLabels) { - - // Process default alignment of data labels for columns - if (series.dlProcessOptions) { - series.dlProcessOptions(options); - } - - // Create a separate group for the data labels to avoid rotation - dataLabelsGroup = series.plotGroup( - 'dataLabelsGroup', - 'data-labels', - series.visible ? VISIBLE : HIDDEN, - options.zIndex || 6 - ); - - // Make the labels for each point - generalOptions = options; - each(points, function (point) { - - var enabled, - dataLabel = point.dataLabel, - labelConfig, - attr, - name, - rotation, - connector = point.connector, - isNew = true; - - // Determine if each data label is enabled - pointOptions = point.options && point.options.dataLabels; - enabled = generalOptions.enabled || (pointOptions && pointOptions.enabled); - - - // If the point is outside the plot area, destroy it. #678, #820 - if (dataLabel && !enabled) { - point.dataLabel = dataLabel.destroy(); - - // Individual labels are disabled if the are explicitly disabled - // in the point options, or if they fall outside the plot area. - } else if (enabled) { - - rotation = options.rotation; - - // Create individual options structure that can be extended without - // affecting others - options = merge(generalOptions, pointOptions); - - // Get the string - labelConfig = point.getLabelConfig(); - str = options.format ? - format(options.format, labelConfig) : - options.formatter.call(labelConfig, options); - - // Determine the color - options.style.color = pick(options.color, options.style.color, series.color, 'black'); - - - // update existing label - if (dataLabel) { - - if (defined(str)) { - dataLabel - .attr({ - text: str - }); - isNew = false; - - } else { // #1437 - the label is shown conditionally - point.dataLabel = dataLabel = dataLabel.destroy(); - if (connector) { - point.connector = connector.destroy(); - } - } - - // create new label - } else if (defined(str)) { - attr = { - //align: align, - fill: options.backgroundColor, - stroke: options.borderColor, - 'stroke-width': options.borderWidth, - r: options.borderRadius || 0, - rotation: rotation, - padding: options.padding, - zIndex: 1 - }; - // Remove unused attributes (#947) - for (name in attr) { - if (attr[name] === UNDEFINED) { - delete attr[name]; - } - } - - dataLabel = point.dataLabel = series.chart.renderer[rotation ? 'text' : 'label']( // labels don't support rotation - str, - 0, - -999, - null, - null, - null, - options.useHTML - ) - .attr(attr) - .css(options.style) - .add(dataLabelsGroup) - .shadow(options.shadow); - - } - - if (dataLabel) { - // Now the data label is created and placed at 0,0, so we need to align it - series.alignDataLabel(point, dataLabel, options, null, isNew); - } - } - }); - } - }, - - /** - * Align each individual data label - */ - alignDataLabel: function (point, dataLabel, options, alignTo, isNew) { - var chart = this.chart, - inverted = chart.inverted, - plotX = pick(point.plotX, -999), - plotY = pick(point.plotY, -999), - bBox = dataLabel.getBBox(), - alignAttr; // the final position; - - // The alignment box is a singular point - alignTo = extend({ - x: inverted ? chart.plotWidth - plotY : plotX, - y: mathRound(inverted ? chart.plotHeight - plotX : plotY), - width: 0, - height: 0 - }, alignTo); - - // Add the text size for alignment calculation - extend(options, { - width: bBox.width, - height: bBox.height - }); - - // Allow a hook for changing alignment in the last moment, then do the alignment - if (options.rotation) { // Fancy box alignment isn't supported for rotated text - alignAttr = { - align: options.align, - x: alignTo.x + options.x + alignTo.width / 2, - y: alignTo.y + options.y + alignTo.height / 2 - }; - dataLabel[isNew ? 'attr' : 'animate'](alignAttr); - } else { - dataLabel.align(options, null, alignTo); - alignAttr = dataLabel.alignAttr; - } - - // Show or hide based on the final aligned position - dataLabel.attr({ - visibility: options.crop === false || /*chart.isInsidePlot(alignAttr.x, alignAttr.y) || */chart.isInsidePlot(plotX, plotY, inverted) ? - (chart.renderer.isSVG ? 'inherit' : VISIBLE) : - HIDDEN - }); - - }, - - /** - * Return the graph path of a segment - */ - getSegmentPath: function (segment) { - var series = this, - segmentPath = [], - step = series.options.step; - - // build the segment line - each(segment, function (point, i) { - - var plotX = point.plotX, - plotY = point.plotY, - lastPoint; - - if (series.getPointSpline) { // generate the spline as defined in the SplineSeries object - segmentPath.push.apply(segmentPath, series.getPointSpline(segment, point, i)); - - } else { - - // moveTo or lineTo - segmentPath.push(i ? L : M); - - // step line? - if (step && i) { - lastPoint = segment[i - 1]; - if (step === 'right') { - segmentPath.push( - lastPoint.plotX, - plotY - ); - - } else if (step === 'center') { - segmentPath.push( - (lastPoint.plotX + plotX) / 2, - lastPoint.plotY, - (lastPoint.plotX + plotX) / 2, - plotY - ); - - } else { - segmentPath.push( - plotX, - lastPoint.plotY - ); - } - } - - // normal line to next point - segmentPath.push( - point.plotX, - point.plotY - ); - } - }); - - return segmentPath; - }, - - /** - * Get the graph path - */ - getGraphPath: function () { - var series = this, - graphPath = [], - segmentPath, - singlePoints = []; // used in drawTracker - - // Divide into segments and build graph and area paths - each(series.segments, function (segment) { - - segmentPath = series.getSegmentPath(segment); - - // add the segment to the graph, or a single point for tracking - if (segment.length > 1) { - graphPath = graphPath.concat(segmentPath); - } else { - singlePoints.push(segment[0]); - } - }); - - // Record it for use in drawGraph and drawTracker, and return graphPath - series.singlePoints = singlePoints; - series.graphPath = graphPath; - - return graphPath; - - }, - - /** - * Draw the actual graph - */ - drawGraph: function () { - var series = this, - options = this.options, - props = [['graph', options.lineColor || this.color]], - lineWidth = options.lineWidth, - dashStyle = options.dashStyle, - graphPath = this.getGraphPath(), - negativeColor = options.negativeColor; - - if (negativeColor) { - props.push(['graphNeg', negativeColor]); - } - - // draw the graph - each(props, function (prop, i) { - var graphKey = prop[0], - graph = series[graphKey], - attribs; - - if (graph) { - stop(graph); // cancel running animations, #459 - graph.animate({ d: graphPath }); - - } else if (lineWidth && graphPath.length) { // #1487 - attribs = { - stroke: prop[1], - 'stroke-width': lineWidth, - zIndex: 1 // #1069 - }; - if (dashStyle) { - attribs.dashstyle = dashStyle; - } - - series[graphKey] = series.chart.renderer.path(graphPath) - .attr(attribs) - .add(series.group) - .shadow(!i && options.shadow); - } - }); - }, - - /** - * Clip the graphs into the positive and negative coloured graphs - */ - clipNeg: function () { - var options = this.options, - chart = this.chart, - renderer = chart.renderer, - negativeColor = options.negativeColor, - translatedThreshold, - posAttr, - negAttr, - posClip = this.posClip, - negClip = this.negClip, - chartWidth = chart.chartWidth, - chartHeight = chart.chartHeight, - chartSizeMax = mathMax(chartWidth, chartHeight), - above, - below; - - if (negativeColor && this.graph) { - translatedThreshold = mathCeil(this.yAxis.len - this.yAxis.translate(options.threshold || 0)); - above = { - x: 0, - y: 0, - width: chartSizeMax, - height: translatedThreshold - }; - below = { - x: 0, - y: translatedThreshold, - width: chartSizeMax, - height: chartSizeMax - translatedThreshold - }; - - if (chart.inverted && renderer.isVML) { - above = { - x: chart.plotWidth - translatedThreshold - chart.plotLeft, - y: 0, - width: chartWidth, - height: chartHeight - }; - below = { - x: translatedThreshold + chart.plotLeft - chartWidth, - y: 0, - width: chart.plotLeft + translatedThreshold, - height: chartWidth - }; - } - - if (this.yAxis.reversed) { - posAttr = below; - negAttr = above; - } else { - posAttr = above; - negAttr = below; - } - - if (posClip) { // update - posClip.animate(posAttr); - negClip.animate(negAttr); - } else { - this.posClip = posClip = renderer.clipRect(posAttr); - this.graph.clip(posClip); - - this.negClip = negClip = renderer.clipRect(negAttr); - this.graphNeg.clip(negClip); - - if (this.area) { - this.area.clip(posClip); - this.areaNeg.clip(negClip); - } - } - } - }, - - /** - * Initialize and perform group inversion on series.group and series.markerGroup - */ - invertGroups: function () { - var series = this, - chart = series.chart; - - // A fixed size is needed for inversion to work - function setInvert() { - var size = { - width: series.yAxis.len, - height: series.xAxis.len - }; - - each(['group', 'markerGroup'], function (groupName) { - if (series[groupName]) { - series[groupName].attr(size).invert(); - } - }); - } - - addEvent(chart, 'resize', setInvert); // do it on resize - addEvent(series, 'destroy', function () { - removeEvent(chart, 'resize', setInvert); - }); - - // Do it now - setInvert(); // do it now - - // On subsequent render and redraw, just do setInvert without setting up events again - series.invertGroups = setInvert; - }, - - /** - * General abstraction for creating plot groups like series.group, series.dataLabelsGroup and - * series.markerGroup. On subsequent calls, the group will only be adjusted to the updated plot size. - */ - plotGroup: function (prop, name, visibility, zIndex, parent) { - var group = this[prop], - isNew = !group, - chart = this.chart, - xAxis = this.xAxis, - yAxis = this.yAxis; - - // Generate it on first call - if (isNew) { - this[prop] = group = chart.renderer.g(name) - .attr({ - visibility: visibility, - zIndex: zIndex || 0.1 // IE8 needs this - }) - .add(parent); - } - // Place it on first and subsequent (redraw) calls - group[isNew ? 'attr' : 'animate']({ - translateX: xAxis ? xAxis.left : chart.plotLeft, - translateY: yAxis ? yAxis.top : chart.plotTop, - scaleX: 1, // #1623 - scaleY: 1 - }); - - return group; - - }, - - /** - * Render the graph and markers - */ - render: function () { - var series = this, - chart = series.chart, - group, - options = series.options, - animation = options.animation, - doAnimation = animation && !!series.animate && - chart.renderer.isSVG, // this animation doesn't work in IE8 quirks when the group div is hidden, - // and looks bad in other oldIE - visibility = series.visible ? VISIBLE : HIDDEN, - zIndex = options.zIndex, - hasRendered = series.hasRendered, - chartSeriesGroup = chart.seriesGroup; - - // the group - group = series.plotGroup( - 'group', - 'series', - visibility, - zIndex, - chartSeriesGroup - ); - - series.markerGroup = series.plotGroup( - 'markerGroup', - 'markers', - visibility, - zIndex, - chartSeriesGroup - ); - - // initiate the animation - if (doAnimation) { - series.animate(true); - } - - // cache attributes for shapes - series.getAttribs(); - - // SVGRenderer needs to know this before drawing elements (#1089) - group.inverted = chart.inverted; - - // draw the graph if any - if (series.drawGraph) { - series.drawGraph(); - series.clipNeg(); - } - - // draw the data labels (inn pies they go before the points) - series.drawDataLabels(); - - // draw the points - series.drawPoints(); - - - // draw the mouse tracking area - if (series.options.enableMouseTracking !== false) { - series.drawTracker(); - } - - // Handle inverted series and tracker groups - if (chart.inverted) { - series.invertGroups(); - } - - // Initial clipping, must be defined after inverting groups for VML - if (options.clip !== false && !series.sharedClipKey && !hasRendered) { - group.clip(chart.clipRect); - } - - // Run the animation - if (doAnimation) { - series.animate(); - } else if (!hasRendered) { - series.afterAnimate(); - } - - series.isDirty = series.isDirtyData = false; // means data is in accordance with what you see - // (See #322) series.isDirty = series.isDirtyData = false; // means data is in accordance with what you see - series.hasRendered = true; - }, - - /** - * Redraw the series after an update in the axes. - */ - redraw: function () { - var series = this, - chart = series.chart, - wasDirtyData = series.isDirtyData, // cache it here as it is set to false in render, but used after - group = series.group, - xAxis = series.xAxis, - yAxis = series.yAxis; - - // reposition on resize - if (group) { - if (chart.inverted) { - group.attr({ - width: chart.plotWidth, - height: chart.plotHeight - }); - } - - group.animate({ - translateX: pick(xAxis && xAxis.left, chart.plotLeft), - translateY: pick(yAxis && yAxis.top, chart.plotTop) - }); - } - - series.translate(); - series.setTooltipPoints(true); - - series.render(); - if (wasDirtyData) { - fireEvent(series, 'updatedData'); - } - }, - - /** - * Set the state of the graph - */ - setState: function (state) { - var series = this, - options = series.options, - graph = series.graph, - graphNeg = series.graphNeg, - stateOptions = options.states, - lineWidth = options.lineWidth, - attribs; - - state = state || NORMAL_STATE; - - if (series.state !== state) { - series.state = state; - - if (stateOptions[state] && stateOptions[state].enabled === false) { - return; - } - - if (state) { - lineWidth = stateOptions[state].lineWidth || lineWidth + 1; - } - - if (graph && !graph.dashstyle) { // hover is turned off for dashed lines in VML - attribs = { - 'stroke-width': lineWidth - }; - // use attr because animate will cause any other animation on the graph to stop - graph.attr(attribs); - if (graphNeg) { - graphNeg.attr(attribs); - } - } - } - }, - - /** - * Set the visibility of the graph - * - * @param vis {Boolean} True to show the series, false to hide. If UNDEFINED, - * the visibility is toggled. - */ - setVisible: function (vis, redraw) { - var series = this, - chart = series.chart, - legendItem = series.legendItem, - showOrHide, - ignoreHiddenSeries = chart.options.chart.ignoreHiddenSeries, - oldVisibility = series.visible; - - // if called without an argument, toggle visibility - series.visible = vis = series.userOptions.visible = vis === UNDEFINED ? !oldVisibility : vis; - showOrHide = vis ? 'show' : 'hide'; - - // show or hide elements - each(['group', 'dataLabelsGroup', 'markerGroup', 'tracker'], function (key) { - if (series[key]) { - series[key][showOrHide](); - } - }); - - - // hide tooltip (#1361) - if (chart.hoverSeries === series) { - series.onMouseOut(); - } - - - if (legendItem) { - chart.legend.colorizeItem(series, vis); - } - - - // rescale or adapt to resized chart - series.isDirty = true; - // in a stack, all other series are affected - if (series.options.stacking) { - each(chart.series, function (otherSeries) { - if (otherSeries.options.stacking && otherSeries.visible) { - otherSeries.isDirty = true; - } - }); - } - - // show or hide linked series - each(series.linkedSeries, function (otherSeries) { - otherSeries.setVisible(vis, false); - }); - - if (ignoreHiddenSeries) { - chart.isDirtyBox = true; - } - if (redraw !== false) { - chart.redraw(); - } - - fireEvent(series, showOrHide); - }, - - /** - * Show the graph - */ - show: function () { - this.setVisible(true); - }, - - /** - * Hide the graph - */ - hide: function () { - this.setVisible(false); - }, - - - /** - * Set the selected state of the graph - * - * @param selected {Boolean} True to select the series, false to unselect. If - * UNDEFINED, the selection state is toggled. - */ - select: function (selected) { - var series = this; - // if called without an argument, toggle - series.selected = selected = (selected === UNDEFINED) ? !series.selected : selected; - - if (series.checkbox) { - series.checkbox.checked = selected; - } - - fireEvent(series, selected ? 'select' : 'unselect'); - }, - - /** - * Draw the tracker object that sits above all data labels and markers to - * track mouse events on the graph or points. For the line type charts - * the tracker uses the same graphPath, but with a greater stroke width - * for better control. - */ - drawTracker: function () { - var series = this, - options = series.options, - trackByArea = options.trackByArea, - trackerPath = [].concat(trackByArea ? series.areaPath : series.graphPath), - trackerPathLength = trackerPath.length, - chart = series.chart, - pointer = chart.pointer, - renderer = chart.renderer, - snap = chart.options.tooltip.snap, - tracker = series.tracker, - cursor = options.cursor, - css = cursor && { cursor: cursor }, - singlePoints = series.singlePoints, - singlePoint, - i, - onMouseOver = function () { - if (chart.hoverSeries !== series) { - series.onMouseOver(); - } - }; - - // Extend end points. A better way would be to use round linecaps, - // but those are not clickable in VML. - if (trackerPathLength && !trackByArea) { - i = trackerPathLength + 1; - while (i--) { - if (trackerPath[i] === M) { // extend left side - trackerPath.splice(i + 1, 0, trackerPath[i + 1] - snap, trackerPath[i + 2], L); - } - if ((i && trackerPath[i] === M) || i === trackerPathLength) { // extend right side - trackerPath.splice(i, 0, L, trackerPath[i - 2] + snap, trackerPath[i - 1]); - } - } - } - - // handle single points - for (i = 0; i < singlePoints.length; i++) { - singlePoint = singlePoints[i]; - trackerPath.push(M, singlePoint.plotX - snap, singlePoint.plotY, - L, singlePoint.plotX + snap, singlePoint.plotY); - } - - - - // draw the tracker - if (tracker) { - tracker.attr({ d: trackerPath }); - - } else { // create - - series.tracker = tracker = renderer.path(trackerPath) - .attr({ - 'class': PREFIX + 'tracker', - 'stroke-linejoin': 'round', // #1225 - visibility: series.visible ? VISIBLE : HIDDEN, - stroke: TRACKER_FILL, - fill: trackByArea ? TRACKER_FILL : NONE, - 'stroke-width' : options.lineWidth + (trackByArea ? 0 : 2 * snap), - zIndex: 2 - }) - .addClass(PREFIX + 'tracker') - .on('mouseover', onMouseOver) - .on('mouseout', function (e) { pointer.onTrackerMouseOut(e); }) - .css(css) - .add(series.markerGroup); - - if (hasTouch) { - tracker.on('touchstart', onMouseOver); - } - } - - } - -}; // end Series prototype - - -/** - * LineSeries object - */ -var LineSeries = extendClass(Series); -seriesTypes.line = LineSeries; - -/** - * Set the default options for area - */ -defaultPlotOptions.area = merge(defaultSeriesOptions, { - threshold: 0 - // trackByArea: false, - // lineColor: null, // overrides color, but lets fillColor be unaltered - // fillOpacity: 0.75, - // fillColor: null -}); - -/** - * AreaSeries object - */ -var AreaSeries = extendClass(Series, { - type: 'area', - - /** - * For stacks, don't split segments on null values. Instead, draw null values with - * no marker. Also insert dummy points for any X position that exists in other series - * in the stack. - */ - getSegments: function () { - var segments = [], - segment = [], - keys = [], - xAxis = this.xAxis, - yAxis = this.yAxis, - stack = yAxis.stacks[this.stackKey], - pointMap = {}, - plotX, - plotY, - points = this.points, - i, - x; - - if (this.options.stacking && !this.cropped) { // cropped causes artefacts in Stock, and perf issue - // Create a map where we can quickly look up the points by their X value. - for (i = 0; i < points.length; i++) { - pointMap[points[i].x] = points[i]; - } - - // Sort the keys (#1651) - for (x in stack) { - keys.push(+x); - } - keys.sort(function (a, b) { - return a - b; - }); - - each(keys, function (x) { - // The point exists, push it to the segment - if (pointMap[x]) { - segment.push(pointMap[x]); - - // There is no point for this X value in this series, so we - // insert a dummy point in order for the areas to be drawn - // correctly. - } else { - plotX = xAxis.translate(x); - plotY = yAxis.toPixels(stack[x].cum, true); - segment.push({ - y: null, - plotX: plotX, - clientX: plotX, - plotY: plotY, - yBottom: plotY, - onMouseOver: noop - }); - } - }); - - if (segment.length) { - segments.push(segment); - } - - } else { - Series.prototype.getSegments.call(this); - segments = this.segments; - } - - this.segments = segments; - }, - - /** - * Extend the base Series getSegmentPath method by adding the path for the area. - * This path is pushed to the series.areaPath property. - */ - getSegmentPath: function (segment) { - - var segmentPath = Series.prototype.getSegmentPath.call(this, segment), // call base method - areaSegmentPath = [].concat(segmentPath), // work on a copy for the area path - i, - options = this.options, - segLength = segmentPath.length; - - if (segLength === 3) { // for animation from 1 to two points - areaSegmentPath.push(L, segmentPath[1], segmentPath[2]); - } - if (options.stacking && !this.closedStacks) { - - // Follow stack back. Todo: implement areaspline. A general solution could be to - // reverse the entire graphPath of the previous series, though may be hard with - // splines and with series with different extremes - for (i = segment.length - 1; i >= 0; i--) { - - // step line? - if (i < segment.length - 1 && options.step) { - areaSegmentPath.push(segment[i + 1].plotX, segment[i].yBottom); - } - - areaSegmentPath.push(segment[i].plotX, segment[i].yBottom); - } - - } else { // follow zero line back - this.closeSegment(areaSegmentPath, segment); - } - this.areaPath = this.areaPath.concat(areaSegmentPath); - - return segmentPath; - }, - - /** - * Extendable method to close the segment path of an area. This is overridden in polar - * charts. - */ - closeSegment: function (path, segment) { - var translatedThreshold = this.yAxis.getThreshold(this.options.threshold); - path.push( - L, - segment[segment.length - 1].plotX, - translatedThreshold, - L, - segment[0].plotX, - translatedThreshold - ); - }, - - /** - * Draw the graph and the underlying area. This method calls the Series base - * function and adds the area. The areaPath is calculated in the getSegmentPath - * method called from Series.prototype.drawGraph. - */ - drawGraph: function () { - - // Define or reset areaPath - this.areaPath = []; - - // Call the base method - Series.prototype.drawGraph.apply(this); - - // Define local variables - var series = this, - areaPath = this.areaPath, - options = this.options, - negativeColor = options.negativeColor, - props = [['area', this.color, options.fillColor]]; // area name, main color, fill color - - if (negativeColor) { - props.push(['areaNeg', options.negativeColor, options.negativeFillColor]); - } - - each(props, function (prop) { - var areaKey = prop[0], - area = series[areaKey]; - - // Create or update the area - if (area) { // update - area.animate({ d: areaPath }); - - } else { // create - series[areaKey] = series.chart.renderer.path(areaPath) - .attr({ - fill: pick( - prop[2], - Color(prop[1]).setOpacity(options.fillOpacity || 0.75).get() - ), - zIndex: 0 // #1069 - }).add(series.group); - } - }); - }, - - /** - * Get the series' symbol in the legend - * - * @param {Object} legend The legend object - * @param {Object} item The series (this) or point - */ - drawLegendSymbol: function (legend, item) { - - item.legendSymbol = this.chart.renderer.rect( - 0, - legend.baseline - 11, - legend.options.symbolWidth, - 12, - 2 - ).attr({ - zIndex: 3 - }).add(item.legendGroup); - - } -}); - -seriesTypes.area = AreaSeries;/** - * Set the default options for spline - */ -defaultPlotOptions.spline = merge(defaultSeriesOptions); - -/** - * SplineSeries object - */ -var SplineSeries = extendClass(Series, { - type: 'spline', - - /** - * Get the spline segment from a given point's previous neighbour to the given point - */ - getPointSpline: function (segment, point, i) { - var smoothing = 1.5, // 1 means control points midway between points, 2 means 1/3 from the point, 3 is 1/4 etc - denom = smoothing + 1, - plotX = point.plotX, - plotY = point.plotY, - lastPoint = segment[i - 1], - nextPoint = segment[i + 1], - leftContX, - leftContY, - rightContX, - rightContY, - ret; - - // find control points - if (lastPoint && nextPoint) { - - var lastX = lastPoint.plotX, - lastY = lastPoint.plotY, - nextX = nextPoint.plotX, - nextY = nextPoint.plotY, - correction; - - leftContX = (smoothing * plotX + lastX) / denom; - leftContY = (smoothing * plotY + lastY) / denom; - rightContX = (smoothing * plotX + nextX) / denom; - rightContY = (smoothing * plotY + nextY) / denom; - - // have the two control points make a straight line through main point - correction = ((rightContY - leftContY) * (rightContX - plotX)) / - (rightContX - leftContX) + plotY - rightContY; - - leftContY += correction; - rightContY += correction; - - // to prevent false extremes, check that control points are between - // neighbouring points' y values - if (leftContY > lastY && leftContY > plotY) { - leftContY = mathMax(lastY, plotY); - rightContY = 2 * plotY - leftContY; // mirror of left control point - } else if (leftContY < lastY && leftContY < plotY) { - leftContY = mathMin(lastY, plotY); - rightContY = 2 * plotY - leftContY; - } - if (rightContY > nextY && rightContY > plotY) { - rightContY = mathMax(nextY, plotY); - leftContY = 2 * plotY - rightContY; - } else if (rightContY < nextY && rightContY < plotY) { - rightContY = mathMin(nextY, plotY); - leftContY = 2 * plotY - rightContY; - } - - // record for drawing in next point - point.rightContX = rightContX; - point.rightContY = rightContY; - - } - - // Visualize control points for debugging - /* - if (leftContX) { - this.chart.renderer.circle(leftContX + this.chart.plotLeft, leftContY + this.chart.plotTop, 2) - .attr({ - stroke: 'red', - 'stroke-width': 1, - fill: 'none' - }) - .add(); - this.chart.renderer.path(['M', leftContX + this.chart.plotLeft, leftContY + this.chart.plotTop, - 'L', plotX + this.chart.plotLeft, plotY + this.chart.plotTop]) - .attr({ - stroke: 'red', - 'stroke-width': 1 - }) - .add(); - this.chart.renderer.circle(rightContX + this.chart.plotLeft, rightContY + this.chart.plotTop, 2) - .attr({ - stroke: 'green', - 'stroke-width': 1, - fill: 'none' - }) - .add(); - this.chart.renderer.path(['M', rightContX + this.chart.plotLeft, rightContY + this.chart.plotTop, - 'L', plotX + this.chart.plotLeft, plotY + this.chart.plotTop]) - .attr({ - stroke: 'green', - 'stroke-width': 1 - }) - .add(); - } - */ - - // moveTo or lineTo - if (!i) { - ret = [M, plotX, plotY]; - } else { // curve from last point to this - ret = [ - 'C', - lastPoint.rightContX || lastPoint.plotX, - lastPoint.rightContY || lastPoint.plotY, - leftContX || plotX, - leftContY || plotY, - plotX, - plotY - ]; - lastPoint.rightContX = lastPoint.rightContY = null; // reset for updating series later - } - return ret; - } -}); -seriesTypes.spline = SplineSeries; - -/** - * Set the default options for areaspline - */ -defaultPlotOptions.areaspline = merge(defaultPlotOptions.area); - -/** - * AreaSplineSeries object - */ -var areaProto = AreaSeries.prototype, - AreaSplineSeries = extendClass(SplineSeries, { - type: 'areaspline', - closedStacks: true, // instead of following the previous graph back, follow the threshold back - - // Mix in methods from the area series - getSegmentPath: areaProto.getSegmentPath, - closeSegment: areaProto.closeSegment, - drawGraph: areaProto.drawGraph - }); -seriesTypes.areaspline = AreaSplineSeries; - -/** - * Set the default options for column - */ -defaultPlotOptions.column = merge(defaultSeriesOptions, { - borderColor: '#FFFFFF', - borderWidth: 1, - borderRadius: 0, - //colorByPoint: undefined, - groupPadding: 0.2, - //grouping: true, - marker: null, // point options are specified in the base options - pointPadding: 0.1, - //pointWidth: null, - minPointLength: 0, - cropThreshold: 50, // when there are more points, they will not animate out of the chart on xAxis.setExtremes - pointRange: null, // null means auto, meaning 1 in a categorized axis and least distance between points if not categories - states: { - hover: { - brightness: 0.1, - shadow: false - }, - select: { - color: '#C0C0C0', - borderColor: '#000000', - shadow: false - } - }, - dataLabels: { - align: null, // auto - verticalAlign: null, // auto - y: null - }, - stickyTracking: false, - threshold: 0 -}); - -/** - * ColumnSeries object - */ -var ColumnSeries = extendClass(Series, { - type: 'column', - tooltipOutsidePlot: true, - requireSorting: false, - pointAttrToOptions: { // mapping between SVG attributes and the corresponding options - stroke: 'borderColor', - 'stroke-width': 'borderWidth', - fill: 'color', - r: 'borderRadius' - }, - trackerGroups: ['group', 'dataLabelsGroup'], - - /** - * Initialize the series - */ - init: function () { - Series.prototype.init.apply(this, arguments); - - var series = this, - chart = series.chart; - - // if the series is added dynamically, force redraw of other - // series affected by a new column - if (chart.hasRendered) { - each(chart.series, function (otherSeries) { - if (otherSeries.type === series.type) { - otherSeries.isDirty = true; - } - }); - } - }, - - /** - * Return the width and x offset of the columns adjusted for grouping, groupPadding, pointPadding, - * pointWidth etc. - */ - getColumnMetrics: function () { - - var series = this, - chart = series.chart, - options = series.options, - xAxis = this.xAxis, - reversedXAxis = xAxis.reversed, - stackKey, - stackGroups = {}, - columnIndex, - columnCount = 0; - - // Get the total number of column type series. - // This is called on every series. Consider moving this logic to a - // chart.orderStacks() function and call it on init, addSeries and removeSeries - if (options.grouping === false) { - columnCount = 1; - } else { - each(chart.series, function (otherSeries) { - var otherOptions = otherSeries.options; - if (otherSeries.type === series.type && otherSeries.visible && - series.options.group === otherOptions.group) { // used in Stock charts navigator series - if (otherOptions.stacking) { - stackKey = otherSeries.stackKey; - if (stackGroups[stackKey] === UNDEFINED) { - stackGroups[stackKey] = columnCount++; - } - columnIndex = stackGroups[stackKey]; - } else if (otherOptions.grouping !== false) { // #1162 - columnIndex = columnCount++; - } - otherSeries.columnIndex = columnIndex; - } - }); - } - - var categoryWidth = mathMin( - mathAbs(xAxis.transA) * (xAxis.ordinalSlope || options.pointRange || xAxis.closestPointRange || 1), - xAxis.len // #1535 - ), - groupPadding = categoryWidth * options.groupPadding, - groupWidth = categoryWidth - 2 * groupPadding, - pointOffsetWidth = groupWidth / columnCount, - optionPointWidth = options.pointWidth, - pointPadding = defined(optionPointWidth) ? (pointOffsetWidth - optionPointWidth) / 2 : - pointOffsetWidth * options.pointPadding, - pointWidth = pick(optionPointWidth, pointOffsetWidth - 2 * pointPadding), // exact point width, used in polar charts - colIndex = (reversedXAxis ? - columnCount - (series.columnIndex || 0) : // #1251 - series.columnIndex) || 0, - pointXOffset = pointPadding + (groupPadding + colIndex * - pointOffsetWidth - (categoryWidth / 2)) * - (reversedXAxis ? -1 : 1); - - // Save it for reading in linked series (Error bars particularly) - return (series.columnMetrics = { - width: pointWidth, - offset: pointXOffset - }); - - }, - - /** - * Translate each point to the plot area coordinate system and find shape positions - */ - translate: function () { - var series = this, - chart = series.chart, - options = series.options, - stacking = options.stacking, - borderWidth = options.borderWidth, - yAxis = series.yAxis, - threshold = options.threshold, - translatedThreshold = series.translatedThreshold = yAxis.getThreshold(threshold), - minPointLength = pick(options.minPointLength, 5), - metrics = series.getColumnMetrics(), - pointWidth = metrics.width, - barW = mathCeil(mathMax(pointWidth, 1 + 2 * borderWidth)), // rounded and postprocessed for border width - pointXOffset = metrics.offset; - - Series.prototype.translate.apply(series); - - // record the new values - each(series.points, function (point) { - var plotY = mathMin(mathMax(-999, point.plotY), yAxis.len + 999), // Don't draw too far outside plot area (#1303) - yBottom = pick(point.yBottom, translatedThreshold), - barX = point.plotX + pointXOffset, - barY = mathCeil(mathMin(plotY, yBottom)), - barH = mathCeil(mathMax(plotY, yBottom) - barY), - stack = yAxis.stacks[(point.y < 0 ? '-' : '') + series.stackKey], - shapeArgs; - - // Record the offset'ed position and width of the bar to be able to align the stacking total correctly - if (stacking && series.visible && stack && stack[point.x]) { - stack[point.x].setOffset(pointXOffset, barW); - } - - // handle options.minPointLength - if (mathAbs(barH) < minPointLength) { - if (minPointLength) { - barH = minPointLength; - barY = - mathAbs(barY - translatedThreshold) > minPointLength ? // stacked - yBottom - minPointLength : // keep position - translatedThreshold - (yAxis.translate(point.y, 0, 1, 0, 1) <= translatedThreshold ? minPointLength : 0); // use exact yAxis.translation (#1485) - } - } - - point.barX = barX; - point.pointWidth = pointWidth; - - // create shape type and shape args that are reused in drawPoints and drawTracker - point.shapeType = 'rect'; - point.shapeArgs = shapeArgs = chart.renderer.Element.prototype.crisp.call(0, borderWidth, barX, barY, barW, barH); - - if (borderWidth % 2) { // correct for shorting in crisp method, visible in stacked columns with 1px border - shapeArgs.y -= 1; - shapeArgs.height += 1; - } - - }); - - }, - - getSymbol: noop, - - /** - * Use a solid rectangle like the area series types - */ - drawLegendSymbol: AreaSeries.prototype.drawLegendSymbol, - - - /** - * Columns have no graph - */ - drawGraph: noop, - - /** - * Draw the columns. For bars, the series.group is rotated, so the same coordinates - * apply for columns and bars. This method is inherited by scatter series. - * - */ - drawPoints: function () { - var series = this, - options = series.options, - renderer = series.chart.renderer, - shapeArgs; - - - // draw the columns - each(series.points, function (point) { - var plotY = point.plotY, - graphic = point.graphic; - - if (plotY !== UNDEFINED && !isNaN(plotY) && point.y !== null) { - shapeArgs = point.shapeArgs; - - if (graphic) { // update - stop(graphic); - graphic.animate(merge(shapeArgs)); - - } else { - point.graphic = graphic = renderer[point.shapeType](shapeArgs) - .attr(point.pointAttr[point.selected ? SELECT_STATE : NORMAL_STATE]) - .add(series.group) - .shadow(options.shadow, null, options.stacking && !options.borderRadius); - } - - } else if (graphic) { - point.graphic = graphic.destroy(); // #1269 - } - }); - }, - - /** - * Add tracking event listener to the series group, so the point graphics - * themselves act as trackers - */ - drawTracker: function () { - var series = this, - pointer = series.chart.pointer, - cursor = series.options.cursor, - css = cursor && { cursor: cursor }, - onMouseOver = function (e) { - var target = e.target, - point; - - series.onMouseOver(); - - while (target && !point) { - point = target.point; - target = target.parentNode; - } - if (point !== UNDEFINED) { // undefined on graph in scatterchart - point.onMouseOver(e); - } - }; - - // Add reference to the point - each(series.points, function (point) { - if (point.graphic) { - point.graphic.element.point = point; - } - if (point.dataLabel) { - point.dataLabel.element.point = point; - } - }); - - // Add the event listeners, we need to do this only once - if (!series._hasTracking) { - each(series.trackerGroups, function (key) { - if (series[key]) { // we don't always have dataLabelsGroup - series[key] - .addClass(PREFIX + 'tracker') - .on('mouseover', onMouseOver) - .on('mouseout', function (e) { pointer.onTrackerMouseOut(e); }) - .css(css); - if (hasTouch) { - series[key].on('touchstart', onMouseOver); - } - } - }); - - } else { - series._hasTracking = true; - } - }, - - /** - * Override the basic data label alignment by adjusting for the position of the column - */ - alignDataLabel: function (point, dataLabel, options, alignTo, isNew) { - var chart = this.chart, - inverted = chart.inverted, - dlBox = point.dlBox || point.shapeArgs, // data label box for alignment - below = point.below || (point.plotY > pick(this.translatedThreshold, chart.plotSizeY)), - inside = pick(options.inside, !!this.options.stacking); // draw it inside the box? - - // Align to the column itself, or the top of it - if (dlBox) { // Area range uses this method but not alignTo - alignTo = merge(dlBox); - if (inverted) { - alignTo = { - x: chart.plotWidth - alignTo.y - alignTo.height, - y: chart.plotHeight - alignTo.x - alignTo.width, - width: alignTo.height, - height: alignTo.width - }; - } - - // Compute the alignment box - if (!inside) { - if (inverted) { - alignTo.x += below ? 0 : alignTo.width; - alignTo.width = 0; - } else { - alignTo.y += below ? alignTo.height : 0; - alignTo.height = 0; - } - } - } - - // When alignment is undefined (typically columns and bars), display the individual - // point below or above the point depending on the threshold - options.align = pick( - options.align, - !inverted || inside ? 'center' : below ? 'right' : 'left' - ); - options.verticalAlign = pick( - options.verticalAlign, - inverted || inside ? 'middle' : below ? 'top' : 'bottom' - ); - - // Call the parent method - Series.prototype.alignDataLabel.call(this, point, dataLabel, options, alignTo, isNew); - }, - - - /** - * Animate the column heights one by one from zero - * @param {Boolean} init Whether to initialize the animation or run it - */ - animate: function (init) { - var series = this, - yAxis = this.yAxis, - options = series.options, - inverted = this.chart.inverted, - attr = {}, - translatedThreshold; - - if (hasSVG) { // VML is too slow anyway - if (init) { - attr.scaleY = 0.001; - translatedThreshold = mathMin(yAxis.pos + yAxis.len, mathMax(yAxis.pos, yAxis.toPixels(options.threshold))); - if (inverted) { - attr.translateX = translatedThreshold - yAxis.len; - } else { - attr.translateY = translatedThreshold; - } - series.group.attr(attr); - - } else { // run the animation - - attr.scaleY = 1; - attr[inverted ? 'translateX' : 'translateY'] = yAxis.pos; - series.group.animate(attr, series.options.animation); - - // delete this function to allow it only once - series.animate = null; - } - } - }, - - /** - * Remove this series from the chart - */ - remove: function () { - var series = this, - chart = series.chart; - - // column and bar series affects other series of the same type - // as they are either stacked or grouped - if (chart.hasRendered) { - each(chart.series, function (otherSeries) { - if (otherSeries.type === series.type) { - otherSeries.isDirty = true; - } - }); - } - - Series.prototype.remove.apply(series, arguments); - } -}); -seriesTypes.column = ColumnSeries; -/** - * Set the default options for bar - */ -defaultPlotOptions.bar = merge(defaultPlotOptions.column); -/** - * The Bar series class - */ -var BarSeries = extendClass(ColumnSeries, { - type: 'bar', - inverted: true -}); -seriesTypes.bar = BarSeries; - -/** - * Set the default options for scatter - */ -defaultPlotOptions.scatter = merge(defaultSeriesOptions, { - lineWidth: 0, - tooltip: { - headerFormat: '{series.name}
', - pointFormat: 'x: {point.x}
y: {point.y}
', - followPointer: true - }, - stickyTracking: false -}); - -/** - * The scatter series class - */ -var ScatterSeries = extendClass(Series, { - type: 'scatter', - sorted: false, - requireSorting: false, - noSharedTooltip: true, - trackerGroups: ['markerGroup'], - - drawTracker: ColumnSeries.prototype.drawTracker, - - setTooltipPoints: noop -}); -seriesTypes.scatter = ScatterSeries; - -/** - * Set the default options for pie - */ -defaultPlotOptions.pie = merge(defaultSeriesOptions, { - borderColor: '#FFFFFF', - borderWidth: 1, - center: [null, null], - clip: false, - colorByPoint: true, // always true for pies - dataLabels: { - // align: null, - // connectorWidth: 1, - // connectorColor: point.color, - // connectorPadding: 5, - distance: 30, - enabled: true, - formatter: function () { - return this.point.name; - } - // softConnector: true, - //y: 0 - }, - ignoreHiddenPoint: true, - //innerSize: 0, - legendType: 'point', - marker: null, // point options are specified in the base options - size: null, - showInLegend: false, - slicedOffset: 10, - states: { - hover: { - brightness: 0.1, - shadow: false - } - }, - stickyTracking: false, - tooltip: { - followPointer: true - } -}); - -/** - * Extended point object for pies - */ -var PiePoint = extendClass(Point, { - /** - * Initiate the pie slice - */ - init: function () { - - Point.prototype.init.apply(this, arguments); - - var point = this, - toggleSlice; - - // Disallow negative values (#1530) - if (point.y < 0) { - point.y = null; - } - - //visible: options.visible !== false, - extend(point, { - visible: point.visible !== false, - name: pick(point.name, 'Slice') - }); - - // add event listener for select - toggleSlice = function () { - point.slice(); - }; - addEvent(point, 'select', toggleSlice); - addEvent(point, 'unselect', toggleSlice); - - return point; - }, - - /** - * Toggle the visibility of the pie slice - * @param {Boolean} vis Whether to show the slice or not. If undefined, the - * visibility is toggled - */ - setVisible: function (vis) { - var point = this, - series = point.series, - chart = series.chart, - method; - - // if called without an argument, toggle visibility - point.visible = point.options.visible = vis = vis === UNDEFINED ? !point.visible : vis; - series.options.data[inArray(point, series.data)] = point.options; // update userOptions.data - - method = vis ? 'show' : 'hide'; - - // Show and hide associated elements - each(['graphic', 'dataLabel', 'connector', 'shadowGroup'], function (key) { - if (point[key]) { - point[key][method](); - } - }); - - if (point.legendItem) { - chart.legend.colorizeItem(point, vis); - } - - // Handle ignore hidden slices - if (!series.isDirty && series.options.ignoreHiddenPoint) { - series.isDirty = true; - chart.redraw(); - } - }, - - /** - * Set or toggle whether the slice is cut out from the pie - * @param {Boolean} sliced When undefined, the slice state is toggled - * @param {Boolean} redraw Whether to redraw the chart. True by default. - */ - slice: function (sliced, redraw, animation) { - var point = this, - series = point.series, - chart = series.chart, - translation; - - setAnimation(animation, chart); - - // redraw is true by default - redraw = pick(redraw, true); - - // if called without an argument, toggle - point.sliced = point.options.sliced = sliced = defined(sliced) ? sliced : !point.sliced; - series.options.data[inArray(point, series.data)] = point.options; // update userOptions.data - - translation = sliced ? point.slicedTranslation : { - translateX: 0, - translateY: 0 - }; - - point.graphic.animate(translation); - - if (point.shadowGroup) { - point.shadowGroup.animate(translation); - } - - } -}); - -/** - * The Pie series class - */ -var PieSeries = { - type: 'pie', - isCartesian: false, - pointClass: PiePoint, - requireSorting: false, - noSharedTooltip: true, - trackerGroups: ['group', 'dataLabelsGroup'], - pointAttrToOptions: { // mapping between SVG attributes and the corresponding options - stroke: 'borderColor', - 'stroke-width': 'borderWidth', - fill: 'color' - }, - - /** - * Pies have one color each point - */ - getColor: noop, - - /** - * Animate the pies in - */ - animate: function (init) { - var series = this, - points = series.points, - startAngleRad = series.startAngleRad; - - if (!init) { - each(points, function (point) { - var graphic = point.graphic, - args = point.shapeArgs; - - if (graphic) { - // start values - graphic.attr({ - r: series.center[3] / 2, // animate from inner radius (#779) - start: startAngleRad, - end: startAngleRad - }); - - // animate - graphic.animate({ - r: args.r, - start: args.start, - end: args.end - }, series.options.animation); - } - }); - - // delete this function to allow it only once - series.animate = null; - } - }, - - /** - * Extend the basic setData method by running processData and generatePoints immediately, - * in order to access the points from the legend. - */ - setData: function (data, redraw) { - Series.prototype.setData.call(this, data, false); - this.processData(); - this.generatePoints(); - if (pick(redraw, true)) { - this.chart.redraw(); - } - }, - - /** - * Get the center of the pie based on the size and center options relative to the - * plot area. Borrowed by the polar and gauge series types. - */ - getCenter: function () { - - var options = this.options, - chart = this.chart, - slicingRoom = 2 * (options.slicedOffset || 0), - handleSlicingRoom, - plotWidth = chart.plotWidth - 2 * slicingRoom, - plotHeight = chart.plotHeight - 2 * slicingRoom, - centerOption = options.center, - positions = [pick(centerOption[0], '50%'), pick(centerOption[1], '50%'), options.size || '100%', options.innerSize || 0], - smallestSize = mathMin(plotWidth, plotHeight), - isPercent; - - return map(positions, function (length, i) { - isPercent = /%$/.test(length); - handleSlicingRoom = i < 2 || (i === 2 && isPercent); - return (isPercent ? - // i == 0: centerX, relative to width - // i == 1: centerY, relative to height - // i == 2: size, relative to smallestSize - // i == 4: innerSize, relative to smallestSize - [plotWidth, plotHeight, smallestSize, smallestSize][i] * - pInt(length) / 100 : - length) + (handleSlicingRoom ? slicingRoom : 0); - }); - }, - - /** - * Do translation for pie slices - */ - translate: function (positions) { - this.generatePoints(); - - var total = 0, - series = this, - cumulative = 0, - precision = 1000, // issue #172 - options = series.options, - slicedOffset = options.slicedOffset, - connectorOffset = slicedOffset + options.borderWidth, - start, - end, - angle, - startAngleRad = series.startAngleRad = mathPI / 180 * ((options.startAngle || 0) % 360 - 90), - points = series.points, - circ = 2 * mathPI, - fraction, - radiusX, // the x component of the radius vector for a given point - radiusY, - labelDistance = options.dataLabels.distance, - ignoreHiddenPoint = options.ignoreHiddenPoint, - i, - len = points.length, - point; - - // Get positions - either an integer or a percentage string must be given. - // If positions are passed as a parameter, we're in a recursive loop for adjusting - // space for data labels. - if (!positions) { - series.center = positions = series.getCenter(); - } - - // utility for getting the x value from a given y, used for anticollision logic in data labels - series.getX = function (y, left) { - - angle = math.asin((y - positions[1]) / (positions[2] / 2 + labelDistance)); - - return positions[0] + - (left ? -1 : 1) * - (mathCos(angle) * (positions[2] / 2 + labelDistance)); - }; - - // get the total sum - for (i = 0; i < len; i++) { - point = points[i]; - total += (ignoreHiddenPoint && !point.visible) ? 0 : point.y; - } - - // Calculate the geometry for each point - for (i = 0; i < len; i++) { - - point = points[i]; - - // set start and end angle - fraction = total ? point.y / total : 0; - start = mathRound((startAngleRad + (cumulative * circ)) * precision) / precision; - if (!ignoreHiddenPoint || point.visible) { - cumulative += fraction; - } - end = mathRound((startAngleRad + (cumulative * circ)) * precision) / precision; - - // set the shape - point.shapeType = 'arc'; - point.shapeArgs = { - x: positions[0], - y: positions[1], - r: positions[2] / 2, - innerR: positions[3] / 2, - start: start, - end: end - }; - - // center for the sliced out slice - angle = (end + start) / 2; - if (angle > 0.75 * circ) { - angle -= 2 * mathPI; - } - point.slicedTranslation = { - translateX: mathRound(mathCos(angle) * slicedOffset), - translateY: mathRound(mathSin(angle) * slicedOffset) - }; - - // set the anchor point for tooltips - radiusX = mathCos(angle) * positions[2] / 2; - radiusY = mathSin(angle) * positions[2] / 2; - point.tooltipPos = [ - positions[0] + radiusX * 0.7, - positions[1] + radiusY * 0.7 - ]; - - point.half = angle < circ / 4 ? 0 : 1; - point.angle = angle; - - // set the anchor point for data labels - connectorOffset = mathMin(connectorOffset, labelDistance / 2); // #1678 - point.labelPos = [ - positions[0] + radiusX + mathCos(angle) * labelDistance, // first break of connector - positions[1] + radiusY + mathSin(angle) * labelDistance, // a/a - positions[0] + radiusX + mathCos(angle) * connectorOffset, // second break, right outside pie - positions[1] + radiusY + mathSin(angle) * connectorOffset, // a/a - positions[0] + radiusX, // landing point for connector - positions[1] + radiusY, // a/a - labelDistance < 0 ? // alignment - 'center' : - point.half ? 'right' : 'left', // alignment - angle // center angle - ]; - - // API properties - point.percentage = fraction * 100; - point.total = total; - - } - - - this.setTooltipPoints(); - }, - - drawGraph: null, - - /** - * Draw the data points - */ - drawPoints: function () { - var series = this, - chart = series.chart, - renderer = chart.renderer, - groupTranslation, - //center, - graphic, - //group, - shadow = series.options.shadow, - shadowGroup, - shapeArgs; - - if (shadow && !series.shadowGroup) { - series.shadowGroup = renderer.g('shadow') - .add(series.group); - } - - // draw the slices - each(series.points, function (point) { - graphic = point.graphic; - shapeArgs = point.shapeArgs; - shadowGroup = point.shadowGroup; - - // put the shadow behind all points - if (shadow && !shadowGroup) { - shadowGroup = point.shadowGroup = renderer.g('shadow') - .add(series.shadowGroup); - } - - // if the point is sliced, use special translation, else use plot area traslation - groupTranslation = point.sliced ? point.slicedTranslation : { - translateX: 0, - translateY: 0 - }; - - //group.translate(groupTranslation[0], groupTranslation[1]); - if (shadowGroup) { - shadowGroup.attr(groupTranslation); - } - - // draw the slice - if (graphic) { - graphic.animate(extend(shapeArgs, groupTranslation)); - } else { - point.graphic = graphic = renderer.arc(shapeArgs) - .setRadialReference(series.center) - .attr( - point.pointAttr[point.selected ? SELECT_STATE : NORMAL_STATE] - ) - .attr({ 'stroke-linejoin': 'round' }) - .attr(groupTranslation) - .add(series.group) - .shadow(shadow, shadowGroup); - } - - // detect point specific visibility - if (point.visible === false) { - point.setVisible(false); - } - - }); - - }, - - /** - * Override the base drawDataLabels method by pie specific functionality - */ - drawDataLabels: function () { - var series = this, - data = series.data, - point, - chart = series.chart, - options = series.options.dataLabels, - connectorPadding = pick(options.connectorPadding, 10), - connectorWidth = pick(options.connectorWidth, 1), - plotWidth = chart.plotWidth, - plotHeight = chart.plotHeight, - connector, - connectorPath, - softConnector = pick(options.softConnector, true), - distanceOption = options.distance, - seriesCenter = series.center, - radius = seriesCenter[2] / 2, - centerY = seriesCenter[1], - outside = distanceOption > 0, - dataLabel, - dataLabelWidth, - labelPos, - labelHeight, - halves = [// divide the points into right and left halves for anti collision - [], // right - [] // left - ], - x, - y, - visibility, - rankArr, - i, - j, - overflow = [0, 0, 0, 0], // top, right, bottom, left - sort = function (a, b) { - return b.y - a.y; - }, - sortByAngle = function (points, sign) { - points.sort(function (a, b) { - return a.angle !== undefined && (b.angle - a.angle) * sign; - }); - }; - - // get out if not enabled - if (!options.enabled && !series._hasPointLabels) { - return; - } - - // run parent method - Series.prototype.drawDataLabels.apply(series); - - // arrange points for detection collision - each(data, function (point) { - if (point.dataLabel) { // it may have been cancelled in the base method (#407) - halves[point.half].push(point); - } - }); - - // assume equal label heights - i = 0; - while (!labelHeight && data[i]) { // #1569 - labelHeight = data[i] && data[i].dataLabel && (data[i].dataLabel.getBBox().height || 21); // 21 is for #968 - i++; - } - - /* Loop over the points in each half, starting from the top and bottom - * of the pie to detect overlapping labels. - */ - i = 2; - while (i--) { - - var slots = [], - slotsLength, - usedSlots = [], - points = halves[i], - pos, - length = points.length, - slotIndex; - - // Sort by angle - sortByAngle(points, i - 0.5); - - // Only do anti-collision when we are outside the pie and have connectors (#856) - if (distanceOption > 0) { - - // build the slots - for (pos = centerY - radius - distanceOption; pos <= centerY + radius + distanceOption; pos += labelHeight) { - slots.push(pos); - - // visualize the slot - /* - var slotX = series.getX(pos, i) + chart.plotLeft - (i ? 100 : 0), - slotY = pos + chart.plotTop; - if (!isNaN(slotX)) { - chart.renderer.rect(slotX, slotY - 7, 100, labelHeight, 1) - .attr({ - 'stroke-width': 1, - stroke: 'silver' - }) - .add(); - chart.renderer.text('Slot '+ (slots.length - 1), slotX, slotY + 4) - .attr({ - fill: 'silver' - }).add(); - } - */ - } - slotsLength = slots.length; - - // if there are more values than available slots, remove lowest values - if (length > slotsLength) { - // create an array for sorting and ranking the points within each quarter - rankArr = [].concat(points); - rankArr.sort(sort); - j = length; - while (j--) { - rankArr[j].rank = j; - } - j = length; - while (j--) { - if (points[j].rank >= slotsLength) { - points.splice(j, 1); - } - } - length = points.length; - } - - // The label goes to the nearest open slot, but not closer to the edge than - // the label's index. - for (j = 0; j < length; j++) { - - point = points[j]; - labelPos = point.labelPos; - - var closest = 9999, - distance, - slotI; - - // find the closest slot index - for (slotI = 0; slotI < slotsLength; slotI++) { - distance = mathAbs(slots[slotI] - labelPos[1]); - if (distance < closest) { - closest = distance; - slotIndex = slotI; - } - } - - // if that slot index is closer to the edges of the slots, move it - // to the closest appropriate slot - if (slotIndex < j && slots[j] !== null) { // cluster at the top - slotIndex = j; - } else if (slotsLength < length - j + slotIndex && slots[j] !== null) { // cluster at the bottom - slotIndex = slotsLength - length + j; - while (slots[slotIndex] === null) { // make sure it is not taken - slotIndex++; - } - } else { - // Slot is taken, find next free slot below. In the next run, the next slice will find the - // slot above these, because it is the closest one - while (slots[slotIndex] === null) { // make sure it is not taken - slotIndex++; - } - } - - usedSlots.push({ i: slotIndex, y: slots[slotIndex] }); - slots[slotIndex] = null; // mark as taken - } - // sort them in order to fill in from the top - usedSlots.sort(sort); - } - - // now the used slots are sorted, fill them up sequentially - for (j = 0; j < length; j++) { - - var slot, naturalY; - - point = points[j]; - labelPos = point.labelPos; - dataLabel = point.dataLabel; - visibility = point.visible === false ? HIDDEN : VISIBLE; - naturalY = labelPos[1]; - - if (distanceOption > 0) { - slot = usedSlots.pop(); - slotIndex = slot.i; - - // if the slot next to currrent slot is free, the y value is allowed - // to fall back to the natural position - y = slot.y; - if ((naturalY > y && slots[slotIndex + 1] !== null) || - (naturalY < y && slots[slotIndex - 1] !== null)) { - y = naturalY; - } - - } else { - y = naturalY; - } - - // get the x - use the natural x position for first and last slot, to prevent the top - // and botton slice connectors from touching each other on either side - x = options.justify ? - seriesCenter[0] + (i ? -1 : 1) * (radius + distanceOption) : - series.getX(slotIndex === 0 || slotIndex === slots.length - 1 ? naturalY : y, i); - - - // Record the placement and visibility - dataLabel._attr = { - visibility: visibility, - align: labelPos[6] - }; - dataLabel._pos = { - x: x + options.x + - ({ left: connectorPadding, right: -connectorPadding }[labelPos[6]] || 0), - y: y + options.y - 10 // 10 is for the baseline (label vs text) - }; - dataLabel.connX = x; - dataLabel.connY = y; - - - // Detect overflowing data labels - if (this.options.size === null) { - dataLabelWidth = dataLabel.width; - // Overflow left - if (x - dataLabelWidth < connectorPadding) { - overflow[3] = mathMax(mathRound(dataLabelWidth - x + connectorPadding), overflow[3]); - - // Overflow right - } else if (x + dataLabelWidth > plotWidth - connectorPadding) { - overflow[1] = mathMax(mathRound(x + dataLabelWidth - plotWidth + connectorPadding), overflow[1]); - } - - // Overflow top - if (y - labelHeight / 2 < 0) { - overflow[0] = mathMax(mathRound(-y + labelHeight / 2), overflow[0]); - - // Overflow left - } else if (y + labelHeight / 2 > plotHeight) { - overflow[2] = mathMax(mathRound(y + labelHeight / 2 - plotHeight), overflow[2]); - } - } - } // for each point - } // for each half - - // Do not apply the final placement and draw the connectors until we have verified - // that labels are not spilling over. - if (arrayMax(overflow) === 0 || this.verifyDataLabelOverflow(overflow)) { - - // Place the labels in the final position - this.placeDataLabels(); - - // Draw the connectors - if (outside && connectorWidth) { - each(this.points, function (point) { - connector = point.connector; - labelPos = point.labelPos; - dataLabel = point.dataLabel; - - if (dataLabel && dataLabel._pos) { - x = dataLabel.connX; - y = dataLabel.connY; - connectorPath = softConnector ? [ - M, - x + (labelPos[6] === 'left' ? 5 : -5), y, // end of the string at the label - 'C', - x, y, // first break, next to the label - 2 * labelPos[2] - labelPos[4], 2 * labelPos[3] - labelPos[5], - labelPos[2], labelPos[3], // second break - L, - labelPos[4], labelPos[5] // base - ] : [ - M, - x + (labelPos[6] === 'left' ? 5 : -5), y, // end of the string at the label - L, - labelPos[2], labelPos[3], // second break - L, - labelPos[4], labelPos[5] // base - ]; - - if (connector) { - connector.animate({ d: connectorPath }); - connector.attr('visibility', visibility); - - } else { - point.connector = connector = series.chart.renderer.path(connectorPath).attr({ - 'stroke-width': connectorWidth, - stroke: options.connectorColor || point.color || '#606060', - visibility: visibility - }) - .add(series.group); - } - } else if (connector) { - point.connector = connector.destroy(); - } - }); - } - } - }, - - /** - * Verify whether the data labels are allowed to draw, or we should run more translation and data - * label positioning to keep them inside the plot area. Returns true when data labels are ready - * to draw. - */ - verifyDataLabelOverflow: function (overflow) { - - var center = this.center, - options = this.options, - centerOption = options.center, - minSize = options.minSize || 80, - newSize = minSize, - ret; - - // Handle horizontal size and center - if (centerOption[0] !== null) { // Fixed center - newSize = mathMax(center[2] - mathMax(overflow[1], overflow[3]), minSize); - - } else { // Auto center - newSize = mathMax( - center[2] - overflow[1] - overflow[3], // horizontal overflow - minSize - ); - center[0] += (overflow[3] - overflow[1]) / 2; // horizontal center - } - - // Handle vertical size and center - if (centerOption[1] !== null) { // Fixed center - newSize = mathMax(mathMin(newSize, center[2] - mathMax(overflow[0], overflow[2])), minSize); - - } else { // Auto center - newSize = mathMax( - mathMin( - newSize, - center[2] - overflow[0] - overflow[2] // vertical overflow - ), - minSize - ); - center[1] += (overflow[0] - overflow[2]) / 2; // vertical center - } - - // If the size must be decreased, we need to run translate and drawDataLabels again - if (newSize < center[2]) { - center[2] = newSize; - this.translate(center); - each(this.points, function (point) { - if (point.dataLabel) { - point.dataLabel._pos = null; // reset - } - }); - this.drawDataLabels(); - - // Else, return true to indicate that the pie and its labels is within the plot area - } else { - ret = true; - } - return ret; - }, - - /** - * Perform the final placement of the data labels after we have verified that they - * fall within the plot area. - */ - placeDataLabels: function () { - each(this.points, function (point) { - var dataLabel = point.dataLabel, - _pos; - - if (dataLabel) { - _pos = dataLabel._pos; - if (_pos) { - dataLabel.attr(dataLabel._attr); - dataLabel[dataLabel.moved ? 'animate' : 'attr'](_pos); - dataLabel.moved = true; - } else if (dataLabel) { - dataLabel.attr({ y: -999 }); - } - } - }); - }, - - alignDataLabel: noop, - - /** - * Draw point specific tracker objects. Inherit directly from column series. - */ - drawTracker: ColumnSeries.prototype.drawTracker, - - /** - * Use a simple symbol from column prototype - */ - drawLegendSymbol: AreaSeries.prototype.drawLegendSymbol, - - /** - * Pies don't have point marker symbols - */ - getSymbol: noop - -}; -PieSeries = extendClass(Series, PieSeries); -seriesTypes.pie = PieSeries; - - -// global variables -extend(Highcharts, { - - // Constructors - Axis: Axis, - Chart: Chart, - Color: Color, - Legend: Legend, - Pointer: Pointer, - Point: Point, - Tick: Tick, - Tooltip: Tooltip, - Renderer: Renderer, - Series: Series, - SVGElement: SVGElement, - SVGRenderer: SVGRenderer, - - // Various - arrayMin: arrayMin, - arrayMax: arrayMax, - charts: charts, - dateFormat: dateFormat, - format: format, - pathAnim: pathAnim, - getOptions: getOptions, - hasBidiBug: hasBidiBug, - isTouchDevice: isTouchDevice, - numberFormat: numberFormat, - seriesTypes: seriesTypes, - setOptions: setOptions, - addEvent: addEvent, - removeEvent: removeEvent, - createElement: createElement, - discardElement: discardElement, - css: css, - each: each, - extend: extend, - map: map, - merge: merge, - pick: pick, - splat: splat, - extendClass: extendClass, - pInt: pInt, - wrap: wrap, - svg: hasSVG, - canvas: useCanVG, - vml: !hasSVG && !useCanVG, - product: PRODUCT, - version: VERSION -}); -}()); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts.js deleted file mode 100755 index ce8c438cf..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts.js +++ /dev/null @@ -1,1104 +0,0 @@ -/** - * @author - * Joe Kuan - * - * version 2.4.2 - * - * - * - * Documentation last updated: 17 Apr 2013 - * - * A much improved & ported from ExtJs 3 Highchart adapter. - * - * - Supports the latest Highcharts (3.0.0) - * - Supports both Sencha ExtJs 4 and Touch 2 - * - Supports Highcharts animations - * - * In order to use this extension, you are expected to know how to use Highcharts and Sencha products (ExtJs 4 & Touch 2). - * - * # Configuring Highcharts Extension - * The Highcharts extension requires a few changes from an existing Highcharts configuration. Suppose we already have a - * configuration as follows: - * @example - * var chart = new Highcharts.Chart({ - * chart: { - * renderTo: 'container', - * type: 'spline' - * }, - * title: { - * text: 'A simple graph' - * }, - * xAxis: { - * categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', - * 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ] - * }, - * series: [{ - * dashStyle: 'DashDot', - * data: [54.7, 54.7, 53.9, 54.8, 54.4, 54.2, 52.4, 51.0, 49.0, 47.4, 47.0, 46 ] - * }] - * }); - * ## Step 1: Remove data related fields - * - * The first step is to take out the configuration - * object and remove any data related properties such as: *xAxis.categories* and *series[0].data*. Then removes - * *chart.renderTo* option as the extension will fill in that property internally. This leaves us with the following config: - * @example - * chart: { - * type: 'spline' - * }, - * title: { - * text: 'A simple graph' - * }, - * series: [{ - * dashStyle: 'DashDot' - * }] - * ## Step 2: Create chartConfig - * - * The next step is to create an object called, *chartConfig*, and put the above configuration in it. Then we extract the - * series array to an upper level which gives the followings: - * @example - * series: [{ - * dashStyle: 'DashDot' - * }], - * chartConfig: { - * chart: { - * type: 'spline' - * }, - * title: { - * text: 'A simple graph' - * } - * } - * ## Step 3: Create ExtJs Store and data mappings - * - * Then we create a ExtJs Store object to map the data fields. - * @example - * Ext.define('SampleData', { - * extend: 'Ext.data.Model', - * fields: [ - * {name: 'month', type: 'string'}, - * {name: 'value', type: 'float'} - * ] - * }); - * - * var store = Ext.create('Ext.data.Store', { - * model: 'SampleData', - * proxy: { - * type: 'ajax', - * url: '/getData.php', - * reader: { - * type: 'json', - * root: 'rows' - * } - * }, - * autoLoad: false - * }); - * Then we modify the series array with data mappings to Store; we add *xField* outside the series array - * as categories data and *dataIndex* for the y-axis values. For historical reason, we can also use *yField*, - * just an alias name for *dataIndex*. - * @example - * series:[{ - * dashStyle: 'DashDot', - * dataIndex: 'value' - * }], - * xField: 'month', - * store: store, - * chartConfig: { - * chart: { - * .... - * - * ## Step 4: Create ExtJs Highcharts Component - * - * The final step is to create a Highcharts component with the whole config as an object specifier. - * @example - * var win = new Ext.create('Ext.window.Window', { - * layout: 'fit', - * items: [{ - * xtype: 'highchart', - * series:[{ - * dashStyle: 'DashDot', - * dataIndex: 'value' - * }], - * xField: 'month', - * store: store, - * chartConfig: { - * chart: { - * type: 'spline' - * }, - * title: { - * text: 'A simple graph' - * } - * } - * }] - * }).show(); - * - * # Updating Highcharts chart properties dynamically - * Some of the Highcharts properties cannot be updated interactively such as relocating legend box, - * switching column charts stacking mode. The only way is to manually destroy and create the whole chart again. - * In Highcharts extension, this can be done in an easier fashion. The Highcharts component itself - * contains a *chartConfig* object which holds the existing native Highcharts configurations. At runtime, - * options inside *chartConfig* can be modified and call method *draw* which interally destroys and - * creates a new chart. As a result, the chart appears as a dynamic smooth update - * @example - * var chart = new Ext.create('Chart.ux.Highcharts', { - * .... - * }); - * chart.chartConfig.plotOptions.column.stacking = 'normal'; - * chart.draw(); - * - * # Mapping between JsonStore and series data - * The data mapping between JsonStore and chart series option is quite straightforward. Please refers - * to the desired {@link Chart.ux.Highcharts.Serie} class and {@link Chart.ux.Highcharts.Serie#method-getData} - * method for more details on data mapping. - * - * # Multiple series with non-uniform datasets (Irregular data) - * For plotting multiple series that do not have the same number of data points, see - * {@link Chart.ux.Highcharts.Serie} class and {@link Chart.ux.Highcharts.Serie#cfg-dataIndex} configuration for - * more details on data mapping. - * - * # Using the extension without Store - * The extension can be created without necessary binding to a store. Suppose there are too many possible series - * that are not practical to be initiated as part of chart data. Instead, the chart component can be - * created without any datasets. However, the chart initial animation ({@link Chart.ux.Highcharts#cfg-initAnimAfterLoad}) - * must be switched off, so that the extension won't defer plotting the chart waiting for data. - * xtype: 'highchart', - * initAnimAfterLoad: false, - * chartConfig : { - * chart : { - * // Show the empty chart - See Highcharts option - * showAxes: true, - * .... - * }, - * ... - * } - * Once the chart is displayed, the dynamic series can be displayed via {@link Chart.ux.Highcharts#method-addSeries} method - * using the 'data' field. This can further called by a separate store's load method triggered by some form of - * interactions from the UI. - */ -Ext.define("Chart.ux.Highcharts", { - extend : 'Ext.Component', - alias : ['widget.highchart'], - - statics: { - /*** - * @static - * Version string of the current Highcharts extension - */ - version: '2.4.2', - - /*** - * @property {Object} sencha - * @readonly - * Contain shorthand representations of which Sencha product is the - * Highcharts extension currently running in. - * // Under Sencha ExtJs - * { product: 'e', major: 4, name: 'e4' } - * // Under Sencha Touch 2 - * { product: 't', major: 2, name: 't2' } - */ - sencha: function() { - if (Ext.versions.extjs) { - return { - product: 'e', - major: Ext.versions.extjs.major, - name: 'e' + Ext.versions.extjs.major - }; - } - if (Ext.versions.touch) { - return { - product: 't', - major: Ext.versions.touch.major, - name: 't' + Ext.versions.touch.major - }; - } - return { - product: null, - major: null, - name: null - }; - }() - }, - - /*** - * @property {Boolean} debug - * Switch on the debug logging to the console - */ - debug: false, - - switchDebug : function() { - this.debug = true; - }, - - /*** - * This method is called by other routines within this extension to output debugging log. - * This method can be overrided with Ext.emptyFn for product deployment - * @param {String} msg debug message to the console - */ - log: function(msg) { - (typeof console !== 'undefined' && this.debug) && console.log(msg); - }, - - /** - * @cfg {Object} defaultSerieType - * If the series.type is not defined, then it will refer to this option - */ - defaultSerieType : 'line', - - /** - * @cfg {Boolean} resizable - * True to allow resizing, false to disable resizing (defaults to true). - */ - resizable : true, - - /** - * @cfg {Number} updateDelay - * A delay to call {@link Chart.ux.Highcharts#method-draw} method - */ - updateDelay : 0, - - /** - * @cfg {Object} loadMask An {@link Ext.LoadMask} config or true to mask the - * chart while - * loading. Defaults to false. - */ - loadMask : false, - - /*** - * @cfg {String} loadMaskMsg Message display for loadmask - */ - loadMaskMsg: 'Loading ... ', - - /** - * @cfg {Boolean} refreshOnChange - * chart refresh data when store datachanged event is triggered, - * i.e. records are added, removed, or updated. - * If your application is just purely showing data from store load, - * then you don't need this. - */ - refreshOnChange: false, - - refreshOnLoad: true, - - /** - * @cfg {Boolean} - * this config enable or disable chart animation - */ - animation: true, - updateAnim: true, - - /*** - * @cfg {Boolean} lineShift - * The line shift is achieved by comparing the existing x values in the chart - * and x values from the store record and work out the extra record. - * Then append the new records with shift property. Hence, any old records with updated - * y values are ignored - */ - lineShift: false, - - initAnim: true, - /** - * @cfg {Boolean} - * In a nutshell, keeps this option to true. - * - * Since Highcharts initial and update animations are not the same, - * if you want to make sure there is initial animation, then you should create store - * and extension in specific sequence. First, set the {@link Ext.data.Store#cfg-autoLoad} - * option to false, create the Highcharts component with the store, then call the - * {@link Ext.data.Store#method-load} method. The *initAnimAfterLoad* defers creating - * the chart internally until the store is loaded. Disabling it, the extension will create - * the chart instantly and you will only see the update animation after the load. - */ - initAnimAfterLoad: true, - - /** - * @cfg {Function} afterChartRendered - * callback for after the Highcharts - * is rendered. **Note**: Do not call initial {@link Ext.data.Store#method-load} inside this handler, - * especially with *initAnimAfterLoad* set to true because {@link Ext.data.Store#method-load} will - * never be called as the chart is deferring to render waiting for the store data. Here is an example - * of how this should be called. This 'this' keyword refers to the Highcharts ExtJs component whereas - * chart refers to the created Highcharts chart object - * items: [{ - * xtype: 'highchart', - * listeners: { - * afterChartRendered: function(chart) { - * // 'this' refers to the 'highchart' ExtJs component - * var size = this.getSize(); - * // Get the average value of the first series - * var temp = 0; - * Ext.each(chart.series[0].data, function(data) { - * temp += data; - * }); - * temp = temp / chart.series[0].data.length; - * Ext.Msg.alert('Info', 'The average value is ' + temp); - * } - * }, - * series:[ ... ], - * xField: 'month', - * store: store, - * chartConfig: { - * .... - * } - */ - afterChartRendered: null, - - constructor: function(config) { - config.listeners && (this.afterChartRendered = config.listeners.afterChartRendered); - this.afterChartRendered && (this.afterChartRendered = Ext.bind(this.afterChartRendered, this)); - if (config.animation == false) { - this.animation = false; - this.initAnim = false; - this.updateAnim = false; - this.initAnimAfterLoad = false; - } - - this.callParent(arguments); - - // Important: Sencha Touch needs this - (this.statics().sencha.product == 't') && this.on('show', this.afterRender); - - }, - - initComponent : function() { - if(this.store) { - this.store = Ext.data.StoreManager.lookup(this.store); - } - if (this.animation == false) { - this.initAnim = false; - this.updateAnim = false; - this.initAnimAfterLoad = false; - } - - this.callParent(arguments); - }, - - /*** - * Add one or more series to the chart. The addSeries method can be used with Serie field name configurations referring to fields from the store - * or static data using the data field as the native Highcharts series configuration - * // Append a series with specific data - * addSeries([{ - * name: 'Series A', - * data: [ [ 3, 5 ], [ 4, 6 ], [ 5, 7 ] ] - * }], true); - * - * @param {Array} series An array of series configuration objects - * @param {Boolean} append Append the series if true, otherwise replace all the existing chart series. Optional parameter, Defaults to true if not specified - */ - addSeries : function(series, append) { - - append = (append === null || append === true) ? true : false; - - // Sencha Touch uses config to access properties - var _this = (this.statics().sencha.product == 't') ? this.config : this; - - var n = new Array(), c = new Array(), cls, serieObject; - // Add empty data to the serie or just leave it normal. Bug in HighCharts? - for(var i = 0; i < series.length; i++) { - // Clone Serie config for scope injection - var serie = Ext.clone(series[i]); - if(!serie.serieCls) { - if(serie.type != null || this.defaultSerieType != null) { - cls = serie.type || this.defaultSerieType; - cls = "highcharts." + cls; // See alternateClassName - } else { - cls = "Chart.ux.Highcharts.Serie"; - } - - serieObject = Ext.create(cls, serie); - } else { - serieObject = serie; - } - - serieObject.chart = this; - - c.push(serieObject.config); - n.push(serieObject); - } - - // Show in chart - if(this.chart) { - if(!append) { - this.removeAllSeries(); - _this.series = n; - _this.chartConfig.series = c; - } else { - _this.chartConfig.series = _this.chartConfig.series ? _this.chartConfig.series.concat(c) : c; - _this.series = _this.series ? _this.series.concat(n) : n; - } - for(var i = 0; i < c.length; i++) { - this.chart.addSeries(c[i], true); - } - this.refresh(); - - // Set the data in the config. - } else { - - if(append) { - _this.chartConfig.series = _this.chartConfig.series ? _this.chartConfig.series.concat(c) : c; - _this.series = _this.series ? _this.series.concat(n) : n; - } else { - _this.chartConfig.series = c; - _this.series = n; - } - } - }, - - /*** - * Remove particular series from the chart. - * @param {Number} id the index value in the chart series array - * @param {Boolean} redraw Set it to true to immediate redraw the chart to reflect the change - */ - removeSerie : function(id, redraw) { - // Sencha Touch uses config to access properties - var _this = (this.statics().sencha.product == 't') ? this.config : this; - - redraw = redraw || true; - if(this.chart) { - this.chart.series[id].remove(redraw); - _this.chartConfig.series.splice(id, 1); - } - _this.series.splice(id, 1); - }, - - /*** - * Remove all series in the chart. This also remove any categories - * data along the axes - */ - removeAllSeries : function() { - // Sencha Touch uses config to access properties - var _this = (this.statics().sencha.product == 't') ? this.config : this; - var sc = _this.series.length; - for(var i = 0; i < sc; i++) { - this.removeSerie(0); - } - // Need to also clean up the previous categories data if - // there are any - Ext.each(_this.chartConfig.xAxis, function(xAxis) { - delete xAxis.categories; - }); - }, - - /** - * Set the title of the chart and redraw the chart - * @param {String} title Text to set the subtitle - */ - setTitle : function(title) { - - // Sencha Touch uses config to access properties - var _this = (this.statics().sencha.product == 't') ? this.config : this; - - if(_this.chartConfig.title) - _this.chartConfig.title.text = title; - else - _this.chartConfig.title = { - text : title - }; - if(this.chart && this.chart.container) - this.draw(); - }, - - /** - * Set the subtitle of the chart and redraw the chart - * @param {String} title Text to set the subtitle - */ - setSubTitle : function(title) { - - // Sencha Touch uses config to access properties - var _this = (this.statics().sencha.product == 't') ? this.config : this; - - if(_this.chartConfig.subtitle) - _this.chartConfig.subtitle.text = title; - else - _this.chartConfig.subtitle = { - text : title - }; - if(this.chart && this.chart.container) - this.draw(); - }, - - initEvents : function() { - - }, - - afterRender : function() { - - // Sencha Touch uses config to access properties - var _this = (this.statics().sencha.product == 't') ? this.config : this; - - if(this.store) - this.bindStore(this.store, true); - - this.bindComponent(true); - - // Ext.applyIf causes problem in 4.1.x but works fine with - // 4.0.x - Ext.apply(_this.chartConfig.chart, { - renderTo : (this.statics().sencha.product == 't') ? this.element.dom : this.el.dom - }); - - Ext.applyIf(_this.chartConfig, { - xAxis : [{}] - }); - - if(_this.xField && this.store) { - this.updatexAxisData(); - } - - if(_this.series) { - this.log("Call addSeries"); - this.addSeries(_this.series, false); - } else - _this.series = []; - - this.initEvents(); - // Make a delayed call to update the chart. - this.update(0); - }, - - onMove : function() { - - }, - - /*** - * @private - * Build the initial data set if there are data already - * inside the store. - */ - buildInitData : function() { - - // Sencha Touch uses config to access properties - var _this = (this.statics().sencha.product == 't') ? this.config : this; - var series = null, chartConfigSeries = null; - var ptObject = null, record = null, colorField = null; - - if (!this.store || this.store.isLoading() || - !_this.chartConfig || this.initAnim === false || - _this.chartConfig.chart.animation === false) { - return; - } - - var data = [], seriesCount = _this.series.length, i; - - var items = this.store.data.items; - (_this.chartConfig.series === undefined) && (_this.chartConfig.series = []); - for( i = 0; i < seriesCount; i++) { - - if (!_this.chartConfig.series[i]) - _this.chartConfig.series[i] = { data: [] }; - else - _this.chartConfig.series[i].data = []; - - // Sort out the type for this series - series = _this.series[i]; - series.buildInitData(items); - } - }, - - /** - * Redraw the chart. It internally destroys existing chart (if already display) and - * re-creates the chart object. Call this method to reflect any structural changes in chart configuration - */ - draw : function() { - // Sencha Touch uses config to access properties - var _this = (this.statics().sencha.product == 't') ? this.config : this; - - this.log("call draw"); - if(this.chart && this.rendered) { - if(this.resizable) { - for(var i = 0; i < _this.series.length; i++) { - _this.series[i].visible = this.chart.series[i].visible; - } - - // Redraw the highchart means recreate the highchart - // inside this component - // Destroy - this.chart.destroy(); - delete this.chart; - - this.buildInitData(); - - // Create a new chart - this.chart = new Highcharts.Chart(_this.chartConfig, this.afterChartRendered); - } - - } else if(this.rendered) { - // Create the chart from fresh - - if (!this.initAnimAfterLoad || (this.store && this.store.getCount() > 0)) { - this.buildInitData(); - this.chart = new Highcharts.Chart(_this.chartConfig, this.afterChartRendered); - this.log("initAnimAfterLoad is off, creating chart from fresh"); - } else { - this.log("initAnimAfterLoad is on, defer creating chart"); - return; - } - } - - for( i = 0; i < _this.series.length; i++) { - if(!_this.series[i].visible) - _this.chart.series[i].hide(); - } - - // Refresh the data only if it is not loading - // no point doing this, as onLoad will pick it up - if (this.store && !this.store.isLoading()) { - this.log("Call refresh from draw"); - this.refresh(); - } - }, - - //@deprecated - onContainerResize : function() { - Ext.log("onContainerResize"); - this.draw(); - }, - - //private - updatexAxisData : function() { - // Sencha Touch uses config to access properties - var _this = (this.statics().sencha.product == 't') ? this.config : this; - - var data = [], items = this.store.data.items; - - if(_this.xField && this.store) { - for(var i = 0; i < items.length; i++) { - data.push(items[i].data[_this.xField]); - } - if(this.chart) - this.chart.xAxis[0].setCategories(data, true); - else if (Ext.isArray(_this.chartConfig.xAxis)) { - _this.chartConfig.xAxis[0].categories = data; - } else { - _this.chartConfig.xAxis.categories = data; - } - } - }, - - bindComponent : function(bind) { - if(bind) { - this.on('move', this.onMove); - this.on('resize', this._onResize); - } else { - this.un('move', this.onMove); - this.un('resize', this._onResize); - } - }, - - /** - * Changes the data store bound to this chart and refreshes it. - * @param {Store} store The store to bind to this chart - */ - bindStore : function(store, initial) { - - if(!initial && this.store) { - if(store !== this.store && this.store.autoDestroy) { - this.store.destroy(); - } else { - this.store.un("datachanged", this.onDataChange, this); - this.store.un("load", this.onLoad, this); - this.store.un("add", this.onAdd, this); - this.store.un("remove", this.onRemove, this); - this.store.un("update", this.onUpdate, this); - this.store.un("clear", this.onClear, this); - } - } - - if(store) { - store = Ext.StoreMgr.lookup(store); - store.on({ - scope : this, - load : this.onLoad, - datachanged : this.onDataChange, - add : this.onAdd, - remove : this.onRemove, - update : this.onUpdate, - clear : this.onClear - }); - } - - this.store = store; - - if (this.loadMask !== false) { - if (this.loadMask === true) { - this.loadMask = new Ext.LoadMask({target:this,store:this.store}); - } else { - this.loadMask.bindStore(this.store); - } - } - - if(store && !initial) { - this.refresh(); - } - }, - - /** - * Complete refresh series in the chart. This method rebuilds the chart series - * array from the current store records. Any store record changes should call - * this method to reflect to the chart. - */ - refresh : function() { - // Sencha Touch uses config to access properties - var _this = (this.statics().sencha.product == 't') ? this.config : this; - - this.log("Call refresh "); - if(this.store && this.chart) { - - var data = new Array(), seriesCount = _this.series.length, i; - - for( i = 0; i < seriesCount; i++) - data.push(new Array()); - - // We only want to go true the data once. - // So we need to have all columns that we use in line. - // But we need to create a point. - var items = this.store.data.items; - var xFieldData = []; - - for(var x = 0; x < items.length; x++) { - var record = items[x]; - - if(_this.xField) { - xFieldData.push(record.data[_this.xField]); - } - - for( i = 0; i < seriesCount; i++) { - var serie = _this.series[i], point; - // if serie.config.getData is defined, it doesn't need - // reference to dataIndex or yField, it just direct access - // to fields inside the implementation - if (serie.dataIndex || serie.yField || - serie.minDataIndex || serie.config.getData) { - // record.data[dataIndex] is an array, then treat it as an array of - // data points - if (Ext.isArray(record.data[serie.dataIndex])) { - Ext.each(record.data[serie.dataIndex], function(dataPoint) { - data[i].push(dataPoint); - }); - } else { - point = serie.getData(record, x); - serie.bindRecord && (point.record = record); - data[i].push(point); - } - } else if (serie.type == 'pie') { - if (serie.useTotals) { - if(x == 0) - serie.clear(); - point = serie.getData(record, x); - serie.bindRecord && (point.record = record); - } else if (serie.totalDataField) { - serie.getData(record, data[i]); - } else { - point = serie.getData(record, x); - serie.bindRecord && (point.record = record); - data[i].push(point); - } - } else if (serie.type == 'gauge') { - // Gauge is a dial type chart, so the data can only - // have one value - data[i][0] = serie.getData(record, x); - } else if (serie.data && serie.data.length) { - // This means the series is added within its own data - // not from the store - if (serie.data[x] !== undefined) { - data[i].push(serie.data[x]); - } else { - data[i].push(null); - } - } - } - } - - // Update the series - if (!this.updateAnim) { - for( i = 0; i < seriesCount; i++) { - if(_this.series[i].useTotals) { - this.chart.series[i].setData(_this.series[i].getTotals()); - } else if(data[i].length > 0 || _this.series[i].updateNoRecord) { - this.chart.series[i].setData(data[i], i == (seriesCount - 1)); - // true == redraw. - } - } - - if(_this.xField) { - //this.updatexAxisData(); - this.chart.xAxis[0].setCategories(xFieldData, true); - } - } else { - var xCatStartIdx = -1; - this.log("Update animation with line shift: " + _this.lineShift); - for( i = 0; i < seriesCount; i++) { - if (_this.series[i].useTotals) { - this.chart.series[i].setData(_this.series[i].getTotals()); - } else if (data[i].length > 0 || _this.series[i].updateNoRecord) { - if (!_this.lineShift) { - // Need to work out the length between the store dataset and - // the current series data set - var chartSeriesLength = this.chart.series[i].points.length; - var storeSeriesLength = data[i].length; - for (var x = 0; x < Math.min(chartSeriesLength, storeSeriesLength); x++) { - this.chart.series[i].points[x].update(data[i][x], false, true); - } - - // Gotcha, we need to be careful with pie series, as the totalDataField - // can conflict with the following series data points trimming operations - if (_this.series[i].type === 'pie') { - this.chart.series[i].setData([]); - for (var x=0;x storeSeriesLength) { - for (var y = 0; y < (chartSeriesLength - storeSeriesLength); y++) { - // Points.length is not immediately updated after remove call, so don't use points.length - var last = chartSeriesLength - y - 1; - this.log("Remove point at pos " + last); - this.chart.series[i].points[last].remove(false, true); - } - } - } else { - var xAxis = Ext.isArray(this.chart.xAxis) ? this.chart.xAxis[0] : this.chart.xAxis; - // We need to see whether compare through xAxis categories or data points x axis value - var startIdx = -1; - - if (xAxis.categories) { - // Since this is categories, it means multiple series share the common - // categories. Hence we only do it once to find the startIdx position - if (i == 0) { - for (var x = 0 ; x < xFieldData.length; x++) { - var found = false; - for (var y = 0; y < xAxis.categories.length; y++) { - if (xFieldData[x] == xAxis.categories[y]) { - found = true - break; - } - } - if (!found) { - xCatStartIdx = startIdx = x; - break; - } - } - - var categories = xAxis.categories.slice(0); - categories.push(xFieldData[x]); - xAxis.setCategories(categories, false); - } else { - // Reset the startIdx - startIdx = xCatStartIdx; - } - this.log("startIdx " + startIdx); - // Start shifting - if (startIdx !== -1 && startIdx < xFieldData.length) { - for (var x = startIdx; x < xFieldData.length; x++) { - - this.chart.series[i].addPoint(data[i][x], - false, true, true); - } - } - } else { - var chartSeries = this.chart.series[i].points; - for (var x = 0 ; x < data[i].length; x++) { - var found = false; - for (var y = 0; y < chartSeries.length; y++) { - if (data[i][x][0] == chartSeries[y].x) { - found = true - break; - } - } - if (!found) { - startIdx = x; - break; - } - } - this.log("startIdx " + startIdx); - // Start shifting - if (startIdx !== -1 && startIdx < data[i].length) { - for (var x = startIdx; x < data[i].length; x++) { - this.chart.series[i].addPoint(data[i][x], false, true, true); - } - } - - } - } - } - } - - // For Line Shift it has to be setCategories before addPoint - if(_this.xField && !_this.lineShift) { - //this.updatexAxisData(); - this.chart.xAxis[0].setCategories(xFieldData, false); - } - - this.log("Call chart redraw"); - this.chart.redraw(); - } - } - }, - - /*** - * Update a selected row. - */ - refreshRow : function(record) { - // Sencha Touch uses config to access properties - var _this = (this.statics().sencha.product == 't') ? this.config : this; - - var index = this.store.indexOf(record); - if(this.chart) { - for(var i = 0; i < this.chart.series.length; i++) { - var serie = this.chart.series[i]; - var point = _this.series[i].getData(record, index); - if(_this.series[i].type == 'pie' && _this.series[i].useTotals) { - _this.series[i].update(record); - this.chart.series[i].setData(_this.series[i].getTotals()); - } else - serie.data[index].update(point); - } - - if(_this.xField) { - this.updatexAxisData(); - } - } - }, - - /** - * A function to delay the call to {@link Chart.ux.Highcharts#method-draw} method - * @param {Number} delay Set a custom delay - */ - update : function(delay) { - var cdelay = delay || this.updateDelay; - if(!this.updateTask) { - this.updateTask = new Ext.util.DelayedTask(this.draw, this); - } - this.updateTask.delay(cdelay); - }, - - // private - onDataChange : function() { - this.refreshOnChange && (this.refresh() && this.log("onDataChange")); - }, - - // private - onClear : function() { - // In Sencha Touch, load method issue clear event - // this will call refresh twice which removes the - // animation effect - if (this.statics().sencha.product == 't' && this.store && !this.store.isLoading()) { - this.refresh(); - } - }, - - // private - onUpdate : function(ds, record) { - this.refreshRow(record); - }, - - // private - onAdd : function(ds, records, index) { - // Sencha Touch uses config to access properties - var _this = (this.statics().sencha.product == 't') ? this.config : this; - - var redraw = false, xFieldData = []; - - for(var i = 0; i < records.length; i++) { - var record = records[i]; - if(i == records.length - 1) - redraw = true; - if(_this.xField) { - xFieldData.push(record.data[_this.xField]); - } - - for(var x = 0; x < this.chart.series.length; x++) { - var serie = this.chart.series[x], s = _this.series[x]; - var point = s.getData(record, index + i); - if(!(s.type == 'pie' && s.useTotals)) { - serie.addPoint(point, redraw); - } - } - } - if(_this.xField) { - this.chart.xAxis[0].setCategories(xFieldData, true); - } - - }, - - //private - _onResize : function() { - this.resizable && this.update(); - }, - - // private - onRemove : function(ds, record, index, isUpdate) { - // Sencha Touch uses config to access properties - var _this = (this.statics().sencha.product == 't') ? this.config : this; - - for(var i = 0; i < _this.series.length; i++) { - var s = _this.series[i]; - if(s.type == 'pie' && s.useTotals) { - s.removeData(record, index); - this.chart.series[i].setData(s.getTotals()); - } else { - this.chart.series[i].data[index].remove(true); - } - } - Ext.each(this.chart.series, function(serie) { - serie.data[index].remove(true); - }); - - if(_this.xField) { - this.updatexAxisData(); - } - }, - - // private - onLoad : function() { - - // Sencha Touch uses config to access properties - var _this = (this.statics().sencha.product == 't') ? this.config : this; - - if (!this.chart && this.initAnimAfterLoad) { - this.log("Call refresh from onLoad for initAnim"); - this.buildInitData(); - this.chart = new Highcharts.Chart(_this.chartConfig, this.afterChartRendered); - return; - } - - this.log("Call refresh from onLoad"); - this.refreshOnLoad && this.refresh(); - }, - - /*** - * Destroy the Highchart component as well as the interal chart component - */ - destroy : function() { - // Sencha Touch uses config to access properties - var _this = (this.statics().sencha.product == 't') ? this.config : this; - - delete _this.series; - if(this.chart) { - this.chart.destroy(); - delete this.chart; - } - - this.bindStore(null); - this.bindComponent(null); - - this.callParent(arguments); - } - -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/AreaRangeSerie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/AreaRangeSerie.js deleted file mode 100755 index 5922a43d2..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/AreaRangeSerie.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Serie class for area range series type - * - * See {@link Chart.ux.Highcharts.RangeSerie} class for more info - * - */ -Ext.define('Chart.ux.Highcharts.AreaRangeSerie', { - extend : 'Chart.ux.Highcharts.RangeSerie', - alternateClassName: [ 'highcharts.arearange' ], - type : 'arearange' -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/AreaSerie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/AreaSerie.js deleted file mode 100755 index 6cbb59b3f..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/AreaSerie.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Serie class for area line series type - * - * See {@link Chart.ux.Highcharts.Serie} class for more info - */ -Ext.define('Chart.ux.Highcharts.AreaSerie', { - extend : 'Chart.ux.Highcharts.Serie', - alternateClassName: [ 'highcharts.area' ], - type : 'area' -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/AreaSplineRangeSerie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/AreaSplineRangeSerie.js deleted file mode 100755 index 6e6b1eb00..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/AreaSplineRangeSerie.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Serie class for area spline range series type - * - * See {@link Chart.ux.Highcharts.RangeSerie} class for more info - * - */ -Ext.define('Chart.ux.Highcharts.AreaSplineRangeSerie', { - extend : 'Chart.ux.Highcharts.RangeSerie', - alternateClassName: [ 'highcharts.areasplinerange' ], - type : 'areasplinerange' -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/AreaSplineSerie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/AreaSplineSerie.js deleted file mode 100755 index 27fbde413..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/AreaSplineSerie.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Serie class for area spline series type - * - * See {@link Chart.ux.Highcharts.Serie} class for more info - */ -Ext.define('Chart.ux.Highcharts.AreaSplineSerie', { - extend : 'Chart.ux.Highcharts.Serie', - alternateClassName: [ 'highcharts.areaspline' ], - type : 'areaspline' -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/BarSerie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/BarSerie.js deleted file mode 100755 index 3c904f5c4..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/BarSerie.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Serie class for bar series type - * - * See {@link Chart.ux.Highcharts.Serie} class for more info - */ -Ext.define('Chart.ux.Highcharts.BarSerie', { - extend : 'Chart.ux.Highcharts.Serie', - alternateClassName: [ 'highcharts.bar' ], - type : 'bar' -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/BoxPlotSerie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/BoxPlotSerie.js deleted file mode 100755 index f9269fbfc..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/BoxPlotSerie.js +++ /dev/null @@ -1,50 +0,0 @@ -/** - * Serie class for BoxPlot series type - * - * See {@link Chart.ux.Highcharts.RangeSerie} class for more info - * - * Here is an example of BoxPlot series config: - * series: [{ - * type: 'boxplot', - * minDataIndex: 'min', - * lowQtrDataIndex: 'q1', - * medianDataIndex: 'med', - * highQtrDataIndex: 'q2', - * maxDataIndex: 'max', - * xField: 'date' - * }] - * - */ -Ext.define('Chart.ux.Highcharts.BoxPlotSerie', { - extend : 'Chart.ux.Highcharts.RangeSerie', - alternateClassName: [ 'highcharts.boxplot' ], - type : 'boxplot', - - /** - * @cfg {String} lowQtrDataIndex - * The low Quartile data field - */ - lowQtrDataIndex: null, - - /** - * @cfg {String} highQtrDataIndex - * The high Quartile data field - */ - highQtrDataIndex: null, - - /** - * @cfg {String} medianDataIndex - * The median data field - */ - medianDataIndex: null, - - getData: function(record, index) { - return [ - record.data[ this.minDataIndex ], - record.data[ this.lowQtrDataIndex ], - record.data[ this.medianDataIndex ], - record.data[ this.highQtrDataIndex ], - record.data[ this.maxDataIndex ] - ]; - } -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/BubbleSerie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/BubbleSerie.js deleted file mode 100755 index 7b29413a6..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/BubbleSerie.js +++ /dev/null @@ -1,65 +0,0 @@ -/** - * Serie class for bubble type series - * - * The bubble series support two types of data input - * - * # Single Bubble Series - * For single bubble series, the series can be specified as - * series: [{ - * xField: 'x', - * yField: 'y', - * radiusField: 'r' - * type: 'bubble' - * }] - * - * # Single / Multiple Bubble Series - * For single/multiple bubble series, the series should be specified as - * the Irregular data example, i.e. - * series: [{ - * type: 'bubble', - * dataIndex: 'series1' - * }, { - * type: 'bubble', - * dataIndex: 'series2' - * }] - * - * The Json data returning from the server side should looking like the following: - * 'root': [{ - * 'series1': [ [ 97,36,79],[94,74,60],[68,76,58], .... ] ], - * 'series2': [ [25,10,87],[2,75,59],[11,54,8],[86,55,93] .... ] ], - * }] - * - * See {@link Chart.ux.Highcharts.Serie} class for more info - */ -Ext.define('Chart.ux.Highcharts.BubbleSerie', { - extend : 'Chart.ux.Highcharts.Serie', - alternateClassName: [ 'highcharts.bubble' ], - type : 'bubble', - - /** - * @cfg {String} radiusField - * The field stores the radius value of a bubble data point - */ - radiusField : null, - - /*** - * @cfg {Array} dataIndex - * dataIndex should be used for specifying mutliple bubble series, i.e. - * the server side returns an array of truples which has values of [ x, y, r ] - */ - dataIndex: null, - - /*** - * @private - * each data point in the series is represented in it's own x and y values - */ - arr_getDataPair: function(record, index) { - return [ - record.data[ this.xField ], - record.data[ this.yField ], - record.data[ this.radiusField ] - ]; - } - - -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/ColumnRangeSerie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/ColumnRangeSerie.js deleted file mode 100755 index 7bf382bec..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/ColumnRangeSerie.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Serie class for column range series type - * - * See {@link Chart.ux.Highcharts.RangeSerie} class for more info - */ -Ext.define('Chart.ux.Highcharts.ColumnRangeSerie', { - extend : 'Chart.ux.Highcharts.RangeSerie', - alternateClassName: [ 'highcharts.columnrange' ], - type : 'columnrange' -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/ColumnSerie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/ColumnSerie.js deleted file mode 100755 index 947944b99..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/ColumnSerie.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Serie class for column series type - * - * See {@link Chart.ux.Highcharts.Serie} class for more info - */ -Ext.define('Chart.ux.Highcharts.ColumnSerie', { - extend : 'Chart.ux.Highcharts.Serie', - alternateClassName: [ 'highcharts.column' ], - type : 'column' -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/ErrorBarSerie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/ErrorBarSerie.js deleted file mode 100755 index 2371e04eb..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/ErrorBarSerie.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Serie class for error bar series type - * - * See {@link Chart.ux.Highcharts.RangeSerie} class for more info - */ -Ext.define('Chart.ux.Highcharts.ErrorBarSerie', { - extend : 'Chart.ux.Highcharts.RangeSerie', - alternateClassName: [ 'highcharts.errorbar' ], - type : 'errorbar' -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/FunnelSerie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/FunnelSerie.js deleted file mode 100755 index 75bfc6345..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/FunnelSerie.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Serie class for Funnel series type - * - * See {@link Chart.ux.Highcharts.Serie} class for more info - * - * Example of series config: - * - * series: [{ - * type: 'funnel', - * // or xField - * categorieField: 'category', - * yField: 'value', - * }] - * - * **Note**: You must load Highcharts module http://code.highcharts.com/modules/funnel.js in - * your HTML file, otherwise you get unknown series type error - */ -Ext.define('Chart.ux.Highcharts.FunnelSerie', { - extend : 'Chart.ux.Highcharts.WaterfallSerie', - alternateClassName: [ 'highcharts.funnel' ], - type : 'funnel', - - /** - * @cfg sumTypeField - * @hide - */ - - getData: function(record, index) { - - var dataObj = { - y: record.data[ this.valField ], - name: record.data[ this.nameField ] - }; - - // Only define color if there is value, otherwise it column - // won't take any global color definitiion - record.data [ this.colorField ] && (dataObj.color = record.data[this.colorField]); - - return dataObj; - } -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/GaugeSerie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/GaugeSerie.js deleted file mode 100755 index 754e9128f..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/GaugeSerie.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Serie class for gauge series type - * - * See {@link Chart.ux.Highcharts.Serie} class for more info - * - * Gauge series is a one dimensional series type, i.e only y-axis data - */ -Ext.define('Chart.ux.Highcharts.GaugeSerie', { - extend : 'Chart.ux.Highcharts.Serie', - alternateClassName: [ 'highcharts.gauge' ], - type : 'gauge' - - /*** - * @cfg xField - * @hide - */ -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/LineSerie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/LineSerie.js deleted file mode 100755 index 81956229b..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/LineSerie.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Serie class for line series type - * - * See {@link Chart.ux.Highcharts.Serie} class for more info - */ -Ext.define('Chart.ux.Highcharts.LineSerie', { - extend : 'Chart.ux.Highcharts.Serie', - alternateClassName: [ 'highcharts.line' ], - type : 'line' -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/PieSerie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/PieSerie.js deleted file mode 100755 index 395c8bedc..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/PieSerie.js +++ /dev/null @@ -1,301 +0,0 @@ -/** - * # Plotting Pie Series - * There are two ways to plot pie chart from record data: a data point per record and - * total values of all the records - * - * ## Data point per record - * Pie series uses two options for mapping category name and data fields: - * *categoryField* and *dataField*, (This is historical reason instead of - * using *xField* and *dataIndex*). Suppose we have data model in the following format: - * - * - * - * - * - * - * - * - *
productNamesold
Product A15,645,242
Product B22,642,358
Product C21,432,330
- * Then we can define the series data as: - * - * series: [{ - * type: 'pie', - * categoryField: 'productName', - * dataField: 'sold' - * }] - * - * # Data point as total value of all the records - * Instead of mapping *dataField* and *categorieField* fields to the store record for each - * pie data point, this approach uses the total value of a category as a data point. - * E.g. we have a class of pupils with a set of subject scores - * - * - * - * - * - * - * - *
NameEnglishMathScience
Joe778178
David675669
Nora445039
- * All we want is to plot distribution of total scores for each subject. Hence, we define - * the pie series as follows: - * series: [{ - * type: 'pie', - * useTotals: true, - * column: [ 'english', 'math', 'science' ] - * }] - * whereas the server-side should return JSON data as follows: - * { "root": [{ "english": 77, "math": 81, "science": 78 }, - * { "english": 67, "math": 56, "science": 69 }, - * { "english": 44, "math": 50, "science": 39 }, - * ..... ] - * } - * and the data model for the store is defined as follows: - * Ext.define('ExamResults', { - * extend: 'Ext.data.Model', - * fields: [ - * {name: 'english', type: 'int'}, - * {name: 'math', type: 'int'}, - * {name: 'science', type: 'int'} - * ] - * }); - * - * # Multiple Pie Series (Donut chart) - * A donut chart is really two pie series which a second pie series lay outside of the - * first series. The second series is subcategory data of the first series. - * Suppose we want to plot a more detail chart with the breakdown of sold items into regions: - * - * - * - * - * - * - * - *
productNamesoldEuropeAsiaAmericas
Product A15,645,24210,432,5422,425,4322,787,268
Product B22,642,3584,325,4214,325,32113,991,616
Product C21,432,3302,427,4316,443,23412,561,665
- * The data model for the donut chart store should be refined with fields: productName, - * sold and region. The rows returning from the store should look like: - * - * - * - * - * - * - * - * - * - *
productName sold region
Product A 10,432,542 Europe
Product A 2,425,432 Asia
Product A 2,787,268 Americas
Product B 4,325,421 Europe
Product B 4,325,321 Asia
- The series definition for the donut chart should look like this: - * series: [{ - * // Inner pie series - * type: 'pie', - * categoryField: 'productName', - * dataField: 'sold', - * size: '60%', - * totalDataField: true - * }, { - * // Outer pie series - * type: 'pie', - * categoryField: 'region', - * dataField: 'sold', - * innerSize: '60%', - * size: '75%' - * }] - * The *totalDataField* informs the first series to take the sum of *dataField* (sold) - * on entries with the same *categoryField* value, whereas the second series displays - * a section on each region (i.e. each record). The *innerSize* is just the Highcharts - * option to make the outer pie series appear as ring form. - * - * If you want to have a fix set of colours in the outer ring along each slice, then - * you can create an extra field in your store for the color code and use the - * *colorField* option to map the field. - */ -Ext.define('Chart.ux.Highcharts.PieSerie', { - extend : 'Chart.ux.Highcharts.Serie', - alternateClassName: [ 'highcharts.pie' ], - type : 'pie', - - /*** - * @cfg xField - * @hide - */ - - /*** - * @cfg yField - * @hide - */ - - /*** - * @cfg dataIndex - * @hide - */ - - /** - * @cfg {String} categorieField - * the field name mapping to store records for pie category data - */ - categorieField : null, - - /** - * @cfg {Boolean} totalDataField - * See above. This is used for producing donut chart. Bascially informs - * getData method to take the total sum of dataField as the data point value - * for those records with the same matching string in the categorieField. - */ - totalDataField : false, - - /** - * @cfg {String} dataField - * the field name mapping to store records for value data - */ - dataField : null, - - /*** - * @cfg {Boolean} useTotals - * use the total value of a categorie of all the records as a data point - */ - useTotals : false, - - /*** - * @cfg {Array} columns - * a list of category names that match the record fields - */ - columns : [], - - constructor : function(config) { - this.callParent(arguments); - if(this.useTotals) { - this.columnData = {}; - var length = this.columns.length; - for(var i = 0; i < length; i++) { - this.columnData[this.columns[i]] = 100 / length; - } - } - }, - - //private - addData : function(record) { - for(var i = 0; i < this.columns.length; i++) { - var c = this.columns[i]; - this.columnData[c] = this.columnData[c] + record.data[c]; - } - }, - - //private - update : function(record) { - for(var i = 0; i < this.columns.length; i++) { - var c = this.columns[i]; - if(record.modified[c]) - this.columnData[c] = this.columnData[c] + record.data[c] - record.modified[c]; - } - }, - - //private - removeData : function(record, index) { - for(var i = 0; i < this.columns.length; i++) { - var c = this.columns[i]; - this.columnData[c] = this.columnData[c] - record.data[c]; - } - }, - - //private - clear : function() { - for(var i = 0; i < this.columns.length; i++) { - var c = this.columns[i]; - this.columnData[c] = 0; - } - }, - - /*** - * As the implementation of pie series is quite different to other series types, - * it is not recommended to override this method - */ - getData : function(record, seriesData) { - - var _this = (Chart.ux.Highcharts.sencha.product == 't') ? this.config : this; - - // Summed up the category among the series data - if(this.totalDataField) { - var found = null; - for(var i = 0; i < seriesData.length; i++) { - if(seriesData[i].name == record.data[_this.categorieField]) { - found = i; - seriesData[i].y += record.data[_this.dataField]; - break; - } - } - if(found === null) { - if (this.colorField && record.data[_this.colorField]) { - seriesData.push({ - name: record.data[_this.categorieField], - y: record.data[_this.dataField], - color: record.data[_this.colorField], - record: this.bindRecord ? record : null, - events: this.dataEvents - }); - } else { - seriesData.push({ - name: record.data[_this.categorieField], - y: record.data[_this.dataField], - record: this.bindRecord ? record : null, - events: this.dataEvents - }); - } - i = seriesData.length - 1; - } - return seriesData[i]; - } - - if(this.useTotals) { - this.addData(record); - return []; - } - - if (this.colorField && record.data[this.colorField]) { - return { - name: record.data[_this.categorieField], - y: record.data[_this.dataField], - color: record.data[_this.colorField], - record: this.bindRecord ? record : null, - events: this.dataEvents - }; - } else { - return { - name: record.data[_this.categorieField], - y: record.data[_this.dataField], - record: this.bindRecord ? record : null, - events: this.dataEvents - }; - } - }, - - getTotals : function() { - var a = new Array(); - for(var i = 0; i < this.columns.length; i++) { - var c = this.columns[i]; - a.push([c, this.columnData[c]]); - } - return a; - }, - - /*** - * @private - * Build the initial data set if there are data already - * inside the store. - */ - buildInitData:function(items, data) { - // Summed up the category among the series data - var record; - var data = this.config.data = []; - if (this.config.totalDataField) { - for (var x = 0; x < items.length; x++) { - record = items[x]; - this.getData(record,data); - } - } else { - for (var x = 0; x < items.length; x++) { - record = items[x]; - data.push(this.getData(record)); - } - } - } - -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/RangeSerie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/RangeSerie.js deleted file mode 100755 index 16211e3c4..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/RangeSerie.js +++ /dev/null @@ -1,72 +0,0 @@ -/** - * Serie class for general range series type - * - * See {@link Chart.ux.Highcharts.Serie} class for more info - * - * This is the base class for dealing range series type. RangeSerie offers - * sorted and unsorted ways of specifying range data. If it is desired to - * plot range data that are natively in sorted manner, the series can be specified as - * series:[{ - * minDataIndex: 'low', - * maxDataIndex: 'high', - * type: 'columnrange' - * }] - * As for plotting range series data that are naturally without high and low ends, do - * series:[{ - * dataIndex: [ 'marketOpen', 'marketClose' ], - * type: 'columnrange' - * }] - */ -Ext.define('Chart.ux.Highcharts.RangeSerie', { - extend : 'Chart.ux.Highcharts.Serie', - - /*** - * @cfg {String} - * data field mapping to store record which has minimum value - */ - minDataIndex: null, - /*** - * @cfg {String} - * data field mapping to store record which has maximum value - */ - maxDataIndex: null, - /*** - * @private - */ - needSorting: null, - - /*** - * @cfg {Array} - * dataIndex in the range serie class is treated as an array of - * [ field1, field2 ] if it is defined - */ - dataIndex: null, - - /*** - * @cfg yField - * @hide - */ - - constructor: function(config) { - if (Ext.isArray(config.dataIndex)) { - this.field1 = config.dataIndex[0]; - this.field2 = config.dataIndex[1]; - this.needSorting = true; - } else if (config.minDataIndex && config.maxDataIndex) { - this.minDataIndex = config.minDataIndex; - this.maxDataIndex = config.maxDataIndex; - this.needSorting = false; - } - this.callParent(arguments); - }, - - getData: function(record, index) { - if (this.needSorting === true) { - return (record.data[this.field1] > record.data[this.field2]) ? [ record.data[this.field2], record.data[this.field1] ] : [ record.data[this.field1], record.data[this.field2] ]; - } - - if (record.data[this.minDataIndex] !== undefined && record.data[this.maxDataIndex] !== undefined) { - return ([record.data[this.minDataIndex], record.data[this.maxDataIndex]]); - } - } -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/ScatterSerie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/ScatterSerie.js deleted file mode 100755 index 6b39b8f9f..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/ScatterSerie.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Serie class for scatter type series - * - * See {@link Chart.ux.Highcharts.Serie} class for more info - */ -Ext.define('Chart.ux.Highcharts.ScatterSerie', { - extend : 'Chart.ux.Highcharts.Serie', - alternateClassName: [ 'highcharts.scatter' ], - type : 'scatter' -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/Serie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/Serie.js deleted file mode 100755 index 1d72245d5..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/Serie.js +++ /dev/null @@ -1,341 +0,0 @@ -/*** - * Serie class is the base class for all the series types. Users shouldn't use any of the - * series classes directly, they are created internally from Chart.ux.Highcharts depending on the - * series configuration. - * - * Serie class is a general class for series data representation. - * # Mapping data fields - * In the Highcharts extension, the series option is declared outside of chartConfig, so as the *xField*. - * There is a subtle difference for declaring xField outside or inside a series. For example: - * - * series:[{ - * name: 'Share A', - * type: 'line', - * yField: 'sharePriceA' - * }, { - * name: 'Share B', - * type: 'line', - * yField: 'sharePriceB' - * }], - * xField: 'datetime', - * .... - * This means both series share the same categories and each series has it own set of y-values. - * In this case, the datetime field can be either string or numerical representation of date time. - * series:[{ - * name: 'Share A', - * type: 'line', - * yField: 'sharePriceA', - * xField: 'datetimeA' - * }, { - * name: 'Share B', - * type: 'line', - * yField: 'sharePriceB', - * xField: 'datetimeB' - * }], - * This means both series have their own (x,y) data. In this case, the xField must refer to numerical values. - * - * # Mapping multiple series with irregular datasets - * Suppose we have 3 series with different set of data points. To map the store with the series, first - * the store is required to return Json data in the following format: - * { root: [ - * series1: [ [ 1, 3 ], [ 2, 5 ], [ 7, 1 ] ], - * series2: [ [ 2, 4 ], [ 5, 7 ] ], - * series3: [ [ 1, 8 ], [ 4, 6 ], [ 5, 1 ], [ 9, 4 ] ] - * ] - * } - * - * Then use {@link Chart.ux.Highcharts.Serie#cfg-dataIndex} to map the series data array - * series: [{ - * name: 'Series A', - * dataIndex: 'series1' - * }, { - * name: 'Series B', - * dataIndex: 'series2' - * }, { - * name: 'Series C', - * dataIndex: 'series3' - * }] - */ -Ext.define('Chart.ux.Highcharts.Serie', { - requires: [ 'Chart.ux.Highcharts', - 'Ext.util.Observable' - ], - mixins: { - observable: 'Ext.util.Observable' - }, - - /*** - * @cfg {String} type - * Highcharts series type name. This field must be specified. - * - * Line, area, scatter and column series are the simplest form of charts - * (includes Polar) which has the simple data mappings: *dataIndex* or *yField* - * for y-axis values and xField for either x-axis category field or data point's - * x-axis coordinate. - * series: [{ - * type: 'scatter', - * xField: 'xValue', - * yField: 'yValue' - * }] - */ - type : null, - - /** - * @readonly - * The {@link Chart.ux.Highcharts} chart object owns this serie. - * @type Object/Chart.ux.Highcharts - * - * This can be useful with pointclick event when you need to use an Ext.Component. - * pointclick:{ - * fn:function(serie,point,record,event){ - * //Get parent window to replace the chart inside (me) - * var window=this.chart.up('windows'); - * } - * } - * Setting the scope on the listeners at runtime can cause trouble in Highcharts on - * parsing the listener - */ - chart: null, - - /** - * @private - * The default action for series point data is to use array instead of point object - * unless desired to set point particular field. This changes the default behaviour - * of getData template method - * Default: false - * - * @type Boolean - */ - pointObject: false, - - /** - * @cfg {String} xField - * The field used to access the x-axis value from the items from the data - * source. Store's record - */ - xField : null, - - /** - * @cfg {String} yField - * The field used to access the y-axis value from the items from the data - * source. Store's record - */ - yField : null, - - /** - * @cfg {String} dataIndex can be either an alias of *yField* - * (which has higher precedence if both are defined) or mapping to store's field - * with array of data points - */ - dataIndex : null, - - /** - * @cfg {String} colorField - * This field is used for setting data point color - * number or color hex in '#([0-9])'. Otherwise, the option - * is treated as a field name and the store should return - * rows with the same color field name. For column type series, if you - * want Highcharts to automatically color each data point, - * then you should use [plotOptions.column.colorByPoint][link2] option in the series config - * [link2]: http://api.highcharts.com/highcharts#plotOptions.column.colorByPoint - */ - colorField: null, - - /** - * @cfg {Boolean} visible - * The field used to hide the serie initial. Defaults to true. - */ - visible : true, - - clear : Ext.emptyFn, - - /*** - * @cfg {Boolean} updateNoRecord - * Setting this option to true will enforce the chart to clear the series if - * there is no record returned for the series - */ - updateNoRecord: false, - - /*** - * @private - * Resolve color based on the value of colorField - */ - resolveColor: function(colorField, record, dataPtIdx) { - - var color = null; - if (colorField) { - if (Ext.isNumeric(colorField)) { - color = colorField; - } else if (Ext.isString(colorField)) { - if (/^(#)?([0-9a-fA-F]{3})([0-9a-fA-F]{3})?$/.test(colorField)) { - color = colorField; - } else { - color = record.data[colorField]; - } - } - } - return color; - }, - - /*** - * @private - * object style of getData - */ - obj_getData : function(record, index) { - var yField = this.yField || this.dataIndex, point = { - data : record.data, - y : record.data[yField] - }; - this.xField && (point.x = record.data[this.xField]); - this.colorField && (point.color = this.resolveColor(this.colorField, record, index)); - this.bindRecord && (point.record = record); - return point; - }, - - /*** - * @private - * single value data version of getData - Common category, individual y-data - */ - arr_getDataSingle: function(record, index) { - return record.data[this.yField]; - }, - - /*** - * @private - * each data point in the series is represented in it's own x and y values - */ - arr_getDataPair: function(record, index) { - return [ record.data[ this.xField ], record.data[ this.yField ] ]; - }, - - /*** - * @method getData - * getData is the core mechanism for transferring from Store's record data into the series data array. - * This routine acts as a Template Method for any series class, i.e. any new series type class must - * support this method. - * - * Generally, you don't need to override this method in the config because this method is internally - * created once the serie class is instantiated. Depending on whether *xField*, *yField* and - * *colorField* are defined, the class constructor creates a *getData* method which either returns a single value, - * tuple array or a data point object. This is done for performance reason. See Highcharts API document - * [Series.addPoint][link1] for more details. - * - * If your data model requires specific data processing in the record data, then you may need to - * override this method. The return for the method must confine to the [Series.addPoint][link1] - * prototype. Note that if this method is manually defined, there is no need to define field name options - * because this can be specified inside the implementation anyway - * series: [{ - * type: 'spline', - * // Return avg y values - * getData: function(record) { - * return (record.data.y1 + record.data.y2) / 2; - * } - * }], - * xField: 'time', - * .... - * - * [link1]: http://api.highcharts.com/highcharts#Series.addPoint() - * - * @param {Object} record Store's record which contains the series data at particular instance - * @param {Number} index the index value of the record inside the Store - * @return {Object|Array|Number} - */ - getData: null, - - serieCls : true, - - constructor : function(config) { - config.type = this.type; - if(!config.data) { - config.data = []; - } - - this.mixins.observable.constructor.call(this, config); - - this.addEvents( - /** - * @event pointclick - * Fires when the point of the serie is clicked. - * @param {Chart.ux.Highcharts.Serie} serie the serie where is fired - * @param {Object} point the point clicked - * @param {Ext.data.Record} record the record associated to the point - * @param {Object} evt the event param - */ - 'pointclick' - ); - - this.config = config; - - this.yField = this.yField || this.config.dataIndex; - - this.bindRecord = (this.config.listeners && this.config.listeners.pointclick !== undefined); - - // If Highcharts series event is already defined, then don't support this - // pointclick event - Ext.applyIf(config,{ - events:{ - click: Ext.bind(this.onPointClick, this) - } - }); - - // If colorField is defined, then we have to use data point - // as object - (this.colorField || this.bindRecord) && (this.pointObject = true); - - // If getData method is already defined, then overwrite it - if (!this.getData) { - if (this.pointObject) { - this.getData = this.obj_getData; - } else if (this.xField) { - this.getData = this.arr_getDataPair; - } else { - this.getData = this.arr_getDataSingle; - } - } - }, - - /*** - * @private - * Build the initial data set if there are data already - * inside the store. - */ - buildInitData:function(items, data) { - var chartConfig = (Chart.ux.Highcharts.sencha.product == 't') ? - this.chart.config.chartConfig : this.chart.chartConfig; - - var record; - var data = this.config.data = []; - - record = items[0]; - if (this.dataIndex && record && Ext.isArray(record.data[this.dataIndex])) { - this.config.data = record.data[this.dataIndex]; - } else { - for (var x = 0; x < items.length; x++) { - record = items[x]; - // Should use the pre-constructed getData template method to extract - // record data into the data point (Array of values or Point object) - data.push(this.getData(record, x)); - } - } - - var xAxis = (Ext.isArray(chartConfig.xAxis)) ? chartConfig.xAxis[0] : chartConfig.xAxis; - - // Build the first x-axis categories - if (this.chart.xField && (!xAxis.categories || xAxis.categories.length < items.length)) { - xAxis.categories = xAxis.categories || []; - for (var x = 0; x < items.length; x++) { - xAxis.categories.push(items[x].data[this.chart.xField]); - } - } - }, - - onPointClick:function(evt){ - this.fireEvent('pointclick',this,evt.point,evt.point.record,evt); - }, - - destroy: function() { - this.clearListeners(); - this.mixins.observable.destroy(); - } - -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/SplineSerie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/SplineSerie.js deleted file mode 100755 index 751c2f273..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/SplineSerie.js +++ /dev/null @@ -1,10 +0,0 @@ -/*** - * Serie class for spline series type - * - * See {@link Chart.ux.Highcharts.Serie} class for more info - */ -Ext.define('Chart.ux.Highcharts.SplineSerie', { - extend : 'Chart.ux.Highcharts.Serie', - alternateClassName: [ 'highcharts.spline' ], - type : 'spline' -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/WaterfallSerie.js b/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/WaterfallSerie.js deleted file mode 100755 index 83aa9e345..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/Highcharts/WaterfallSerie.js +++ /dev/null @@ -1,75 +0,0 @@ -/** - * Serie class for water fall series type - * - * See {@link Chart.ux.Highcharts.Serie} class for more info - * - * The following is the config example converted from the original - * [Highcharts waterfall demo][1] - * [1]: http://www.highcharts.com/demo/waterfall - * - * series: [{ - * type: 'waterfall', - * upColor: Highcharts.getOptions().colors[2], - * color: Highcharts.getOptions().colors[3], - * categorieField: 'category', - * yField: 'value', - * colorField: 'color', - * sumTypeField: 'sum', - * dataLabels: { - * .... - * } - * }] - * - * The Json data returning from the server side should look like as follows: - * - * {"root":[{ "category":"Start","value":120000 }, - * { "category":"Product Revenue","value":569000 }, - * { "category":"Service Revenue","value":231000 }, - * { "category":"Positive Balance","color": "#0d233a", "sum": "intermediate" }, - * { "category":"Fixed Costs","value":-342000 }, - * { "category":"Variable Cost","value": -233000 }, - * { "category":"Balance","color": "#0d233a", "sum": "final" } - * ]} - * - */ -Ext.define('Chart.ux.Highcharts.WaterfallSerie', { - extend : 'Chart.ux.Highcharts.Serie', - alternateClassName: [ 'highcharts.waterfall' ], - type : 'waterfall', - - /** - * @cfg {String} sumTypeField - * Column value is whether derived from precious values. - * Possible values: 'intermediate', 'final' or null (expect dataIndex or yField contains value) - */ - sumTypeField: null, - - constructor: function(config) { - - this.callParent(arguments); - this.valField = this.yField || this.dataIndex; - this.nameField = this.categorieField || this.xField; - }, - - getData: function(record, index) { - - var dataObj = { - y: record.data[ this.valField ], - name: record.data[ this.nameField ] - }; - - // Only define color if there is value, otherwise it column - // won't take any global color definitiion - record.data [ this.colorField ] && (dataObj.color = record.data[this.colorField]); - - if (this.sumTypeField) { - if (record.data[this.sumTypeField] == "intermediate") { - dataObj.isIntermediateSum = true; - } else if (record.data[this.sumTypeField] == "final") { - dataObj.isSum = true; - } - } - - return dataObj; - } -}); diff --git a/fhem/www/frontend/www/frontend/lib/highcharts/ux/License b/fhem/www/frontend/www/frontend/lib/highcharts/ux/License deleted file mode 100755 index 9d075db41..000000000 --- a/fhem/www/frontend/www/frontend/lib/highcharts/ux/License +++ /dev/null @@ -1,13 +0,0 @@ -You are permitted to use this software for non-profit organisation under: - Creative Commons Attribution-NonCommercial 3.0 License. - (http://creativecommons.org/licenses/by-nc/3.0/) - -If you are using the software for commercial and federal projects, -you can obtain the permission to use and distribute free of charge as long as - -1. you inform me the author (kuan.joe@gmail.com) with a short description describing - your project using this software. - -2. you give acknowledgement to the author in your project - "Highcharts extension for Sencha products is developed & maintained by Joe Kuan (kuan.joe@gmail.com)" - diff --git a/fhem/www/frontend/www/frontend/lib/jquery/jquery.min.js b/fhem/www/frontend/www/frontend/lib/jquery/jquery.min.js deleted file mode 100644 index ee0233703..000000000 --- a/fhem/www/frontend/www/frontend/lib/jquery/jquery.min.js +++ /dev/null @@ -1,4 +0,0 @@ -/*! jQuery v1.7.1 jquery.com | jquery.org/license */ -(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"":"")+""),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g0){if(c!=="border")for(;g=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c
a",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="
"+""+"
",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="
t
",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="
",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")}; -f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;le&&i.push({elem:this,matches:d.slice(e)});for(j=0;j0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return bc[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="

";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="
";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h0)for(h=g;h=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/",""],legend:[1,"
","
"],thead:[1,"","
"],tr:[2,"","
"],td:[3,"","
"],col:[2,"","
"],area:[1,"",""],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div
","
"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function() -{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1>");try{for(var c=0,d=this.length;c1&&l0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]===""&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("
").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window); \ No newline at end of file