How to plot decimal values in JQPlot Bar graphs?

Question

I am using jqplots to generate bar graphs . I am able to generate exact graphs for whole numbers. But I am not able to generate graph for the values having decimal points. Below is the code I have used :

<script type="text/javascript">
$(document).ready(function(){ 
$.jqplot.config.enablePlugins = true;  
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);          
}       
);   

}); 

</script>

I am getting the erroe as follows:

this[r]._ticks[0] is undefined http://blrsrigwd11074.itcinfotech.com:81/Windchill/netmarkets/javascript/report/plugins/jqplot.pointLabels.min.js Line 57

PLease help me out on this issue.

Answer 1

I could spot the error by looking at your code on the first go. But I wasn't sure, if that was the actual cause for the error.

You are using the data array as var s1 = ['1.5', '3.0', '0.0', '0.0', '0.0', '3.0', '0.0']; jqPlot is trying to read the values from the data-array, and it expects an Integer or Decimal value(s).

In your case, you are passing String values in the array. So all you need to do is remove the single quotes('') from the values.

The array should be something like this, var s1 = [1.5, 3.0, 0.0, 0.0, 0.0, 3.0, 0.0]; //Remove quotes var s1 = [1.5, 3.0, 0.0, 0.0, 0.0, 3.0, 0.0]; //Remove quotes

To confirm this, I ran your code thru JSFiddle. Here's the link JSFiddle Code

Try both the arrays in the fiddle, values with quotes( var s1 = ['1.5', '3.0', '0.0', '0.0', '0.0', '3.0', '0.0']; ) and without quotes( var s1 = [1.5, 3.0, 0.0, 0.0, 0.0, 3.0, 0.0] ). The one with single quotes won't plot the bar-chart.

Hope it helps.