JSFiddle - React, Tailwind, and code Playground

by giuseppe straziota

HTML

<canvas id="bchart" height="900" width="700">
  Your browser does not support HTML5 Canvas </canvas>
<canvas id="tip" width="100" height="25"></canvas>

<textarea id="jsonContent"...

CSS

#bchart {
  background-color: white;
  border:1px solid black;
}

#tip {
  background-color: rgba(255, 255, 255,0);
 // border: 1px solid black; 
  position: absolute;
  left: -1800px;
  top: 50px;
}

#jsonContent{
  display:none;
}

JavaScript

$(document).ready(function() {
       var response = document.getElementById('jsonContent').value;
       var parsedJSON = eval('(' + atob(response) + ')');
       var labels = parsedJSON.labels;
       var listaC2 = parsedJSON.c2;
       // chart sample data
       var c2 = listaC2;
       //colori
       var colors = new Array('rgb(241, 150, 112)', 'rgb(225, 101, 82)', 'rgb(201, 74, 83)', 'rgb(190, 81, 104)', 'rgb(163, 73, 116)', 'rgb(153, 55, 103)', 'rgb(101, 56, 125)', 'rgb(78, 36, 114)', 'rgb(145, 99, 182)', 'rgb(226, 121, 163)', 'rgb(224, 89, 139)', 'rgb(124, 159, 176)', 'rgb(86, 152, 196)', 'rgb(154, 191, 136)');
       
       var canvas;
       var tipCanvas;
       var tipCtx;
       var context;
       // chart properties
       var cWidth, cHeight, cMargin, cSpace;
       var cMarginSpace, cMarginHeight;
       // bar properties
       var bWidth, bMargin, totalBars, maxDataValue;
       var bWidthMargin;
       // bar animation
       var ctr, numctr, speed;
       // axis property
       var totLabelsOnYAxis;
       // barchart constructor
       var canvasOffset;
       var offsetX;
       var offsetY;
		   var objs = [];
       
       function barChart() {
       
         canvas = document.getElementById('bchart');
				 tipCanvas = document.getElementById('tip');

         if (canvas && canvas.getContext) {
           context = canvas.getContext('2d');
         }

         if (tipCanvas && tipCanvas.getContext) {
           tipCtx = tipCanvas.getContext('2d');
         }
         
         canvasOffset = $('#bchart').offset();
         offsetX = canvasOffset.left;
         offsetY = canvasOffset.top;
         context.fillStyle = '#CC5422';
         context.fill();
         chartSettings();
         drawAxisLabelMarkers();
         drawChartWithAnimation();
       }
       // initialize the chart and bar values
       function chartSettings() {
         // chart properties
         cMargin = 75;
         cSpace = 60;
         if (c2.length > 8)...