Using HIghlighter in PieChart: jQplot

Question

I want to use the Highlighter function for PieChart. My code

function device_ownership_graph(titleOfGraph, corporateOwned, corporateShared, employeeOwned) { var arrCorporateOwned = [ 'Corporate-Owned', corporateOwned ]; var arrCorporateShared = [ 'Corporate-Shared', corporateShared ]; var arrEmployeeOwned = [ 'Employee-Owned', employeeOwned ]; $.jqplot.config.enablePlugins = true; /*Here we construct graph*/ $.jqplot('device_ownership_graph', [ [ arrCorporateOwned, arrCorporateShared, arrEmployeeOwned ] ], { title : { text : titleOfGraph, // title for the plot, show : true, fontSize : 14, textColor : '#808080', textAlign : 'center' }, seriesColors : [ "#00b0f0", "#ffc000", "#92d050"], seriesDefaults : { // Make this a pie chart. renderer : jQuery.jqplot.PieRenderer, shadow: false, rendererOptions : { // Put data labels on the pie slices. // By default, labels show the percentage of the slice. showDataLabels : true, startAngle: 90, sliceMargin: 1, //highlightMouseOver: true highlightMouseDown: true } }, legend : { renderer : $.jqplot.PieLegendRenderer, show : true, rendererOptions : { numberRows : 1, numberColumns : 3, disableIEFading : false }, location : 'n', placement : 'outsideGrid', marginTop : '0px', marginBottom : '0px' }, grid : { drawGridlines: false, show : true, background : 'transparent', borderWidth : 1, shadow : false }, highlighter: { showTooltip: true, tooltipFade: true } }); $('#device_ownership_graph .jqplot-data-label').css('color', '#000000'); $('#device_ownership_graph').bind('jqplotDataHighlight', function (ev, seriesIndex, pointIndex, data) { alert('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);}); } 

Problem

I get two different errors in two different browsers when moving the mouse on slices.

Chrome: -

 Uncaught TypeError: Cannot read property 'formatter' of undefined jqplot.highlighter.min.js:57 

Mozila: -

 q._xaxis._ticks[0] is undefined 

And another problem, when I use highlightMouseDown: true its working (showing a warning), but when I use highlightMouseOver: true , it does not work.

What am I doing wrong in my code? Please help me.

---

UPDATE: Jan 22, 2013

---

I need marker behavior as it works in BarGraph. I used alert() in my code, but this code is only for testing highliter.

Answer 1

Both errors you receive relate to the same problem. This line in jqplot.highlighter.min.js is as follows:

 var w=q._xaxis._ticks[0].formatter; 

Chrome cannot access the formatter property because q._xaxis._ticks is undefined (as specified in Firefox).

The solution (inspired by How to display hints in a jqplot pie chart ) is to add the following code to the seriesDefaults configuration:

 highlighter: { show: true, formatString:'%s', tooltipLocation:'sw', useAxesFormatters:false } 

In your case, seriesDefaults would look like this:

 seriesDefaults:{ // Make this a pie chart. renderer : jQuery.jqplot.PieRenderer, shadow: false, rendererOptions : { // Put data labels on the pie slices. // By default, labels show the percentage of the slice. showDataLabels : true, startAngle: 90, sliceMargin: 1, highlightMouseOver: true //highlightMouseDown: true }, highlighter: { show: true, //formatString:'%s', //tooltipLocation:'sw', useAxesFormatters:false } } 

It is important to set useAxesFormatters to false. Graphical graphs have no axes, so the earlier error regarding q._xaxis._ticks is undefined.

Please note that you will probably need the commented formatString and tooltipLocation when moving away from alert tooltips.

Edit:

I assume that you mean the kind of highlighting that is on this page: http://www.jqplot.com/deploy/dist/examples/barTest.html

In this latest highlighter configuration that you currently have:

 highlighter: { showTooltip: true, tooltipFade: true } 

If you need a highlight effect and no tooltip, set showTooltip to false . Then remove the line of code that you are attaching to the jqplotDataHighlight event. This should ensure that the highlight effect is displayed.

Answer 2

The previous answers do not work for me: it turns out that if you enable jqplot.cursor , it will break the pie chart.

To work again, you need to have a cursor:

 { show: false } 

as part of your seriesDefaults pie chart.