Interval Selection Event in Primefaces Chart

Question

I have a dynamic LineChart. I am setting the zoom to false but I want to be able to trigger an Ajax Event when selecting an area in the Chart (like the zoom functionnality when selecting the area you want to zoom), I want to call a server method and getting the max and min x axis values of the selected area. Can anyone help with this?

Else if I set the zoom to true, is there any way to get the values from the zoomed area ?

Answer 1

PrimeFaces and JSF is in this context nothing more than an html/javascript/css generator. If you look at the source of the generated page in your browser developer tool, you'll see a lot of javascript, including all datapoints.

<script id="j_idt87_s" type="text/javascript">
    $(function(){PrimeFaces.cw('Chart','chart'{
        id:'j_idt87',
        type:'line',
        data:[[[1,2],[2,1],[3,3],[4,6],[5,8]],[[1,6],[2,3],[3,2],[4,7],[5,9]]],
        title:"Zoom",
        legendPosition:"e",
        axes:{
            xaxis:{
              label:"",
              renderer:$.jqplot.LinearAxisRenderer,
              tickOptions:{angle:0}},
            yaxis: {
              label:"",
              min:0,
              max:10,
              renderer:$.jqplot.LinearAxisRenderer,
              tickOptions:{angle:0}}
         },
         series:[{label:'Series 1',renderer: $.jqplot.LineRenderer,showLine:true,markerOptions:{show:true, style:'filledCircle'}},{label:'Series 2',renderer: $.jqplot.LineRenderer,showLine:true,markerOptions:{show:true, style:'filledCircle'}}],zoom:true,datatip:true},'charts');});
    </script>

So the answer to this question is valid for the PrimeFaces charts as well.

Running the following code (from the link above) in your browser developer tool on the zoom examples will show you the data points that fall in your zoom region

chart = PF('chart').plot;
PF('chart').plot.target.bind('jqplotZoom', function(ev, gridpos, datapos, plot, cursor){
    var plotData =  plot.series[0].data;
    for (var i=0; i< plotData.length; i++) {
        if(plotData[i][0] >= chart.axes.xaxis.min && plotData[i][0] <= chart.axes.xaxis.max ) {
            //this dataset from the original is within the zoomed region
            //You can save these datapoints in a new array
            //This new array will contain your zoom dataset
            //for ex: zoomDataset.push(plotData[i]);
            console.log(plotData[i]);
        }
    }
});

Replacing PF(çhart') with PF('myLineChartWV') will make it work for your example to

Once you have gathered the data, you can use this in e.g. a PrimeFaces remoteCommand to pass it to the server.

Notice that this only takes the x-axis value of the zoom into account. If you want the y-axis taken into account to (so the real zoom area), add

  plotData[i][1] >= chart.axes.yaxis.min && plotData[i][1] <= chart.axes.yaxis.max

to the if-statement in the loop.

Also notice it just takes the first series. If you have multiple, you have some simple homework to do.