JSFiddle - React, Tailwind, and code Playground

by anish_nair

HTML

<script type="text/javascript" src='https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/jquery.jqplot.js'></script>

<script type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.barRenderer.js"></script>

<script type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.categoryAxisRenderer.js"></script>

<link rel="stylesheet" href="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/jquery.jqplot.css" type="text/css"/>

<div id="chart1"></div>

JavaScript

$.jqplot.config.enablePlugins = true;

// Remove single quotes from the numbers..
// var s1 = ['1.5', '3.0', '0.0', '0.0', '0.0', '3.0', '0.0'];

// Change your array to this..
var s1 = [1.5, 3.0, 0.0, 0.0, 0.0, 3.0, 0.0];

var ticks = ['New mould', 'Raw Material', 'color/size', 'Imported/Catalogue' , 'Printing' , 'plating' , 'other'];

plot1 = $.jqplot('chart1', [s1], {
	// Only animate if we're not using excanvas (not in IE 7 or IE 8)..           
	animate: !$.jqplot.use_excanvas,
	seriesDefaults:{
		renderer:$.jqplot.BarRenderer,
		pointLabels: { show: true }
	},
	axes: {
		xaxis: {
			renderer: $.jqplot.CategoryAxisRenderer,
			ticks: ticks
		},
		yaxis: { tickOptions: { formatString: '%.2f' } }
	},
	highlighter: { show: false }
});

$('#chart1').bind('jqplotDataClick',function (ev, seriesIndex, pointIndex, data) {
	$('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
});