Auto-updating Stock Chart with dynamic indicators
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 chartData = [];
var firstDate = new Date(2012, 0, 1);
firstDate.setDate(firstDate.getDate() - 1000);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 1000; i++) {
var newDate = new Date(firstDate);
newDate.setHours(0, i, 0, 0);
var a = Math.round(Math.random() * (40 + i)) + 100 + i;
chartData.push({
date: newDate,
value: a,
MMM: a
});
}
return chartData;
}
function addDataPoint() {
var dataProvider = chart.dataSets[0].dataProvider;
var newDate = new Date(dataProvider[dataProvider.length-1].date.getTime());
newDate.setHours(newDate.getHours(), newDate.getMinutes() + 1, newDate.getSeconds());
var a = Math.round(Math.random() * (40 + 1000)) + 100 + 1000;
var b = Math.round(Math.random() * 100000000);
dataProvider.push({
date: newDate,
value: a,
volume: b,
MMM:a
});
dataProvider.shift();
}
function setThresholds() {
}
var chart = AmCharts.makeChart("chartdiv", {
type: "stock",
"theme": "none",
pathToImages: "http://www.amcharts.com/lib/3/images/",
glueToTheEnd: true,
categoryAxesSettings: {
minPeriod: "mm"
},
dataSets: [{
color: "#b0de09",
fieldMappings: [{
fromField: "value",
toField: "value"
}],
dataSets: [{
color: "#b0de10",
fieldMappings: [{
fromField: "MMM",
toField: "MMM"
}],
dataProvider: chartData,
categoryField: "date"
}],
panels: [{
showCategoryAxis: false,
title: "Value",
percentHeight: 70,
stockGraphs: [{
id: "g1",
valueField: "value",
type: "smoothedLine",
lineThickness: 2,
bullet: "round"
}],
stockLegend: {
valueTextRegular: " ",
markerType: "none"
},
},
],
panelsSettings: {
usePrefixes: true
}
});
setInterval(function () {
// add data point
addDataPoint();
...