Google Chart Gauge with multiple color zones

Question

I'm using Google Charts API to create a gauge chart. It is a very simple and effective API to create charts on-the-fly.

Here is the documentation for that chart

https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge

Now, I need to customize a litte bit this chart adding more than a green zone. For example I need a green zone that goes from 0 to 10, one from 20 to 30 and another from 40 to 50, but it doesn't seems possible.

Here is the options to pass to the draw() method for setting up the green zone

var options = {          
greenFrom: 0, greenTo: 10          
};

I tried to pass an array as an option, but it obviously doesn't works. Here is what I tried.

var options = {          
greenFrom: [0, 20, 40], greenTo: [10, 30, 50]
};

Has anyone got the same problem?

Any help is appeciated.

Thanks

Answer 1

You can do it, just override the colors for the red and yellow zones as well. If you want those too though then you are out of luck.

var options = {
   greenFrom: 0,
   greenTo: 10,
   greenColor: "#00ff00",
   redFrom: 20,
   redTo: 30,
   redColor: "#00ff00",
   yellowFrom: 40,
   yellowTo: 50,
   yellowColor: "#00ff00"
}