In a heat map with datetime axis.
If I do:
myData.push([column,row,1]);
It works, but If I change column for the ms it doesnt display anything in the cell.
myData.push([1407264705000,row,1]);
datetime:
xAxis: {
type: 'datetime',
},
Related
I have here https://jsfiddle.net/ezhp5a4j/6/ an area and a stacked bar chart But I need to achieve something like : adding another series:column behind this actual but not stacked, starting from jan. 2010 and end dec. 2010 with a certain position in y axis, my need is quiet simple, but I don't know how achieve, I think I need another X axis ?
Actually I have:
xAxis: {
type: 'datetime',
ordinal: false
},
Maybe I need add array to this or so?
You could do this with a second axis, but it's not necessary.
If you add your new data series, with some additional parameters to control the size and spacing, it can all use the same x axis.
Example:
{
"name": 'Summary',
type: 'column',
grouping: false, <-- make sure they don't group with the other series
stacking: false, <-- make sure they don't stack on the other series
color: 'rgba(0,0,0,0.5)',
pointRange: 86400000 * 365, , <-- 1 year; set to desired time frame
pointInterval: 86400000 * 365, <-- 1 year; set to desired time frame
pointPadding: 0.01,
groupPadding: 0,
data: [10000, 15000, 9000, 13000]
}
Updated fiddle:
https://jsfiddle.net/jlbriggs/ezhp5a4j/15/
Output:
EDIT for comment:
To add a second axis, you change the xAxis object to an array of objects, like this:
xAxis: [{
type: 'datetime',
ordinal: false
},{
linkedTo: 0,
type: 'datetime',
ordinal: false
}]
If they are going to have different scales, I am not sure that it makes any sense to plot them together, but in that case, you would remove the linkedTo: 0
Then, in your data, you need to specify which data series are plotted on the second axis, by adding xAxis: 1 to the series options (you don't need to specify xAxis: 0 for the other series, as 0 is the default.
Since you have specified a pointStart in your plotOptions, if the series plotted on the second axis will have a different scale, you will need to specify a separate pointStart in that series options.
Update example fiddle:
https://jsfiddle.net/jlbriggs/ezhp5a4j/16/
Im using Highcharts to generate a line chart. On my x-axis, I use dates and its all displaying but for some reason its displaying slanting.
How can I fix it? Here is my x-axis properties.
xAxis: {
categories: report_2_weekly_categories,
tickInterval: 180,
labels:{
format : '{value} CST'
}
},
Two Part Q:
Why is high charts not correctly aligning and displaying the following date on the x axis?
How can I align the date on the x axis with the points in each series?
I have tried adjusting to tickinterval to various values but to no avail on either issue.
tickPixelInterval: 200
Fiddle->http://jsfiddle.net/EwpWh/
Use datetime axis instead of linear, see: http://jsfiddle.net/Fusher/EwpWh/5/
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%m/%d', this.value);
}
},
tickPixelInterval: 200
},
However if you want to have ticks exactly in the same place as points are, you need to use one of:
tickPositions: http://api.highcharts.com/highstock#xAxis.tickPositions
tickPositioner: http://api.highcharts.com/highstock#xAxis.tickPositioner
This is how the chart looks like at the moment:
http://jsfiddle.net/VunVq/1/
On the x axis instead displaying the full date, I just want to display year.
e.g 2008 2009 2010
The tooltip should display the full date though.
xAxis: {
categories: ['2008-03-31', '2009-03-31', '2010-03-31']
},
I read the api reference but cannot figure out how to display only year in x axis, maybe because its past my bedtime and my mind is not working.
Use the label's formatter callback JavaScript function to format the label.
xAxis: {
categories: ['2008-03-31', '2009-03-31', '2010-03-31'],
labels: {
formatter: function () {
return this.value.split('-')[0];
}
}
}
DEMO
You can also set type xaxis as datetime (http://api.highcharts.com/highcharts#xAxis.type) and use pointStart() / pointInterval for series.
I'm relatively new to HighCharts, and I would like to have two Y-axes where the data is always expressed in terms of the left-hand (primary) Y-Axis, but there is a constant function whereby you can translate the data into the terms on the right-hand (secondary) Y-Axes.
Take, for example, http://jsfiddle.net/M2EVb/
It's a constant well-known function to translate from Fahrenheit to Celsius. Even though I have specified the Primary Y-Axis as ranging from 32 to 212 with a tick interval of 18, and the Secondary Y-Axis as ranging from 0 to 100 with a tick interval of 10, the two axes don't line up properly; likely due to the "cels" data. But the point is that I would like to have the "cels" data just be another set of Fahrenheit temps, and have the right-hand Y-Axis values be the proper Celsius "translations" of their respective Fahrenheit values, and always show up.
Use the label's formatter function in the yAxis configuration to convert your yAxis ticks from F to C like this:
yAxis: [{
title: {
text: 'Temperature (C)'
},
labels: {
formatter: function() {
return YourConversionFunction(this.value) +' C';
}
}
}]
Make sure you are defining your Series using the same dataset (the F data):
series: [{
type: 'area',
name: 'Temp (F)',
data: Far_TempData,
yAxis: 0,
xAxis: 0
}, {
type: 'area',
name: 'Temp (C)',
data: Far_TempData,
yAxis: 1,
xAxis: 0,
lineWidth:0,
fillOpacity: 0.01,
visible:true
}]