Custom chart control
We are struggling to create a custom chart control. Is there a documentation by pega on the clear steps required to create a custom chart control along with the scripts required(if any) . We are using Pega v7.2
Thanks,
Binod
Pegasystems Inc.
IN
Hello Binod,
Can you please elaborate your requirement to use a custom chart instead of OOTB chart control ? So that we can help you with the right path.
Best Regards,
Mounika
Pegasystems Inc.
US
Hi Binod,
Yes pega supports the horizontal/vertical viewed stacked 2d chart in the summary reports as shown in attachment.
You can open any OOTB summary report and go to report editor > add chart > you can see the different types of charts which are available as per attachment.
Regards
Mahesh
Pegasystems Inc.
US
Hi Binod,
For more information about the types of charts Pega will be supported can be seen here.
Regards
Mahesh
Infosys
AU
Thanks Mahesh. But this is just one of the requirement. We need to demonstrate this using complex dashboards. I have seen pega world demos where they have demonstrated this using custom chart controls. Any guidelines on using them and how to configure them.
-Binod
Virtusa
IN
Hi Binod,
Did similar Usecase with help of Google Chart API(Not sure about the licencing).
Follow below steps:
1. Create an non auto generated Control with below code in it.
2. Identify your grouping fields. (Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV',2],['Sleep', 7]) Instead of Task, Work, Eat etc specify the identified fields.
3. Get the count for each identified fields to a user Page or Data page.
4. Pass those values to HTML using <Pega:Reference>.
Hi Binod,
Did similar Usecase with help of Google Chart API(Not sure about the licencing).
Follow below steps:
1. Create an non auto generated Control with below code in it.
2. Identify your grouping fields. (Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV',2],['Sleep', 7]) Instead of Task, Work, Eat etc specify the identified fields.
3. Get the count for each identified fields to a user Page or Data page.
4. Pass those values to HTML using <Pega:Reference>.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>
</html>
Hope this helps you..
Thanks,
Kiran.