Stock chart with error bullets and custom value labels

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

body {
    font-family: Verdana;
    font-size: 12px;
    padding: 10px;
}
#chartdiv {
	width	: 100%;
	height	: 500px;
}

JavaScript

var chartData1 = [];

generateChartData();

function generateChartData() {
	var firstDate = new Date();
	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 a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
		var b1 = Math.round(Math.random() * 200);

		chartData1.push({
			date: newDate,
			value: a1,
			error: b1
		});
	}
}

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

	dataSets: [{
			title: "first data set",
			fieldMappings: [{
				fromField: "value",
				toField: "value"
			}, {
				fromField: "error",
				toField: "error"
			}],
			dataProvider: chartData1,
			categoryField: "date"
		}
	],

	panels: [{

			showCategoryAxis: false,
			title: "Value",
			percentHeight: 70,
        
            valueAxes: [{
                id: "v1"
            }],

			stockGraphs: [{
				id: "g1",
				valueField: "value",
                errorField: "error",
                bullet: "yError",
                bulletSize: 10,
                bulletAxis: "v1",
                labelText: "[[value]]",
                labelFunction: function (item) {
                    var from = item.dataContext.value - item.dataContext.error;
                    var to = item.dataContext.value + item.dataContext.error;
                    return from + '|' + to;
                }
			}]
		}
	],

	chartScrollbarSettings: {
		graph: "g1"
	},

	chartCursorSettings: {
		valueBalloonsEnabled: true,
        fullWidth:true,
        cursorAlpha:0.1
	},

	periodSelector: {
		periods: [{
			period: "MM",
			selected: true,
			count: 1,
			label: "1 month"
		}, {
			period: "YYYY",
			count: 1,
			label: "1 year"
		}, {
			period: "YTD",
			label: "YTD"
		}, {
			period: "MAX",
			label: "MAX"
		}]
	}
});