V3: Add remove panel
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/amstock.js"></script>
<input type="button" class="amChartsButton" id="addPanelButton" onclick="addPanel()" value="add panel">
<input type="button" class="amChartsButton" disabled="true" id="removePanelButton" onclick="removePanel()" value="remove panel">
<div id="chartdiv" style="width: 100%; height: 370px;"></div>
CSS
body
{
font-size:12px;
color:#000000;
background-color:#ffffff;
font-family:verdana,helvetica,arial,sans-serif;
}
.amChartsButtonSelected
{
background-color:#CC0000;
border-style:solid;
border-color:#CC0000;
border-width:1px;
color:#FFFFFF;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 1px;
padding:3px;
}
.amChartsButton
{
background-color:#EEEEEE;
border-style:solid;
border-color:#CCCCCC;
border-width:1px;
color:#000000;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 1px;
padding:3px;
}
.amChartsCompareList
{
border-style:solid;
border-color:#CCCCCC;
border-width:1px;
}
JavaScript
AmCharts.ready(function () {
generateChartData();
createStockChart();
});
var chart;
var chartData = [];
var newPanel;
var stockPanel1;
var stockPanel2;
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;
chartData[i] = ({
date: newDate,
open: open,
close: close,
high: high,
low: low,
volume: volume
});
}
}
function createStockChart() {
chart = new AmCharts.AmStockChart();
chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
chart.balloon.horizontalPadding = 13;
// DATASET //////////////////////////////////////////
var dataSet = new AmCharts.DataSet();
dataSet.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"
}];
dataSet.color =...