Import external js libraries in Knime

I'm trying to visualize some data using some visualization library in Knime but it doesn't work (no error and it shows empty screen when executing). In other platform it works without issue. Here what I use:

require.config({
    paths: {
        'chart': 'https://code.highcharts.com/highcharts'
    }
});
require(['chart'], function(Highcharts) {
 
Highcharts.chart( {

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        type: 'column'
    }]

});
});

Here a working example at "jsfiddle" https://jsfiddle.net/LLExL/7926/

Any hints?

1 Like

I solved it, the issue was the missing container:

Highcharts.chart('container', { .......................

$(document.body).append('<div id="container"></div>');

1 Like

Hi fsaad,

thank you for the feedback!

Have a great day! Iris 

Hi @fsaad, @Iris

I’m trying to replicate the same with below code

var body = document.getElementsByTagName('body')[0];
var html = '<div id="container"></div>';

body.innerHTML = html;


require.config({
    paths: {
        'chart': 'https://code.highcharts.com/highcharts'
    }
});

require(['chart'], function(Highcharts) {
Highcharts.chart('container', {

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        type: 'column'
    }]

});
});

Can you tell me where I’m going wrong.

Thank you

1 Like