Discussion
Pegasystems Inc.
US
Last activity: 22 Nov 2024 10:40 EST
How to drilldown into a chart widget used in the dashboard of a Theme Cosmos application
One of the requested feature is the ability to drilldown into a chart inside a dashboard using the current section based UI. This document will showcase how to achieve such functionality.
The report browser and the current chart generation functionality is being replaced by the new explore data page based on ReactJS - I strongly recommend to start exploring the new functionality available in 8.5 and higher - in upcoming releases, you will be able to create insights and add them to different dashboard. For more details on explore data:
- https://academy.pega.com/module/exploring-application-data-insights/v1
- https://docs-previous.pega.com/user-experience/86/explore-data
Note: The demo is done using Theme Cosmos 3.0 on a Pega 8.6 system - While this functionality might be working on older version of the platform (like 8.4 or 8.5), these changes are delivered as is.
The changes are delivered as a new ruleset to add to your application stack - the ruleset contains a new widget and associated sections, JS to run the chart inside an embedded iframe. This provides the isolation from the rest of the dashboard page and allows to drilldown / drillup using the breadcrumb
Limitation of this functionality are:
1/ the iframe is a fixed height and does not auto-resize based on content
2/ dashboard preview and save does not work since the changes are not available to the inner iframe running on a separate thread - the widget will correctly repaint on publish of the dashboard
To use the new functionality, an end user will see a new widget called 'Drilldown chart widget' under the reporting category - the configuration is similar to the out of the box 'chart widget' - it is recommended to use a fixed height for the chart
You can watch the video for more details
CommBank
AU
Hi @RichardMarsot Thank you for the details. I have used Chart control (not pxChart) to display the chart from an RD in a section. The reason to use chart and not pxChart is to enable drill down functionality. It works fine but it opens the drill down data in a new window. Can I use this functionality to open the drill down from Chart control within the section? I tried but as the thread name is not ChartDrilldown, it doesn't work. Is there any other way I can figure out that the drill down is from section and hence should render within section and not as a new window?
Thanks
Jyoti
Pegasystems Inc.
US
@JyotiB16857859 the Chart is old on-autogenerated control - pxChart is the control that has been recommended to use - it is the one used in the section tool palette when dropping a chart. I think that you can easily apply the approach above and convert your section to use pxChart instead.
CommBank
AU
@RichardMarsotthe pxChart control doesn't support drill down functionality. I have configured a report to be used as a data source and it does show the chart but no way to drill down - it isn't clickable.
Am I missing something here?
Pegasystems Inc.
US
@JyotiB16857859This question has been asked in the community already and the pxChart does not support drilldown - But if you specify the chart in the RD, it has a built-in drilldown functionality - as such my recommendation was to create an RD with a chart definition and use the chart widget provided in this article. You can also create a summaryView and use the built-in drilldown
Here are additional docs to review on this issue:
- https://www.youtube.com/watch?v=POtxXlwb77k
- https://support.pega.com/question/unable-drilldown-using-chart-control
- https://community.pega.com/sites/default/files/help_v84/procomhelpmain.htm#rule-/rule-obj-/rule-obj-summaryview/drilldown.htm
- https://support.pega.com/question/drill-down-option-chart-control
Updated: 13 Nov 2024 21:48 EST
CommBank
AU
@RichardMarsot I have looked at these documents already. My use case is to display the chart in a section which is embedded in pyCaseActionArea and not on dashboard. So far, I have tried - 1) I have a RD which has a chart configured. 2) Use pxChart in section to display the RD. It renders the chart on the UI using the configuration of pxChart and hence drill down isn't supported. 3) Use Chart control in section to display the RD. It renders the chart as per the configuration in RD and does support drill down. But it opens the drill down in new window. So my question is if using the ruleset provided in this article and potentially with some changes to identify that the drill down is from section and not from Report Browser, can I get the drill down to open within the section instead of new window. Alternatively, if there is a way to use the DrillDownWidget mentioned in this article in a section directly i.e. not on dashboard but just as an included section? Is there any creative way to pass the details of RD which needs to be displayed at run-time?
CommBank
AU
@RichardMarsot any suggestions?
Pegasystems Inc.
US
@JyotiB16857859 yes it is possible to render the widget outside of a dashboard, e.g. in a regular section
I have extended the ruleset in this article with 4 additional rules to show how a similar widget could be rendered on the home page in a regular section -see DrilldownChartWidget_v2 attached file
The updated homeMain section shows the 3 scenarios:
- chart control based on RD "pyOpenCountByStatus" where drilldown is enabled and works at runtime but render the drilldown in the current page - it uses the chart configured in the RD
- pxChart control using the same RD - drilldown does not work
- DrilldownChartWidgetWrapper using a DP D_LoadRD to load an RD
Note that this code is delivered AS IS and I will not make further update to this code - You should be able to get the understanding of how it works and use it for your use case. I do not plan to provide more support on this article that has been created 3 years ago. For example, the DP D_LoadRD is hardcoded to use a certain RD and shortcut and does not take parameter and I have not tested multiple charts using DrilldownChartWidgetWrapper on the same page. I would recommend that you use the example and try it in your application and then adapt for your need and put the changes in your own application ruleset.
@JyotiB16857859 yes it is possible to render the widget outside of a dashboard, e.g. in a regular section
I have extended the ruleset in this article with 4 additional rules to show how a similar widget could be rendered on the home page in a regular section -see DrilldownChartWidget_v2 attached file
The updated homeMain section shows the 3 scenarios:
- chart control based on RD "pyOpenCountByStatus" where drilldown is enabled and works at runtime but render the drilldown in the current page - it uses the chart configured in the RD
- pxChart control using the same RD - drilldown does not work
- DrilldownChartWidgetWrapper using a DP D_LoadRD to load an RD
Note that this code is delivered AS IS and I will not make further update to this code - You should be able to get the understanding of how it works and use it for your use case. I do not plan to provide more support on this article that has been created 3 years ago. For example, the DP D_LoadRD is hardcoded to use a certain RD and shortcut and does not take parameter and I have not tested multiple charts using DrilldownChartWidgetWrapper on the same page. I would recommend that you use the example and try it in your application and then adapt for your need and put the changes in your own application ruleset.
There is no plan to support drilldown in pxChart. The recommended approach is to start using Explore Data and the new insights based on Constellation UI - You can use hybrid mode for this: see https://support.pega.com/question/how-use-hybrid-mode-theme-cosmos
