Highstock chart offsets dates for no reason - date

I'm having trouble with highstock.js
For no apparent reason it seems to offset the dates halfway though when it has generated the chart.
It occurs because the date 25 march is showed twice in the chart with a value 0 for it's second entry on the x-axis. There is no data to support this second erroneously date entry.
I've made a jsfiddle here:
http://jsfiddle.net/DZGz7/
chart = new Highcharts.StockChart({
chart: {
renderTo: 'containerchart',
alignTicks: false
},
rangeSelector: {
selected: 0
},
title: {
text: 'New Members'
},
yAxis: {
allowDecimals: false
},
xAxis: {
minTickInterval: 24 * 3600 * 1000
},
plotOptions:{
line:{
dataGrouping:{enabled:false}
}
},
series: [{
type: 'column',
name: 'New Members',
data: ([
[1322611200000,3],[1322697600000,40],[1322784000000,21],[1322870400000,14],[1322956800000,5], [1323043200000,6],[1323129600000,11],[1323216000000,14],[1323302400000,16],[1323388800000,11],[1323475200000,9],[1323561600000,8],[1323648000000,8],[1323734400000,3],[1323820800000,5],[1323907200000,5],[1323993600000,4],[1324080000000,4],[1324166400000,5],[1324252800000,3],[1324339200000,5],[1324425600000,4],[1324512000000,5],[1324598400000,0],[1324684800000,1],[1324771200000,1],[1324857600000,2],[1324944000000,9],[1325030400000,4],[1325116800000,5],[1325203200000,9],[1325289600000,0],[1325376000000,6],[1325462400000,4],[1325548800000,3],[1325635200000,4],[1325721600000,6],[1325808000000,8],[1325894400000,4],[1325980800000,4],[1326067200000,6],[1326153600000,6],[1326240000000,2],[1326326400000,6],[1326412800000,5],[1326499200000,3],[1326585600000,3],[1326672000000,5],[1326758400000,5],[1326844800000,1],[1326931200000,9],[1327017600000,11],[1327104000000,6],[1327190400000,0],[1327276800000,2],[1327363200000,4],[1327449600000,4],[1327536000000,5],[1327622400000,3],[1327708800000,5],[1327795200000,8],[1327881600000,3],[1327968000000,6],[1328054400000,3],[1328140800000,2],[1328227200000,2],[1328313600000,3],[1328400000000,4],[1328486400000,0],[1328572800000,2],[1328659200000,3],[1328745600000,8],[1328832000000,2],[1328918400000,5],[1329004800000,2],[1329091200000,2],[1329177600000,10],[1329264000000,5],[1329350400000,2],[1329436800000,3],[1329523200000,4],[1329609600000,0],[1329696000000,2],[1329782400000,13],[1329868800000,5],[1329955200000,6],[1330041600000,6],[1330128000000,4],[1330214400000,5],[1330300800000,3],[1330387200000,5],[1330473600000,3],[1330560000000,2],[1330646400000,5],[1330732800000,2],[1330819200000,8],[1330905600000,1],[1330992000000,3],[1331078400000,3],[1331164800000,3],[1331251200000,8],[1331337600000,5],[1331424000000,3],[1331510400000,2],[1331596800000,2],[1331683200000,3],[1331769600000,1],[1331856000000,6],[1331942400000,1],[1332028800000,3],[1332115200000,2],[1332201600000,3],[1332288000000,6],[1332374400000,2],[1332460800000,4],[1332547200000,2],[1332633600000,7],[1332716400000,0],[1332802800000,5],[1332889200000,1],[1332975600000,4],[1333062000000,4],[1333148400000,1],[1333234800000,8],[1333321200000,1],[1333407600000,4],[1333494000000,3],[1333580400000,3],[1333666800000,4],[1333753200000,1]
])
}]
});
(zoom in around march 25 and see the data offset begins)
The dates correspond to the right data up until March 25 2012 after that it is shifted 1 day. You will be able to see the offset happening, by comparing the tooltip data to the x-axis label.
Obviously this seems like a problem in the data loaded into the graph, But I've checked it over and the next date it should display is March 26. The data seems just fine.
Any ideas what I am doing wrong here?

