I understand we could use tick interval for type:"datetime". It works for type: category also as shown below:
http://jsfiddle.net/n0s72zeh/1/
But tick interval does not work when I use 'categories: dateFromJson'. I get custom date from json file. Is it possible to have set interval on my x-axis (like for every one hour on average ?)
xAxis: {
categories: DateFromJson,
labels: {
rotation: 270,
}
}
For eg: rite now it shows 15:06, 15:56, 15:58, instead can we make it show just 15:00?.. It should show 13:00, 14:00, 15:00 and so on(every one hour). Thank you
Related
I am using highchartTable to create my chart. I am feeding the x-Axis on highchartTable with dates and this is how it currently displays
I would like to format the x-axis in such a way that it only show 'Month year', then 'year' when the result set gets bigger.
Someone suggested I do it like:
$('#hidden-highchart-table').bind('highchartTable.beforeRender', function (event, highChartConfig) {
highChartConfig.xAxis.type = 'datetime',
highChartConfig.xAxis.dateTimeLabelFormats = { month: '%b \'%y',year: '%Y'}
}).highchartTable();
But this still does not work.
Instead of setting type of axis through highChartConfig object, use data-graph-xaxis-type attribute in table tag. Take a look at the example below.
Example:
http://jsfiddle.net/m8h5oo76/
I have 2 timeseries that I would like to 'share' tooltip across. However, I have a problem where only the first point of each series is aligned and shares the tooltip. The rest of the points are slightly misaligned and therefore fail to show in the tooltip at the same time.
This fiddle will help demonstrate the problem. Fiddle
If you hover over the very first point, the tooltip appears with an entry for both series. But the very next datapoint only displays a single entry in the tooltip.
May I ask for your advice please? What have I missed for 'aligning' both series in order to share the tooltip? Clearly it's not enough to just add
tooltip: {
shared: true,
}
Thank you.
Assuming that the end goal is to compare two different dates based on the time of day, and assuming that the data points are at regular intervals, or are close enough and can be fudged (ie 1 point per hour, or every 10 minutes, etc), I would approach this differently:
1) use a single date. it can be today's date, or any other date, it doesn't matter, as the time of day is the important segment of the date string.
2) use the pointStart and pointInterval properties to set the proper timing (based on the artificial date, but the correct time interval)
3) Set the actual date of each data series as the series name, which will show in the legend and the shared tooltip to properly display the date of each data set.
4) use the formatting options on the x axis labels to show only the time portion of the label and not the date
In this way you remove the need for a 2nd x axis, remove any complications in tooltip formatting, remove the need to use more complex data structures like in your comment ( "{"y":0.87,"realDateTime":'25/12/2015 03:00'}" ), and only ever have to pass the appropriate date to the name property of each series.
//use the current date as the base - the date doesn't matter, just the time
var d = new Date();
var date = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0,0,0);
var pointStart = date.getTime();
var pointInterval = 3600 * 1000 // 1 hour
.
series: [{
name : 'Apr 17, 2015',
data : [2,5,8,9,8,7,4,5,6,9,8,7,8,9,8,7,8,5,3,2,1,4,4,5]
},{
name : 'Jun 12, 2015',
data : [3,6,9,5,4,7,8,5,2,1,4,5,9,8,7,5,6,9,8,7,4,5,6,3]
}]
Example:
http://jsfiddle.net/jlbriggs/b3t7ueam/
[[and, of course, you can do this with as many different dates as desired (though this many obviously doesn't make sense):
http://jsfiddle.net/jlbriggs/v76u9w2L/
]]
I know that this is an old question, but an alternative approach which I've found to work is to reformat the data into a CSV format and add an import for the data module.
There's a demo on the Highcharts site which does pretty much what you're asking for (albeit nested inside an ajax request) over here. The two key parts from there are:
<script src="https://code.highcharts.com/modules/data.js"></script>
and
data: {
csv: csvData
}
The example reads in an actual csv file, but it'll accept any string which is formatted similarly. Also, if you set up headers in that csv string, you don't need to declare their names in your series options.
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
Scenario: I'm plotting a volume bar chart using Flot JS, with a per-minute data. So for example, for 3 hours, I have 3 x 60 data points being pulled from the database.
Problem: Since there I have 6 hours worth of data points, and the width of the chart is only 250px, the bars are only 1px wide each, without margins. I was wondering if there's a grouping data option in Flot Charts where I could tell it to average the volume data per 15 minutes or 30 minutes.
$.plot('#flot-vol, [{
color: '#fff',
bars: { show: true },
data: dataV
}], {
grid: { show: false },
shadowSize: false
});
In High Charts there is a GroupData option wherein you can group the given data by day / week / months. I was wondering if there's such a feature in Flot Charts?
If I need to use MySQL to group the data, how do I group the data per 30 minutes if I have the following MySQL statement? Currently I'm pulling all the volume of the latest date from the table named Ticker.
SELECT UNIX_TIMESTAMP(`Timestamp`), `Volume` from `Ticker` WHERE CompID = 'symbol' AND Date(`Timestamp`) = (SELECT Max(Date(`Timestamp`)) FROM `Ticker`)
Update:
Thanks to Ryley for clarifying the answer, in case anyone is wondering how to group the data through MySQL, here it is.
MySQL Statement that Worked
SELECT UNIX_TIMESTAMP(`Timestamp`), AVG(`Volume`) FROM `Ticker` WHERE `CompID` = 'symbol' AND Date(`Timestamp`) = (SELECT Max(Date(`Timestamp`)) FROM `Ticker`) GROUP BY (UNIX_TIMESTAMP(`Timestamp`) DIV 30*60)
Flot does not aggregate data itself, but you're on the right track thinking about doing it from mysql.
Make your query average the data into 30 minute segments:
SELECT trunc(UNIX_TIMESTAMP(`Timestamp`)/(30*60))*(30*60) as time_chunk,
AVG(`Volume`) from `Ticker`
WHERE CompID = 'symbol' AND
Date(`Timestamp`) = (SELECT Max(Date(`Timestamp`)) FROM `Ticker`)
GROUP BY time_chunk
I'm not a MySQL user, so this may not be exactly right, but the idea is to take your timestamp and truncate it to 30 minute increments, then average the Volume over that 30 minutes.
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