Using Highcharts code in Outsystems

Using Highcharts code in Outsystems

  
Hi All,

I would like to add below code in my application to display stacked column chart but I unfortunately I am not aware of how to use this outsystems. I did not found any editor to apply this to my chart.
And also the highlighted text in bold should populate dynamically based on query....
If anyone help on this will be more needful for me at present..

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Ghana', 'Kenya', 'Ethiopia']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total permissions per country'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -70,
            verticalAlign: 'top',
            y: 20,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black, 0 0 3px black'
                    }
                }
            }
        },
        series: [{
            name: 'Pending',
            data: [5, 3, 4]
        }, {
            name: 'Saved',
            data: [2, 2, 3]
        }, {
            name: 'Submitted',
            data: [3, 4, 4]
        }]
    });
});

Need help very urgently...

Thanks Much,
Venkat Gude.
Hi,

See the example in the component http://www.outsystems.com/forge/component/196/high-chart-jquery-charting-component/ or you can use this component.

Pedro Coelho
Pedro Coelho wrote:
Hi,

See the example in the component http://www.outsystems.com/forge/component/196/high-chart-jquery-charting-component/ or you can use this component.

Pedro Coelho
 I am trying to use this but I found Under refernces one xif file as shown below. Please tell me where can I found that..

  

Thanks,
Venkat