Dynamically manage datasets and panels

by Sub Taper

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//cdn.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="//cdn.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<script src="//cdn.amcharts.com/lib/3/amstock.js" type="text/javascript"></script>
<div class="growl"></div>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <p>
                <button class="btn btn-default btn-dataset-add">Add Dataset</button>
                <button class="btn btn-default btn-dataset-remove">Remove Dataset</button>
                <button class="btn btn-default btn-panel-add">Add Panel</button>
                <button class="btn btn-default btn-panel-remove">Remove Panel</button>
            </p>
            <div class="well">
                <div id="chartdiv"></div>
            </div>
        </div>
    </div>
</div>

CSS

* {
    font-size: 11px !important;
    line-height: 1.42857143;
}

#chartdiv {
    min-height: 445px;
}

/* BOOTSTRAP HOOK */
#chartdiv .amChartsCompareList div {
    box-sizing: content-box;
}
.container {
    padding-top: 15px;
}
.well {
    margin: 0;
}

/* JUST FOR THE NOTIFICATIONS */
.growl {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 1337;
}
.growl .alert {
    width: 250px;
    opacity: 0.8;
    cursor: pointer;
}

.amChartsDataSetSelector select,
.amChartsInputField,
.amChartsButton,
.amChartsButtonSelected
{
    background: #ffffff;
    
    border-color: #cccccc;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    
    margin: 0 0 3px 0;
    padding: 6px 12px;
    height: 29px;
}

.amChartsDataSetSelector select:hover,
.amChartsInputField:hover,
.amChartsButton:hover,
.amChartsButtonSelected {
    background-color: #e6e6e6;
    border-color: #a4a4a4;
}

JavaScript

// DATA GENERATOR; FULFILLS GIVE DATASET
function generateChartData(data, field) {
    var chartData = data ? data : [];
    var firstDate = new Date();

    firstDate.setHours(0, 0, 0, 0);
    firstDate.setDate(firstDate.getDate() - 2000);

    for (var i = 0; i < 2000; i++) {
        var value = Math.round(Math.random() * (30) + 100);

        // ADD NEW FIELD TO PASSED DATASET
        if (data) {
            chartData[i][field] = value;

            // CREATE NEW ONE
        } else {
            var newDate = new Date(firstDate);
            newDate.setDate(newDate.getDate() + i);

            chartData.push({
                date: newDate,
                value: value
            });
        }
    }
    return chartData;
}

// JUST SOME VISUAL FEEDBACK
function growl(type, msg) {
    var alert = jQuery("<div>").addClass("alert alert-" + type).on("click", function () {
        jQuery(this).remove();
    }).prependTo(".growl");
    jQuery("<p>").text(msg).appendTo(alert);
    jQuery(alert).animate({
        opacity: 0
    }, 3000, function () {
        jQuery(this).remove();
    });
}

// CREATE CHART
var chart = AmCharts.makeChart("chartdiv", {
    type: "stock",
    pathToImages: "//cdn.amcharts.com/lib/3/images/",
    dataSets: [{
        title: "Dataset 1",
        fieldMappings: [{
            fromField: "value",
            toField: "value"
        }],
        dataProvider: generateChartData(),
        categoryField: "date"
    }, {
        title: "Dataset 2",
        fieldMappings: [{
            fromField: "value",
            toField: "value"
        }],
        dataProvider: generateChartData(),
        categoryField: "date"
    }],
    panels: [{
        title: "Panel 1",
        stockGraphs: [{
            valueField: "value",
            comparable: true
        }],
        stockLegend: {}
    }],
    chartCursorSettings: {
        valueLineEnabled: true,
        valueLineBalloonEnabled: true
    },
    dataSetSelector: {
        position: "left"
 ...