I use line / area chart to display datetime data.
see example : http://jsfiddle.net/YFERb/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
series: [{
data: [
[Date.UTC(2010, 0, 1), 29.9],
[Date.UTC(2010, 0, 3), 106.4],
[Date.UTC(2010, 0, 5), 75],
[Date.UTC(2010, 0, 6), 129.2],
[Date.UTC(2010, 0, 10), 176.0]
]
}]
});
});
But I want to fill empty day to 0.
see example : http://jsfiddle.net/RSPNU/
so below day is filled 0.
2010.0.2,
2010.0.4,
2010.0.7,
2010.0.8,
2010.0.9
I insert 0 in empty day.
But it is very heavy.
So I want to display like 2nd example except inserting 0 or null data.
If you have other way, please reply this.
thank you.
To avoid points you can set it's value to null.
When you do it your chart will have a gap between null points, so you have to set connectNulls to true.
series: [{
data: [
[Date.UTC(2010, 0, 1), 29.9],
[Date.UTC(2010, 0, 2), null],
[Date.UTC(2010, 0, 3), 106.4],
[Date.UTC(2010, 0, 4), null],
[Date.UTC(2010, 0, 5), 75],
[Date.UTC(2010, 0, 6), 129.2],
[Date.UTC(2010, 0, 7), null],
[Date.UTC(2010, 0, 8), null],
[Date.UTC(2010, 0, 9), null],
[Date.UTC(2010, 0, 10), 176.0]
]
}],
plotOptions: {
series: {
connectNulls: true
}
}
demo
In general, how Highcharts should know that you want to put 0 every day, not every hour, or maybe every second? If you know how is your data cropped you can set pointInterval and pointStart for a series. Then you can update each of the points which should have different value, see example: http://jsfiddle.net/YFERb/3/
Related
I have a chart with two yaxis but can't get the second data series to scale to the second axis. What am I missing?
Example: https://jsfiddle.net/32yugp6m/2/
Now I see where the problem is. You have set the series.yaxis to 1 and 2, meanwhile, it needs to be set as series.yAxis 0 and 1. Notice that Axis must be started with capital letter.
Demo: https://jsfiddle.net/BlackLabel/8u2rhegv/
series: [{
name: 'Deg F.',
type: 'line',
yAxis: 0,
data: [
[Date.UTC(2020, 1, 22, 12, 2), 70.8],
[Date.UTC(2020, 1, 22, 12, 1), 70.8],
...
],
},
{
name: 'RH',
type: 'line',
yAxis: 1,
data: [
[Date.UTC(2020, 1, 22, 12, 2), 33.4],
[Date.UTC(2020, 1, 22, 12, 1), 33.4],
...
],
}
]
API: https://api.highcharts.com/highcharts/series.line.yAxis
When last value in left stepped area is different from previous one it is hard to see it. (we just see a line along the end of the chart)
Demo:
https://jsfiddle.net/x2qf5wuy/1/
$("#container").highcharts({
chart: {
type: 'area'
},
plotOptions: {
area: {
stacking: 'normal',
step: 'left'
}
},
series: [{
name: "Example 1",
data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 0]
}, {
name: "Example 2",
data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 10]
}]
});
There is a way in highchart to add an artificial padding to data series so that the user can see the last point ?
Wanted result :
You can add a point with the same y value as the last series point and use the setExtremes method to show only the wanted part of the area:
chart: {
type: 'area',
events: {
load: function() {
var series = this.series[1],
lastPoint = series.data[series.data.length - 1];
series.addPoint({
x: lastPoint.x + 100,
y: lastPoint.y
}, false);
this.xAxis[0].setExtremes(null, lastPoint.x + 0.5);
}
}
},
Live demo: https://jsfiddle.net/BlackLabel/54a6jdgy/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
I have some data that was taken every minute. But there are irregular gaps in it. I'm using stockchart (v6.0.5) with the 'line' chart type and my xAxis is 'datetime'. I want that the gaps don't cut the xAxis in pieces but rather reflect the time that has passed as in http://jsfiddle.net/VwkHu/177/ .
I don't really want to fill in Null values in my dataset as the gaps can be large.
How can I get this behavior with stockchart?
BTW:
If I change in the upper mentioned fiddle to stock chart by adding StockChart the following way
...
$('#container').highcharts('StockChart',{
...
then the gaps don't reflect the size of the actual gap in the data but are constant or equal the gapsize.
Using highstock, you need to set ordinal: false to keep missing times in the chart.
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data for nights or weekends will not take up space in the chart.
Like this:
xAxis: {
ordinal: false,
...
},
$(function() {
$('#container').highcharts('StockChart',{
chart: {
type: 'line'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
},
ordinal: false
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
series: [{
name: 'Winter 2007-2008',
gapSize: 5,
//connectNulls: true,
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
[Date.UTC(1970, 9, 27), 0],
[Date.UTC(1970, 10, 10), 0.6],
[Date.UTC(1970, 10, 18), 0.7],
[Date.UTC(1970, 11, 2), 0.8],
[Date.UTC(1970, 11, 9), 0.6],
[Date.UTC(1970, 11, 16), 0.6],
[Date.UTC(1970, 11, 28), 0.67],
[Date.UTC(1971, 0, 1), 0.81],
[Date.UTC(1971, 0, 8), 0.78],
[Date.UTC(1971, 0, 10), 0.98],
[Date.UTC(1971, 0, 27), 1.84],
[Date.UTC(1971, 1, 10), 1.80],
[Date.UTC(1971, 1, 18), 1.80],
[Date.UTC(1971, 1, 24), 1.92],
[Date.UTC(1971, 2, 4), 2.49],
[Date.UTC(1971, 2, 11), 2.79],
[Date.UTC(1971, 2, 15), 2.73],
[Date.UTC(1971, 2, 25), 2.61],
[Date.UTC(1971, 3, 2), 2.76],
[Date.UTC(1971, 3, 6), 2.82],
[Date.UTC(1971, 3, 13), 2.8],
[Date.UTC(1971, 4, 3), 2.1],
[Date.UTC(1971, 4, 26), 1.1],
[Date.UTC(1971, 11, 9), 0.25],
[Date.UTC(1971, 11, 12), 0]
]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Working JSFiddle example: http://jsfiddle.net/ewolden/VwkHu/183/
http://jsfiddle.net/vUdGJ/
$(function () {
$('#container').highcharts(
{
"xAxis": {
"startOnTick": true,
"endOnTick": true,
"type": "datetime",
"min": Date.UTC(2014, 1, 2),
"max": Date.UTC(2014, 4, 31)
},
"series": [{
"type": "line",
"data": [
[Date.UTC(2014, 1, 2, 11, 0, 0, 0), 30],
[Date.UTC(2014, 1, 3, 11, 0, 0, 0), 24],
],
}]
}
);
});
If you drag the divider to the left, the first point disappears behind the y-axis.
The model could not be much simpler. Is this a bug?
It's caused by setting startOnTick: true. As you can see, the first tick on a chart is 3rd of Feb (even if you specify to be 2nd of a Feb). Simply remove that option and will be working fine: http://jsfiddle.net/vUdGJ/1/
I got a little problem in HighStocks: I have two area series which are stacked. The problem: In the navigator at the bottom, just the first series is shown, not the resulted stacked chart.
(see http://jsfiddle.net/Je8eG/)
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
plotOptions: {
area: {
stacking: 'normal'
}
},
series: [{
name: 'Series 1',
data: [
[Date.UTC(2010, 0, 1, 10), 53.5],
[Date.UTC(2010, 0, 1, 10, 30), 59.5],
[Date.UTC(2010, 0, 1, 11), 53.5],
[Date.UTC(2010, 0, 1, 12), 28.5],
[Date.UTC(2010, 0, 1, 13), 55.2]
],
type: 'area'
}, {
name: 'Series 2',
data: [
[Date.UTC(2010, 0, 1, 10), 29.9],
[Date.UTC(2010, 0, 1, 10, 30), 29.9],
[Date.UTC(2010, 0, 1, 11), 29.9],
[Date.UTC(2010, 0, 1, 12), 61.5],
[Date.UTC(2010, 0, 1, 13), 53.4]
],
type: 'area'
}]
});
Is there a fix or workaround?
Something like this is not supported. You can set specific series to a navigator, so I advice to sum on your own stacked series, and then pass to navigator, see: http://api.highcharts.com/highstock#navigator.series