From http://api.Highcharts.com/highcharts#global.useUTC:
useUTC: Boolean
Whether to use UTC time for axis scaling, tickmark
placement and time display in Highcharts.dateFormat.
Advantages of
using UTC is that the time displays equally regardless of the user
agent's time zone settings. Local time can be used when the data is
loaded in real time or when correct Daylight Saving Time transitions
are required. Defaults to true.
Therefore, if you want your chart to show in the Browser's local time, you need to take action as follows in your javascript:
Highcharts.setOptions({
global: {
useUTC: false
}
});
Presumably, this should be set before you create your chart.

UTC had to be turned off, then it works.
global:{
useUTC: false
}

Related

How to set min and max as a variable in quickcharts?

Currently, I am creating quickcharts line graphs and attached it to my mail body. But the dataset is fetched using a mysql query and the dataset changes time to time. Here is my sample code.
$chartConfig = "{
type: 'line',
data: {
labels: [$date_array2],
datasets: [{
data: [$value_array2],
backgroundColor: ['#F5DEB3'],
fill: false,
}]
},
options: {
title: {
display: true,
text: 'UGW Max Daily Throughput, in Gbps',
},
legend: {
display: false
},
}
}";
In here both $date_array2 and $value_array2 are fetched using a mysql query. But now I need to make a scale to visualize this graph more clear, so I dont want to start the graph with zero. But I could not make min and max values since the dataset is changing day by day. What I need to do is, I need to check the dataset(only 7 day) and idenitify the min and max values and adjust the y axis. I have read https://www.chartjs.org/docs/2.9.4/charts/line.html but couldnot find a proper solution.. Can someone propose a method to do this?

Hide data series from tooltip

How can I exclude a specific data series from showing in the tooltip with tooltip.trigger = axis?
I'm asking because I have a very complex graph with one line chart, two bar charts and one heatmap. And the heatmap has so many data that the tooltip ends up with too many lines. The heatmap values are not very important, so I would like to remove them from showing in the tooltip.
Right now I'm using formatter to exclude them, but is there any other way?
I do exactly the same: adding a new attribute to the series and checking it from formatter.
Something like this:
series: [{
// ...
showInTooltip: true
// ...
}]
// ----
formatter: series => {
var displayed = series.filter(item => item.showInTooltip);
// work with displayed where showInTooltip === true
}
Also you can store callback instead attribute and it will work.
Updated: Suddenly I found undocumented feature and it will solved you trouble by the right way, apparently.
series: [{
// ...
tooltip: {
show: false
}
// ...
}]

Filter apply "on" date but not working - EXTJS

I am trying to filter date, before & after work proper but ON not work.
Please check screenshot.
Code :
{
text: "Updated Date", dataIndex: 'CreatedDate', groupable: false,xtype: 'datecolumn', filter: { type: 'date', active: true, dateFormat: 'm/d/Y', active: true }
}
I would write log messages by console.log("filter :" + this.filter) within the object and also within all interesting points to figure out the sequence of updating.
Maybe a layout update by Objektname.doLayout() is the solution (just an idea)?
"on" appears to be based on a perfect match (==)
If I removed hour, minute, second from time object, "on" than worked
Have you tried ticking the 'On' check box?
I have found that if you picked a date it doesn't automatically tick the check box.
Try this code
{ text: "Updated Date", dataIndex: 'CreatedDate', groupable: false,filter: true, renderer: Ext.util.Format.dateRenderer('m/d/Y')}
And pass these property in your CreatedDate field in Model
dateFormat: 'm/d/Y' , type: date

How can I show a highstock graph with a linear timeline

