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.
Related
when I use the data below in a google sheets timeline chart it doesn't plot 29/04/2019 5% and 10% leaving a gap in a chart, how can I resolve this? the chart should be unaffected by empty fields.
Date 5% Target 10% Target Actual
22/04/2019 120.6 120.6 120.6
29/04/2019 119.5
22/07/2019 114.57 108.54
22/10/2019 108.84 97.69
22/01/2020 103.40 87.92
22/04/2020 98.23 79.13
22/07/2020 93.32 71.21
22/10/2020 88.65 64.09
22/01/2021 84.22 57.68
22/04/2021 80.01 51.91
22/07/2021 76.01 46.72
22/10/2021 72.21 42.05
22/01/2022 68.60 37.85
22/04/2022 65.17 34.06
22/07/2022 61.91 30.65
22/10/2022 58.81 27.59
22/01/2023 55.87 24.83
22/04/2023 53.08 22.35
22/07/2023 50.43 20.11
I have tried adding another dataset and I get the error
each values column may be followed by one or two annotation columns. column number 4 is of type date
Here is a link to the spreadsheet
There are gaps in your data, so you're going to have gaps in your chart. That's just how Timeline Chart works. There are ways of having charts skip gaps, but you have the 29th as a date, so it is explicitly part of your timeline.
The least burdensome remedy is usually to chart a different dataset living elsewhere, filtered down live from your input values, but meeting your charting requirements. E.g. elsewhere in your file have it list only the rows where 5% Target is populated with something like =FILTER(B2:E,LEN(C2:C)) and then chart that.
If that's not what you really want, then you need to decide what you really want. A time-cropped chart to only include fully-populated date ranges? A chart with made-up values extrapolated from surrounding data? Those and some other options are not trivial, so you'll need to really determine your requirements and look into how they can be achieved.
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:
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.
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