JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
  <h1>Flot Examples</h1>
  <div id="placeholder" style="width:500px; height:300px;"></div>

JavaScript

var data,data1,options,chart;
  var dataMax = [], dataMin=[], dataEntered=[], data4=[];

dataMax.push([12,4.08]);
dataMax.push([16,6.4]);
dataMax.push([20,8,72]);
dataMax.push([24,11.04]);
dataMax.push([28,13.36]);
dataMax.push([32,15.68]);
dataMax.push([36,18]);



dataMin.push([12,1.94]);
dataMin.push([16,3.7]);
dataMin.push([20,5.46]);
dataMin.push([24,7.22]);
dataMin.push([28,8.98]);
dataMin.push([32,10.74]);
dataMin.push([36,12.5]);


dataEntered.push([12,2.94]);
dataEntered.push([16,4.7]);
dataEntered.push([20,6.46]);
dataEntered.push([24,8.22]);
dataEntered.push([28,9.98]);
dataEntered.push([32,11.74]);
dataEntered.push([36,14.5]);

/*for(var i = 1; i <= 9; i++) { data4.push([i,50])} // ALL AREA
  for(var i = 1; i < 10; i++) { data1.push([i,i * 2])} //BOTTOM
 for(var i = 1; i < 10; i++) { data2.push([i,i * 4])}  // UPPER
 for(var i = 1; i < 10; i++) { data3.push([i,i * 3])} // MIDDLE LINE

data = [{ data:data4, label:"linear", lines:{show:true, fill: true, fillColor: "#E693B0" , fillOpacity:0.5}},
        { data:data2, label:"linear", lines:{show:true, fill: true, fillColor: "#49D66C", fillOpacity:0.5}}, {              data:data3, label:"linear", lines:{show:true}, points:{show:true}},          
           { data:data1, label:"linear", lines:{show:true, fill: true,
                                                fillColor:  "#E693B0", fillOpacity:0.5} } 
         
        ];*/

//{ data:dataMax, label:"linear", lines:{show:true, fill: true, fillColor: { colors: ["#E693B0", "#548544", "#9DA469","#30BF00",{ opacity: 0 }] } }}
data = [{ data:dataMax, label:"linear", lines:{show:true, fillColor:"#436ED2" }},
          { data:dataMin, label:"linear", lines:{show:true}},
{              data:dataEntered, label:"linear", lines:{show:true}, points:{show:true}}        
        ];

  options = {legend:{position:"nw"}, grid: {
        markings: [
            {xaxis: { from: 0, to: 36 },color: "#E693B0"}
        ]}};

  $(document).ready(function(){
  	chart =...