#6972

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/amstock.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

CSS

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

JavaScript

var chart;
var chartData = [{"date":"2014-05-17","value":5839,"volume":5.61563769},{"date":"2014-05-18","value":5841.38,"volume":3.5245115},{"date":"2014-05-19","value":5850,"volume":5.46589048}];

AmCharts.useUTC = true;

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

function createStockChart() {
    chart = new AmCharts.AmStockChart();
    chart.pathToImages = "/assets/amcharts/images/";
    // As we have minutely data, we should set minPeriod to "mm"
    var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
    categoryAxesSettings.minPeriod = "DD";

    chart.categoryAxesSettings = categoryAxesSettings;

    // DATASETS //////////////////////////////////////////
    var dataSet = new AmCharts.DataSet();
    dataSet.color = "#85B068";
    dataSet.fieldMappings = [{
        fromField: "value",
        toField: "value"
    }, {
        fromField: "volume",
        toField: "volume"
    }];
    dataSet.dataProvider = chartData;
    dataSet.categoryField = "date";

    // set data sets to the chart
    chart.dataSets = [dataSet];

    // PANELS ///////////////////////////////////////////

    // first stock panel
    var stockPanel1 = new AmCharts.StockPanel();
    stockPanel1.showCategoryAxis = true;
    //stockPanel1.title = "Value";
    stockPanel1.percentHeight = 100;

    stockPanel1.backgroundColor = "#fff";
    stockPanel1.backgroundAlpha = 1;
    stockPanel1.fontFamily = "'din_next_lt_prolight', Arial, Sans-Serif";

    stockPanel1.plotAreaFillColors = "#fff";
    stockPanel1.plotAreaFillAlphas = "1";

    // graph of first stock panel
    var graph1 = new AmCharts.StockGraph();
    graph1.valueField = "value";
    graph1.type = "smoothedLine";
    graph1.lineThickness = 2;
    graph1.bullet = "round";
    graph1.bulletBorderColor = "#fff";
    graph1.bulletBorderAlpha = 0.8;
    graph1.bulletBorderThickness = 1;
    graph1.linecolor = "#85B068";

    stockPanel1.addStockGraph(graph1);

    // create stock legend
    var stockLegend1...