JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.min.js"></script>

    
    <title>Date Data</title>
 

 
    <body>
    <h2>Date Data </h2>
    <p>

        <div id="legendcontainer" style="width: 1100px;position:"></div>
        <div id="placeholder" style="width:1100px;height:400px;"></div>
        <div id="legend" style="width:600px;height:300px;"> </div>

    </p>












</body>

JavaScript

$('#legend .legendCB').click(function(){ 


        plotByChoice(true);

});
var DataSet1 = [ 
                 [1356998400000, 2.4],
                [1357084800000, 3.4 ],
                [1357171200000, 4.5 ],
                [1357257600000, 5 ],
                [1357344000000,  5],
               
];
     


  var datasets ={
    "DataSet1" :{
      label : "DataSet1",
      data: DataSet1
    },
 


  };


var firstTime =true;
function plotByChoice(doAll)
{    

    
  data = [];
    if (doAll != null)
    {
         
        $.each(datasets, function(key, val) {
            data.push(val);
        });
    }   
    else
    {
        $('#legend .legendCB').each(
            function(){

                
                if (this.checked)
                {         
                    
                     data.push(datasets[this.id]);
                }
                else
                {
                     data.push({label: this.id, data: []})
                }        
            }
        );
    }        

    $.plot($("#placeholder"),
          data,
           { 
               xaxis:  {
                      mode: "time", timeformat: "%m/%d/%y", minTickSize: [1, "day"]
                },
               yaxes: [ { min: 0 },
                        {
                          // align if we are to the right
                          alignTicksWithAxis: "right",
                          position: "right",
                          min :-25,
                          max:50                          
                        } ],


                                       // legend: { labelBoxBorderColor: "#0200f0", container: $("#legendcontainer"), noColumns: 2},
                 legend: {
                 container: $("#legend"),
            labelFormatter: function (label, series) {
                var cb = '<input class="legendCB" type="checkbox" ';
                if (series.data.length > 0) {
                    cb += 'checked="true" ';
              ...