Question
Maantic Inc
US
Last activity: 2 Jul 2018 11:29 EDT
How to customize chart on-click event in pega v721
Hi,
When user click on chart slices, we want to show the corresponding workobjects list in next screen.
How to implement that in pega v721.
***Updated by moderator: Lochan to update platform capability***
EPAM Systems, Inc.
ES
Hope it helps:- Drill down pie in chart
EPAM Systems, Inc.
ES
Pegasystems Inc.
US
In Pega 7.2.1 this feature is only available when viewing a report. In Pega 7.3 we extended this functionality to report definition charts embedded using the non-autogenerated Chart control.
Maantic Inc
US
Thank you Trevor.
Do we have any other workaround to implement in pega v721?
My customer is recently upgraded to v721, immediately they are not able to move to v73
Pegasystems Inc.
US
Unfortunately I do not have a workaround for earlier versions. You would have to build a custom chart using a JavaScript library of your choosing.
Maantic Inc
US
Thank you Trevor. Is there any sample to code refer chart using a javascript?
Pegasystems Inc.
US
I'm afraid building a custom chart is no easy task. You can start by creating a custom control or section with this template:
I'm afraid building a custom chart is no easy task. You can start by creating a custom control or section with this template:
<pega:choose>
<pega:when test="pxRequestor.pyPegaDesignMode != 'true'">
<%-- Include the chart JS files --%>
<pega:onlyonce name="pzCKChartScripts">
<pega:static app="webwb" type="script">
<pega:bundle name="pzpega_chart_scripts"/>
</pega:static>
</pega:onlyonce>
<%
String chartId = "CUSTOMCHART" + tools.getDateTimeUtils().currentTimeUnique();
%>
<%--Generate div that will hold the chart--%>
<div data-ctl="["Chart"]" id="<%=chartId%>" style="width:100px;height:300px" data-loadmode="auto" data-chartsubtype="pie2d" data-charttype="custom" data-library="fusion"></div>
<%--Initialize the chart using pxChart's initializer--%>
<script>
if (typeof window.Charts.fusionChartTypes["custom"] === undefined) {
window.Charts.fusionChartTypes["custom"] = {};
}
// Change "pie2d" to the fusioncharts chart type of your choosing
window.Charts.fusionChartTypes["custom"]["pie2d"] = "pie2d";
Charts.initSingleChart("<%=chartId%>", { sourcedata: {
"chart": {
// Configure chart options here
},
"data": [
// Use JSP to generate JSON here
]
} } );
</script>
</pega:when>
<pega:otherwise>
Pie chart
</pega:otherwise>
</pega:choose>
You will need to fill in your data and configure the appearance of the chart. The FusionCharts documentation will be helpful here. Once you have the chart working you can add actions by generating link attributes with JavaScript callbacks into the data. There is documentation for link callbacks in FusionCharts.