JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script src="//rawgit.com/cquartier/flot.dashes/master/jquery.flot.dashes.js"></script>
<div id="placeholder" style="width: 400px; height: 400px"></div>

JavaScript

var series = [
    {"label":"One", "dashes":{"show": "true"},"data":[
        [0, "5"],
        [1, "4"],
        [2, "5"],
        [3, "14"],
        [4, "44"],
        [5, "31"],
        [6, "6"],
        [7, "26"],
        [8, "18"],
        [9, "77"],
        [10, "4"]
        ]
    },{"label":"Two","data":[
         [0, "2"],
        [1, "5"],
        [2, "14"],
        [3, "15"],
        [4, "4"],
        [5, "34"],
        [6, "31"],
        [7, "16"],
        [8, "16"],
        [9, "8"],
        [10, "57"]
      
        ]
    }];



var options = {
      //yaxis: {max: maxValue, min: minValue},
      //grid: {hoverable: true, clickable: true},
      //legend: {show: false}
      //xaxis: {tickFormatter: null}
  };

$.plot("#placeholder",  series , options);

$("#placeholder").bind("plotclick", function (event, pos, item){
   alert(item);
});