I'm having a problem using columns in Highcharts (highstock).
I can set differents ranges to group data (minutes, hours, days...), Highcharts tries to adjust the column size for each group and I can set the size of each column and distance between columns based on how many columns are in the chart.
This works fine in almost every quantity of data... but is not working for 72 columns (3 days in hours), the columns looks too thin (less than 1 px).
http://jsfiddle.net/3cbvV/2/
var chart;
$(document).ready(function () {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
xAxis: {
ordinal: false,
maxZoom: 2 * 3600000
},
series: [{
data: s,
type: 'column',
dataGrouping: {
units: [
['minute', [1, 5, 10, 30]],
['hour', [1,2]],
['day', [1]],
['week', [1]],
['month', [1]]
],
groupPixelWidth: 10,
approximation: 'high'
}
}]
});
});
If you move the mouse over the chart you could see the columns, if you zoom to 2 days columns looks fine but still being too thin, if you zoom to max (2 hours) the size is perfect, just as I expected.
How can I set the lines wider?
Well, in general, you can set higher groupPixelInterval, to get wider columns.
And about bug with missing columns - it's already fixed on master branch, see: http://jsfiddle.net/3cbvV/3/
Solved!
The problem occurs when i use too many time intervals, (seconds), then I wasn't showing 72 columns (3 days of 24 hours = 72) as I thought, because I have columns with seconds (like 14:21:57), then I was showing 3 days of 24 hours of 60 minutes of 60 seconds = 259200 columns.
To solve the issue I rounded every column to zero seconds and zero minutes (14:21:57 -> 14:00:00), and that's all :)
Solution: http://jsfiddle.net/3cbvV/4/
Math.floor(1398384001000/6000000)*6000000
Related
I've got a chart with data represented by timestamp/value combination, so I use 'datetime' for xAxis. On line chart it looks all great, but on column it shows empty space for days with no values.
Is there a way to use last value as filler or skip this empty space (e.g. after June 1s show tick for June 3rd)?
You can use breaks:
xAxis: {
breaks: [{
from: 3,
to: 9,
breakSize: 1
}]
}
Live example: http://jsfiddle.net/BlackLabel/xr9j7ybc/
API Reference: https://api.highcharts.com/highcharts/xAxis.breaks
Or oridinal property from Highstock:
xAxis: {
type: 'datetime',
ordinal: true
}
Live example: http://jsfiddle.net/BlackLabel/x0Ljh19v/
API Reference: https://api.highcharts.com/highstock/xAxis.ordinal
I'm looking a way to override Highcharts.timeUnits, which seems the array defining when jump from a unit to another unit. (It's not as simple as that in the source code, but ...)
Why ? Because my need is the following :
I have timeserie data, by 15 minutes, for 3 years.
I want a zoomable column chart (I use highstock in practice), where I have 1 column by month with a given zoom, 1 column by week when I zoom more, then 1 by day, 1 by hour and then 1 by 15min
In the idea, I use plotOptions.series.dataGrouping.units to define these parameters:
units: [
[
'minute',
[15]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1]
], [
'year',
[1]
]
],
But Highcharts use its own rules to jump from an unit to another one, and I find these rules not appropriated to my use-case (switch is too "early", I think)
I can change a bit the behaviour by modifying groupPixelWidth but this is a last resort, because it behaves strangely anyway.
Here is an example. If you click on the various time scales, you'll see that the the timeUnit choosen are often not appropriated.
For example choosing week or with a span from Nov 5, 2018 to Nov 26 2018 : you get data displayed by hour, but data by would be more readable, etc.
https://jsfiddle.net/f4wma38h/
so you are looking for 15 minutes & hour zooming in your chart am i right?
xAxis: {
type: 'datetime',
minRange: 15 * 60 * 1000
},
rangeSelector: {
buttons: [{
type: 'minute',
count: 15,
text: '15m'
}, {
type: 'minute',
count: 60,
text: '1h'
},.....
make the xrange minvalue as 15 in milliseconds & in range selector add the button for 15m & 1h
jsfiddle:https://jsfiddle.net/karnan796/f4wma38h/11/
I am developing a chart tat has two series and shows the aggregated(so the number is added to the point before it, so it is always rising) number of enrolled students vs the aggregated number of certified students with each points plotted when then student enrols or is certified.
What I am wanting to do is display in another part of the page is the rate of change between the start and end points displayed at the time and is updated every time the date range changes.
So how do I store the start and end point of each series into a variable for me to use and is automatically updated every time the date range is changed.
Like I said in the comment, you should be able to use chart.series.array for getting all of the values in your chart.
$(function() {
$('#container').highcharts({
series: [{
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
}, function(chart) {
$('.btn').click(function() {
var series = chart.series;
alert('start: ' + series[0].data[0].y + '\nend: ' + series[0].data[series[0].data.length - 1].y)
});
});
});
Here you can see simple example how it can work: http://jsfiddle.net/Luf9bfy0/
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'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.