Simple stock chart with two datasets comparing
HTML
<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/none.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>
CSS
#chartdiv {
width : 100%;
height : 500px;
}
JavaScript
var chartData = [];
generateChartData();
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 open = Math.round(Math.random() * (30) + 100);
var value1 = open + Math.round(Math.random() * (15) - Math.random() * 10);
var value2 = Math.round(Math.random() * (30) + 100);
chartData[i] = ({
date: newDate,
value1: value1,
value2: value2
});
}
}
var chart = AmCharts.makeChart("chartdiv", {
type: "stock",
"theme": "none",
pathToImages: "http://www.amcharts.com/lib/3/images/",
dataSets: [{
fieldMappings: [{
fromField: "value1",
toField: "value"
}],
color: "#7f8da9",
dataProvider: chartData,
title: "West Stock",
categoryField: "date"
}, {
fieldMappings: [{
fromField: "value2",
toField: "value"
}],
color: "#fac314",
dataProvider: chartData,
compared: true,
title: "East Stock",
categoryField: "date"
}],
panels: [{
title: "Value",
showCategoryAxis: false,
percentHeight: 70,
valueAxes: [{
dashLength: 5
}],
categoryAxis: {
dashLength: 5
},
stockGraphs: [{
id: "g1",
type: "smoothedLine",
compareGraphType: "smoothedLine",
valueField: "value",
lineColor: "#7f8da9",
lineThickness: 2,
compareGraphLineThickness: 2,
comparable: true,
compareField: "value"
}],
stockLegend: {
//valueTextRegular: undefined,
periodValueTextComparing: "[[percents.value.close]]%"
}
}
],
chartScrollbarSettings: {
graph: "g1",
graphType: "line",
usePeriod: "WW"
},
periodSelector: {
position: "bottom",
periods: [{
period: "DD",
count: 10,
label: "10 days"
}, {
period: "MM",
selected: true,
count: 1,
label: "1 month"
}, {
period: "YYYY",
count:...