Multiple Data Sets

Dynamic dataset

by Rohit Bisht

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/black.js"></script>
<input id="products"/><button type="submit" id="submit">
Submit
</button>
<div id="chartdiv"></div>

CSS

body { background-color: #000; color: #fff; }
#chartdiv {
  width: 100%;
  height: 500px;
}

JavaScript

$("#submit").click(function() {
    make($("#products").val());
});

function make(num) {
    var chartData = [];
    for (var i = 0; i < num; i++) {
        chartData[i] = [];
    }

    generateChartData();

    function generateChartData() {
        var firstDate = new Date();
        firstDate.setDate(firstDate.getDate() - 500);
        firstDate.setHours(0, 0, 0, 0);
        for (var i = 0; i < 500; i++) {
            var a = 1500;
            var b = 2000;
            var newDate = new Date(firstDate);
            newDate.setDate(newDate.getDate() + i);
            console.log("sdfgd");
            for (var j = 0; j < num; j++) {
                a += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
                b += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);

                chartData[j].push({
                    "date": newDate,
                    "value": a,
                    "volume": a - 100
                });
            }
            console.log(chartData[0]);
        }
    }

    var chart = AmCharts.makeChart("chartdiv", {
        "type": "stock",
        "theme": "black",
        "dataSets": [{
            "title": "first data set",
            "fieldMappings": [{
                "fromField": "value",
                "toField": "value"
            }, {
                "fromField": "volume",
                "toField": "volume"
            }],
            "dataProvider": chartData[0],
            "categoryField": "date"
        }],

        "panels": [{
            "showCategoryAxis": false,
            "title": "Value",
            "percentHeight": 70,
            "recalculateToPercents": "never",
            "stockGraphs": [{
                "id": "g1",
                "valueField": "value",
                "comparable": true,
                "compareField": "value",
                "balloonText": "[[title]]:<b>[[value]]</b>",
                "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
     ...