CODEWITHSUNDEEP
javascriptjquerychartsjqplot
Nickolay Ninarski
Nickolay Ninarski

Reputation: 97

How to highlight a jqplot bar chart with javascript

I have a data table which is parsed and is used to generate a bar chart with jqplot. I want to be able to highlight the specific bar when the table row is hovered.

Highlighting the way around is easy - just hooking to the jqplotDataHighlight and jqplotDataUnhighlight events. Any ideas how to do it the way around?

Upvotes: 2

Views: 4414

Answers (2)

Nickolay Ninarski
Nickolay Ninarski

Reputation: 97

I kind of nailed it down.

I have extended the Highlighter object located in jqplot.highight.js so it would allow us to highlight and unhighlight from outside the library.

Sill this can be used for any highlight but the renderer should be detected. Which I didn't spent the time to do so.

$.jqplot.Highlighter.highlightBar = function(plot, serIndex, barId, barXVal, barYVal) {
    //We just use the showTooltip. Simple!
    var neighbor = {
        seriesIndex: serIndex,
        pointIndex: barId,
        data: {
            0: barXVal,
            1: barYVal
        },
        gridData: plot.series[serIndex].gridData[barId],
        points: plot.series[serIndex]._barPoints[barId]
    }
    showTooltip(plot, plot.series[serIndex], neighbor);
    barHighlight(plot, serIndex, barId, neighbor.points);

}

function barHighlight(plot, sidx, pidx, points) {
    var s = plot.series[sidx];
    var canvas = plot.plugins.barRenderer.highlightCanvas;
    canvas._ctx.clearRect(0,0,canvas._ctx.canvas.width, canvas._ctx.canvas.height);
    s._highlightedPoint = pidx;
    plot.plugins.barRenderer.highlightedSeriesIndex = sidx;
    var opts = {fillStyle: s.highlightColors[pidx]};
    s.renderer.shapeRenderer.draw(canvas._ctx, points, opts);
    canvas = null;
}

function barUnhighlight(plot) {
    var canvas = plot.plugins.barRenderer.highlightCanvas;
    canvas._ctx.clearRect(0,0, canvas._ctx.canvas.width, canvas._ctx.canvas.height);
    for (var i=0; i<plot.series.length; i++) {
        plot.series[i]._highlightedPoint = null;
    }
    plot.plugins.barRenderer.highlightedSeriesIndex = null;
    plot.target.trigger('jqplotDataUnhighlight');
    canvas =  null;
}

$.jqplot.Highlighter.clearHighlight = function (plot) {
    barUnighlight(plot);
}

Upvotes: 1

Boro
Boro

Reputation: 7943

Nice that you managed to sort it out by yourself, Nickolay.

I would like to propose a different approach, though. One which doesn't involve changes to the highlighter script. My solution which you could adopt to your needs is presented in my answer to a similar problem.

Direct link to jsfiddle presenting my approach.

Upvotes: 1

Related Questions