With Highcharts, is it possible to draw a chart representing the evolution over time of the frequency of an event, given the sequence of timestamps of the event's occurences ?
Of course, such a chart would depend on the "step" of the x-axis.
Is my question clear ?
yes it is possible
here is a working example for it http://jsfiddle.net/vJRB5/
for this to happen the xAxis type should be datetime
xAxis:{
type: 'datetime'
}
You can pass timestamp directly or you can pass the date in UTC format as well
hope this will help you.
Please familair with demos which are published on http://www.highcharts.com
Related
I've been looking for several days. Trying many different solutions.
I need to be able to specify the xAxis as an array of dates that are not always consecutive (thus no pointInterval and no pointStart). Otherwise my data gets way out of hand because I have more than 10 possible series across 100k+ points, with only 2 or 3 series shown at a time. If I have to include dates for each of the points across each of the series that is too much wasted memory. One simple case had over 3.2 million data points with three gaps of time (4 different sections of time based data).
The closest I have found is the Date as a category solution. Where the xAxis has to have her own formatter in order to portray the millisecond timestamps as dates.
This doesn't really solve the problem because I don't want to reinvent the functions that highcharts has for formatting the datetime of the labels based on the zoom level of the graph. And I don't want a single time format for all zoom levels.
So what I need to know is there a way to specify the datetime as an array for the xAxis without the need to add the datetime to every point and not use categories as this doesn't format the date correctly that works with boost.
I played with this fiddle (non-boost):
http://jsfiddle.net/psd3ngsh/13/
xAxis: {
type: "datetime",
categories: xArray,
labels: {
formatter: function () {
return Highcharts.time.dateFormat('%Y-%m-%d %H:%M:%S.%L', new Date(this.value));
}
}
I have a set of N values for each day logged from a webserver (N is not always the same each day, but this is not relevant).
I need to show a comparison chart with values from multiple days, eg:
today (16/01/2017)
yeasterday (15/01/2017)
a month ago (15/12/2016)
To do that, I though about something similar to:
the 3) as 'area chart'
the 2) as 'dotted line chart'
the 1) as 'continue line chart'
This is easy, but now I have a problem: if I declare X axis as 'datetime' obviously the 3 chart series are not 'overlapped' because each one represent a different day along datetime axis.
Instead I need them to overlalp, so user can quickly compare values.
Ho can I do that?
Categorized X axis? Multiple X axes
I prefer to handle this with a single datetime axis, using a common pointStart and poiintInterval for all series (set in the plotOptions).
This plots each series on the same date from a technical standpoint, but with some basic formatting accomplishes the goal of viewing each date along the same time axis.
The benefits to this approach over categories and using multiple axes, IMO, are
Makes full use of the datetime axis type features
Does not require any additional overhead for adding more series - this works just as well with 2 or 20 series
Example fiddles:
http://jsfiddle.net/jlbriggs/b3t7ueam/ (two dates)
http://jsfiddle.net/jlbriggs/hbfap864/ (many dates)
Example Output:
I'm trying to build a highcharts column chart showing monthly data. This is what I get (note the irregular separation between columns):
An here's the way I'm building the chart: http://jsfiddle.net/Lae2zg11/2/
I thought it might be a problem with the timestamp timezone (1451602800000, for example, is 31/12/2015 23:00:00 in GMT, but 01/01/2016 00:00:00 in my timezone, and that's the datetime I need.
So I updated the chart data to "translate" my datetimes to GMT, but I get pretty much the same result:
And the related fiddle: http://jsfiddle.net/Lae2zg11/3/
So apparently it has nothing to do with the datetime format itself. How can I get evenly separated columns, and columns with the same width?
If you are willing to switch to Highstock you can use their ordinal feature:
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them.
You'd have to use the Highstock script instead:
<script src="http://code.highcharts.com/stock/highstock.js"></script>
Then create your standard chart (Highcharts style) with an ordinal x-axis:
$('#container').highcharts('Chart', {
xAxis: {
ordinal: true,
// ...
},
// ...
});
See this JSFiddle demonstration of your chart with these modifications.
In the demo site, there is an example with series comparison (http://www.highcharts.com/stock/demo/compare).
In this example every series has values at same date times.
What I have to plot is several series but each series has there own frequency (ie : one daily, one hourly and one every 10 minutes).
It works but the tooltip displays :
the 3 values when we are over a full day date time
the hourly and the 10' values when we are over full hour date time
only the 10' value when we are over a 10' date time
Would it be possible to always displays the 3 values?
Or by extrapolating the intermediate values (best) or by displaying 3 date times/values in the same tooltip.
Best regards
Unfortunately it is not build-in, so you need to use tooltip formatter, find the closest point of current (by loops on each serie / each point, comparing x value) and then return values.
So I was wondering, is it possible, to show datetime values on x-axis as intervals.
For example, I have data that is saved to the database at 9:00, but if the hourly view of the data is chosen, that means that the data was collected from 8:00 to 9:00 and just saved at exactly 9:00. So when the column is rendered above the x-axis value 9:00, that is not true. It should be rendered on the 'category' 9:00 (from 8:00 to 9:00).
To sum up, I need something that would place that ONE column BETWEEN 8:00 and 9:00, or in general, between the given datetime value passed and the value that is one value less (before).
Is it possible to pass datetime intervals to a datetime axis?
Thanx for the help in advance!
I found the answer.
http://api.highcharts.com/highcharts#plotOptions.area.pointPlacement
The pointPlacement option set to "between" serves exactly this purpose.
I've scanned the Highchart Options Reference multiple times before, but must have missed it.
I would recommend using the pointRange option: http://api.highcharts.com/highcharts#plotOptions.column.pointRange
Using your example, if you set the data point to 8:30, and set a pointRange of 1 hour, it will span the block from 8:00 to 9:00