Question

I’m looking for a way to activate a/some datapoint(s) on a jquery flot line chart by triggering a click on an external button. How could i do this – how would i get a handle on a datapoint without using the mouse – and how would i activate it and activate a tooltip?

Thanks for any expert advice!

Answer 1

In my previous comment I was unaware of the API hooks and methods that exist in FLOT. The old docs were a very primitive txt file. Here is a simple example using highlight/unhighlight as well as using the pointOffset() method to calculate a data point’s pixel position in the chart in order to position a tooltip.

<button data-index="4">Highlight 5th point</button>
<button data-index="9">Highlight 10th point</button>
<button data-index="19">Highlight 20th point</button>

JS:

var plotData =/* data array*/

$('button').click(function(){
    var idx=$(this).data('index');
    plot.unhighlight()
    plot.highlight(dataSeriesIndex, idx);
    var dataPoint=plotData[idx];
    var position=plot.pointOffset({ x: dataPoint[0], y:  dataPoint[1] })
    var tipHTML='Data:<br> X='+dataPoint[0] +'<br> Y=' +dataPoint[1];
    $('#tooltip').css({left: position.left+10, top: position.top-10}).show().html(tipHTML)     
})

DEMO: http://jsfiddle.net/et87Y/73/