Hi Hothorasman,

That looks lke a pretty standard pie chart. Did you take the online courses? Did you read the documentation on charts in OutSystems? Is there something specific about the pie chart you don't know how to create?

Hi Kilian

I just Found Legend position,,as capture below

can you help me..?

Hi Hothorasman,

You can format charts by applying jason to the AdvancedFormat property. 

I found the code for your chart here. You can find all the code you need to edit your charts in the HighCharts api or in the Highcharts demo section.

To add the jason you only have to asign the code to the AdvancedFormat structure and apply the AdvancedFormat_Init function. Check the oml to understand better how you can do it.

Hi Hothorasman,

You can achieve the same functionality with the use of High charts script.

you just need to only populates the data series with data , which you can create in OutSystems as datapointlist and datapoints, After creating data series , put in SourceDataPointList property. 

Now , on Advanced Format - copy below code for css and legeds design.

SyntaxEditor Code Snippet

AdvancedFormat_Init(DataPointFormats:,DataSeriesFormats:,XAxisJSON:,YAxisJSON:,HighchartsJSON:"
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Browser market shares in January, 2018'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [{
            name: 'Chrome',
            y: 61.41,
            sliced: true,
            selected: true
        }, {
            name: 'Internet Explorer',
            y: 11.84
        }, {
            name: 'Firefox',
            y: 10.85
        }, {
            name: 'Edge',
            y: 4.67
        }, {
            name: 'Safari',
            y: 4.18
        }, {
            name: 'Sogou Explorer',
            y: 1.64
        }, {
            name: 'Opera',
            y: 1.6
        }, {
            name: 'QQ',
            y: 1.2
        }, {
            name: 'Other',
            y: 2.61
        }]
    }]
")

the final Output will be :

Cheers..

Rafi 

Hi Rafi,

You can Map the local storage to populate the chart.

You only have to add this to the advanced format:

"plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '{point.name}: {point.percentage:.1f}%'
            }
        }
    },"

Cheers,

Margarida

In addition to the great posts above, here is a tutorial on how to generate sample data and create charts in OutSystems.