Catching click events and putting markers on a Stock Chart

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 chartData = generateChartData();

function generateChartData() {
	var chartData = [];
	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 value = Math.round(Math.random() * (40 + i)) + 100 + i;

		chartData.push({
			date: newDate,
			value: value
		});
	}
	return chartData;
}


var chart = AmCharts.makeChart("chartdiv", {

	type: "stock",

    "theme": "none",
    pathToImages: "http://www.amcharts.com/lib/3/images/",

	dataSets: [{
		color: "#b0de09",
		fieldMappings: [{
			fromField: "value",
			toField: "value"
		}],
		dataProvider: chartData,
		categoryField: "date"
	}],

	panels: [{
		showCategoryAxis: true,
		title: "Value",
		eraseAll: false,
		allLabels: [{
			x: 0,
			y: 115,
			text: "Click on the pencil icon on top-right to start drawing",
			align: "center",
			size: 16
		}],

		stockGraphs: [{
			id: "g1",
			valueField: "value",
			useDataSetColors: false
		}],


		stockLegend: {
			valueTextRegular: " ",
			markerType: "none"
		},

		drawingIconsEnabled: true
	}],

	chartScrollbarSettings: {
		graph: "g1"
	},
	chartCursorSettings: {
		valueBalloonsEnabled: true
	},
	periodSelector: {
		position: "bottom",
		periods: [{
			period: "DD",
			count: 10,
			label: "10 days"
		}, {
			period: "MM",
			count: 1,
			label: "1 month"
		}, {
			period: "YYYY",
			count: 1,
			label: "1 year"
		}, {
			period: "YTD",
			label: "YTD"
		}, {
			period: "MAX",
			label: "MAX"
		}]
	}
});

chart.addListener("init", function () {
    for( var x in chart.panels ) {
        chart.panels[x].chartCursor.addListener("changed", AmCharts.myHandleMove);
        return;
        //document.
    }
});

AmCharts.myCurrentPosition;
AmCharts.myHandleMove = function ( event ) {
    //AmCharts.myCurrentPosition =...