Auto-updating OHLC chart
HTML
<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 340px;"></div>
CSS
body
{
font-size:12px;
color:#000000;
background-color:#ffffff;
font-family:verdana,helvetica,arial,sans-serif;
}
JavaScript
var chart;
var chartData = [];
var chartCursor;
var currentDate = new Date();
var firstDate = new Date(currentDate.getTime() - 300 * 60000);
// generate some random data, quite different range
function generateChartData() {
chartData = [];
for (minute = 0; minute < 300; minute += 15) {
var newDate = new Date(firstDate.getTime() + minute * 60000);
var open = Math.round(Math.random() * 40);
var high = open + open * Math.random();
var low = open - open * Math.random();
var close = Math.round(Math.random() * 40);
chartData.push({
date: newDate,
open: open,
high: high,
low: low,
close: close
});
}
}
// create chart
AmCharts.ready(function() {
// generate some data first
generateChartData();
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "http://www.amcharts.com/lib/images/";
chart.marginTop = 0;
chart.marginRight = 10;
chart.autoMarginOffset = 5;
chart.zoomOutButton = {
backgroundColor: '#000000',
backgroundAlpha: 0.15
};
chart.dataProvider = chartData;
chart.categoryField = "date";
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "15mm"; // our data is daily, so we set minPeriod to DD
categoryAxis.dashLength = 1;
categoryAxis.gridAlpha = 0.15;
categoryAxis.startOnAxis = false;
categoryAxis.axisColor = "#DADADA";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0.2;
valueAxis.dashLength = 1;
valueAxis.minimum = 0;
valueAxis.maximum = 60;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.title = "red line";
graph.type = "ohlc";
graph.openField = "open";
...