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.

score 10 · Accepted Answer · edited May 23 '17 at 12:09

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.

Hi nick_w Actuaaly I don't want to use alert... I added that code because that was only working code for highlighter. I want the same behavior as in BarGraph for highlighters. Please help me — Android Learner, Jan 21 '13 at 09:44
@AndroidLearner can you update the question with the kind of behaviour you are wanting? — nick_w, Jan 21 '13 at 19:47
+1. Thank you very much.. I ll update my code and test. After I will inform you. Thanks again. — Android Learner, Jan 22 '13 at 07:40
Still not working. Now it has a problem on line 488 "var af = plot.axes[g[j]]._ticks[0].formatter;" Cannot read property 'formatter' of undefined . Did you found a solution? — David Graça, Apr 14 '14 at 14:29
latest version 1.0.8. Are you guys getting JS errors anytime you pass with the mouse over the pie? — David Graça, Apr 15 '14 at 16:59

score 0 · Answer 2 · edited Mar 09 '16 at 15:13

0

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

To make it work again you need to have cursor:

{ show: false }

as part of your pie chart seriesDefaults options.

edited Mar 09 '16 at 15:13

fthiella

48,073
15
90
106

answered Mar 09 '16 at 14:48

Marvin Herbold

1

Whoops - not as part of seriesDefaults but as part of the pie chart options. – Marvin Herbold Mar 09 '16 at 14:49

Use of HIghlighter in PieChart : jQplot

Problem

2 Answers2