ben

by amcharts

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 close = open + Math.round(Math.random() * (15) - Math.random() * 10);

		var low;
		if (open < close) {
			low = open - Math.round(Math.random() * 5);
		} else {
			low = close - Math.round(Math.random() * 5);
		}

		var high;
		if (open < close) {
			high = close + Math.round(Math.random() * 5);
		} else {
			high = open + Math.round(Math.random() * 5);
		}

		var volume = Math.round(Math.random() * (1000 + i)) + 100 + i;

		var value = Math.round(Math.random() * (30) + 100);

		chartData[i] = ({
			date: newDate,
			open: open,
			close: close,
			high: high,
			low: low,
			volume: volume,
			value: value
		});
	}
}

var chart = AmCharts.makeChart("chartdiv", {
	type: "stock",
    "theme": "none",
    pathToImages: "http://www.amcharts.com/lib/3/images/",

	dataSets: [{
		fieldMappings: [{
			fromField: "open",
			toField: "open"
		}, {
			fromField: "close",
			toField: "close"
		}, {
			fromField: "high",
			toField: "high"
		}, {
			fromField: "low",
			toField: "low"
		}, {
			fromField: "volume",
			toField: "volume"
		}, {
			fromField: "value",
			toField: "value"
		}],

		color: "#7f8da9",
		dataProvider: chartData,
		title: "West Stock",
		categoryField: "date"
	}, {
		fieldMappings: [{
			fromField: "value",
			toField: "value"
		}],
		color: "#fac314",
		dataProvider: chartData,
		compared: true,
		title: "East Stock",
		categoryField: "date"
	}],
    
    panelsSettings: {
        creditsPosition: undefined,
    },


	panels: [{
			title: "Value",
			showCategoryAxis: false,
			percentHeight: 70,
        creditsPosition: "top-left",
			valueAxes: [{
				dashLength: 5
			}],

			categoryAxis:...