I am currently trying to plot some data which I receive via a HTTP request. The issue that I am having is that the x-axis doesn't plot the timestamp correctly because it it's in Unix format. I've read some other similar question on SO such as: Example One
The issue is that I'm not passing an object but directly an Unix time data. When hovering the graph, you can see that the x-axis doesn't display the date and hour correctly.
Here is a fiddle with my current graph: Graph Fiddle
Since you actually have datetime values, showing them using category is sort of a hack, and would also not show gaps between points correctly if they are not evenly spaced.
Instead you could merge your two arrays into pairs and then supply it to the series as proper X-Y values for a datetime axis. You also have to multiply your datetime values by 1000 to get milliseconds, which Highcharts expects.
For example (JSFiddle), merging:
dataArray.push(selectedData);
timeDataArray.push(selectedTime);
var mergedArray = timeDataArray.map(function(e, i) {
return [e*1000, dataArray[i]];
});
And axis and series:
xAxis: {
type: 'datetime'
},
series: [{
name: 'AAPL',
data: mergedArray
}]
Related
I've got a chart that uses time data for both the X and Y axis. I'm able to get both axes to convert my millisecond data into HH:MM:SS. How do I get Y axis tooltip to display HH:MM:SS too? API suggests it's possible, however I'm unable to replicate.
tooltipValueFormat: String
Parallel coordinates only. Format that will be used for point.y and available in tooltip.pointFormat as point.formattedValue If not set, point.formattedValue will use other options, in this order:
yAxis.labels.format will be used if set
if yAxis is a category, then category name will be displayed
if yAxis is a datetime, then value will use the same format as yAxis labels
https://api.highcharts.com/highstock/yAxis.tooltipValueFormat
See my fiddle for example
https://jsfiddle.net/gramlich/jpnsujo8/1/
Not to further complicate things- I am doing this in a Django View, and passing the chart options via JSON to minimize my need for JS. If possible, I'd like to use a solution using only objects found in the Highcharts API; rather than resorting to writing my own Formatter function in JS.
Thank you for your help!
You can use pointFormat passing the formatting string like:
tooltip: {
pointFormat: '{point.y:%M:%S}'
}
Here's a working fiddle: https://jsfiddle.net/w4f9suzb/
I have been struggling with this issue for an hour, and I can't figure out why Morris chart put some kind of time values into the X axe.
First of all, my JSON is the following:
{"data":[{"date":"2015-06-08","payed":"18.08","to_pay":"18.08"},
{"date":"2015-06-11","payed":"70.24","to_pay":"108.24"}]}
And I'm creating the chart this way:
var json = JSON.parse(response);
Morris.Line({
element: 'recebimentos-chart',
data: json.data,
xkey: 'date',
ykeys: ['to_pay', 'payed'],
labels: ['To pay', 'Payed'],
gridTextColor: '#000',
lineColors: ['#EA8A67', '#22aa22'],
});
And now the problem: why in god's heaven is the X axe writing the values that the image shows?
As you can see in my JSON there's two different dates. If I only have one date (no matter which one) the chart works good (it output in the X axe the date value), for example:
{"data":[{"date":"2015-06-11","payed":"18.08","to_pay":"18.08"},
{"date":"2015-06-11","payed":"70.24","to_pay":"108.24"}]}
EDIT 1: While trying in JSFiddle I found out that the problem is the width of the chart. With a small width the chart presents the dates correctly, with a large width it presents hours (??)
The problem is that I need to present a large chart..
Try this :
http://jsfiddle.net/z97z2Lam/1/
Their doc says about the xLabels property:
Sets the x axis labelling interval. By default the interval will be automatically computed. The following are valid interval strings:
"decade"
"year"
"month"
"week"
"day"
"hour"
"30min"
"15min"
"10min"
"5min"
"minute"
"30sec"
"15sec"
"10sec"
"5sec"
"second"
Im working with stacked column using Highcharts.
The data series im constructing is similar to this
series: [{
name: 'Apples',
data: [['2014-01-01',5], ['2014-01-02',3], ['2014-01-04',2], ['2014-01-05',7], ['2014-01-06',8]]
}, {
name: 'Oranges',
data: [['2014-01-01',3], ['2014-01-02',7], ['2014-01-04',9], ['2014-01-05',11], ['2014-01-06',19]]
}, {
name: 'Grapes',
data: [['2014-01-01',15], ['2014-01-02',23], ['2014-01-03',12], ['2014-01-05',17], ['2014-01-06',18]]
}]
http://jsfiddle.net/emgq47px/
If you take a closer look at the data, im missing 2014-01-04 data for Apples but instead the data is stacked on 2014-01-03.
One way of solving this would be to prepopulate categories and follow the same order for inserting my y values but that wont be a good way to solve as i may deal with large data sets down the line.
Any tips to head in the right direction is greatly appreciated.
UPDATE:
I'm populating my x and y co-ordinates with values from database. Database gives me date in (YYYY-mm-dd) format. So i'm converting that string to epoch time using strtotime function in PHP strtotime($res[0])
But then when I populate draw the highchart, i see wrong dates. I checked with online available epoch converters and it looks like conversion is right but i still cant figure out whats wrong here.
Even the x axis ticks seems to be slightly off.
Many thanks for your suggestions.
http://jsfiddle.net/emgq47px/3/
RESOLVED:
I had to multiply epoch time with 1000. This works.
Original answer: HighCharts - timeseries chart - irregular datetime interval on xAxis
Probably the best way is to use a datetime axis. This allows highcharts to know the data contains dates, and it can sort out the axis properly.
xAxis: {
lineWidth: 2,
type: 'datetime'
},
Once you do this, you need to supply valid date times in your data like this:
data: [[Date.UTC(2014, 0, 1),5],
[Date.UTC(2014, 0, 2),3],
[Date.UTC(2014, 0, 4),2],
[Date.UTC(2014, 0, 5),7],
[Date.UTC(2014, 0, 6),8]]
Note, months go from 0 to 11, not 1 to 12, so zero is January.
http://jsfiddle.net/0ofLx86d/
The problem is that you are marking x-axis type is category
xAxis: {
lineWidth: 2,
type: 'category'
},
So when you assign data data: [['2014-01-01',5], ['2014-01-02',3], like this to it then the first value is considered as category so when you assign ['2014-01-03',12] as last then it replaces previous one ['2014-01-04',12]. You can test it by keeping first two as 03 and last one as 04, then it will take 04 and not show 03.
Solution
Replace
type: 'category' to 'datetime'
and date to epoch time
data: [[1388534400000,5], [1388620800000,3], [1388793600000,2], [1388880000000,7]]
You can use custom function for label if you want to display date on x-axis in different format or use Date.UTC
Demo
I'm using Highcharts for a project in which I have to display two series with about a thousand points each. The x-axis represents a date, and the y-axis a quantity. In addition, each point has an associated list of namesMy data is day-by-day without gaps, with a structure such as
var mydata = [ ...
{x: theDate, y: theValue, names: theNames},
... ]
where theNames is an array of strings. I can access these in the tooltip formatter through this.points.point.names, given that the range displayed on the chart is small enough. If I change the x-axes so that the start date and end date are more than roughly a year apart, then the tooltip is not rendered at all.
One of the possible avenues that I have tried but failed with so far is setting the turboThreshold limit to the length of the longest series plus 1. Setting this lets me at least display a graph when mydata.length > 1000 (the default value). However, this only displays the tooltip if the x-axis range is less than 261. Otherwise, the tooltip disappears entirely, as does the point.data object where I'm getting the name from.
I'm also not great at JavaScript, but I was wondering if there were a way to separate the names of the points from the array containing them (in my examples, myData1 and myData2) and somehow access those names from the tooltip function without going through the current point.
Here is the link to the jsFiddle demonstrating this issue.
All help is appreciated!
The problem is in dataGrouping, when disabled works fine: http://jsfiddle.net/34tfg/1/
DataGrouping is method in Highcharts to approximate points and display them when width of the chart is not enough, e.g. how to display 10 000points in a chart of width 1 000px -> 10 points in a one pixel..? And when dataGrouping is used, new points are created, so all your custom options like 'names' etc. are lost (at least not accessible).
Code:
plotOptions: {
line: {
dataGrouping: {
enabled: false
},
turboThreshold: 10000
}
},
My chart is displaying data day-by-day (user and system sent SMS/Newsletters). So time part is not relevant and unnecessary. Here is an example: http://jsfiddle.net/uaxZP/1/ where time "12:00" is displayed.
How can I force Highcharts to never display the time part in a "datetime" axis?
EDIT: Highcharts will display dates w/wo times based on chart or screen size. I've updated jsfiddle removing some data and now it's displaying also time parts.
You can intercept the x-axis label function and change it's output. In my example, I've changed it to render short dates:
http://jsfiddle.net/uaxZP/3/
{ xAxis:
labels: {
formatter: function() {
return Highcharts.dateFormat("%b %e", this.value);
}
}
}
The xAxis.labels.formatter property allows control over this. You also may notice I'm using Highcharts.dateFormat, which is a utility function for rendering dates. This is not mandatory, but it's a nice built in feature. Documentation on the xAxis formatter is here:
http://www.highcharts.com/ref/#xAxis-labels--formatter
The easiest way to do is using "minTickInterval"
xAxis: {
minTickInterval: 24 * 3600 * 1000
}
http://api.highcharts.com/highcharts#xAxis.minTickInterval