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 ?

Search for dupl!cates: http://stackoverflow.com/questions/16732335/get-list-of-data-points-in-the-canvas-after-zoom-jqplot# — Kukeltje, Sep 21 '15 at 18:26
It is not a duplicate, the question you posted he is generating the jqPlot chart manually in javascript, but in my case it's generated dynamically in my java bean. — hamza-don, Sep 22 '15 at 12:44
Ok this is my source code for the chart, can you tell me how to use the answer posted in that question in my case? `` — hamza-don, Sep 22 '15 at 12:49
He/She binds a function to the zoom event and receives the data in there. So it does not automatically mean way the data is 'generated' matters. Or in other words: take a look at the generated html source of your chart. Lots of javascript in there WITH the points — Kukeltje, Sep 22 '15 at 12:51
JSF (and PrimeFaces) is in this context nothing more than an html/css/javascript generator. — Kukeltje, Sep 22 '15 at 12:52
Ok I am understanding, so in my case how can I get the jqPlot chart object because I tried a couple of source codes but it's not working? — hamza-don, Sep 22 '15 at 12:55
What DID you try? Dit you use your browser developer tool to see what `PF('myLineChartWV")` shows? There is a plot on there... which, maybe not surprisingly contains a target, axis etc... — Kukeltje, Sep 22 '15 at 13:04

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

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.

I am getting `Uncaught TypeError: Cannot read property 'plot' of undefined` in my console. — hamza-don, Sep 22 '15 at 13:17
Then you either do something wrong (what does `PF('myLineChartWV')` show you on your console (dig into things by clicking them)) or you have an old PF version which does not support this — Kukeltje, Sep 22 '15 at 13:19
I am using PF 5.2 and `PF('myLineChartWV')` is printing undefined — hamza-don, Sep 22 '15 at 13:23
Ok I am figuring out why it's printing undefined now, because the panel that contains the chart is generated in a row of a datatable and it's rendered when user expand the row. I will try to print the widgetVar value when expanding the row — hamza-don, Sep 22 '15 at 13:33
Ok I binded a function to the row expand action and it's printing for `PF('myLineChartWV')` in the console `[object Object]` — hamza-don, Sep 22 '15 at 13:43
ok, so now you can go forward... Good luck (and don't forget to accept the answer and upvote) — Kukeltje, Sep 22 '15 at 13:46
Ok I am trying to make it work now but according to your help and answers I am assuming that your answer is correct. Thanks :) — hamza-don, Sep 22 '15 at 13:56
You can copy-paste the javascript code above in the your browser developer tool if you have the PrimeFaces showcase open on the chart zoom page and see it work! — Kukeltje, Sep 22 '15 at 14:01
plotdata[i] **IS** the value (x,y in an array) that falls in the zoomed area — Kukeltje, Sep 22 '15 at 14:17

Interval Selection Event in Primefaces Chart

1 Answers1

Linked