CODEWITHSUNDEEP
primefacesjqplot
korgmatose
korgmatose

Reputation: 265

Labels for tooltips on primefaces barchartseries

I have tried to search both the forum and Google extensively, but I have problems understanding how I should make this work:

PrimeFaces6

I have a BarchartModel based on the tutorial in the ShowCase: CODE: SELECT ALL private BarChartModel initStatusBarChart() { BarChartModel model = new BarChartModel();

    ChartSeries statusMessages = new ChartSeries();
    statusMessages.setLabel("Label"));
    statusMessages.set("Some String 1", list1.size());
    statusMessages.set("Some String 2", list2.size());


    model.addSeries(statusMessages);
    return model;
}

The issue is that on render, I get tooltips the format of

"1, 515" and "2, 432", where 515 and 432 are the sizes of list1 and list2, respectively.

How can I replace 1 and 2 with the values "Some String" 1 and 2 ? Have tried extending highlighter and using dataTipFormat, with no success.

Upvotes: 1

Views: 1755

Answers (2)

lagz89
lagz89

Reputation: 1

Based on Alex's answer I have come up with this. Only requiring javascript - it displays the label and value:

In the backing bean, set a JavaScript function name this way:

barModel.setDatatipEditor("chartDatatipEditor");

In the HTML file:

function chartDatatipEditor(str, seriesIndex, pointIndex, plot) {
    return plot.series[seriesIndex].label + ' - ' + plot.data[seriesIndex][pointIndex];
}

Upvotes: 0

alex
alex

Reputation: 61

I solved the problem using the datatip editor of the chart model (with Primefaces 6.1, by the way). I used this for a stacked bar chart. I needed to apply this solution at two places: the backing bean and the JSF page.

In the backing bean I had to set a JavaScript function name this way:

barModel.setDatatipEditor("chartDatatipEditor");

I tried to set it using the corresponding tag attribute in the JSF page but to no effect.

In the JSF I inserted this JavaScript code:

<script type="text/javascript">
function chartDatatipEditor(str, seriesIndex, pointIndex, plot) {
  //console.log('chartDatatipEditor: '+str+" - "+seriesIndex+" - "+pointIndex);
  var point = seriesIndex+','+pointIndex;
  #{bean.datatipsJs}
}
</script>

This JS function gets the chart coordinates as parameters. I concat them so that the following JS code gets easier. seriesIndex is the index of the chart series. pointIndex is the index on the X scale of the diagram.

To find out what are the correct values for your chart you can uncomment the console.log line above.

The inserted JS code is constructed in the backing bean this way:

private Map<String, String> chartDatatips;

public String getDatatipsJs() {
    StringBuilder sb = new StringBuilder("switch ( point ) {\n");
    for (String point : chartDatatips.keySet()) {
        sb.append("case '").append(point).append("': return '").append(chartDatatips.get(point)).append("'; break;\n");
    }
    sb.append("default: return 'Unknown point'; break; }");
    return sb.toString();
}

The map chartDatatips has the coordinate point as key (e.g., "2,1") and the tooltip as value.

During the chart setup you obviously have to fill this map with useful details ;-)

Like this:

chartDatatips.put("2,5", "Label ...");
...

Hope this helps, if you didn't already solved this.

~Alex

Upvotes: 6

Related Questions