Following is the code of Multiple Value Axes:
In that we want to show the graph by using random data dynamically. when we run this code nothing will be happened.
<script>
var chart;
var chartData = [];
// generate some random data, quite 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 is called when chart is first inited as we listen for "dataUpdated" event
function zoomChart() {
// different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
chart.zoomToIndexes(10, 20);
}
// create 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 to 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 to 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>
It seems that you're looking to produce 4 graphs with random values.
If that is correct, there is a number of issues with your code:
The values for each of the graph need to be consolidated into a single data point for each category. So that we get one object per category:
The best way to achieve that is to create an item with a date part, then generate a value for each graph and add them to the same object. Only then push that object into chart data array.
The same with adding actual graph objects. Just need to assign
valueFieldto the same key as we did with data:Here's the complete working code: