Clone data and compare with current dataset

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-clone">Clone selected data</button>
            <button class="btn btn-default btn-align btn-primary">Align with axis</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();
    });
}

// CLONE DATA; CREATE DATASET
function cloneData(offset) {
    // CLONE DATA
    var clonedData = [];
    for ( i1 in chart.mainDataSet.dataProvider ) {
        var item = chart.mainDataSet.dataProvider[i1];
        if ( item.date >= chart.dataSelection.start && item.date <= chart.dataSelection.end ) {
            clonedData.push({
                date: item.date,
                value: item.value
            });
        }
    }
    chart.dataSelection = false;

    // CREATE DATASET
    var dataset = new AmCharts.DataSet();
    dataset.title         = "Clone " + chart.dataSets.length;
    dataset.dataProvider  = clonedData;
    dataset.categoryField = "date";
    dataset.compared      = true;

    // LOOP THROUGH PANELS AND CREATE FIELDMAPPINGS FOR EACH GRAPH
    for (i1 in chart.panels) {
        // LOOP THROUGH PANEL GRAPHS
        for (i2 in chart.panels[i1].stockGraphs) {
  ...