How to create nested Chart?

Can anyone help me to create this chart  in outsystems?

Hi Wasim,

OutSystems Charts uses Highcharts at its core, so everything possible in Highcharts is possible with OutSystems (with a little or a lot of fiddling). On the Highcharts examples page there's a lot of chart types, but I can't find one that's exactly like the one you have there; but perhaps there's some other that you can use.

This example looks a lot like what you need, so maybe that's a good starting point.

Kilian Hekhuis wrote:

Hi Wasim,

OutSystems Charts uses Highcharts at its core, so everything possible in Highcharts is possible with OutSystems (with a little or a lot of fiddling). On the Highcharts examples page there's a lot of chart types, but I can't find one that's exactly like the one you have there; but perhaps there's some other that you can use.

Thaks alot.

Regards,

Wasim khan S


Aurelio Junior wrote:

This example looks a lot like what you need, so maybe that's a good starting point.

Sure. Will look at this to find solution.

Regards,

Wasim khan S


Solution

Wasim Khan wrote:

Can anyone help me to create this chart  in outsystems?

Hi wasim Khan,i think this will work

Below is the json code for that chart and you have to import json files.


"$(function(){
Highcharts.setOptions({
    colors: ['#131F53', '#C90B6E']
});
$('.chart').highcharts({
    chart:{
        type:'solidgauge',
        height:'75%',
       
        },
 tooltip: {
   
        enabled:true,
        borderWidth: 0,
        backgroundColor: 'none',
        shadow: false,
        borderRadius:'10',
     
        style: {
            fontSize: '12px',
            color:'black',
           
        },

 },
 pane: {
        startAngle: 80,
        endAngle:550,
        background: [{
            outerRadius: '87%',
            innerRadius: '63%',
            backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[3])
                .setOpacity(0)
                .get(),
            borderWidth: 0
        },]
    },

    yAxis: {
        min:0,
        max: " + GetAmounts.List.Current.TotalSum + ",
        lineWidth: 0,
        tickPositions: []
    },

    plotOptions: {
        solidgauge: {
        dataLabels: {
                enabled: true,
           format:'<div style=text-align:center>' +
                '<span style=font-size:25px>{ GetAmounts2.List.Current.Amount.date}</span><br/>' +
                '<span style=font-size:12px;opacity:0.4>km/h</span>' +
                '</div>'
       },
            rounded: true
        },
         
    },

    series: [{
        name: 'Credit',
        data: [{
            color: Highcharts.getOptions().colors[1],
            radius: '60%',
            innerRadius: '45%',
            y: " + GetAmounts.List.Current.DebitSum+ ",

        }]
    }, {
        name: 'Debit',
        data: [{
            color: Highcharts.getOptions().colors[0],
            radius: '90%',
            innerRadius: '75%',
            y:" +GetAmounts.List.Current.CreditSum+",

        }]
    }]
});
});"

Solution