Gauge Chart with custom range

#1

Hi, I’m trying to create a Gauge chart with custom range but when I set the range configuration to my chart in this way: “.set(‘ranges’, [0, 120])” the needle disappears and all the scale numbers go to 0.0. How can I do this, thanks.

#2

Hi @john, please take a second look at the gauge documentation. “ranges” is actually an array of arrays, so you need to set it as “.set(‘ranges’, [[0, 120]])”. The gauge visual is a multigraphic visual that can contain multiple gauges. Let me know if this answers your question.

Best regards,

Dario

#3

Hi guys, I’m trying to use Color Ranges on the Gauge widout success, It is possible to use Color Ranges with Gauge?. Thanks.

#4

Hi @pepe, the Gauge visualization can be colored by using an array of color ranges as shown below. It supports multiple gauges on a single visualization.

var metrics = [
   cf.Metric('commission', 'avg')
];

var myChart = cf.provider('Elasticsearch')
                .source('ticket_sales')
                .metrics(...metrics)
                .graph('Gauge')
                .set('rangeColors', [
                    [[0.02, 'lime'], [0.5, '#1e90ff'], [0.7, '#ff4500'], [0.8, 'yellow'], [1, 'orange']]
                ])
                .element('chart')
                .execute();

Let me know if you have additional questions. Best regards.