So I think I may have encountered a Highcharts bug in terms of stacked area:
JSFiddle Highcharts Example
In this example, the "Social" has a start point before the "Online Video" and seems to render the points of the stacked areas erratically. If you were to deselect the charts from left to right, and then select them from right to left, the charts will render correctly. Has anyone else encountered this?
$('#container').highcharts({
"xAxis": [
{
"name": "Date",
"unitType": "DATE",
"title": {
"text": null
}
}
],
"yAxis": [
{
"name": "Currency",
"unitType": "CURRENCY",
"title": {
"text": null
}
}
],
"series": [
{
"yAxis": 0,
"xAxis": 0,
"data": [
{
"x": 1329724800000,
"y": 9523.873333333333
},
{
"x": 1330329600000,
"y": 12646.573333333334
},
{
"x": 1330934400000,
"y": 12028.853333333333
},
{
"x": 1331535600000,
"y": 14016.48895104895
},
{
"x": 1332140400000,
"y": 16497.35533466533
},
{
"x": 1332745200000,
"y": 17799.29238095238
},
{
"x": 1333350000000,
"y": 21495.82333333334
},
{
"x": 1333954800000,
"y": 20261.55833333333
},
{
"x": 1334559600000,
"y": 22963.80833333332
},
{
"x": 1335164400000,
"y": 20498.47333333335
},
{
"x": 1335769200000,
"y": 23846.87499999998
},
{
"x": 1336374000000,
"y": 26080.86166666669
},
{
"x": 1336978800000,
"y": 25838.83666666667
},
{
"x": 1337583600000,
"y": 25501.14666666666
},
{
"x": 1338188400000,
"y": 23663.95
},
{
"x": 1338793200000,
"y": 31292.4716666667
},
{
"x": 1339398000000,
"y": 32823.2983333333
},
{
"x": 1340002800000,
"y": 33355.595
},
{
"x": 1340607600000,
"y": 35104.4816666667
},
{
"x": 1341212400000,
"y": 32984.61190476187
},
{
"x": 1341817200000,
"y": 34481.88142857143
},
{
"x": 1342422000000,
"y": 35663.83
},
{
"x": 1343026800000,
"y": 39744.7383333333
},
{
"x": 1343631600000,
"y": 37313.0559523810
},
{
"x": 1344236400000,
"y": 38950.5057142857
},
{
"x": 1344841200000,
"y": 43884.575
},
{
"x": 1345446000000,
"y": 43548.8683333333
},
{
"x": 1346050800000,
"y": 45227.9250000000
},
{
"x": 1346655600000,
"y": 38555.2130952382
},
{
"x": 1347260400000,
"y": 46228.5085714285
},
{
"x": 1347865200000,
"y": 50614.2016666666
},
{
"x": 1348470000000,
"y": 50058.0150000000
},
{
"x": 1349074800000,
"y": 53320.6133333333
},
{
"x": 1349679600000,
"y": 49347.0885714286
},
{
"x": 1350284400000,
"y": 49264.8047619050
},
{
"x": 1350889200000,
"y": 54185.2733333332
},
{
"x": 1351494000000,
"y": 55563.9733333333
},
{
"x": 1352102400000,
"y": 55708.3243786982
},
{
"x": 1352707200000,
"y": 48733.7656213019
},
{
"x": 1353312000000,
"y": 58758.0033333332
},
{
"x": 1353916800000,
"y": 61759.9366666667
},
{
"x": 1354521600000,
"y": 63097.59
},
{
"x": 1355126400000,
"y": 62201.8799999998
},
{
"x": 1355731200000,
"y": 54752.3342857144
},
{
"x": 1356336000000,
"y": 64890.0257142858
},
{
"x": 1356940800000,
"y": 69159.9916666666
},
{
"x": 1357545600000,
"y": 69436.6916666667
}
],
"name": "Online Video",
"unitType": "CURRENCY",
"type": "area"
},
{
"yAxis": 0,
"xAxis": 0,
"data": [
{
"x": 1328515200000,
"y": 47191.90571428572
},
{
"x": 1329120000000,
"y": 34517.37428571429
},
{
"x": 1329724800000,
"y": 29077.13374999999
},
{
"x": 1330329600000,
"y": 31860.52625
},
{
"x": 1330934400000,
"y": 33656.41
},
{
"x": 1331535600000,
"y": 29916.92209424082
},
{
"x": 1332140400000,
"y": 28745.66540575918
},
{
"x": 1332745200000,
"y": 33738.3710714285
},
{
"x": 1333350000000,
"y": 31722.8264285715
},
{
"x": 1333954800000,
"y": 31198.835
},
{
"x": 1334559600000,
"y": 33476.54857142855
},
{
"x": 1335164400000,
"y": 33601.01892857145
},
{
"x": 1335769200000,
"y": 30943.41749999996
},
{
"x": 1336374000000,
"y": 30949.72500000004
},
{
"x": 1336978800000,
"y": 34241.68125
},
{
"x": 1337583600000,
"y": 30031.54875
},
{
"x": 1338188400000,
"y": 29886.5087500001
},
{
"x": 1338793200000,
"y": 34003.4012499999
},
{
"x": 1339398000000,
"y": 32008.1424999999
},
{
"x": 1340002800000,
"y": 31957.5975000000
},
{
"x": 1340607600000,
"y": 33813.8885714286
},
{
"x": 1341212400000,
"y": 33055.4214285715
},
{
"x": 1341817200000,
"y": 30489.5225000001
},
{
"x": 1342422000000,
"y": 30702.0503571428
},
{
"x": 1343026800000,
"y": 32966.3821428571
},
{
"x": 1343631600000,
"y": 29196.9012500001
},
{
"x": 1344236400000,
"y": 32688.0837499999
},
{
"x": 1344841200000,
"y": 33855.33
},
{
"x": 1345446000000,
"y": 28549.045
},
{
"x": 1346050800000,
"y": 30542.815
},
{
"x": 1346655600000,
"y": 32192.9671428571
},
{
"x": 1347260400000,
"y": 30028.8653571429
},
{
"x": 1347865200000,
"y": 28983.9975
},
{
"x": 1348470000000,
"y": 32102.2757142857
},
{
"x": 1349074800000,
"y": 34292.6042857143
},
{
"x": 1349679600000,
"y": 31773.625
},
{
"x": 1350284400000,
"y": 32021.5964285715
},
{
"x": 1350889200000,
"y": 32087.5610714285
},
{
"x": 1351494000000,
"y": 29137.7275
},
{
"x": 1352102400000,
"y": 32548.594404145
},
{
"x": 1352707200000,
"y": 34536.862738712
},
{
"x": 1353312000000,
"y": 32442.137857143
},
{
"x": 1353916800000,
"y": 30339.53125
},
{
"x": 1354521600000,
"y": 32420.4666071429
},
{
"x": 1355126400000,
"y": 32267.5671428571
},
{
"x": 1355731200000,
"y": 30140.21625
},
{
"x": 1356336000000,
"y": 31462.2751785714
},
{
"x": 1356940800000,
"y": 35181.4085714286
},
{
"x": 1357545600000,
"y": 32100.06375
},
{
"x": 1358150400000,
"y": 30464.51625
},
{
"x": 1358755200000,
"y": 32761.15
},
{
"x": 1359360000000,
"y": 30037.86625
}
],
"name": "Social",
"unitType": "CURRENCY",
"type": "area"
},
{
"yAxis": 0,
"xAxis": 0,
"data": [
{
"x": 1327910400000,
"y": 71932.20333333334
},
{
"x": 1328515200000,
"y": 71015.56999999998
},
{
"x": 1329120000000,
"y": 64489.10809523810
},
{
"x": 1329724800000,
"y": 59054.29357142863
},
{
"x": 1330329600000,
"y": 59434.56785714285
},
{
"x": 1330934400000,
"y": 60617.94047619045
},
{
"x": 1331535600000,
"y": 57584.68013972055
},
{
"x": 1332140400000,
"y": 61606.9281936127
},
{
"x": 1332745200000,
"y": 55198.8326190476
},
{
"x": 1333350000000,
"y": 60385.3257142858
},
{
"x": 1333954800000,
"y": 54881.3528571429
},
{
"x": 1334559600000,
"y": 50847.6321428571
},
{
"x": 1335164400000,
"y": 50746.7521428572
},
{
"x": 1335769200000,
"y": 46697.2161904761
},
{
"x": 1336374000000,
"y": 48913.2923809524
},
{
"x": 1336978800000,
"y": 48944.0592857142
},
{
"x": 1337583600000,
"y": 49093.3221428572
},
{
"x": 1338188400000,
"y": 47704.8195238095
},
{
"x": 1338793200000,
"y": 49798.9383333334
},
{
"x": 1339398000000,
"y": 43637.2907142858
},
{
"x": 1340002800000,
"y": 46993.1742857142
},
{
"x": 1340607600000,
"y": 36354.43
},
{
"x": 1341212400000,
"y": 45646.7442857143
},
{
"x": 1341817200000,
"y": 38892.2640476190
},
{
"x": 1342422000000,
"y": 40631.3088095237
},
{
"x": 1343026800000,
"y": 36735.4161904764
},
{
"x": 1343631600000,
"y": 38958.0166666666
},
{
"x": 1344236400000,
"y": 33788.2871428572
},
{
"x": 1344841200000,
"y": 35576.4728571428
},
{
"x": 1345446000000,
"y": 33276.48
},
{
"x": 1346050800000,
"y": 32337.60
},
{
"x": 1346655600000,
"y": 27020.6400000002
},
{
"x": 1347260400000,
"y": 31333.0899999998
},
{
"x": 1347865200000,
"y": 28894.44
},
{
"x": 1348470000000,
"y": 30565.8733333333
},
{
"x": 1349074800000,
"y": 28436.5023809525
},
{
"x": 1349679600000,
"y": 23404.8109523810
},
{
"x": 1350284400000,
"y": 25939.9719047618
},
{
"x": 1350889200000,
"y": 22661.6014285714
},
{
"x": 1351494000000,
"y": 20579.0985714286
},
{
"x": 1352102400000,
"y": 22585.2552906402
},
{
"x": 1352707200000,
"y": 18785.2475665026
},
{
"x": 1353312000000,
"y": 19557.5735714284
},
{
"x": 1353916800000,
"y": 18670.1550000002
},
{
"x": 1354521600000,
"y": 15432.11
},
{
"x": 1355126400000,
"y": 18287.7600000002
},
{
"x": 1355731200000,
"y": 12086.7666666666
},
{
"x": 1356336000000,
"y": 13091.7819047619
},
{
"x": 1356940800000,
"y": 10996.8747619046
}
],
"name": "Affiliate",
"unitType": "CURRENCY",
"type": "area"
}
],
"plotOptions": {
"line": {
"type": "lineOptions",
"stacking": null
},
"area": {
"type": "areaOptions",
"stacking": "normal"
},
"column": {
"type": "columnOptions",
"stacking": "normal"
}
},
"title": {
"text": null
},
"chart": null
}
);
I also have rendering problems with Stacked Area in Highcharts
JSFiddle here:
http://jsfiddle.net/qrbzg/4/
Will contact their support team now.
Related
In Detox I setup an expectation by label for 'SIGN IN', which returns 'Multiple Elements Found...'. However, when I try to filter it out by type I get the following error
DetoxRuntimeError: Test Failed: No elements found for “MATCHER(class ⊇
“RCTTextView”)”
Below is the elements I get when I use by.label('SIGN IN').getAttributes(). Even thought one of the elements contains RCTTextView it still can't be found.
{
"elements": [
{
"layer": "<CALayer: 0x600002d5c0c0>",
"hittable": true,
"elementSafeBounds": {
"y": 0,
"x": 0,
"width": 339,
"height": 39.5
},
"enabled": true,
"activationPoint": {
"x": 169.5,
"y": 19.75
},
"elementFrame": {
"y": 331.5,
"x": 18,
"width": 339,
"height": 39.5
},
"visible": true,
"label": "SIGN IN",
"className": "RCTView",
"safeAreaInsets": {
"right": 0,
"top": 0,
"left": 0,
"bottom": 0
},
"frame": {
"y": 351.5,
"x": 18,
"width": 339,
"height": 39.5
},
"normalizedActivationPoint": {
"x": 0.5,
"y": 0.5
},
"elementBounds": {
"y": 0,
"x": 0,
"width": 339,
"height": 39.5
}
},
{
"safeAreaInsets": {
"right": 0,
"top": 0,
"left": 0,
"bottom": 0
},
"enabled": true,
"visible": true,
"frame": {
"y": 351.5,
"x": 18,
"width": 339,
"height": 39.5
},
"elementBounds": {
"y": 0,
"x": 0,
"width": 339,
"height": 39.5
},
"elementFrame": {
"y": 0,
"x": 0,
"width": 339,
"height": 39.5
},
"layer": "<CALayer: 0x600002d5c5e0>",
"className": "RCTView",
"label": "SIGN IN",
"activationPoint": {
"x": 169.5,
"y": 19.75
},
"normalizedActivationPoint": {
"x": 0.5,
"y": 0.5
},
"hittable": true,
"elementSafeBounds": {
"y": 0,
"x": 0,
"width": 339,
"height": 39.5
}
},
{
"visible": true,
"frame": {
"y": 351.5,
"x": 18,
"width": 339,
"height": 39.5
},
"activationPoint": {
"x": 169.5,
"y": 19.75
},
"enabled": true,
"elementSafeBounds": {
"y": 0,
"x": 0,
"width": 339,
"height": 39.5
},
"hittable": true,
"label": "SIGN IN",
"normalizedActivationPoint": {
"x": 0.5,
"y": 0.5
},
"layer": "<CALayer: 0x600002d5cc80>",
"safeAreaInsets": {
"right": 0,
"top": 0,
"left": 0,
"bottom": 0
},
"elementBounds": {
"y": 0,
"x": 0,
"width": 339,
"height": 39.5
},
"className": "RCTView",
"elementFrame": {
"y": 0,
"x": 0,
"width": 339,
"height": 39.5
}
},
{
"enabled": true,
"visible": true,
"label": "SIGN IN",
"normalizedActivationPoint": {
"x": 0.5,
"y": 0.5
},
"frame": {
"y": 359.5,
"x": 155.5,
"width": 64,
"height": 24
},
"elementFrame": {
"y": 8,
"x": 137.5,
"width": 64,
"height": 24
},
"elementBounds": {
"y": 0,
"x": 0,
"width": 64,
"height": 24
},
"safeAreaInsets": {
"right": 0,
"top": 0,
"left": 0,
"bottom": 0
},
"className": "RCTTextView",
"activationPoint": {
"x": 32,
"y": 12
},
"elementSafeBounds": {
"y": 0,
"x": 0,
"width": 64,
"height": 24
},
"layer": "<CALayer: 0x600002c925c0>",
"hittable": true
}
]
}
What should I look into in order to fix the element type matcher?
Plot bands in highchart export server is not working properly. I want the output same as shown in jsfiddle below.
I want the color plot band to show on y axis with width 20.
This is expected output: https://jsfiddle.net/vc6r8y3n/
Attached image is actual output when we use high-chart export server.
but when I tried same JavaScript json object on
http://export.highcharts.com/
its giving me image with plot band color spread on whole chart. its not considering width for 'y' or 'x' axis in export server. I gave attached image of export chart.
Why highchart behaving differently in both the cases.
Highchart JSON is same as in JSfiddle.
Actual image.
Expected is what it display in Jsfiddle. https://jsfiddle.net/vc6r8y3n/
{
"chart": {
"height": 350,
"width": 600,
"style": {
"fontFamily": "\"Arial\", sans-serif",
"fontSize": "16px"
},
"backgroundColor": "transparent"
},
"title": {
"text": null
},
"credits": {
"enabled": false
},
"legend": {
"align": "center",
"layout": "horizontal",
"verticalAlign": "bottom",
"symbolHeight": 5,
"symbolWidth": 5,
"symbolRadius": 0,
"itemDistance": 10,
"itemStyle": {
"fontSize": "5px",
"fontWeight": "bold",
"fontFamily": "\"Arial\", sans-serif"
},
"borderWidth": 0,
"padding": 0,
"margin": 5
},
"xAxis": {
"categories": [
"Sep-2020",
"Oct-2020",
"Nov-2020",
"Dec-2020",
"Jan-2021",
"Feb-2021"
],
"labels": {
"style": {
"fontSize": "4px",
"fontFamily": "\"Arial\", sans-serif",
"color": "#000"
},
"y": 5
},
"gridLineColor": "transparent",
"gridLineWidth": 0,
"minorGridLineWidth": 0,
"lineColor": "#9A9A9A",
"zIndex": 9999999
},
"yAxis": [
{
"title": {
"text": ""
},
"min": 0,
"max": 100,
"tickInterval": 20,
"plotBands": [
{
"color": "rgb(204,0,0)",
"from": 0,
"to": 30.99,
"zIndex": 3
},
{
"color": "rgb(226,113,113)",
"from": 31,
"to": 44.99,
"zIndex": 3
},
{
"color": "rgb(247,209,34)",
"from": 45,
"to": 54.99,
"zIndex": 3
},
{
"color": "rgb(136,207,136)",
"from": 55,
"to": 68.99,
"zIndex": 3
},
{
"color": "rgb(68,180,68)",
"from": 69,
"to": 87.99,
"zIndex": 3
},
{
"color": "rgb(0,153,0)",
"from": 88,
"to": 100,
"zIndex": 3
}
],
"width": 20
}
],
"plotOptions": {
"column": {
"dataLabels": {
"enabled": true
}
}
},
"series": [
{
"name": "Line1",
"type": "column",
"data": [
{
"y": 61,
"color": "#5b9bd5"
},
{
"y": 41,
"color": "#5b9bd5"
},
{
"y": 21,
"color": "#5b9bd5"
},
{
"y": 81,
"color": "#5b9bd5"
},
{
"y": 31,
"color": "#5b9bd5"
},
{
"y": 71,
"color": "#5b9bd5"
}
],
"color": "#5b9bd5",
"showInLegend": true
},
{
"name": "Line 2",
"type": "column",
"data": [
null,
null,
null,
null,
null,
1
],
"color": "#00B050"
},
{
"name": "Line 3",
"type": "spline",
"data": [
null,
{
"y": 45
},
{
"y": 38
},
{
"y": 32
},
{
"y": 40
},
{
"y": 48
}
],
"color": "#9A0229"
}
]
}
enter image description here
I have a combined xrange and area chart, where I cannot get the area plot to go to the bottom of the chart view.
This is what I would like:
But this is what I'm getting:
Any help would be greatly appreciated.
https://jsfiddle.net/OysteinAmundsen/ad6shmL0/39/
Highcharts.chart('container', {
"chart": {
"borderWidth": 0,
"zoomType": "x",
"animation": false,
"scrollablePlotArea": { "scrollPositionX": 1 },
"height": 200,
"spacing": [0,0,0,0]
},
"scrollbar": { "enabled": true },
"time": { "useUTC": false },
"title": { "enabled": false },
"legend": { "enabled": false },
"colors": [ "#0032FF" ],
"credits": { "enabled": false },
"plotOptions": {
"area": { "threshold": null },
"xrange": { "minPointLength": 1 }
},
"xAxis": {
"type": "datetime",
"labels": { "overflow": "justify" },
"title": { "text": "Date" }
},
"yAxis": {
"lineWidth": 1,
"tickWidth": 1,
"alternateGridColor": "#F2F2F2",
"title": { "enabled": false },
"categories": [ "Closed", "Open" ],
"max": 1,
"min": -1
},
"tooltip": {
"borderRadius": 6,
"borderColor": "#0032FF",
"useHTML": true
},
"series": [
{
"name": "Proximity",
"type": "xrange",
"turboThreshold": 0,
"borderColor": "gray",
"animation": 0,
"pointWidth": 20,
"colors": [
"#0032FF",
"#0b5668"
],
"data": [
{ "x": 1567077909855, "x2": 1567083603287, "y": 1 },
{ "x": 1567077924011, "x2": 1567077924011, "y": 0 },
{ "x": 1567083619442, "x2": 1567083619442, "y": 1 }
]
},
{
//"turboThreshold": 1000,
"type": "area",
"color": "#f9d5d5",
"lineWidth": 0,
"animation": 0,
"data": [
{ "x": 1566728240265, "y": 0, "name": "Lost connectivity" },
{ "x": 1566728240265, "y": 2, "name": "Loss" },
{ "x": 1567077909855, "y": 2, "name": "Gain" },
{ "x": 1567077909855, "y": 0, "name": "Gained connectivity" },
{ "x": 1567085295420, "y": 0, "name": "Lost connectivity" },
{ "x": 1567085295420, "y": 2, "name": "Loss" },
{ "x": 1567085533152, "y": 2, "name": "Gain" },
{ "x": 1567085533152, "y": 0, "name": "Gained connectivity" }
]
}
]
});
Instead of area series type use xAxis.plotBands:
xAxis: {
type: 'datetime',
plotBands: [{
from: 1567079711855,
to: 1567077909855,
color: '#f9d5d5'
}, {
from: 1567082015102,
to: 1567079910825,
color: '#f9d5d5'
}]
}
Demo:
https://jsfiddle.net/BlackLabel/y706czmo
API reference:
https://api.highcharts.com/highcharts/xAxis.plotBands
I have a line chart with a date/time x axis. The points have a name that is converted to local time. However, the tick marks are placed at UTC midnight. How can I get them to be placed at local midnight?
To clarify, my localtime is EDT (-04:00). So, at approximately 20:00, the tick mark is shown.
var chart = Highcharts.chart('container', {
"chart": {
"type": "line",
"height": 300,
"marginLeft": 60,
"marginRight": 0,
"spacingLeft": 0,
"spacingRight": 0,
"style": {
"fontSize": 14
},
"zoomType": "x"
},
"tooltip": {
"pointFormat": "{point.y}",
"style": {
"fontSize": 14
}
},
"exporting": {
"enabled": false
},
"title": {
"text": "",
"style": {
"display": "none"
}
},
"subtitle": {
"text": "",
"style": {
"display": "none"
}
},
"legend": {
"enabled": "false"
},
"xAxis": {
"type": "datetime",
"labels": {
"enabled": true,
"style": {
"fontSize": "12px"
}
},
"title": {
"text": null
},
"minTickInterval": 86400000
},
"plotOptions": {
"line": {
"color": "#33aaee",
"step": "true",
"lineWidth": 1
}
},
"credits": {
"enabled": false
},
"series": [{
"data": [{
"x": 1499935040582,
"y": 600.8919674194846,
"name": "Jul 13, 2017 4:37 AM"
}, {
"x": 1500069665426,
"y": 600.3026594460489,
"name": "Jul 14, 2017 6:01 PM"
}, {
"x": 1500133689471,
"y": 600.7274040373635,
"name": "Jul 15, 2017 11:48 AM"
}, {
"x": 1500197550895,
"y": 600.1197607401385,
"name": "Jul 16, 2017 5:32 AM"
}, {
"x": 1500224766324,
"y": 600.2311428390589,
"name": "Jul 16, 2017 1:06 PM"
}, {
"x": 1500247544551,
"y": 600.5511455212492,
"name": "Jul 16, 2017 7:25 PM"
}, {
"x": 1500282216949,
"y": 600.2677789206001,
"name": "Jul 17, 2017 5:03 AM"
}, {
"x": 1500285249151,
"y": 600.3165520296044,
"name": "Jul 17, 2017 5:54 AM"
}, {
"x": 1500472917987,
"y": 600.6858600814295,
"name": "Jul 19, 2017 10:01 AM"
}, {
"x": 1500479945476,
"y": 600.6974345877289,
"name": "Jul 19, 2017 11:59 AM"
}],
"showInLegend": false,
"allowPointSelect": true
}]
});
Here is a fiddle showing this.
Highcharts fiddle
Change you epoch's to a javascript date [new Date(epoch)] this will have the date/time fields show in local time instead of UTC.
"series": [{
"data": [{
"x": new Date(1499935040582),
"y": 600.8919674194846
}, {
"x": new Date(1500069665426),
"y": 600.3026594460489
}, {
"x": new Date(1500133689471),
"y": 600.7274040373635
}, {
"x": new Date(1500197550895),
"y": 600.1197607401385
}, {
"x": new Date(1500224766324),
"y": 600.2311428390589
}, {
"x": new Date(1500247544551),
"y": 600.5511455212492
}, {
"x": new Date(1500282216949),
"y": 600.2677789206001
}, {
"x": new Date(1500285249151),
"y": 600.3165520296044
}, {
"x": new Date(1500472917987),
"y": 600.6858600814295
}, {
"x": new Date(1500479945476),
"y": 600.6974345877289
}],
This should keeps your chart in scale with your local time zone
Found an answer to my problem. I am using moment.js to format the time data, so I changed it from:
chart.series[0].data.push({ x: moment(grp.Time).format('x'),
y: grp.DoubleValue, name: moment(grp.Time).format(this.config.get('momentFullDateTimeFormat')) });
to:
chart.series[0].data.push({ x: moment(grp.Time).utc(true).format('x'),
y: grp.DoubleValue, name: moment(grp.Time).format(this.config.get('momentFullDateTimeFormat')) });
So basically I added the ".utc(true)" to the moment definition for the x value.
I have a Highstock graph with dual pane (top & bottom). I understand that the range selector will read from the xAxis extremes to set the from and to date.
Everytime I add a series, be it to the top or bottom, I will have to invoke : chart.xAxis[0].setExtremes(); in order for the range selector to "refresh" the From and To date (if necessary).
Now, the problem comes when I have to do the same steps for my export module. How do I formulate the extremes into my options array before I pass it to my local export server? Currently, it seems that when I perform the export, the From / To Date is occasionally different from what I have set using xAxis.min and xAxis.max.
Any help/advice is appreciated. Thank you.
UPDATE/EDIT:
I am currently using the following options to generate my chart. The chart's xAxis displayed according to the xAxis' min and max values 1315756800000 (12th sep 2011) and 1338134400000 (28th may 2012). However, if I were to copy the following codes and do export on http://export.highcharts.com/, the date becomes 11th sep 2011 to 27th may 2012. Any idea why?
{
"series": [
{
"data": [
{
"y": 101.3,
"x": 1315756800000
},
{
"y": 101.4228571428,
"x": 1316361600000
},
{
"y": 101.4657142857,
"x": 1316966400000
},
{
"y": 101.47,
"x": 1317571200000
},
{
"y": 101.4714285714,
"x": 1318176000000
},
{
"y": 101.4628571428,
"x": 1318780800000
},
{
"y": 101.4657142857,
"x": 1319385600000
},
{
"y": 101.4542857142,
"x": 1319990400000
},
{
"y": 101.4628571428,
"x": 1320595200000
},
{
"y": 101.4557142857,
"x": 1321200000000
},
{
"y": 101.4614285714,
"x": 1321804800000
},
{
"y": 101.45,
"x": 1322409600000
},
{
"y": 101.4414285714,
"x ": 1323014400000
},
{
"y": 101.44,
"x": 1323619200000
},
{
"y": 101.4514285714,
"x": 1324224000000
},
{
"y": 101.4328571428,
"x": 1324828800000
},
{
"y": 101.4214285714,
"x": 1325433600000
},
{
"y": 101.4614285714,
"x": 1326038400000
},
{
"y": 101.4257142857,
"x": 1326643200000
},
{
"y": 101.4742857142,
"x": 1327248000000
},
{
"y": 101.4785714285,
"x": 1327852800000
},
{
"y": 101.4357142857,
"x": 1328457600000
},
{
"y": 101.3085714285,
"x": 1329062400000
},
{
"y": 101.3071428571,
"x": 1329667200000
},
{
"y": 101.1742857142,
"x": 1330272000000
},
{
"y": 101.1285714285,
"x": 1330876800000
},
{
"y": 101.3242857142,
"x": 1331481600000
},
{
"y": 101.4042857142,
"x": 1332086400000
},
{
"y": 101.4742857142,
"x": 1332691200000
},
{
"y": 101.4771428571,
"x": 1333296000000
},
{
"y": 101.48,
"x": 1333900800000
},
{
"y": 101.4771428571,
"x": 1334505600000
},
{
"y": 101.4642857142,
"x": 1335110400000
},
{
"y": 101.4628571428,
"x": 1335715200000
},
{
"y": 101.4871428571,
"x": 1336320000000
},
{
"y": 101.4757142857,
"x": 1336924800000
},
{
"y": 101.4785714285,
"x": 1337529600000
},
{
"y": 101.475,
"x": 1338134400000
}
],
"color": "#5b0f00",
"type": "line",
"name": "series 1 (mRL)",
"yAxis": "testAxis",
"id": "testSeries1",
"turboThreshold": 3000
},
{
"name": "series 1 (mRL) Min Max Range",
"type": "errorbar",
"id": "primaryWATERLEVELmRLSeries_ErrorBar",
"linkedTo": "testSeries1",
"data": [
[
1315756800000,
101.3,
101.3
],
[
1316361600000,
101.36,
101.5
],
[
1316966400000,
101.44,
101.5
],
[
1317571200000,
101.45,
101.5
],
[
1318176000000,
101.46,
101.5
],
[
1318780800000,
101.45,
101.48
],
[
1319385600000,
101.45,
101.48
],
[
1319990400000,
101.44,
101.47
],
[
1320595200000,
101.44,
101.48
],
[
1321200000000,
101.44,
101.47
],
[
1321804800000,
101.44,
101.47
],
[
1322409600000,
101.42,
101.47
],
[
1323014400000,
101.43,
101.45
],
[
1323619200000,
101.42,
101.46
],
[
1324224000000,
101.44,
101.47
],
[
1324828800000,
101.42,
101.44
],
[
1325433600000,
101.41,
101.43
],
[
1326038400000,
101.45,
101.47
],
[
1326643200000,
101.4,
101.46
],
[
1327248000000,
101.45,
101.49
],
[
1327852800000,
101.46,
101.5
],
[
1328457600000,
101.38,
101.47
],
[
1329062400000,
101.27,
101.37
],
[
1329667200000,
101.28,
101.33
],
[
1330272000000,
101.14,
101.24
],
[
1330876800000,
101.09,
101.18
],
[
1331481600000,
101.21,
101.43
],
[
1332086400000,
101.37,
101.46
],
[
1332691200000,
101.42,
101.5
],
[
1333296000000,
101.47,
101.49
],
[
1333900800000,
101.47,
101.49
],
[
1334505600000,
101.46,
101.5
],
[
1335110400000,
101.42,
101.49
],
[
1335715200000,
101.43,
101.5
],
[
1336320000000,
101.48,
101.5
],
[
1336924800000,
101.46,
101.49
],
[
1337529600000,
101.47,
101.5
],
[
1338134400000,
101.46,
101.5
]
],
"zIndex": "1000",
"yAxis": "testAxis"
},
{
"color": "",
"type": "line",
"name": "series 2",
"yAxis": "testAxis",
"id": "testSeries",
"turboThreshold": 3000
}
],
"yAxis": [
{
"id": "testAxis",
"labels": {
"style": {
"font": "8px Helvetica",
"fontWeight": "normal"
}
},
"title": {
"enabled": true,
"text": "axis label",
"style": {
"font": "8px Helvetica",
"fontWeight": "normal"
}
},
"top": "0%",
"height": "100%",
"opposite": true,
"onGraph": "primary"
}
],
"legend": {
"enabled": true,
"itemStyle": {
"font": "11px Helvetica",
"fontWeight": "normal"
}
},
"xAxis": {
"min": 1315756800000,
"max": 1338134400000
},
"navigator": {
"enabled": true
},
"credits": {
"enabled": false
}
}