I'm trying to get Highcharts to display the daily usage statistics for e.g. a company's ressource. The opening days of the company are from monday to friday.
My dataseries look like this:
[Date.UTC(2012, 8, 6),17.5], (Thu)
[Date.UTC(2012, 8, 7),42.5], (Fri)
-- weekend
[Date.UTC(2012, 8, 10),20], (Mon)
[Date.UTC(2012, 8, 11),20], (Tue)
[Date.UTC(2012, 8, 12),40], (Wed)
[Date.UTC(2012, 8, 13),30], (Thu)
...
In the time series chart there are inserted two labels for the missing two weekend-dates (2012, 8, 8 and 2012, 8, 9), but I don't want those labels to be displayed because there are no values for these labels and so the adjacent dates will be connected via a line but this is wrong.
Is it possible to turn off this 'date interpolation' and show only the values I've inserted?
Thanks with regards, Phil
It may be possible using a scatter series and customizing the tickPositioner callback for the x-axis and filtering of x series data (dates) thats not a weekday.
I've created a fiddle at http://jsfiddle.net/hkskoglund/6jNGg/
To allow for missing weekends days null should be pushed for the y-value in the series data (as mentioned in comment above)
Another option without using a datetime axis is to use a category axis where you push the dates in the series you have data for. This will allow to have a continous plot. Take a look at the new fiddle: Areaspline with categories as dates
xAxis: {
labels: {
formatter: function() {
// http://api.highcharts.com/highcharts#Highcharts.dateFormat()
return Highcharts.dateFormat('%d %b', this.value);
}
},
categories : [
Date.UTC(2012, 8, 6),Date.UTC(2012, 8, 7),
Date.UTC(2012, 8, 10),Date.UTC(2012, 8, 11),
Date.UTC(2012, 8, 11)]
},
series: [{
name : 'resources',
data: [17.5,42.5,20,25,20]
}]
As far as I can understand using datetime on the x-axis using your requested plot-configuration is not possible without changing the source/rendering of Highcharts series. It seems like discontinuties with null values is separated into socalled segments.
Have you tried to set oridinal as false?
http://api.highcharts.com/highstock#xAxis.ordinal
I know this is an old question, but did you try formatting your dates as Strings before inserting them? If so, you can then use a category axis. This should work as long as you don't have any entry for date vs having a null.
I use Highcharts embedded in JasperReports, but this allows us to get your desired behavior.
Related
I'm new to High Charts and working on an example with the Data on the Y-axis as Date component with the Start and End Dates and the X Axis will be of type with the 'Bar' chart
Here is the link of my example jsfiddle
The series data would be something like this
'series: [{
name: '',
low: Date.UTC(2016, 07, 01),
high: Date.UTC(2017, 04, 04)
}'
Any helps on this would be highly appreciated
Updated on 03/04/2017 for the Image attachment
Here the bars going beyond the End Date time
The tooltip data in highchart is visible when i hover my mouse over it, the tooltip has some data that i want to show for example below the column where the x label is, for now it shows 0,1,2 and so on.
I am using the chart to compare timeperiods, so under each column i want to add data from the tooltip. It could be 2 dates I compare below each column, a picture would be helpful for you but i am not a trusted stackoverflow user yet.
An example using a datetime xAxis type:
Fiddle:
http://jsfiddle.net/jlbriggs/1bs6vL3t/
Code:
In the xAxis properties, specify the type as datetime:
xAxis: {
type: 'datetime'
},
In the series, specify your x values as dates (using either the Date.UTC() method, or by directly specifing epoch time)
series: [{
data: [
[Date.UTC(2016, 05, 6), 3],
[Date.UTC(2016, 05, 13), 5],
[Date.UTC(2016, 05, 20), 4],
[Date.UTC(2016, 05, 27), 7],
[Date.UTC(2016, 06, 4), 6],
[Date.UTC(2016, 06, 11), 9],
[Date.UTC(2016, 06, 18), 7],
[Date.UTC(2016, 06, 25), 5]
]
}]
Output:
And, an alternative version that uses categories instead:
http://jsfiddle.net/jlbriggs/1bs6vL3t/2/
Generally, when working with time series data, using datetime is preferable. There may be cases where various circumstances make it less effective, in which case categories can be a useful alternative.
{{ Edit }}
After re-reading your comments, here's another version, using categories, that might be more like what you're looking for:
http://jsfiddle.net/jlbriggs/1bs6vL3t/5/
This may also be a case for the Grouped Categories plugin:
http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories
I have a chart which displays goals between 1995 and 2030. I need the series to "stop" at the current year.
The x-axis:
xAxis: {
categories: ['1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2015', '2016', '2017','2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025', '2026', '2027' , '2028', '2029', '2030'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
The series:
series: [{
name: 'Consumption',
data: [5020, 4350, 3090, 2500, 2100, 800]
}],
If I do like this, the categories is automatically matched to the number of series data.
Is there any option where I can keep all the categories?
http://jsfiddle.net/zh4yukL8/1/
There are multiple ways to do this, but answer (2) may be the most useful in your case.
1) Using nulls for unknown data
If you have missing data for certain years (and you want to stop the graph intermittently), you can write unknown data as a 'null' in the series data (as #wergeld mentions in his comment above).
This is useful if you are programmatically filling in data for your graph and your program is working through each category in turn. If you only have data up until the year 2000, your program should work up to your end year (or any other end category), placing nulls in the series where there is no data available.
2) Using pointStart & max with a datetime chart
Seeing as you're dealing with years, you can make this chart more effective at displaying your series. You can select the start year (pointStart) and end year (max); with your data starting from the start year, and the series continuing until the end year.
Your xAxis will change to:
xAxis: {
type: 'datetime',
max: Date.UTC(2030, 0, 1)
}
And you'll need some plotOptions*:
plotOptions: {
series: {
pointStart: Date.UTC(1995, 0, 1),
pointIntervalUnit: 'year'
}
}
Example here: http://jsfiddle.net/zh4yukL8/5/ .
If you have missing data for some years, you can fill these with nulls in the series data as method (1) explains, but the graph will continue until the max year anyway.
*While playing around with this example, I discovered that the AngularJS Highcharts library (highcharts-ng) you're using expects plotOptions to be dealt with differently to native Highcharts JS. So the example above works with your library, but for everyone else you will need to have plotOptions outside of the 'options' object.
3) Using a function to work out the length of your series
If your chart doesn't just deal with years and/or you want a discrete series represented, you can use the max property on the xAxis and a clever function to work out how many categories you have. The best way I can see to include this function in Highcharts seems to be on the load event of the chart.
You'll need to adapt your chart* options to include the event:
chart: {
events: {
load: function () {
var totalValues = this.xAxis[0].categories.length;
this.xAxis[0].setExtremes(0 , totalValues - 1 );
}
}
}
Example here: http://jsfiddle.net/zh4yukL8/6/
*As with method (2), the 'chart' options when using the highcharts-ng library for AngularJS are inside the 'options' object.
I have a few years of sample data that I'd like to break at year end (12/31) of every year. Trying to implement this code from example from API
breaks: [{ // break on last day of year
from: Date.UTC(2008, 12, 31, 58),
to: Date.UTC(2008, 12, 31, 59),
repeat: 24 * 36e5 // not sure how to use this
}],
is there a way to ignore the year in Date.UTC()? Also I'd like to repeat this every year. Tied numerous combos to no avail. Heres my jsfiddle
Adding null value point will create a gap in a series plot if connectNulls is set to false (by default it is false).
Example: http://jsfiddle.net/c9e9ao2L/1/
Hi. I have this json result:
([{"total": 2797, "date": "13.12"}, {"total": 3252, "date": "14.12"}, {"total": 771, "date": "15.12"}, {"total": 669, "date": "16.12"}, {"total": 2962, "date": "17.12"}, {"total": 1, "date": "19.12"}])
I want set the date value on my xaxis label, but I'm not able to do that.
Help?
Thanks!
If all series points are going to be one-day increments and you want the xAxis date format to be day.Month you can do the following using the Date.UTC method:
Date.UTC(year,month,day,hours,minutes,seconds,millisec)
The year, month, and day are all required. So you will need to get that value as well. Note that months start at 0 and go to 11.
Then your data, in HighCharts format, would look like:
[Date.UTC(2012, 11, 13), 2797], [Date.UTC(2012, 11, 14), 3252], [Date.UTC(2012, 11, 15), 771], [Date.UTC(2012, 11, 16), 669], [Date.UTC(2012, 11, 17), 2962], [Date.UTC(2012, 11, 18), null], [Date.UTC(2012, 11, 19), 1]
To get your chart to plot cleanly you will also need to set a value for 12.18 which your currently do not do. I set it to null. This chart will not draw a line between null points but you can have it do so with connectNulls. Set it to true if you want to connect the nulls. It is set to false by default.
Now you want to format your xAxis to display dates like '13.12'. You do this with the formatter properties. To get your format use '%d.%m'. The date format options are listed here.
How you get your data into the HighCharts format depends on your source. There are multiple ways.
Demo