JSFiddle - React, Tailwind, and code Playground

by Camille Bechayda

HTML

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></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-family: Verdana;
  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",
  "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"
  },
  "periodSelector": {
    "position": "left",
    "inputFieldsEnabled": false,
    "periods": [ {
      "period": "DD",
      "count": 10,
      "label": "10 days"
    },...