How to show the values on the regions of the jqplot chart instead of percentage

ryan picture ryan · Apr 3, 2012 · Viewed 9.3k times · Source

I have javascript code as:

var plot1 = jQuery.jqplot ('chartdiv', [data], 
{ 
  seriesDefaults: {
        // Make this a pie chart.
        renderer: jQuery.jqplot.PieRenderer, 
        rendererOptions: {
          // Put data labels on the pie slices.
          // By default, labels show the percentage of the slice.
          showDataLabels: true,
          dataLabels: 'value'
        }
  }, 
  legend: { show:true, location:'e'}
});


var handler = function(ev, gridpos, datapos, neighbor, plot) { 
    if (neighbor) { 
        alert('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]); 
    }
}; 

$.jqplot.eventListenerHooks.push(['jqplotClick', handler]); 

Now by using dataLabels: 'value' I am able to show values but shown value is 51 instead of 50.667.Value is rounded.But I need to show exact value.How to this??

My second question is that When I have mouse pointer on any region of the chart I want to show something.Is that would be done using jqplotDataMouseOver But how to use it?

Answer

Mark picture Mark · Apr 7, 2012

Your first question can be solved with the dataLabelFormatString property:

seriesDefaults: {
        // Make this a pie chart.
        renderer: jQuery.jqplot.PieRenderer, 
        rendererOptions: {
          // Put data labels on the pie slices.
          // By default, labels show the percentage of the slice.
          showDataLabels: true,
          dataLabels: 'value',
          dataLabelFormatString:'%.4f'
        }
  }, 

The '%.4f' would show 4 decimal places.

Your second question is more difficult. Apparently events on bar charts are not quite ironed out with jqplot. But the last suggestion in that link works for me:

$('#chartdiv').bind('jqplotDataMouseOver', function (ev, seriesIndex, pointIndex, data) { alert('series: '+seriesIndex+', point: '+pointIndex+', data: '+data)}); 

Here's a jsfiddle, remember to cache the JS files since jqplot does not allow hotlinking.