Skip to Content (Press Enter)
UserImage.jpg
Archit Yadav
557Views
2Comments
Solved
High Charts limitations
Question
Charts

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:
https://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

0
0
27 Jul 2017
Copy Link
2020-02-28 09-46-54
Eduardo Jauch
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

0
0
27 Jul 2017
Copy Link
UserImage.jpg
Joon Woon Yap

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

0
0
28 Feb 2019
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.