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.
I'm wondering if it is possible to zoom in on a slice in a pie chart.
My chart is modeled after this example jsfiddle example
chart: {
renderTo: 'container',
type: 'area',
zoomType: 'x',
}
But it doesn't seem to work with pie charts. Am I missing something here?
Ideally, I would have a pie chart with 2 layers, where the outer layer serves as a child of the inner layer. When selecting a child slice, I could then have an entire pie chart showing that slice alone, along with its own children, etc.
Unfortunaltely zoom is not allowed for Pie Charts as its properties show you
x: to zoom in x-axis
y: to zoom in y-axis
xy: to zoom in both axes
but you can use size property with JavaScript to show zooming.
size property demo
I think I found what I was actually looking for. It isn't zoom, but rather the option of capturing click events on slices.
In order to do that, one must use the allowPointSelect attribute, which can be added to a pie chart like this (just one of several different ways):
plotOptions: {
pie: {
shadow: false,
allowPointSelect: true,
},
}
Then in order to capture clicks one has to declare the events attribute in the series being used:
series: [{
name: 'Example',
data: [
{
name: 'Firefox',
value: 45.0
},
{
name: 'IE',
value: 26.8
},
{
name: 'Chrome',
value: 12.8,
},
],
size: '100%',
point: {
events: {
click: function() {
// some code to execute when clicking a slice
alert('Slice name: ' + this.name + ' and value: ' + this.value);
}
}
}
}]
Then in that click function, any javascript code can be executed, and the declared fields in the data can also be accessed. So a second pie chart could theoretically be created on the fly.
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
}