javascript - How to make a multi pane on highstock (highcharts) which contain a stacked area graph? -
i want know if possible use 2 pane view (as this example) stacked area graph ?
i tryed make works in fiddle http://jsfiddle.net/g2xdj/2/, but, stacked area graph not displayed.
var stacked_data = [{ name: 'asia', data: [[1364292000,502], [1364294000,635], [1364296000,809], [1364298000,947], [1364300000,1402], [1364302000,3634], [1364304000,5268]] }, { name: 'africa', data: [[1364292000,106], [1364294000,107], [1364296000,111], [1364298000,133], [1364300000,221], [1364302000,767], [1364304000,1766]] }, { name: 'europe', data: [[1364292000,163], [1364294000,203], [1364296000,276], [1364298000,408], [1364300000,547], [1364302000,729], [1364304000,628]] }]; var line_data = [[1364292000,502], [1364294000,635], [1364296000,809], [1364298000,947], [1364300000,1402], [1364302000,3634], [1364304000,5268]]; // create chart $('#container').highcharts('stockchart', { chart : { //type: 'area', renderto : 'container', zoomtype: 'x' }, plotoptions: { area: { stacking: 'normal' } }, rangeselector: { selected: 1 }, title: { text: 'aapl historical' }, yaxis: [{ title: { text: 'load' }, height: 200, linewidth: 2 }, { title: { text: 'load 2' }, top: 300, height: 100, offset: 0, linewidth: 2 } ], series: [ { name: "area", data: stacked_data, yaxis: 0 },{ name: "line", data: line_data, yaxis: 1 }] }); });
anybody have idea me ?
in example have incorrect structure of series, because in stackedarea try push "series" structure data.
additionaly should multiply timestamp 1000 achieve js timestamp format.
updated example: http://jsfiddle.net/g2xdj/4/
var series = [{ name: 'asia', data: [ [1364292000000, 502], [1364294000000, 635], [1364296000000, 809], [1364298000000, 947], [1364300000000, 1402], [1364302000000, 3634], [1364304000000, 5268] ] }, { name: 'africa', data: [ [1364292000000, 106], [1364294000000, 107], [1364296000000, 111], [1364298000000, 133], [1364300000000, 221], [1364302000000, 767], [1364304000000, 1766] ] }, { name: 'europe', data: [ [1364292000000, 163], [1364294000000, 203], [1364296000000, 276], [1364298000000, 408], [1364300000000, 547], [1364302000000, 729], [1364304000000, 628] ] }]; var line_data = { type:'line', yaxis:1, data:[ [1364292000000, 502], [1364294000000, 635], [1364296000000, 809], [1364298000000, 947], [1364300000000, 1402], [1364302000000, 3634], [1364304000000, 5268] ]};
series.push(line_data);