External drawing/erasing buttons
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>
<button id="drawing" onclick="toggle(this);">Start Drawing</button>
<button id="erasing" onclick="toggle(this);">Start Erasing</button>
<div id="chartdiv"></div>
CSS
#chartdiv {
width : 100%;
height : 500px;
font-size : 11px;
}
JavaScript
var chartData = generateChartData();
function toggle(b) {
// Fake button methods
chart.panels[0].pencilButtonPushed = {
hide: function () {},
show: function () {}
};
chart.panels[0].eraserButtonPushed = {
hide: function () {},
show: function () {}
};
// Drawing
if (b.id == 'drawing') {
b.innerHTML = !chart.panels[0].drawingEnabled ? 'Stop Drawing' : 'Start Drawing';
document.getElementById('erasing').innerHTML = 'Start Erasing';
// Method to toggle the drawing state
chart.panels[0].handlePencilClick();
// Erasing
} else {
b.innerHTML = !chart.panels[0].erasingEnabled ? 'Stop Erasing' : 'Start Erasing';
document.getElementById('drawing').innerHTML = 'Start Drawing';
// Method to toggle the erasing state
chart.panels[0].handleEraserClick();
}
}
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, // prevents to erase all in once
stockGraphs: [{
id: "g1",
valueField:...