Below is the code for Multiple Value Axes:
In this code, we aim to display a graph using dynamically generated random data. When executed, nothing will happen.
<script>
var chart;
var chartData = [];
// generate some random data within a different range
function generateChartData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 50);
var v = [];
var a = [];
for (var i = 0; i < 50; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);}
for (var j = 1; j < 4; j++) {
v[j] = Math.round(Math.random() * 40 *j) + 100;
chartData.push({
date: newDate,
a + j.toString():v[j]
// a + j =stringValue-0;
// var a[j]:v[j],
});
}
}
}
// this method gets called when the chart is initialized as it listens for "dataUpdated" event
function zoomChart() {
// different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
chart.zoomToIndexes(10, 20);
}
// create the chart
AmCharts.ready(function() {
// generate some random data first
generateChartData();
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.marginTop = 0;
chart.autoMarginOffset = 5;
chart.pathToImages = "http://www.amcharts.com/lib/images/";
chart.zoomOutButton = {
backgroundColor: '#000000',
backgroundAlpha: 0.15
};
chart.dataProvider = chartData;
chart.categoryField = "date";
// listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
chart.addListener("dataUpdated", zoomChart);
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
categoryAxis.dashLength = 2;
categoryAxis.gridAlpha = 0.15;
categoryAxis.axisColor = "#DADADA";
// first value axis (on the left)
var valueAxis1 = new AmCharts.ValueAxis();
valueAxis1.axisColor = "#FF6600";
valueAxis1.axisThickness = 2;
valueAxis1.gridAlpha = 0;
chart.addValueAxis(valueAxis1);
// second value axis (on the right)
var valueAxis2 = new AmCharts.ValueAxis();
valueAxis2.position = "right"; // this line makes the axis appear on the right
valueAxis2.axisColor = "#FCD202";
valueAxis2.gridAlpha = 0;
valueAxis2.axisThickness = 2;
chart.addValueAxis(valueAxis2);
// third value axis (on the left, detached)
valueAxis3 = new AmCharts.ValueAxis();
valueAxis3.offset = 50; // this line makes the axis appear detached from plot area
valueAxis3.gridAlpha = 0;
valueAxis3.axisColor = "#B0DE09";
valueAxis3.axisThickness = 2;
chart.addValueAxis(valueAxis3);
var graph = [];
var v ;
for (var j = 1; j < 4; j++)
{
graph[j] = new AmCharts.AmGraph();
graph[j].valueAxis = valueAxis1; // we have to indicate which value axis should be used
graph[j].title = "red line";
v = a + j.toString();
graph[j].valueField = v;
graph[j].bullet = "round";
graph[j].hideBulletsCount = 30;
chart.addGraph(graph[j]);
}
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.marginLeft = 110;
chart.addLegend(legend);
// WRITE
chart.write("chartdiv");
});
</script>
<body>
<div id="chartdiv" style="width: 640px: hieght: 400px: overflow: hidden: text-align: left;">
</div>
</body>