Resizable amChart with double axes
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div class="resizable">
<div id="chartdiv"></div>
</div>
CSS
.resizable {
width: 300px;
height: 300px;
background: silver;
}
#chartdiv {
width : 100%;
height : 100%;
}
JavaScript
$(document).ready(function() {
var chart;
var chartData = [{
country: "United States of America",
visits: 4025,
subdata: [
{ country: "New York", visits: 1000 },
{ country: "California", visits: 785 },
{ country: "Florida", visits: 501 },
{ country: "Illinois", visits: 321 },
{ country: "Washington", visits: 101 }
]},
{
country: "China",
visits: 1882},
{
country: "Japan",
visits: 1809},
{
country: "Germany",
visits: 1322}];
AmCharts.ready(function() {
// SERIAL CHART
var chart = {};
chart.type='serial';
chart.dataProvider = chartData;
chart.categoryField = "country";
chart.startDuration = 1;
chart.valueAxes = [{
"id":"v1",
"axisColor": "#FF6600",
"axisThickness": 2,
"gridAlpha": 0,
"axisAlpha": 1,
"position": "left"
}, {
"id":"v2",
"axisColor": "#FCD202",
"axisThickness": 2,
"gridAlpha": 0,
"axisAlpha": 1,
"position": "right"
}];
// AXES
// category
chart.categoryAxis = {};
chart.categoryAxis.gridPosition = "start";
chart.categoryAxis.autoWrap = true;
// value
// in case you don't want to change default settings of value axis,
// you don't need to create it, as one value axis is created automatically.
// GRAPH
var graph = {};
graph.valueField = "visits";
graph.balloonText = "[[category]]: [[value]]";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 0.8;
graph.valueAxis = 'v1';
chart.graphs = [];
chart.graphs.push(graph);
var graph2 = {};
graph2.valueField = "visits";
graph2.balloonText = "[[category]]: [[value]]";
graph2.type = "column";
graph2.lineAlpha = 0;
graph2.fillAlphas = 0.8;
graph2.valueAxis = 'v2';
chart.graphs.push(graph2);
$(".resizable")
.wrap('<div/>')
.css({'overflow':'hidden'})
...