#10123

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(2012, 0, 1);
	firstDate.setDate(firstDate.getDate() - 500);
	firstDate.setHours(0, 0, 0, 0);

	for (var i = 0; i < 500; i++) {
		var newDate = new Date(firstDate);
		newDate.setDate(newDate.getDate() + i);

		var a = Math.round(Math.random() * (40 + i)) + 100 + i;
		var b = Math.round(Math.random() * 100000000);

		chartData.push({
			date: newDate,
			value: a,
			volume: b
		});
	}
}

var chart = AmCharts.makeChart("chartdiv", {
	type: "stock",
    "theme": "none",
    pathToImages: "http://www.amcharts.com/lib/3/images/",
    
    balloon: {
        fillAlpha: 1
    },
    
    stockEventsSettings: {
        balloonColor: "#00ff00"
    },
    
	dataSets: [{
		color: "#b0de09",
		fieldMappings: [{
			fromField: "value",
			toField: "value"
		}, {
			fromField: "volume",
			toField: "volume"
		}],
		dataProvider: chartData,
		categoryField: "date",
		// EVENTS
		stockEvents: [{
			date: new Date(2010, 8, 19),
			type: "sign",
			backgroundColor: "#85CDE6",
			graph: "g1",
			text: "S",
			description: "This is description of an event"
		}, {
			date: new Date(2010, 10, 19),
			type: "flag",
			backgroundColor: "#FFFFFF",
			backgroundAlpha: 0.5,
			graph: "g1",
			text: "F",
			description: "Some longerntext can alson be added"
		}, {
			date: new Date(2010, 11, 10),
			showOnAxis: true,
			backgroundColor: "#85CDE6",
			type: "pin",
			text: "X",
			graph: "g1",
			description: "This is description of an event"
		}, {
			date: new Date(2010, 11, 26),
			showOnAxis: true,
			backgroundColor: "#85CDE6",
			type: "pin",
			text: "Z",
			graph: "g1",
			description: "This is description of an event"
		}, {
			date: new Date(2011, 0, 3),
			type: "sign",
			backgroundColor: "#85CDE6",
			graph: "g1",
			text: "U",
			description: "This is description of an event"
		}, {
			date: new Date(2011, 1, 6),
			type: "sign",
			graph: "g1",
			text: "D",
			description: "This...