The series are fine, but xaxis is reversed,but the code "reversed: true," it is necessary for the proper order of Yaxis
In summary, I need solely reversed Xaxis, for this example:
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
},
xAxis: {
type: 'datetime',
reversed: true,
labels: {
formatter: function() {
return Highcharts.dateFormat('%m/%d/%y', this.value, true);
}
},
showLastLabel: true
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointInterval: 1 * 3600 * 1000,
pointStart: (new Date()).getTime() - 1 * 24 * 3600 * 1000
}]
});
});
http://jsfiddle.net/raposu/K5tpe/4/
Ok, but if you remove reversed, then reversed Yaxis too. I need the data as they are in the example.
Are inverted data 24 hours ago until now. If you have reversed: false, the time data is correct but the data is invested, if I reversed: true, the data is correct but the time invested.
is tongue twister of hard to explain,
thanks
You say you do not want it reversed but you have reversed: true set. But this is because you want the data in appropriate order. But you are assigning an arbitrary date via (new Date()).getTime() - 1 * 24 * 3600 * 1000. But this is in ascending order...but you are setting reversed: true so it is descending order...but you want it in ascending order.
So, remove reversed: true and you have data going in ascending chronological order (which is a good thing). Since you do not provide an example of an expected outcome this is the best answer I can come up with.
EDIT:
If you want your data to be in the ascending order starting from N hours ago you should first set it so that you send in the x/y values at the same time instead of doing point start. I find it is always better to send in time/value pairs. See this updated example.
I found it finally..... .reverse()
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse(),
pointInterval: 1 * 3600 * 1000,
pointStart: (new Date()).getTime() - 1 * 24 * 3600 * 1000
}]
http://jsfiddle.net/K5tpe/7/
thanks
Related
I design my graph using Highchart. But I can not customize it using CSS and js. Now this time I can't remove the extra grid line from the chart that I have shown in my screenshot. I try to modify d="M 77.5 45 L 77.5 365" from my code, but I can't get it to work. How can I solve this problem!
Any help will be appreciated.
Here is a screenshot for clarity:
Screenshot
You need to force the axis to start or end on a tick. Use this option with the minPadding option to control the axis start or maxPadding for end.
Highcharts.chart('container', {
xAxis: {
startOnTick: true,
endOnTick: true,
gridLineWidth: 1,
type: 'datetime'
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 3 * 24 * 3600 * 1000
}]
});
https://api.highcharts.com/highcharts/xAxis.startOnTick
https://api.highcharts.com/highcharts/xAxis.endOnTick
https://jsfiddle.net/BlackLabel/305z7yf1/1/
EDITED
I simplified your example, to your goals.
https://jsfiddle.net/BlackLabel/305z7yf1/2/
I'd like to plot progress versus timeline on a 2 x-axis bullet chart.
See this JSFiddle for what I currently have: http://jsfiddle.net/ejhnnbk0/
Highcharts.chart('container3', {
xAxis: [{
type: 'linear',
},{
type: 'datetime',
opposite: true
}],
yAxis: {
plotBands: [{
from: 0,
to: 14,
color: '#f00'
}, {
from: 14,
to: 20,
color: '#ff0'
}, {
from: 20,
to: 29,
color: '#0f0'
}],
labels: {
format: '{value}'
},
title: null
},
series: [{
data: [{
y: 16,
target: 21
}]
}],
tooltip: {
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
}
});
What I am looking to implement is something like this, where a date range is on the top x-axis, and a numeric range is on the bottom x-axis. I'd like the bullet to represent progress (in this case, 16 out of 24), and I'd like the target line to indicate the current date in the date range (in this case, somewhere before 02/12/2018).
Any thoughts would be appreciated.
Yes, it's possible.
Fist of all notice that your chart is inverted so you need to add another y axis (not x).
There're going to be 2 series: first that displays column (associated with first y axis) and second that displays target (associated with second y axis). In this case grouping has to be disabled (otherwise column and target won't be aligned properly).
Since there's no need to show target for the first series it's type can be changed to column:
series: [{
type: 'column',
data: [{
y: 16,
}]
}, {
yAxis: 1,
data: [{
target: Date.UTC(2018, 0, 7)
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/e847jztb/
I'm trying to do a Highcharts chart using the datetime x-axis label to have my main labels at 1 month intervals. I would then like to use a minorTick on the week intervals. My data is 1 point per day. The problem I'm facing is my minorTicks are appearing as grid lines on the chart instead of as sub-ticks. I'd like them to be outside, or at least very small. How can I actually have these minor ticks as ticks, and not grid lines? I otherwise do not want any grid lines at all.
http://jsfiddle.net/590ktt7j/
$('#container').highcharts({
yAxis: {
gridLineWidth:0
},
xAxis: {
minorTickInterval: 7 * 24 * 3600 * 1000,
minorTickPosition:'outside',
minorTickLength:10,
type:'datetime',
min: Date.UTC(2014, 0, 1),
max: Date.UTC(2014, 11, 31),
labels: {
step: 1,
},
dateTimeLabelFormats: {
month: '%b',
year: '%Y'
}
},
// sample data, in reality goes 365 days of year
series: [{
data: [[1388984399000,100], [1388973600000,200],[1389060000000,300],[1389146400000,400],[1389232800000,500],[1389319200000,400],[1389405600000,200]]
}]
});
The grid lines are independent of the ticks. Add these 2 options to your xAxis config:
xAxis: {
minorTickWidth: 1, // this is by default 0 and is why you don't see ticks
minorGridLineWidth: 0, // this disables the grid lines
Fixed fiddle.
Is it possible to have labels on datetime xAxis that correspond to dataGrouping?
For example I have dataGrouping such that data are grouped into days / weeks / months / year:
dataGrouping : {
groupPixelWidth: 250,
units : [
['day', [1]], ['week', [1]], ['month', [1]], ['year', [1]]
]
}
http://jsfiddle.net/CHR7F/2/
There is plenty of options in the highcharts api, but no one seems to achieve the same result as dataGrouping.
The most promising was:
xAxis: {
labels: {
step: 1
}
}
but still there are two weeks between ticks while data is grouped by months.
I found a solution with tickPositioner. It is still a workaround, but at least it works.
xAxis: {
tickPositioner: function(){
ticks = this.series[0].processedXData;
ticks.info = this.series[0].currentDataGrouping;
return ticks;
}
}
http://jsfiddle.net/CHR7F/3/
On thesame level as setting units you cna set datetimeLebelFormats, see: http://api.highcharts.com/highstock#plotOptions.area.dataGrouping.dateTimeLabelFormats
I am trying to create a column highchart that is stacked and grouped, but I only want the last few x-values to have multiple groups/stacks. The first x-values only have one group/stack.
To explain, I am charting historical values and then comparing optimistic and conservative forecast scenarios.
Here is my jsFiddle. A better way to do this?
series: [{
name: 'Thermal',
data: [5, 3, 4, 5],
stack: 'conservative',
color:'blue'
}, {
name: 'PV',
data: [3, 4, 4, 6],
stack: 'conservative',
color: 'red'
}, {
name: 'Thermal',
data: [0, 0, 0, 10],
stack: 'optimistic',
color: 'blue',
showInLegend: false
}, {
name: 'PV',
data: [0,0,0, 12],
stack: 'optimistic',
color: 'red',
showInLegend: false
}]
Basically highcharts is awesome and you can stack bars and give them relevant data on a point basis. I passed the following for my series array, with additional attrs to passs to the tooltip. See jsFiddle here:
series:[
{name:'Apples', color:'green', data:[{x:0, y:10, year: '2009', scenario: 'historic'}, {x:1, y:11,year: '2010', scenario: 'historic'} ]},
{name:'Oranges', color:'orange', data:[{x:0, y:2, year: '2009', scenario:'historic'}, {x:1, y:5, year: '2010', scenario:'historic'}]},
{name:'Apples',color:'green', data:[{x:1.75, y:12, year:'2011',scenario:'optimistic'}], showInLegend: false },
{name:'Apples', color:'green',data:[{x:2.25, y:3,year:'2011', scenario:'conservative'}], showInLegend: false },
{name:'Oranges',color:'orange', data:[{x:1.75, y:11, year:'2011',scenario:'optimistic'}], showInLegend: false},
{name:'Oranges',color:'orange', data:[{x:2.25, y:6, year:'2011',scenario:'conservative'}], showInLegend: false},
]