#7465

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 style="padding-bottom:5px;">
<input type="button" class="amChartsButton" id="addPanelButton" value="add panel">
<input type="button" class="amChartsButton" disabled="true" id="removePanelButton" value="remove panel">
</div>
<div id="chartdiv"></div>

CSS

#chartdiv {
	width	: 100%;
	height	: 450px;
}

JavaScript

AmCharts.ready(function () {
    generateChartData();
    createStockChart();

document.getElementById("addPanelButton").onclick = function(){
	addPanel();
}
document.getElementById("removePanelButton").onclick = function(){
	removePanel();
}
});

var chart;
var chartData = [];
var newPanel;
var stockPanel;

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"
    },...