I am creating a chart with two Y axes – distance and duration. Each Y axis will have multiple series ( run, bike, swim, etc.) stacked on top of one another. Duration is a stacked area or areaspline and distance is a stacked column chart.
Here is the jsfiddle for the chart. http://jsfiddle.net/baberuth22/u5QCB/3/
$(function() {
var run_data = [[1324771200000,2928000],[1325376000000,2148000],[1327190400000,1001000],[1327795200000,2336000],[1329609600000,2403000],[1330214400000,2456000],[1330819200000,3615000],[1334448000000,1753000],[1338681600000,1998000],[1348358400000,1897000],[1350777600000,8130000],[1353801600000,9402000],[1354406400000,9612000],[1355011200000,4500000]];
var swim_data = [[1324771200000,1726000],[1348963200000,14520000],[1350777600000,15540000],[1352592000000,7380000],[1353801600000,4571000],[1354406400000,4500000]];
var bike_data = [[1327190400000,4289000],[1330214400000,4650000],[1330819200000,3655000],[1331424000000,2217000],[1334448000000,4349000],[1348963200000,4241000],[1350777600000,15014000],[1351382400000,4118000],[1353196800000,3362000],[1353801600000,11944000],[1354406400000,5997000]];
var strength_data = [[1324771200000,3275000],[1334448000000,600000],[1350777600000,4403000],[1351382400000,3339000],[1351987200000,4175000],[1353196800000,3754000],[1354406400000,3890000]];
var yoga_data = [[1351382400000,2656000],[1352592000000,609000]];
var other_data = [[1352592000000,309000],[1353196800000,186000]];
var run_distance_data = [[1324771200000,4],[1325376000000,3.1],[1327190400000,1.5],[1327795200000,3],[1329609600000,3.4],[1330214400000,3.5],[1330819200000,4.9],[1334448000000,2.5],[1338681600000,2.7],[1348358400000,2.6],[1350777600000,10.2],[1353801600000,7.6],[1354406400000,17.2],[1355011200000,10],[1331424000000,0],[1348963200000,0],[1351382400000,0],[1351987200000,0],[1352592000000,0],[1353196800000,0]];
var swim_distance_data = [[1324771200000,0.5],[1348963200000,1.5],[1350777600000,3.1],[1352592000000,0.2],[1353801600000,6.2],[1354406400000,3.1],[1325376000000,0],[1327190400000,0],[1327795200000,0],[1329609600000,0],[1330214400000,0],[1330819200000,0],[1331424000000,0],[1334448000000,0],[1338681600000,0],[1348358400000,0],[1351382400000,0],[1351987200000,0],[1353196800000,0],[1355011200000,0]];
var bike_distance_data = [[1327190400000,19.4],[1330214400000,20.2],[1330819200000,16.1],[1331424000000,9.9],[1334448000000,16.3],[1348963200000,16.1],[1350777600000,168],[1351382400000,15.5],[1353196800000,10.7],[1353801600000,47.2],[1354406400000,24],[1324771200000,0],[1325376000000,0],[1327795200000,0],[1329609600000,0],[1338681600000,0],[1348358400000,0],[1351987200000,0],[1352592000000,0],[1355011200000,0]];
var other_distance_data = [[1352592000000,3.1],[1353196800000,3],[1324771200000,0],[1325376000000,0],[1327190400000,0],[1327795200000,0],[1329609600000,0],[1330214400000,0],[1330819200000,0],[1331424000000,0],[1334448000000,0],[1338681600000,0],[1348358400000,0],[1348963200000,0],[1350777600000,0],[1351382400000,0],[1351987200000,0],[1353801600000,0],[1354406400000,0],[1355011200000,0]];
// one week - 604800000
var chart = new Highcharts.Chart({
chart: {
renderTo: 'graph1',
zoomType: 'x'
},
title: {
text: 'Workout Duration By Week'
},
subtitle: {
text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Drag your finger over the plot to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: [{
type: 'datetime',
//y-axis will be in milliseconds
dateTimeLabelFormats: { //force all formats to be hour:minute:second
second: '%H:%M:%S',
minute: '%H:%M:%S',
hour: '%H:%M',
day: '%H'
},
title: {
text: 'Duration (hours)'
},
min: 0
}
,
{
min: 0,
title: {
text: 'Distance ' + '(miles)'
},
opposite: true}
],
tooltip: {
formatter: function() {
var range_start_date = new Date(this.x);
//var range_start_date = new Date(this.x * 1000);
var range_end_date = new Date(range_start_date);
range_end_date.setDate(range_end_date.getDate() + 6);
var unix_end_datetime = range_end_date.getTime();
var return_string = '<b>' + this.series.name + '</b> ' + Highcharts.dateFormat('%b %e', this.x) + ' - ' + Highcharts.dateFormat('%b %e', unix_end_datetime) + '<br/>';
if (this.series.index <= 5){
return_string += Highcharts.dateFormat('%H hours %M minutes', this.y) + ' ';
}else{
return_string += this.y + ' (miles) ';
}
return return_string;
}
},
plotOptions: {
column: {
pointRange: 604800000,
stacking: 'normal'
},
area: {
stacking: 'normal'
}
},
series: [
{
name: 'Run',
data: run_data,
type: 'column'},
{
name: 'Swim',
data: swim_data,
type: 'column'},
{
name: 'Bike',
data: bike_data,
type: 'column'},
{
name: 'Strength',
data: strength_data,
type: 'column'},
{
name: 'Yoga',
data: yoga_data,
type: 'column'},
{
name: 'Other',
data: other_data,
type: 'column'}
,
{
name: 'Run',
data: run_distance_data,
yAxis: 1,
type: 'area'},
{
name: 'Swim',
data: swim_distance_data,
yAxis: 1,
type: 'area'},
{
name: 'Bike',
data: bike_distance_data,
yAxis: 1,
type: 'area'},
{
name: 'Other',
data: other_distance_data,
yAxis: 1,
type: 'area'
}
]
});
var d = new Date();
chart.xAxis[0].setExtremes(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate() - 7), Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
chart.showResetZoom();
});
It is the top chart.
The stacking doesn’t seem to work properly and I do not see any examples of multiple axes stacked on the highcharts demo page. http://www.highcharts.com/demo/combo-multi-axes or http://www.highcharts.com/demo/column-stacked , but not both.
If I set both axes to ‘column’ type, the stacking works, but the bars are on top of each other. Ideally I’d like a semi-transparent area chart in the background with column in front.
I think it actually works with two stacks the way you are doing it, but the stacking of the area series breaks because data points are not present for every date. So if you make sure when preprocessing that every data has a data point in the area series, I think it should work.