JSFiddle - React, Tailwind, and code Playground

by AnthonyLeGovic

HTML

<link rel="stylesheet" href="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.css">
<script src="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.pointLabels.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.cursor.js"></script>
<div id="chart1" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>

JavaScript

var tfsGraphNodes= [[1,4],[2,2],[3,21],[4,61],[5,71],[6,10]];

var plot1 = $.jqplot('chart1', [tfsGraphNodes], {
 title: 'Applicant Behaviour', 
 series: [{color: 'green'},
          {label: 'Applicant Trend'}],   
 legend: {show: true}, 
 highlighter: {showTooltip: true}, 
 axes: {
  xaxis: {
   tickOptions: {formatString: '%d'},
   //Comment or un-comment to see what happens on xaxis's ticks
   tickInterval: 1
  }
 }
});

$("#chart1").bind('click', function(ev, gridpos, datapos, neighbor, data){
  console.log(ev);
    console.log("Coordinates according to chart div : " + ev.pageX + " - " + ev.pageY);
    console.log("Coordinates according to full screen : " + ev.screenX + " - " + ev.screenY);
    console.log("Coordinates according to the graphic : " + ev.originalEvent.layerX + " - " + ev.originalEvent.layerY);
});