Hi,

As of my knowledge, Outsystems uses the Highcharts library on the Charts' widgets. Instead of dragging and dropping the widget during development, I want the plot to be created and rendered in runtime, on the browser.

So, I tried something like this:


// Add this before rendering the chart
Highcharts.setOptions({
  global: {
    useUTC: false
  }
});

$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: $parameters.divId,
            defaultSeriesType: 'spline',
            events: {
                load: function() {
                    $actions.RequestData;
                }
            }
        },
        title: {
            text: 'Test Title'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                second: '%H:%M:%S'
            },
            tickPixelInterval: 100,
            maxZoom: 20 * 1000
        },
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}°C',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: 'This is a test! Title!!',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            zones: [{
                value: -5,          //Bottom of the plot
                color: '#f7a35c'
            }, {
                value: 10,          // Next
                color: '#7cb5ec'
            }, {
                color: '#7cb5ec'    //Top of the plot
            }]
        }],
        /*series: [{
            name: plotName,
            data: []
        }]*/
        series: [{
            type: 'areaspline',
            data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5]
        }, {
            type: 'column',
            data: [1, 13, 2, -4, 6, 7, 5, 3, 2, -1, 2]
        }]
    });        
});


And an error arises saying that the Highcharts is not found. If I include the Highcharts javascript on a script, it works, but it also shows a watermark saying Highcharts. A plot example is shown below:

How can I use the Highcharts used by Outsystems to achieve this, instead of including new Javascript code?


Thank you,

João Lopes

Solution

Hello,

If your problem is just the watermark and the chart is working for you, you can just remove the watermark from the chart by adding: "credits: { enabled: false }" to the configuration that you already have.
Otherwise you will have to configure the OutSystems HighCharts to look like yours by using the input parameters on the widgets or some JavaScript.

Solution

Tiago Oliveira wrote:

Hello,

If your problem is just the watermark and the chart is working for you, you can just remove the watermark from the chart by adding: "credits: { enabled: false }" to the configuration that you already have.
Otherwise you will have to configure the OutSystems HighCharts to look like yours by using the input parameters on the widgets or some JavaScript.

Thank you. This solved it for me.