JSFiddle - React, Tailwind, and code Playground

by aspandit

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/excanvas.js"></script>
<h1>Hover over the bars</h1>
<div id="placeholder" style="width:600px;height:300px;">
</div>

JavaScript

$(function () {
   
   // [question number - 1,percent of teams score]
   var score0 = [[0,2],[1,7],[2,null],[3,5],[4,null],[5,5]];
   var score1 = [[0,30],[1,20],[2,null],[3,10],[4,null],[5,10]];
   var score2 = [[0,11],[1,18],[2,null],[3,21],[4,null],[5,21]];
   var score3 = [[0,14],[1,24],[2,null],[3,30],[4,null],[5,20]];
   var score4 = [[0,18],[1,11],[2,null],[3,12],[4,null],[5,22]];
   var score5 = [[0,25],[1,20],[2,null],[3,22],[4,null],[5,22]];
    
    $.plot($("#placeholder"),[
     {data: score0,
    	color: '#FF0000' },
     {data: score1,
    	color: '#ff6600' },
    {data: score2,
    	color: '#FFCC00' },
    {data: score3,
    	color: '#ccff00' },
      {data: score4,
    	color: '#66ff00' },
      {data: score5,
    	color: '#00FF00' }], {
       xaxis: {
    					ticks: [[0,'Question 1a'],[1,'Question 1b'],[2,''],[3,'Question 2'],[4,''],[5,'Question 3']]
  			},
			grid: {
				hoverable: true,
				clickable: true
			},series: {
					stack: true,
					lines: {
						show: false,
						fill: true,
						steps: 0
					},
					bars: {
						show: true,
            align: 'center',
						barWidth: 1
					}
				}
			});
      
      
      $("<div id='tooltip'></div>").css({
			position: "absolute",
			display: "none",
			border: "1px solid #fdd",
			padding: "2px",
			"background-color": "#fee",
			opacity: 0.80
		}).appendTo("body");
    
	$("#placeholder").bind("plothover", function (event, pos, item) {
			
      if (item) {
					var x = item.datapoint[0],
						y = item.datapoint[1];

					$("#tooltip").html(item.series.xaxis.ticks[x].label + ": " + item.series.data[x][1] + "% of the class scored " + item.seriesIndex)
						.css({top: item.pageY+5, left: item.pageX+5})
						.fadeIn(200);
				} else {
					$("#tooltip").hide();
				}
			
		});
});