Related
I have a series that is composed of:
Daily values, until a certain date
6-monthly values, from that date
onward
I'd like to increase the tick interval exclusively for the second part of the chart, so I can compact the data. To be clear, I want the same space that represents one month on the left side of the chart to represent 6 months on the right side.
I'm not sure if Highcharts allows this... I think there can be two different approaches:
Create two series with two different axis and set one axis after the other
Set different tickInterval for the same axis.
Using tickPositions and tickPositioner I've only managed to show more or less ticks, but always keeping their position on the time axis.
This is my code:
Highcharts.chart('container', {
chart: {
zoomType: 'xy',
animation: false
},
title: {
text: 'Some data'
},
legend: {
verticalAlign: 'bottom',
borderWidth: 0
},
xAxis: {
type : 'datetime',
tickInterval: 30 * 24 * 3600 * 1000,
labels: {
useHTML: true,
rotation: -90
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b-%y',
year: '%Y'
},
plotLines: [{
color: 'gray',
dashStyle: 'longdashdot',
value: 1536278400000,
width: 1,
label: {
text: 'Selected Date'
}
}]
},
yAxis: {
title: {
text: null
},
maxZoom: 0.1
},
series: jsonData
});
Here's a jsfiddle with a subset of my original data.
Which would be the best way to achieve this?
Highcharts does not allow it by default, but you can use a workaround. You can create two xAxis with right size proportion and two series, like in an example below:
xAxis: [{
type: 'datetime',
endOnTick: false,
tickInterval: 30 * 24 * 3600 * 1000,
max: 1536278400000,
width: '65%',
labels: {
useHTML: true,
rotation: -90
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b-%y',
year: '%Y'
},
plotLines: [{
color: 'gray',
dashStyle: 'longdashdot',
value: 1536278400000,
width: 1,
label: {
text: 'Selected Date'
}
}]
}, {
min: 1536278400000,
startOnTick: false,
offset: 0,
type: 'datetime',
tickInterval: 180 * 24 * 3600 * 1000,
labels: {
useHTML: true,
rotation: -90
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b-%y',
year: '%Y'
},
width: '35%',
left: '65%'
}]
Live demo: https://jsfiddle.net/BlackLabel/zxd4j5tn/
The navigator in Highstock only seems to affect the first xAxis. The second xAxis, as in the example linked to below, isn't rescaled, and always shows all data.
See jsfiddle below:
https://jsfiddle.net/wardrop/t9ug4pm7/7/
Does anyone know how to fix this?
You can set extremes in the second axis manually after extremes are set in the first axis.
xAxis: [{
type: 'datetime',
minRange: 24 * 3600000, // 1 day
labels: {
align: "left",
rotation: 45
},
dateTimeLabelFormats: {
day: '%e %b %Y'
},
events: {
afterSetExtremes: function (e) {
this.chart.xAxis[1].setExtremes(e.min, e.max, true, false);
}
}
},
example: https://jsfiddle.net/t9ug4pm7/9/
You can also linked two axis, so the linked axis' extremes will follow after the master axis. But for columns it is needed to define pointRange because without it, columns might be drawn incorrectly.
, { //axis
type: 'datetime',
linkedTo: 0, // linked to master axis
minRange: 24 * 3600000,
lineWidth: 0,
tickWidth: 0,
labels: {enabled: false},
opposite: true
}
series: [{
id: 'daily',
name: 'Daily',
type: 'column',
color: 'rgb(124, 181, 236)',
data: data['daily'],
pointRange: 1000 * 3600 * 24,
},
example: https://jsfiddle.net/t9ug4pm7/11/
I am trying to finalize a graph where I report the daily production within a month and a couple of other daily based series. The graph is always set at full scale, meaning that I always show all the days within a month, even if I do not have values for them, whichever is the reason why. On the first day of each month, I display the graph of the previous month, as a report.
This is the jfiddle I've set up so that you can have an idea. The problem I've been fighting against is that, whatever I try to do, Highcharts simply ignores me and displays wrong labels on x axis. So the days start from 2, go throughout the whole month to the last and they end with 1.
This is the code for my chart:
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'tab-month-graph',
zoomType: 'xy'
},
title: {
text: 'Daily - August 2015'
},
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
labels: {
align: 'center',
text: 'Giorni',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
},
dateTimeLabelFormats: {
day: '%e'
}
},
yAxis: [{ // Primary yAxis
title: {
text: 'Produzione giornaliera',
style: {
color: Highcharts.getOptions().colors[1]
}
}
},
{ // Secondary yAxis
title: {
text: 'PR giornaliero',
style: {
color: Highcharts.getOptions().colors[0]
}
},
min: 0,
startOnTick: false,
opposite: true
}],
legend: {
enabled: false
},
series: [{
name: 'Prod.',
type: 'column',
data: [[1438466230000, 4603.36],[1438552630000, 4264.92],[1438639030000, 3108.05],[1438725430000, 2047.03],[1438811830000, 2270.39],[1438898230000, 2258.2],[1438984630000, 3971.95],[1439071030000, 3784.45],[1439157430000, 3674.53],[1439243830000, 3131.95],[1439330230000, 1963.13],[1439416630000, 3333.52],[1439503030000, 4161.8],[1439589430000, 4408.59],[1439675830000, 2968.83],[1439762230000, 2808.05],[1439848630000, 4439.77],[1439935020000, 3746.48],[1440021430000, 4980],[1440107830000, 3683.91],[1440194230000, 4480.78],[1440280630000, 4406.48],[1440367030000, 4518.98],[1440453430000, 4492.73],[1440539830000, 3924.14],[1440626230000, 4062.89],[1440712630000, 3225.47],[1440799030000, 3213.75],[1440885430000, 4631.95],[1440971830000, 4471.17],[1441058230000, 4223.91]],
color: '#89CE7F',
dataLabels: {
enabled: true,
rotation: -90,
color: '#000000',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
},
{
name: 'PR',
type: 'spline',
yAxis: 1,
lineWidth: 0,
marker: {
radius: 6
},
data: [[1438466230000, 73.36],[1438552630000, 75.08],[1438639030000, 57.54],[1438725430000, 38.85],[1438811830000, 39.14],[1438898230000, 63.78],[1438984630000, 76.03],[1439071030000, 75.78],[1439157430000, 77.61],[1439243830000, 79.74],[1439330230000, 77.35],[1439416630000, 73.98],[1439503030000, 75.79]],
color: '#AA0000',
tooltip: {
valueSuffix: ' %'
}
},
{
name: 'PR Cont.',
type: 'spline',
yAxis: 1,
lineWidth: 0,
marker: {
radius: 5,
symbol: 'circle'
},
data: [[1438466230000, 78.84],[1438552630000, 79.85],[1438639030000, 75.16],[1438725430000, 59.15],[1440971830000, 78.5],[1441058230000, 78.45]],
color: '#BBBB00',
tooltip: {
valueSuffix: ' %'
}
}
],
tooltip: {
xDateFormat: '%A, %d %B %Y',
valueSuffix: ' kW',
shared: true // LEGENDA CONDIVISA
},
plotOptions: {
series: {
pointStart: Date.UTC(2015, 7, 1),
pointRange: 24 * 3600 * 1000
}
}
});
});
I've read tons of posts on Stack Overflow, tried tons of suggestions, I've even tried this post tinyurl.com/psbzxeh on HighCharts official forum which is referred to a similar problem, but it did not solve my issue.
Could someone point me out to the right solution?
Just to clarify things: columns look like translated by one day, because of that time (21:57:10 UTC) - which is almost another day (without UTC it's 23:57:10 for GMT+2:00). In general, if you have daily data, then it's better to use 00:00:00 as this is when exactly date starts. Manipulating JSON shouldn't be that hard, see:
function modify(data) {
var time;
data.map(function(e) {
time = new Date(e[0]);
time.setUTCHours(0);
time.setUTCMinutes(0);
time.setUTCSeconds(0);
e[0] = time.getTime();
return e;
});
return data;
}
And:
series: [{
name: 'Prod.',
type: 'column',
data: modify([
[1438466230000, 4603.36],
...
])
}]
Demo: http://jsfiddle.net/p7vnqmt7/3/
Note: to remove extra tick at the last place on the axis, you can simply set xAxis.max.
And to answer question in the comment: no, pointInterval shouldn't be used when you have data as x-y pair.
try below function above your highchart function and set xAxis min and max.
Use very first timestamp(date) as min and last timestamp(date) as max value.
$( function () {
Highcharts.setOptions( {
lang : {
rangeSelectorZoom : ' '
},
global : {
useUTC : false
}
} );
} );
I have been creating a Highstock chart and I am facing problem in fixing xAxis interval in date/time formatter code here according to live stock data on 30 minutes interval.
Here is the code of my chart:
Highcharts.setOptions({
global: {
timezoneOffset: 4 * 60
}
});
var dataObject = {
chart: {
renderTo: 'container',
defaultSeriesType: 'area',
width: '1280',
height: '640'
},
plotOptions: {
series: {
lineWidth: 1
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '<br/>%H:%M:%S',
minute: '<br/>%H:%M:%S',
hour: '<br/>%H:%M:%S',
day: '%Y<br/>%b-%d',
week: '%Y<br/>%b-%d',
month: '%Y-%b',
year: '%Y'
},
tickPositions:['09:00:000','12:00:00','15:00:00','18:00:00']
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
min: minRange,
max: maxRange,
tickInterval: 0.5,
title: {
text: 'Last',
margin: 40
}
},
series: [{
name: 'AAPL',
fillColor : {
linearGradient : {
x1: 0,
y1: 0.8,
x2: 0,
y2: 0
},
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
data: [[1440161106000,112.65],[1440161931000,112.65],[1440162841000,112.65],[1440163745000,112.65],[1440164584000,111.41],[1440164704000,111.11],[1440165543000,111.51],[1440166443000,110.96],[1440167345000,110.66],[1440168183000,109.29],[1440168300000,109.5],[1440169144000,109.17],[1440170038000,108.29],[1440170945000,108.92],[1440171784000,108.48],[1440171904000,108.61],[1440172743000,108.81],[1440173640000,108.6],[1440174544000,107.72],[1440175385000,108.03],[1440175503000,107.99],[1440176338000,108],[1440177245000,108.24],[1440178143000,108.4],[1440178983000,108.28],[1440179104000,108.21],[1440179915000,108.2],[1440180844000,108.3],[1440181743000,108.06],[1440182585000,107.71],[1440182705000,107.51],[1440183543000,107.5],[1440184444000,106.53],[1440185345000,106.08],[1440186184000,106.61]] }]
};
chart = new Highcharts.StockChart(dataObject),function(chart){
$('#container').bind("mousewheel",function(event,delta){
var x = event.originalEvent.wheelDelta /120;
console.log(x);
if (delta > 0) {
var min = chart.xAxis[0].getExtremes().min,
max = chart.xAxis[0].getExtremes().max;
chart.xAxis[0].setExtremes((min + 12 * 3600 * 1000),(max - 12 * 3600 * 1000));
} else {
var min = chart.xAxis[0].getExtremes().min,
max = chart.xAxis[0].getExtremes().max;
chart.xAxis[0].setExtremes((min - 12 * 3600 * 1000),(max + 12 * 3600 * 1000));
}
});
};
JSFiddle : jsfiddle.net/zubairsultan/cvnzkv0s/5
You can fix minTickInterval to 3600000 so your xAxis will be "hourly based":
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '<br/>%H:%M:%S',
minute: '<br/>%H:%M:%S',
hour: '<br/>%H:%M:%S',
day: '%Y<br/>%b-%d',
week: '%Y<br/>%b-%d',
month: '%Y-%b',
year: '%Y'
},
minTickInterval: 3600000
},
See your JSFiddle modified here: http://jsfiddle.net/cvnzkv0s/9/
Is that what you want ?
I am trying to apply a dotted line to the last column in my Highcharts line graph but I am unable to find a solution.
Here is my Highcharts code:
}
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { year: '%Y' },
tickInterval: Date.UTC(2012, 0, 1) - Date.UTC(2011, 0, 1),
title: {
text: 'Years', style: {color: '#333', fontFamily: 'sans-serif',}
}
}
yAxis: {
tickInterval: 5,
title: {
text: 'Points', style: {color: '#333', fontFamily: 'sans-serif'}
}
},
series: [{
showInLegend: false
color: '#000'
pointInterval: 31557600000
pointStart: Date.UTC(2005, 0, 1)
data: [data['points_2005'], data['points_2006'], data['points_2007'],
data['points_2008'], data['points_2009'], data['points_2010'], data['points_2011'],
data['points_2012'], data['points_2013']]
}]
I have tried to edit the 2013 data point with this code:
{data['points_2013'], dashStyle: 'shortdot'}
I have attached an image here to explain.
Thanks for your help!
EDIT: Code associated with comments below:
series: [
{
showInLegend: false
color: '#79C417'
pointInterval: 31557600000
pointStart: Date.UTC(2005, 0, 1)
pointEnd: Date.UTC(2012, 0, 1)
data: [searchData['points_2005'], searchData['points_2006'], searchData['points_2007'], searchData['points_2008'], searchData['points_2009'], searchData['points_2010'], searchData['points_2011'], searchData['points_2012']]
}
{
showInLegend: false
color: '#79C417'
pointInterval: 31557600000
pointStart: Date.UTC(2012, 0, 1)
pointEnd: Date.UTC(2013, 0, 1)
dashStyle: 'shortdot'
data: searchData['points_2013']
}