How to make skuid highcharts and highcharts-more.js work on the same page

  • 1
  • Question
  • Updated 4 months ago
  • Answered
I followed Irvin's example of how to use additional chart types from Highcharts to create a gauge chart ( https://community.skuid.com/skuid/topics/heatmaps-f7d67nej63f2h ).

It's working fine until I try to add it to a page that also uses the highcharts resources provided by Skuid.  Initially I got Error #16 (trying to load highcharts twice).  I removed the external references for highcharts.js and for exporting.js.  Now the line chart displays correctly (standard skuid), and the gauge background renders, but without data.

The console shows an error: highcharts-more.js:29 Uncaught TypeError: I is not a function

Tried with and without the external reference for modules/exporting.js - same result.
Photo of Jared Jones

Jared Jones

  • 2,214 Points 2k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Jared Jones

Jared Jones

  • 2,214 Points 2k badge 2x thumb
* * * crickets * * *
Photo of Jacob Cohen

Jacob Cohen, Employee

  • 142 Points 100 badge 2x thumb
Hey Jared,

Usually, when I want to do something like this I download the .js resource for the additional highcharts then upload it to my salesforce org as a static resource.

Then I can reference it from my Skuid page as a static resource. I use a js before render snippet on the chart to reassign the chart type:

var params = arguments[0],
$ = skuid.$;

params.chart.type = 'waterfall';

/\ this a waterfall chart. lmk if that helps!
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Jared ... did you ever get this working? My team are hitting exactly the same problem.
Photo of Jared Jones

Jared Jones

  • 2,214 Points 2k badge 2x thumb
Glenn - I'm sorry to report that I did not.  Priorities shifted, and I never got back to trying Jacob's suggested approach.
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
The problem we're hitting is that to use additional chart types (in our example we're using Solid Gauge), we need to reference the highchartsMore and highchartsSolidGauge Javascript libraries. Those are dependent on the core Highcharts library, which in theory ships with Skuid, but they can't find it. The only way to make them work is to add in another reference to the core Highcharts library as an external resource, but doing that breaks Skuid's chart components.

Is that what you found? I'm not sure how Jacob's post solves that.
Photo of Jared Jones

Jared Jones

  • 2,214 Points 2k badge 2x thumb
I don't remember the specifics anymore, but that sounds about right.
Photo of Jacob Cohen

Jacob Cohen, Employee

  • 142 Points 100 badge 2x thumb
Hey Guys,

That's true, unfortunately that old approach no longer works.

Luckily there is an easier/better approach which is to place one of the charts in a separate page then bring that in via a page include.

by doing that you isolate the javascript since the include works as an iframe.

ive only tried this bringing the skuid charts in as an include to a page with a new chart. but in theory it should work either way.

good luck!
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Thanks Jacob. So you're saying that if we have a page with Skuid charts in it, then if we want to add say a Highcharts Solid Gauge into that page too, we need to bring in the Solid Gauge via a page include?
Photo of Chad Gill

Chad Gill

  • 1,194 Points 1k badge 2x thumb
glenn, did you ever get this to wok?  I am trying to create a guage chart as well for a job dashboard application