Serial Chart: How to add percenatge value

Support
#1

Hi,
I want to show percentage value above each bar in Serial Chart(Just like we show in pie charts for each slice). How can I do that?

#3

Hello,

It is possible to do with Label and custom label function:

XML descriptor example:

<chart:graph alphaField="alpha"
             ...
             type="COLUMN"
             labelText=" "
             valueField="income">
    <chart:labelFunction>
        <![CDATA[
            function(item) {
              var total = 0;
              var graphData = item.graph.data;
              for (var i = 0; i < graphData.length; i++) {
                total += graphData[i].dataContext[item.graph.valueField];
              }
              var percent = Math.round(item.values.value / total * 10000) / 100;
              return percent + '%';
            }
        ]]>
    </chart:labelFunction>
</chart:graph>

Controller example:

@Inject
private SerialChart serialChart;

@Subscribe
private void onInit(InitEvent event) {
    List<Graph> graphs = serialChart.getGraphs();
    for (Graph graph : graphs) {
        if (graph.getId().equals("graph_id")) {
            graph.setLabelText(" ");
            graph.setLabelFunction(new JsFunction(
                    "function(item) {\n" +
                    "  var total = 0;\n" +
                    "  var graphData = item.graph.data;\n" +
                    "  for (var i = 0; i < graphData.length; i++) {\n" +
                    "    total += graphData[i].dataContext[item.graph.valueField];\n" +
                    "  }\n" +
                    "  var percent = Math.round(item.values.value / total * 10000) / 100;\n" +
                    "  return percent + '%';\n" +
                    "}"));
        }
    }
}
#5

Thanks! Works Fine.