JSFiddle - React, Tailwind, and code Playground
HTML
<!--[if lt IE 9]><script type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.css" />
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasOverlay.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.enhancedLegendRenderer.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins
/jqplot.pointLabels.js"></script>
<div id="graph" style="height:400px; width:700px;"></div>
.jqplot('graph', [data], options );
JavaScript
Array.prototype.average=function(){
var sum=0;
var j=0;
for(var i=0;i<this.length;i++){
if(isFinite(this[i])){
sum=sum+parseFloat(this[i]);
j++;
}
}
if(j===0){
return 0;
}else{
return sum/j;
}
}
$(document).ready(function(){
var data = [15.2,13.0,11.7,12.9,16.9,22.7,26.0,22.7,29.7,31.7,21.3,16.7,11.4,6.6,2.7,-5.0,-7.3,-11.3];
var options= {
title: 'Statistics on a Bar Chart'
,seriesColors: ['darkgreen']
,series:[{
label : 'Name',
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barMargin: 5
,fillToZero: true
},
pointLabels: {
show: true
,formatString: '%.1f'
,seriesLabelIndex:1
,hideZeros:false
}
}],
axes: {
xaxis: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
renderer: $.jqplot.CategoryAxisRenderer,
label: 'Sample #'
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
padMin: 0,
pad: 1.1,
label: 'Temperatures (°C)',
rendererOptions: { forceTickAt0: true}
}
},
negativeSeriesColors:['darkred'],
grid:{
background: '#f8f8f8'
},
legend:
{ renderer: $.jqplot.EnhancedLegendRenderer,
show:true, location: 'w', placement: 'outsideGrid',
labels: ['Noch','was'],
rendererOptions: {
numberRows: 0,
numberColumns: 0,
...