V3: Stock with multiple datasets on separate graphs and value axes
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/amstock.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 395px;"></div>
CSS
body
{
font-size:12px;
color:#000000;
background-color:#ffffff;
font-family:verdana,helvetica,arial,sans-serif;
}
.amChartsButtonSelected
{
background-color:#CC0000;
border-style:solid;
border-color:#CC0000;
border-width:1px;
color:#FFFFFF;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 1px;
padding:3px;
}
.amChartsButton
{
background-color:#EEEEEE;
border-style:solid;
border-color:#CCCCCC;
border-width:1px;
color:#000000;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 1px;
padding:3px;
}
.amChartsCompareList
{
border-style:solid;
border-color:#CCCCCC;
border-width:1px;
}
JavaScript
AmCharts.ready(function () {
generateChartData();
createStockChart();
});
var chart;
var chartData1 = [];
var chartData2 = [];
var newPanel;
var stockPanel;
function generateChartData() {
var firstDate = new Date();
firstDate.setHours(0, 0, 0, 0);
firstDate.setDate(firstDate.getDate() - 2000);
for (var i = 0; i < 2000; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var value1 = Math.round(Math.random() * (30) + 100);
var value2 = Math.round(Math.random() * (30) + 150);
chartData1[i] = ({
date: newDate,
value1: value1
});
chartData2[i] = ({
date: newDate,
value2: value2
});
}
}
function createStockChart() {
chart = new AmCharts.AmStockChart();
chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
// DATASET //////////////////////////////////////////
var dataSet = new AmCharts.DataSet();
dataSet.fieldMappings = [{
fromField: "value1",
toField: "value1"
}];
dataSet.color = "#000000";
dataSet.dataProvider = chartData1;
dataSet.categoryField = "date";
var dataSet2 = new AmCharts.DataSet();
dataSet2.fieldMappings = [{
fromField: "value2",
toField: "value2"
}];
dataSet2.color = "#fac314";
dataSet2.dataProvider = chartData2;
dataSet2.compared = true;
dataSet2.categoryField = "date";
chart.dataSets = [dataSet, dataSet2];
// PANELS ///////////////////////////////////////////
stockPanel = new AmCharts.StockPanel();
stockPanel.title = "Value";
//stockPanel.showCategoryAxis = false;
stockPanel.recalculateToPercents = "never";
// first value axis
var valueAxis = new AmCharts.ValueAxis();
valueAxis.dashLength = 5;
...