[HighChartsComponent] Highcharts Funnel not showing

[HighChartsComponent] Highcharts Funnel not showing

  
Forge Component
(25)
Published on 2016-08-30 by J.
25 votes
Published on 2016-08-30 by J.

Hi there, 

I am new to both Outsystems and JS. 

I am trying to get the funnel graph working (https://www.highcharts.com/demo/funnel/sand-signika) but, when I try using the provided JS in the Highcharts Outsystem Demo module (the Fiddle screen has place where you can test HTML and Script), no output for the graph is shown. 

I tried it with the other graphs in Highcharts and most of them work. As such, I am quite unsure about what else I need to do to get the Funnel working.  

In the HTML block, I pasted the library imports (http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/funnel/). 

My Fiddle screen currently looks like this:


Any pointers would be greatly appreciated! 


Kind regards, 

Cole

From what I can see, as in many cases like this in OS, only some stuff is implemented... and... from what I can see... Funnel is not implemented.  Looking at the HighChartsDemo and HighChartsInclude, only the basic charts are included... plus Gauges.  As you can see in your fiddle... funnel.js needs to be included... and it is not included in the Demo app.

Solution

Attached is an OML, Web, creating a Highcharts Funnel chart.

I tried to enchance the Highcharts sample but the method used for including the script is so convoluted that I couldn't get through the dozen or so areas that needed changing.

It's frustrating that there are excellent example like this... but they are completely undocumented.  Just a fews lines about here is what we did... here is how you add another type of chart.  Someone's already done all work... just adding a bit of doc would be so simple... and that's where OS really slips.  The people who write these samples already know OS well.  People new to OS struggle to find the bit and pieces scattered through an app to see how it works... where just a few lines of information would really help.

The attached OML uses a Preparation Action on the HomePage screen to include the 3 Highchart scripts needed.

The HomePage screen also contains a WebBlock which contains the Javascript for the Chart.

The page is generating an error that Highcharts is already loaded - have a look at the console.  I've no idea where this is coming from... but it does not seem to have an adverse effect.

Solution

Thanks so much for this David. 

Much appreciated! Fiddled with this for a while initially but didn't get anywhere. 

Kind regards, 

Cole


Hi David,

I had the same problem of Cole when I tried to implement a Histogram Graph. But I used your solution and it worked fine. I changed the funnel module name by the named used in the highchart demo (histogram-bellcurve).

Thank you very much,

Roberto