jqplot : how to display value from an array in a highlighter

Question

I have a chart which represent a number of elements per month. I would like to show the list of those elements in my highlighter. The data I received are the following :

[["2013-12-01", 2, ["First element", "Second element"]], ["2014-01-01", 0, []]]

Actually, I'm able to display in my tooltip the number of element I have, but I don't know how to display the list of the elements. My highlighter code is the following :

highlighter: {
                tooltipAxes: 'y',
                formatString:'%u elements',
                showLabel: true,
                sizeAdjust: 7.5,
                  },

It effectively display the number of elements. At the end, I would like to have something like this as an html code in my tooltip :

2 elements : <br>
<table><tr><td>First element</td><td> Second element</td></tr></table>

One solution could be to generate the html code in my data but I would like to separate formatting and data generation. Any "clean" solution?

Thanks in advance!

Answer 1

Looking at the api for the jqplot.highlighter.js plugin, it doesn't appear to give you that level of control (it would be nice if it had a formatter callback). So, I'd just drop the plugin all together and code it yourself using the jqplotDataHighlight and jqplotDataUnhighlight events:

    $('#chart2').bind('jqplotDataHighlight', 
        function (ev, seriesIndex, pointIndex, data) {
            var aList = myData[pointIndex][2];
            $('#tooltip').html(aList.join('<br/>'));
            $('#tooltip').css('display','block');
        }
    );

    $('#chart2').bind('jqplotDataUnhighlight', 
        function (ev) {
            $('#tooltip').css('display','none');
        }
    );

Here's a working example.