161
Views
3
Comments
Solved
How to create and render charts dynamically (Highcharts)?

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

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.

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.

HI All,

Please check my script :


var data = "{name:'Low Risk', y:30,color:'#62DB7D',tooltip:'Low Risk : 30%'},{name:'Medium Risk', y:50,color:'#F5A623',tooltip:'Medium Risk : 50%'},{name:'High Risk', y:20,color:'#FF6262',tooltip:'High Risk: 20%'}";

Highcharts.chart('ChartContainer', {

chart: {

            type: 'pie',

            spacingBottom: 5

        },

        credits: { enabled: false },

        title:"",

        tooltip: {

            enabled: true,

            formatter: function() {

                            return this.point.tooltip;

                    }

        },

        plotOptions: {

            pie: {

                dataLabels: {

                    enabled: true,

                    formatter: function() {

                            return this.point.name + ': ' + this.point.y;

                    }

                },

                showInLegend: true,

                stickyTracking: false,          

                point: {events: {legendItemClick: function(event) {return false;}}}

            }

        },

        legend: {   floating: false,

                    layout: 'horizontal',

                    align: 'center',

                    verticalAlign: 'bottom'

        },

        series: [{name: ' ', data: ["+data+"]}]


});

This is script i need to pass dynamic data is series data. I am trying with above code but its fails.

please data variable initialize in first row and assign in series data which is in las row.

Also i am trying with list variable but its also failed.

So please give solution how to solve this with the above script using list variable or using javascript define varibale.   

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.