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

Hi,

I am wondering whether it is possible to implement the following gauge chart from highcharts. https://www.highcharts.com/demo/gauge-activity

I have tried Running the solid-gauge.js source code as well as the rendericons() function with a RunJavaScript Server action but i cant seem to get it to work.

Thank you.

Best Regards,

Joon