2

i've created a function in apps script that pulls data from one google sheet (sht_data) and serves up a gauge chart in another google sheet (sht_charts). 

function new_renewable_gauge() {
  var range = sht_data.getRange('B16:C16');
  var chartBuilder = sht_data.newChart();
  chartBuilder.addRange(range)
      .setChartType(Charts.ChartType.GAUGE)
      .setPosition(1, 7, 1, 1)
      .setOption('title', 'renewable % of committed generation')
      .setOption('yellowFrom', 50)
      .setOption('yellowTo', 70)
      .setOption('greenFrom', 70)
      .setOption('greenTo', 100)
      .setOption('minorTicks', 5);
  sht_chart.insertChart(chartBuilder.build());
}

pulling and presenting the data works fine, no issues. where i get stuck is setting colors other than green / yellow / red for the shaded areas on the gauge. what i want to use is the gradients of green in the google palette, i.e. light green 3 (40-60) / light green 1 (60-80) / dark green 2 (80-100).

i've tried searching the net for how to define theses colors... no joy. things i've tried:

  • initially i tried .setOption('lightGreenFrom', 40).setOption('lightGreenTo', 60) but the chart returned white space
  • setting the colors first .setOption(colors, [lightGreen, green, darkGreen]) on a COLUMN chart first to see if it will accept the color names; only green was accepted
  • numerous ways of writing those colors (lightgreen3, lightGreen3, light-green-3, light-green3, light_green_3, light_green3) with a COLUMN in case there was a specific way of writing those names; not recognized

any help that the community can offer would be greatly appreciated.

WhiteHat
  • 59,912
  • 7
  • 51
  • 133
mitch-NZ
  • 320
  • 2
  • 13
  • Could you please share a spreadsheet with some dummy data and an example gauche chart? – alberto vielma Feb 25 '20 at 10:22
  • hi @albertovielma, not sure what the purpose is of your request. the above function contains everything for rendering the chart except for the content of `B16:C16` which is `'utilization': 80`. the utilization number is determined by an API call which i can't share unfortunately. – mitch-NZ Feb 25 '20 at 21:38

1 Answers1

2

according to the configuration options,
to change the actual colors,
you can use the following options --> 'greenColor', 'yellowColor', 'redColor'

as for the color values,
you'll need to find the html hex values of the names.
e.g. 

.setOption('greenColor', '#c8e6c9')
.setOption('yellowColor', '#4caf50')
.setOption('redColor', '#1b5e20')

here is a pallette, originally developed by google...

https://htmlcolorcodes.com/color-chart/material-design-color-chart/

WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • thanks for sharing the pallette. so if i understand this correctly, the color regions will always be red / yellow / green but you can use `.setOption()` to display as a different color. – mitch-NZ Mar 02 '20 at 04:01