CODEWITHSUNDEEP
jsfprimefacesjqplot
roel
roel

Reputation: 2003

jqplot bar chart: Get series label value onclick

I want to display the label of a bar when I click on it. I have a

Here is the jsf code

<p:barChart id="endingContractsChart" value="#{portalContractLifeCycle.endingContractsChartModel}" 
        binding="#{portalContractLifeCycle.endingContractsBarChart}" extender="toInteger" 
        barMargin="3" min="0" max="5" yaxisFormat="%d" xaxisGrid="false" styleClass="kmstate mm-metergauge" animate="true"  >

</p:barChart>

and this is the javascript(jquery) I use for the onclick event:

var plot =$(document.getElementById('rrrr:qcontractoverview:endingContractsChart'));

 plot.bind('jqplotDataClick',
        function (ev, seriesIndex, pointIndex, data) {
document.getElementById('rrrr:qcontractoverview:pointIndex').value=pointIndex;
    $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data+'x : '+plot.series[seriesIndex].data[pointIndex][0]+' Y: '+plot.series[seriesIndex]["label"] );
        }
      );

info3 is a span where I display the values (as in the example on http://www.jqplot.com/tests/bar-charts.php)

I tried it with plot.series[seriesIndex]["label"] but the problem is that plot is undefined.

All examples on the internets I see are when the chart is defined in javascript and not in jsf. And there plot is assigned when creating the chart. I tried with assigning plot to the (document.getElementById('rrrr:qcontractoverview:endingContractsChart') but that didn't work.

Any suggestions or solution on how I can achive my goal?

Upvotes: 0

Views: 3992

Answers (4)

IWebb
IWebb

Reputation: 86

Not sure if this is of any help I had a similar problem on the drop of a point on a line chart and wanted to read the label of the axis.

$('#chartdiv').bind("jqplotClick", function(ev, seriesIndex, pointIndex, data, plot) {

    console.log('Plot Index: '+data.data[0]);
    console.log('Plot Value: '+data.data[1]);  
    console.log('Plot Label: '+plot.series[data.seriesIndex].label);
});

There is an extra parameter on the callback that refers to the whole plot from there you can use the plotIndex in data to access the series label.

Upvotes: 0

nosnhoj
nosnhoj

Reputation: 793

Maybe you can try <p:ajax/> like what described in primefaces show case

And your code may looks like:

<p:barChart id="endingContractsChart" value="#{portalContractLifeCycle.endingContractsChartModel}" 
    binding="#{portalContractLifeCycle.endingContractsBarChart}" extender="toInteger" 
    barMargin="3" min="0" max="5" yaxisFormat="%d" xaxisGrid="false" styleClass="kmstate mm-metergauge" animate="true"  >
<p:ajax event="itemSelect" listener="#{portalContractLifeCycle.itemSelect}" update="info3" />
</p:barChart>

And in the Backing Bean:

private String info;

public void itemSelect(ItemSelectEvent event) {  
info="series: "+ event.getSeriesIndex() +", point: "+event.getItemIndex();
}  //You may gain data with the series and point 

public String getInfo(){
return info;
}

Upvotes: 0

Vicky Kandhvar
Vicky Kandhvar

Reputation: 11

Oh ok. It depends on the name you have used while passing the data to the graph.

If the data is like below
var seriesData =[{label:"XYZ"},{label:"ABC"}];

The below code gets you the label seriesData[seriesIndex]["label"] or seriesData[seriesIndex].label

So just check the name of the var in the data, and use the same.

Upvotes: 0

Vicky Kandhvar
Vicky Kandhvar

Reputation: 11

You have already tied the click event to plot. So again you don't have to use plot.series[seriesIndex]["label"]. Instead just use series[seriesIndex]["label"].

This will give you the label value you are looking for.

Upvotes: 1

Related Questions