20
Views
4
Comments
Implementing the Drilldown Feature of Highcharts

Problem Overview

The drilldown capability of Highcharts is a powerful feature that allows users to explore hierarchical data interactively by clicking on elements. I am trying to implement the drilldown feature in a stacked bar chart as demonstrated in this jsfiddle example:

Over the years there have been many requests for help regarding the implementation of the drilldown feature of Highcharts, but after thoroughly researching the OutSystems forums and documentation, I have not been able to find any clear instructions on how to go about doing this. I am aware that OutSystems uses their own version of Highcharts, but drilldown has had full built-in support in Highcharts since version 3.0.8 (2014), and it would be unacceptable if it were still not possible to implement this highly utilized feature in OS11 in 2020.

Could someone please provide me with clear instructions (preferably an example .oml) of how to correctly implement the drilldown feature? For OS11 (traditional or reactive templates), I would like to implement the actual drilldown feature of Highcharts, not just a workaround designed to mimic the functionality of drilldown. Given OutSystems' high standards for external integration, action-handling-based workarounds should not be necessary to implement such a widely used chart feature.

Resources and Documentation:

Related Forum Threads:

Pie Drilldown Highcharts (2017). After numerous requests for help, this thread seems to have been abandoned with no working examples given whatsoever. At best, this thread provides suggestions for a workaround to mimic the functionality of drilldown. 

Can we use drilldown in OutSystems chart clicking the chart bars (2018). On this thread, there is some mention of using the DataPoint_GetClicked action, but it is not clear how this is implemented. If anyone has a concrete example, that would be helpful, but in general, I would prefer to use the actual Drilldown feature rather than simulating it through events.

Bar chart drilldown in OutSystems (2018). No answer to the question, just a link to another thread mentioned above, which does not provide a viable solution.

[HighChartsComponent] Drilldown on Highcharts (2018). The creator of the (now deprecated) Highcharts component said it should be possible to implement drilldown with jquery, but does not go into any further details. As per his suggestion, I have "tinkered" with jquery and have tried to include the drilldown.js module for the past several days and have been unable to successfully implement drilldown in a traditional web app.

How to use Drill Down in Charts in Reactive Web App (2020). Discusses a workaround that involves intermediate data reassignment to a variable of type DataPoint List. As mentioned above, I do not find this to be an acceptable workaround, and I want to use the drilldown feature of Highcharts as outlined in the Highcharts API.






Rank: #1268

Hi Justin,

For Component https://www.outsystems.com/forge/component-overview/196/highchartscomponent 

Try pasting your JS fiddle code on https://joostlandgraf.outsystemscloud.com/HighChartsDemo/Fiddle.aspx? and check if the chart works as you expect it too.

If it does as it does for me the you only need to figure out a way to convert your data into Json series.


Hope this helps.


Regards

Rank: #19519

Hi Vaibhav,

Thank you for your quick reply. Unfortunately, I am already familiar with the Highcharts Component from the forge. I have spent several days tinkering with jquery in an attempt to get drilldown it to work with that component, but I have not had any success.

As you can see here, the component does not demonstrate the desired drilldown behavior since the drilldown.js library is not included with the component. If you have managed to get this to work with drilldown, could you please kindly share the .oml file?

Thanks again.

Rank: #19519

Still no progress on this, but I did discover something strange...

If you look in the Chrome Dev Console in any Web App that includes a chart widget, you can find an internal OutSystems constructor for “initChartCore” that includes the argument “hasDrilldown”:


Oddly, if you track down where this method is called, you can see that the hasDrilldown argument is explicitly set to false, which means that the related “Drilldown functions” in the first picture will never be run.



Does anyone know of a way to set the hasDrilldown argument to true (or know of any way to access the Highcharts drilldown feature from OutSystems in general)?

Staff
Rank: #1786

Justin Dehorty wrote:

Problem Overview

The drilldown capability of Highcharts is a powerful feature that allows users to explore hierarchical data interactively by clicking on elements. I am trying to implement the drilldown feature in a stacked bar chart as demonstrated in this jsfiddle example:

Over the years there have been many requests for help regarding the implementation of the drilldown feature of Highcharts, but after thoroughly researching the OutSystems forums and documentation, I have not been able to find any clear instructions on how to go about doing this. I am aware that OutSystems uses their own version of Highcharts, but drilldown has had full built-in support in Highcharts since version 3.0.8 (2014), and it would be unacceptable if it were still not possible to implement this highly utilized feature in OS11 in 2020.

Could someone please provide me with clear instructions (preferably an example .oml) of how to correctly implement the drilldown feature? For OS11 (traditional or reactive templates), I would like to implement the actual drilldown feature of Highcharts, not just a workaround designed to mimic the functionality of drilldown. Given OutSystems' high standards for external integration, action-handling-based workarounds should not be necessary to implement such a widely used chart feature.

Resources and Documentation:

Related Forum Threads:

Pie Drilldown Highcharts (2017). After numerous requests for help, this thread seems to have been abandoned with no working examples given whatsoever. At best, this thread provides suggestions for a workaround to mimic the functionality of drilldown. 

Can we use drilldown in OutSystems chart clicking the chart bars (2018). On this thread, there is some mention of using the DataPoint_GetClicked action, but it is not clear how this is implemented. If anyone has a concrete example, that would be helpful, but in general, I would prefer to use the actual Drilldown feature rather than simulating it through events.

Bar chart drilldown in OutSystems (2018). No answer to the question, just a link to another thread mentioned above, which does not provide a viable solution.

[HighChartsComponent] Drilldown on Highcharts (2018). The creator of the (now deprecated) Highcharts component said it should be possible to implement drilldown with jquery, but does not go into any further details. As per his suggestion, I have "tinkered" with jquery and have tried to include the drilldown.js module for the past several days and have been unable to successfully implement drilldown in a traditional web app.

How to use Drill Down in Charts in Reactive Web App (2020). Discusses a workaround that involves intermediate data reassignment to a variable of type DataPoint List. As mentioned above, I do not find this to be an acceptable workaround, and I want to use the drilldown feature of Highcharts as outlined in the Highcharts API.






 Justin, 

Although this does not use the native drilldown feature in HighCharts, here is an example of how to implement a similar end-result. This example is in traditional web, but a solution in Reactive would be very similar. 

Example here: https://jay-parnau.outsystemscloud.com/ChartDrillDownDemo

 

ChartDrillDownDemo.oap