Dynamically manage graphs

by amcharts

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<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>
<div class="growl"></div>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <p>
                <button class="btn btn-default btn-add">Add Graph</button>
                <button class="btn btn-default btn-remove">Remove Graph</button>
            </p>
            <div class="well">
                <div id="chartdiv" style="height: 500px;"></div>
            </div>
        </div>
    </div>
</div>
</div>

CSS

#chartdiv {
    width : 100%;
    height : 500px;
    font-size : 11px;
}

* {
    font-size: 11px !important;
    line-height: 1.42857143;
}
#chartdiv {
    min-height: 445px;
}
.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;
}

JavaScript

// generate data
          var chartData = [];

          function generateChartData() {
              var firstDate = new Date();
              firstDate.setTime(firstDate.getTime() - 10 * 24 * 60 * 60 * 1000);

              for (var i = firstDate.getTime(); i < (firstDate.getTime() + 10 * 24 * 60 * 60 * 1000); i += 60 * 60 * 1000) {
                  var newDate = new Date(i);

                  if (i == firstDate.getTime()) {
                      var value0 = Math.round(Math.random() * 10) + 1;
                  } else {
                      var value0 = Math.round(chartData[chartData.length - 1].value0 / 100 * (90 + Math.round(Math.random() * 20)) * 100) / 100;
                  }

                  if (newDate.getHours() == 12) {
                      // we set daily data on 12th hour only
                      var value1 = Math.round(Math.random() * 12) + 1;
                      chartData.push({
                          date: newDate,
                          value0: value0,
                          value1: value1
                      });
                  } else {
                      chartData.push({
                          date: newDate,
                          value0: value0
                      });
                  }
              }
          }
          generateChartData();

          // 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();
              });
          }

          var chart = AmCharts.makeChart("chartdiv", {
              "type": "serial",
                  "theme": "none",
                  "pathToImages": "/lib/3/images/",
             ...