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/
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
I am trying to draw some highcharts graph where the time intervals is being displayed as a thick line based on the date in one line so my series data are start and end times (Timestamp Objects from the database).
Highcharts.chart('container', {
chart: {
spacingTop: 0,
paddingTop: 0,
zoomType: 'x'
},
title: {
text: 'Workink time'
},
yAxis: {
title: {
text: 'Driving time'
}
},
xAxis: {
type: 'datetime',
},
series: [{
name: 'Date',
data: [
[Date.UTC(1970, 9, 21), 0],
[Date.UTC(1970, 10, 4), 0.28],
[Date.UTC(1970, 10, 9), 0.25],
[Date.UTC(1970, 10, 27), 0.2],
[Date.UTC(1970, 11, 2), 0.28],
[Date.UTC(1970, 11, 26), 0.28],
[Date.UTC(1970, 11, 29), 0.47],
[Date.UTC(1971, 0, 11), 0.79],
[Date.UTC(1971, 0, 26), 0.72],
[Date.UTC(1971, 1, 3), 1.02],
[Date.UTC(1971, 1, 11), 1.12],
[Date.UTC(1971, 1, 25), 1.2],
[Date.UTC(1971, 2, 11), 1.18],
[Date.UTC(1971, 3, 11), 1.19],
[Date.UTC(1971, 4, 1), 1.85],
[Date.UTC(1971, 4, 5), 2.22],
[Date.UTC(1971, 4, 19), 1.15],
[Date.UTC(1971, 5, 3), 0]
]
}]
});
It could be look like this picture.
You can add a serie for each of your start and end date tuple, link all of them the first series by setting an id for the first serie
id: 'Installation'
and using
linkedTo: 'Installation',
and set the same color
var color = '#7cb5ec';
this is how the series should look like
series: [{
id: 'Installation',
name: 'Installation',
color: color,
data: [[Date.UTC(1970, 9, 21), 1], [Date.UTC(1970, 9, 22), 1]]
}, {
name: 'Manufacturing',
linkedTo: 'Installation',
color: color,
data: [[Date.UTC(1970, 9, 23), 1], [Date.UTC(1970, 9, 24), 1]]
}, {
name: 'Sales & Distribution',
linkedTo: 'Installation',
color: color,
data: [[Date.UTC(1970, 9, 25), 1], [Date.UTC(1970, 9, 30), 1]]
}, {
name: 'Project Development',
linkedTo: 'Installation',
color: color,
data: [[Date.UTC(1970, 10, 5), 1], [Date.UTC(1970, 10, 10), 1]]
}, {
name: 'Other',
linkedTo: 'Installation',
color: color,
data: [[Date.UTC(1970, 10, 12), 1], [Date.UTC(1970, 10, 30), 1]]
}]
here if the full fiddle http://jsfiddle.net/32mhbyc5/
As I am unsure what the data in your example is meant to represent, I have used the data as #Liviu Boboia parsed it, to provide another example of how to create the broken line visual using the columnrange series type.
Code:
series: [{
data: [
[1, Date.UTC(1970, 9, 21), Date.UTC(1970, 9, 22)],
[1, Date.UTC(1970, 9, 23), Date.UTC(1970, 9, 24)],
[1, Date.UTC(1970, 9, 25), Date.UTC(1970, 9, 30)],
[1, Date.UTC(1970, 10, 5), Date.UTC(1970, 10, 10)],
[1, Date.UTC(1970, 10, 12), Date.UTC(1970, 10, 30)]
]
}]
Fiddle:
http://jsfiddle.net/jlbriggs/0jme6at3/
Output:
I'm not sure what's going on, but dates are being displayed on the axis and in tooltips a month out. So the first date in data on this chart is in July but it shows up as in August and so on. Any ideas? I've put the code in a JSFiddle (http://jsfiddle.net/Z2VGL/1/) and also below:
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: ''
},
plotOptions: {
series: {
lineWidth: 5,
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
radius: 6,
lineColor: null // inherit from series
}
}
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'Ability Score (out of 100)',
style: {
color: '#323A45',
fontWeight: 'bold'
}
},
min: 0
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %b', this.x) + ': ' + this.y;
}
},
series: [{
name: 'Overall Ability',
// 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(2013, 07, 12), 50],
[Date.UTC(2013, 08, 13), 57.9474605576],
[Date.UTC(2013, 08, 14), 58.5667571154],
[Date.UTC(2013, 08, 15), 69.0590308869], ]
}, {
name: 'Target',
data: [
[Date.UTC(2013, 07, 12), 80],
[Date.UTC(2013, 08, 13), 80],
[Date.UTC(2013, 08, 14), 80],
[Date.UTC(2013, 08, 15), 80],
/*
[Date.UTC(2013, 0, 1), 80.0],
[Date.UTC(2013, 1, 1), 80.0],
[Date.UTC(2013, 2, 1), 80.0],
[Date.UTC(2013, 3, 1), 80.0],
[Date.UTC(2013, 4, 1), 80.0],
[Date.UTC(2013, 5, 1), 80.0],
[Date.UTC(2013, 6, 1), 80.0],
[Date.UTC(2013, 7, 1), 80.0]
*/
],
dashStyle: 'longdash',
marker: {
enabled: false
}
}]
});
});
Thanks in advance.
As you can see from this doc: Mozilla JS Reference Date UTC
month
An integer between 0 and 11 representing the month.
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
I need my yaxis in highcharts to always start on 1, not 0. My data sets are whole numbers with 1 being the lowest, i've tried everything combination on min, minrange startontick, that I could think of. The only way I was able to get the yaxis to show 1 instead of zero is with the snippet below. I basically hid the 0, then set a custom label for that plot band giving it a label of 1. Is this the only way?
yAxis: {
min:1,
showFirstLabel: false,
allowDecimals : false,
reversed: true,
plotBands: [{
color: '#EBFAEB',
from: 0,
to: 10,
label: {
text: '1',
style: {
color: '#000000',
},
align: 'left',
verticalAlign: 'top',
y: 0,
x: -15
}
}],
Sample data i'm using
series: [{
name: 'Tokyo',
data: [7, 6, 9, 14, 18, 21, 25, 26, 23, 18, 13, 9]
}, {
name: 'New York',
data: [13, 2, 1, 11, 17, 22, 24, 24, 20, 14, 8, 2]
}, {
name: 'Berlin',
data: [1, 3, 3, 8, 13, 17, 18, 17, 14, 9, 3, 1]
}, {
name: 'London',
data: [3, 4, 5, 8, 11, 15, 17, 16, 14, 10, 6, 4]
}]
It's probably because your tickInterval scales to something such that it wont' start at 0. min:1 should work if you give it an appropriate tickInterval.
Alternatively min:1 combined with startOnTick: false should also work.
EDIT:
I just tried the following combination myself and it works for me. If you tried this before and it didn't work for you then the issue is probably that you the proper case for the different options:
min: 1,
startOnTick: false,
tickInterval: 10
see: http://jsfiddle.net/Reality_Extractor/kTmqg/
Have you tried to use tickPositioner?
http://api.highcharts.com/highstock#yAxis.tickPositioner