High Charts limitations

High Charts limitations

  

Hi,

I was wondering if there are limitations on the graphs that can be used as High Charts within Outsystems. I can implement a spider graph or a waterfall chart in Outsystems. I was trying to implement a Gauge graph as in the link below:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-activity/

Although I cant seem to get the chart working by using the JSON query. Was wondering if anyone has tried implementing this kind of graph before.


Thank you,

Regards,

Archit

Solution

Hello Archit

Yes, we used Gauges :)

This is the JSon we used:

"{
    
        chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        
        title: {
            text: ''
        },
        
        pane: {
            startAngle: -90,
            endAngle: 90,
            background: null
        },
        
        plotOptions: {
            gauge: {
                dataLabels: {
                    enabled: false
             },
                dial: {
                    baseLength: '0%',
                    baseWidth: 10,
                    radius: '100%',
                    rearLength: '0%',
                    topWidth: 1
                }
            }
        },
           
        // the value axis
        yAxis: {
            labels: {
                enabled: true
            },
            minorTickLength: 0,
            min: 0,
            max: 100,
            tickLength: 0,
            plotBands: [{
                from: 0,
                to: 50,
                color: '#9cb227', // red
                thickness: '50%'
            }, {
                from: 50,
                to: "+target.PlacedVsFinished+",
                color: '#bed835', // yellow
                thickness: '50%'
            }, {
                from: "+target.PlacedVsFinished+",
                to: 100,
                color: '#cdf013', // green
                thickness: '50%'
            }]        
        },
    
        series: [{
            name: 'Target',
            dataLabels: {enabled:true},
            data: ["+meter.PlacedVsFinished+"]
        }]
    
    }"

You can use it and adapt to your needs.

Cheers,

Eduardo Jauch

Solution