How to stack Charts with amchart? - graph

Question

is it possible to stack 2 or more graphs in one chart? with the same Scrollbar / Chartcursor?
I tried it with the live editor, but havn't found any option to make this possible.
Here som pictures for explaination:
At the moment i have this graph: http://imgur.com/XpU42xK
But i want a graph like this: http://imgur.com/xdwJ7lu
Thanks for your help :)

Answer 1

Just for the sake of sport I tried to implement it. Good news - it's possible :)
First of all you will need to prepare both charts
First chart
Scrollbar enabled
Chart cursor enabled
Category axis hidden
Legend disabled
Bottom margin: 0
Second chart
Scrollbar disabled
Chart cursor enabled
Category axis enabled
Legend enabled
Top margin: 0
This creates two charts, "glued" together like in your mockup:
Syncing the charts
They still act on their own, like two separate charts. We have to sync them up:
Cursor
Legend
Zoom/pan
That's where this code comes in:
/**
* Use events to sync up cursors and zooms
*/
for ( var x = 0; x < AmCharts.charts.length; x++ ) {
// use "changed" event to track cursor movement on all charts
// place the cursor on other charts on the same index
AmCharts.charts[ x ].addListener( "changed", function( event ) {
// find which category is currently being rolled over
var category = event.chart.dataProvider[ event.index ][ event.chart.categoryField ];
// cycle through all available charts and place the cursor at
// the same category
for ( var i = 0; i < AmCharts.charts.length; i++ ) {
if ( event.chart !== AmCharts.charts[ i ] ) {
AmCharts.charts[ i ].chartCursor.showCursorAt( category );
}
}
} );
// use "zoomed" event to track zooms/pans so we can apply
// the same zoom across other charts
AmCharts.charts[ x ].addListener( "zoomed", function( zoomEvent ) {
// cycle through all available charts and apply same zoom
for ( var i = 0; i < AmCharts.charts.length; i++ ) {
if ( zoomEvent.chart !== AmCharts.charts[ i ] && ( AmCharts.charts[ i ].startIndex != zoomEvent.startIndex || AmCharts.charts[ i ].endIndex != zoomEvent.endIndex ) ) {
AmCharts.charts[ i ].zoomToIndexes( zoomEvent.startIndex, zoomEvent.endIndex );
}
}
} );
}
/**
* Use the last chart to display legend
* We will collect graphs from other charts and mirror them on
* the last chart.
*/
var lastChart = AmCharts.charts[ AmCharts.charts.length - 1 ];
for ( var x = 0; x < ( AmCharts.charts.length - 1 ); x++ ) {
// add graphs
for ( var g = 0; g < AmCharts.charts[ x ].graphs.length; g++ ) {
// create the related graph
var graph = new AmCharts.AmGraph();
graph.lineAlpha = 0;
graph.lineColor = AmCharts.charts[ x ].graphs[ g ].lineColor;
graph.relatedGraph = AmCharts.charts[ x ].graphs[ g ];
graph.valueField = "value_" + x + "_" + g;
graph.showBalloon = false;
graph.includeInMinMax = false;
graph.title = AmCharts.charts[ x ].graphs[ g ].title;
lastChart.addGraph( graph );
// mirror data for rollovers
for ( var i = 0; i < lastChart.dataProvider.length; i++ ) {
lastChart.dataProvider[ i ][ graph.valueField ] = AmCharts.charts[ x ].dataProvider[ i ][ AmCharts.charts[ x ].graphs[ g ].valueField ];
}
}
}
/**
* Add events to the legend of last chart so we can toggle
* graphs of the other charts
*/
lastChart.addListener( "init", function() {
// hide graph
lastChart.legend.addListener( "hideItem", function( event ) {
if ( event.dataItem.relatedGraph !== undefined ) {
event.dataItem.relatedGraph.chart.hideGraph( event.dataItem.relatedGraph );
}
} );
// show graph
lastChart.legend.addListener( "showItem", function( event ) {
if ( event.dataItem.relatedGraph !== undefined ) {
event.dataItem.relatedGraph.chart.showGraph( event.dataItem.relatedGraph );
}
} );
} );
And voila:
Here's a working demo:
/**
* First chart
* With scrollbar
* Without category axis
*/
AmCharts.makeChart( "chartdiv1", {
"type": "serial",
"theme": "light",
"path": "http://www.amcharts.com/lib/3/",
"dataProvider": [ {
"category": "Category #1",
"value": 2025
}, {
"category": "Category #2",
"value": 1882
}, {
"category": "Category #3",
"value": 1809
}, {
"category": "Category #4",
"value": 1322
}, {
"category": "Category #5",
"value": 1122
}, {
"category": "Category #6",
"value": 1114
}, {
"category": "Category #7",
"value": 984
}, {
"category": "Category #8",
"value": 711
}, {
"category": "Category #9",
"value": 665
}, {
"category": "Category #10",
"value": 580
} ],
"valueAxes": [ {
"gridAlpha": 0.2,
"dashLength": 0,
"showFirstLabel": false,
"ignoreAxisWidth": true,
"title": "First graph"
} ],
"startDuration": 1,
"graphs": [ {
"id": "g1",
"lineThickness": 2,
"lineColor": "#f56400",
"type": "step",
"valueField": "value",
"title": "Graph 1"
} ],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorColor": "#c30000",
"animationDuration": 0
},
"chartScrollbar": {},
"categoryField": "category",
"categoryAxis": {
"ignoreAxisWidth": true,
"labelsEnabled": false,
"axisAlpha": 0
},
"marginBottom": 0,
"marginLeft": 80
} );
/**
* Second chart
* Without scrollbar
* With category axis
*/
AmCharts.makeChart( "chartdiv2", {
"type": "serial",
"theme": "light",
"zoomOutText": "",
"path": "http://www.amcharts.com/lib/3/",
"dataProvider": [ {
"category": "Category #1",
"value": 521
}, {
"category": "Category #2",
"value": 215
}, {
"category": "Category #3",
"value": 655
}, {
"category": "Category #4",
"value": 601
}, {
"category": "Category #5",
"value": 122
}, {
"category": "Category #6",
"value": 114
}, {
"category": "Category #7",
"value": 521
}, {
"category": "Category #8",
"value": 351
}, {
"category": "Category #9",
"value": 222
}, {
"category": "Category #10",
"value": 156
} ],
"valueAxes": [ {
"gridAlpha": 0.2,
"dashLength": 0,
"showLastLabel": false,
"ignoreAxisWidth": true,
"title": "Second graph"
} ],
"startDuration": 1,
"graphs": [ {
"id": "g1",
"lineThickness": 2,
"lineColor": "#fae879",
"type": "step",
"valueField": "value",
"title": "Graph 2"
} ],
"chartCursor": {
"cursorColor": "#c30000",
"animationDuration": 0
},
"categoryField": "category",
"categoryAxis": {
"tickPosition": "middle"
},
"legend": {},
"marginTop": 0,
"marginLeft": 80
} );
/**
* Use events to sync up cursors and zooms
*/
for ( var x = 0; x < AmCharts.charts.length; x++ ) {
// use "changed" event to track cursor movement on all charts
// place the cursor on other charts on the same index
AmCharts.charts[ x ].addListener( "changed", function( event ) {
// find which category is currently being rolled over
var category = event.chart.dataProvider[ event.index ][ event.chart.categoryField ];
// cycle through all available charts and place the cursor at
// the same category
for ( var i = 0; i < AmCharts.charts.length; i++ ) {
if ( event.chart !== AmCharts.charts[ i ] ) {
AmCharts.charts[ i ].chartCursor.showCursorAt( category );
}
}
} );
// use "zoomed" event to track zooms/pans so we can apply
// the same zoom across other charts
AmCharts.charts[ x ].addListener( "zoomed", function( zoomEvent ) {
// cycle through all available charts and apply same zoom
for ( var i = 0; i < AmCharts.charts.length; i++ ) {
if ( zoomEvent.chart !== AmCharts.charts[ i ] && ( AmCharts.charts[ i ].startIndex != zoomEvent.startIndex || AmCharts.charts[ i ].endIndex != zoomEvent.endIndex ) ) {
AmCharts.charts[ i ].zoomToIndexes( zoomEvent.startIndex, zoomEvent.endIndex );
}
}
} );
}
/**
* Use the last chart to display legend
* We will collect graphs from other charts and mirror them on
* the last chart.
*/
var lastChart = AmCharts.charts[ AmCharts.charts.length - 1 ];
for ( var x = 0; x < ( AmCharts.charts.length - 1 ); x++ ) {
// add graphs
for ( var g = 0; g < AmCharts.charts[ x ].graphs.length; g++ ) {
// create the related graph
var graph = new AmCharts.AmGraph();
graph.lineAlpha = 0;
graph.lineColor = AmCharts.charts[ x ].graphs[ g ].lineColor;
graph.relatedGraph = AmCharts.charts[ x ].graphs[ g ];
graph.valueField = "value_" + x + "_" + g;
graph.showBalloon = false;
graph.includeInMinMax = false;
graph.title = AmCharts.charts[ x ].graphs[ g ].title;
lastChart.addGraph( graph );
// mirror data for rollovers
for ( var i = 0; i < lastChart.dataProvider.length; i++ ) {
lastChart.dataProvider[ i ][ graph.valueField ] = AmCharts.charts[ x ].dataProvider[ i ][ AmCharts.charts[ x ].graphs[ g ].valueField ];
}
}
}
/**
* Add events to the legend of last chart so we can toggle
* graphs of the other charts
*/
lastChart.addListener( "init", function() {
// hide graph
lastChart.legend.addListener( "hideItem", function( event ) {
if ( event.dataItem.relatedGraph !== undefined ) {
event.dataItem.relatedGraph.chart.hideGraph( event.dataItem.relatedGraph );
}
} );
// show graph
lastChart.legend.addListener( "showItem", function( event ) {
if ( event.dataItem.relatedGraph !== undefined ) {
event.dataItem.relatedGraph.chart.showGraph( event.dataItem.relatedGraph );
}
} );
} );
.chartdiv {
width: 100%;
height: 300px;
font-size: 11px;
}
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv1" class="chartdiv"></div>
<div id="chartdiv2" class="chartdiv"></div>