I have very simple array to be plotted, monthly, starting from Jan'10.
Following is my data. 0 is for Jan'10, 1 for feb'10 and so on.
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
I used the following code, to plot the graph (jsfiddle).
Highcharts.chart('container', {
xAxis: {
type: 'datetime'
},
plotOptions: {
series: {
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000*30 // 30 days
}
},
series: [{
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
}]
});
This worked fine just one problem.
Problem:
Because I have given time interval to be 30days, second point is having x coordinate to be 31 Jan (instead of expected 1 feb).
Is there a way to tell highcharts that my data is monthly.
One solution I know that will work is explicitly giving each coordinate to highchart as this demo.
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
But I found out this graph which has yearly data automatically plotted by highcharts without explicitly being given all years on x-axis, explicitly, I am sure there must be a way to do this for monthly data as well.
Set pointIntervalUnit to month:
series: [{
pointStart: Date.UTC(2010, 0, 1),
pointIntervalUnit: 'month',
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
}]
Live demo: https://jsfiddle.net/BlackLabel/vezdp4nf/
API Reference: https://api.highcharts.com/highstock/series.column.pointIntervalUnit
Related
I want to create a combination between a standard telemetry graph and a graph with non-telemetric values spread over a time axis.
I have a number of examples of graphs for example:
not telemetric data example
I thought to use either a bullet graph or in the x range.
But I was able to use these in a way that is synchronized with the normal graph.
ֿI am happy to hear ideas for a similar solution
To combine, such types of the series, you have to at lest create separate x axes. You can also create separate charts or panes.
Highcharts.chart('container', {
xAxis: [{
type: 'datetime'
}, {
type: 'linear'
}],
series: [{
type: 'xrange',
xAxis: 0,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 1,
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}]
}, {
type: 'line',
data: [2, 2, 2, 2, 2, 2, 2],
xAxis: 1
}]
});
Live demo: http://jsfiddle.net/BlackLabel/j57q0z9n/
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/
I need create a highchart like this image
so what options i should set for chart?
for straight lines between markers and empty circle for markers and have dotted lines in background...
To make a step line, instead of a regular line, use series.step. To change the markers use series.marker. And to make the grid lines dashed, use yAxis.gridLineDashStyle. The Highcharts API reference is excellent and has lots of examples.
http://jsfiddle.net/jbo9jag5/6/
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: {
gridLineDashStyle: 'longdash'
},
series: [{
data: [1, 2, 3, 4, 3, 6, 7, 1, 9],
step: 'right',
name: 'Right',
marker: {
fillColor: '#FFFFFF',
radius: 5,
lineWidth: 2,
lineColor: null // inherit from series
}
}]
});
I tried to create a column chart in highcharts to display monthly data on a datetime axis. The problem is that the spacing between the bars is different. For example after the month february there is only a small spacing whereas after other months the spacing is bigger. Maybe this is happening because the month feburary only has 28 days.
Anyway here is my code:
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: [{
type: 'datetime'
}, {
type: 'datetime',
visible: false
}],
plotOptions: {
column: {
grouping: false,
groupPadding: 0,
pointPadding: 0,
pointPlacement: 'between'
}
},
series: [{
name: 'Year',
xAxis: 1,
data: [25],
zIndex: 4,
color: '#222',
pointStart: Date.UTC(2017, 0, 1),
pointInterval: 1,
pointIntervalUnit: 'year'
}, {
name: 'Month',
data: [50, 100, 130, 160, 170, 200, 170, 165, 250, 200, 230, 160],
pointStart: Date.UTC(2017, 0, 1),
pointInterval: 1,
pointIntervalUnit: 'month',
zIndex: 2,
color: 'red',
}],
});
http://jsfiddle.net/bosngxk1/2/
I also added another bar for the whole year. You notice the already mentioned problem with the spacing and that the year area is a bit too wide. Do you have any ideas how to fix this?
If you do not mind, you can use Highstock. There is an axis option called ordinal. With that set to true (by default), all points are equally spaced. Take a look at the example posted below.
API Reference:
https://api.highcharts.com/highstock/xAxis.ordinal
Example:
http://jsfiddle.net/k0k2n83p/
Well, I guess there is no other option than using categorical x axis. I don't like this solution since I somehow have to hardcode datetime values instead of using datetime formatters and so on.
Anyway by defining the xAxis as follows I get the desired chart layout.
xAxis: [{
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
tickmarkPlacement: 'on'
},
{
categories: [
'2017'
],
visible: false
}]
Fiddle: http://jsfiddle.net/hho4zrso/
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