I have generated a graph inside highstock (see example - http://jsfiddle.net/szFQa/),
however, by default, it groups data that is chronologically close together, and stops the timeline from showing time in a linear form.
I've tried using the following options, there seems to be no change though.
plotOptions : {
series : {
dataGrouping : {
enabled : false
},
}
},
What options need to be set to stop the grouping and show the timeline as linear?
In case when you disable dataGrouping like this http://jsfiddle.net/szFQa/1/ then points are not grouped, because in your data you have 16 points and on the chart is also 16 points.
plotOptions: {
series: {
dataGrouping:{
enabled:false
},
marker: {
enabled: true
}
}
},

Highstock From/To Invalid Date Issue

I have got an issue in trying to generate a graph which has a "Price" axis, and one for "Volume", similar to that in the example given on the Highstock website. It displays the volume axis just fine, but not the prices.
In trying to determine the cause of the issue, I have disabled the volume, and upon doing so, the "From" and "To" rects at the top right both indicate "Invalid Date", yet they have been on the same format, epoch by millisecond, as the volume.
So here is my setup:
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false
},
rangeSelector: {
selected: 1
},
title: {
text: 'Price Graph'
},
yAxis: [{
title: {
text: 'Prices'
},
height: 200,
lineWidth: 2
}],
series: [
seriesOptions
]
});
And here is the "data" for the seriesOptions:
[[1362434092000, 20.3],
[1362434093000, 13.1],
[1362434199000, 7.01],
[1362434200000, 9.4],
[1362434796000, 7.23],
[1362434797000, 22.4],
[1362434798000, 13.1],
[1362434835000, 9.9],
[1362435142000, 9.2],
[1362435399000, 6.4],
[1362435400000, 13.5],
[1362435401000, 24.8],
[1362435453000, 6.4]]
UPDATE
Not sure if this will be of help, but found on line 292, it looks like it is failing here:
this[a+"Input"].value=xa(c.inputEditDateFormat||"%Y-%m-%d",this[a+"Input"].HCTime);
The HCTime here is undefined, so on line 20, where this function is defined:
xa=function(a,b,c){if(!s(b)||isNaN(b))return"Invalid date";
Hope this helps...
UPDATE 2
With the information in the variable seriesOptions, I tried to bring things to basics, and updated the series to be the following:
series : [{
lineWidth : 2,
marker : {
enabled : true,
radius : 2
},
shadow : true,
tooltip : {
valueDecimals : 2
},
type: 'line',
name : 'Test',
pointInterval : 15 * 1000,
data : [
[[1362434092000, 20.3],
[1362434093000, 13.1],
[1362434199000, 7.01],
[1362434200000, 9.4],
[1362434796000, 7.23],
[1362434797000, 22.4],
[1362434798000, 13.1],
[1362434835000, 9.9],
[1362435142000, 9.2],
[1362435399000, 6.4],
[1362435400000, 13.5],
[1362435401000, 24.8],
[1362435453000, 6.4]
]]
}]
This has a bit of a different outcome, one that I hope can help someone know what the problem is exactly - it also produces an empty graph space, but the "From" and "To" both say "Jan 1, 1970". An improvement from "Invalid Date", but still, doesn't make sense to me when the Epoch Converter website shows the correct translation of Tuesday, 5 March 2013 8:54:52 AM. -- What does this all mean?
UPDATE 3
This question has been up for a little while now, and I've received a hit-and-run -1 score which I'm not sure why I deserve. So to help explain a little more, I have made the following two screen shots:
Graph Image
JS Breakpoint with values
I hope this helps... It's driving me insane, and the research I've done suggests only to make sure the epoch timestamp is in Milliseconds.
Will be very, very grateful for help to this riddle - am almost finished this phase of the project, and it's been a long time coming.
Cheers.
Problem solved.
The main issue was that chart = new Highcharts.StockChart({ was being called twice in the script, before each attempt the contents of the container were being removed. On the first iteration, it had data to work with, the second time, it did not. Hence, NaN on the data.
Second issue, seriesOptions was itself an array, so foolishly I was making the series: an array of arrays.
I do have a unusual issue with the slider overlapping the volume axis, but I'll figure that out.