Use of HIghlighter in PieChart : jQplot

Question

I want to use Highlighter functionality in to a PieChart. My code is

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 am getting two different errors in two different browsers when mouse-move event on slices.

Chrome : -

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

Mozila :-

q._xaxis._ticks[0] is undefined

And one more issue, when I use highlightMouseDown: true its working (showing an alert) but when I use highlightMouseOver: true its not working.

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

---

UPDATE : 22 Jan 2013

---

I want the behavior of highlighter as it works in BarGraph. I used alert() in my given code, but that code is only for testing of highliter.

Answer 1

Both of the errors you are getting refer to the same problem. This line in jqplot.highlighter.min.js is the one:

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

Chrome can't access the formatter property because q._xaxis._ticks is undefined (as reported in Firefox).

The solution (inspired by How to display tooltips on jqplot pie chart) is to add the following code into your seriesDefaults configuration:

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

In your case, seriesDefaults would then look like:

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
    }
}

The important thing is setting useAxesFormatters to false. Pie graphs don't have axes, hence the earlier error regarding q._xaxis._ticks being undefined.

Note that you will likely need the commented out formatString and tooltipLocation properties when you move away from using alert-based tooltips.

Edit:

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

In that last highlighter configuration you currently have:

highlighter: {
    showTooltip: true,
    tooltipFade: true
}

If you just want the highlighting effect and no tooltip, set showTooltip to false. Then remove the line of code where you bind to the jqplotDataHighlight event. This should ensure that the highlight effect will show up.