different styles for calling highcharts

[koh_edwin]

Hi,
we recently received our license and the decision was to convert a trial version of a Qlik Sense extension using an older version of Highcharts to the latest version.
before, we copied an extension from Qlik Branch and used the version of highcharts in the repository. everything was working fine. now we replaced the reference to the highcharts lib from the following:

Code: Select all

requirejs.config({	shim : {"extensions/highcharts/js/highchartslib" : {"deps" : []}}});
define( [ "qlik", "/extensions/#######js","./#####", 'text!./####.css', 
"extensions/highcharts/js/highchartslib" 
],
function ( qlik, properties, lineChart, cssContent) {

to

Code: Select all

requirejs.config({	shim : {"https://code.highcharts.com/highcharts.js" : {"deps" : []}}});
define( [ "qlik", "/extensions/#######.js","./######", 'text!./#####.css', 
"https://code.highcharts.com/highcharts.js"
],
function ( qlik, properties, lineChart, cssContent) {

after the change our extension stopped working. i did notice that our version of the script uses the following convention to plot the chart (this i think is where the execution stops as the debug after the call is never reached):

Code: Select all

var thisChart= $('#'+ChartData.Configuration.Container).highcharts({
   chart: {

but from the jsfiddle we see in the demos, it is of this format:

Code: Select all

Highcharts.chart('container', {

Question: why are there two ways of calling highcharts? why would the old call format fail with the new version? what do you recommend for us to get past this issue?

thanks,
edwin

[koh_edwin]

is this something we open a ticket for?

[koh_edwin]

Hi, i opened a ticket for this with support. the response was to add in the version we were using:

Highcharts JS v4.0.4 (2014-09-02)

(c) 2009-2014 Torstein Honsi

License: www.highcharts.com/license

thanks
edwin

[magdalena]

Hi koh_edwin,

That's great to hear you've found the solution on one of our support channels and thank you for sharing it with us!

Feel free to ask any further questions!
Regards

[koh_edwin]

Hi Magdalena,
i did open a ticket and was told to wait for a response in this forum. sorry if i gave the impression this was solved
edwin

[magdalena]

Hi,

First of all, I would like to apologize for the misunderstanding.

The recommended constructor method is Highcharts.chart which creates and returns a chart object. The chart is rendered in a div 'container' which is referenced in the constructor.

Docs:
https://www.highcharts.com/docs/getting ... irst-chart

Your previous way of creating a chart is jQuery format was used until Highcharts 5.

Code: Select all

  $('#container').highcharts({
    ...
  });

Maybe you have a problem with ChartData.Configuration.Container you are referring to or jQuery library?

Let's try to use the following configuration and let me know if that worked for you:

Code: Select all

Highcharts.chart(ChartData.Configuration.Container, {

Regards!

[koh_edwin]

Hi Magdalena,
ChartData.Configuration.Container is just a string which evaluates to the name of the container:

= 'container'

this is the ID of the DIV

hope that helps
edwin

[koh_edwin]

just in case someone else encounters the same problem, a colleague figured it out using this as basis:

https://api.highcharts.com/class-reference/

under the section Load Highcharts from the CDN as an AMD module

we used this format for QLik Sense extensions and it is now working:

require.config({
packages: [{ name: 'highcharts', main: 'highcharts' }],
paths: { 'highcharts': 'https://code.highcharts.com' }
});


define( [ "qlik", "highcharts"],
function ( qlik, Highcharts) {

it was such a relief

[koh_edwin]

@magdalena, i was trying to PM you but the system wont accept it.
thanks for your time on this
edwin

[magdalena]

Hi koh_edwin,

Congratulations on finding the solution and thank you so much for sharing it with us!

Feel free to ask any further questions,
Regards!

[piotreks89]

One question. I wrote an extension in Qlik and I have a problem with adding a Highcharts module. The main library works fine, but I don't know how to properly add a module (for instance for sunburst chart). Both Highcharts and Sunburst were downloaded by client browser, but my chart didn't work. Standard charts like a line chart, a column chart work just fine.
My code:

Code: Select all

require.config({
  packages: [{ name: "highcharts", main: "highcharts" }],
  paths: {
    highcharts: "https://code.highcharts.com",
  },
});
require.config({
  paths: {
    sunburst: "https://code.highcharts.com/modules/sunburst",
  },
});
define([
  "jquery",
  "text!./css/main-style.css",
  "qlik",
  "highcharts",
  "sunburst",
  "./js/utils",
], function ($, css, qlik, Highcharts, HighchartsSunburst, utils) {
  "use strict";
   ....

Where am I making mistake?

[jakub.s]

Hi,

Welcome to our forum & thanks for the question!

Could you please share the error that you get when trying to create a Sunburst chart? Do you get the Highcharts Error #17?

I'm not familiar with Qlik so I'm not sure what might be the issue here. In a simple HTML/Vanilla JS project we simply attach an additional script tag like in this demo: https://jsfiddle.net/gh/get/library/pur ... o/sunburst

If you take a closer look at what's happening in each module script (like here: https://code.highcharts.com/modules/sunburst.src.js) there's a simple factory IIFE function which appends Highcharts functionalities. This might give you a hint.

If you get Highcharts error #17, I would guess that this factory function does not run or if it does, the Highcharts object is not available which is something related to your configuration.

An additional thing you can try is the following:

Code: Select all

// Highcharts - the main Highcharts library object
// HighchartsSunburst - the Sunburst module imported from Highcharts CDN

HighchartsSunburst(Highcharts); // add functionality by running this function with Highcharts as an argument

Please try it out and let me know if it works.

Best regards!