How to set the Gauge scale dynamically in a dashboard?

27 views
Skip to first unread message

Wouter

unread,
Dec 27, 2017, 8:52:43 AM12/27/17
to Google Visualization API
How to set the Gauge scale dynamically in a dashboard?

The dashboard works great, a specific Gauge is shown using the 'controlType': 'CategoryFilter'. Now I want to set the min and max values dynamically because the subjects shown in each Gauge have different scales. Can someone please advise how to do so? Many thanks in advance!

What I tried:

I managed to add the minimum to the data table, using a view for the Gauge, define a var for the minimum value ("minRed" in this case) and retrieve the data based on e.g. " data.getValue(2, 2)". But the row should be dynamic, dependent on the selected category -> "" data.getValue(rowIndex, 2)"". I do not know how to do that... I defined "var rowIndexFound " and tried retrieving it using several get methods but got no result out of that... I have at least 3 challenges left: 1. how to get the rowIndex, 2. how to add a value for this on the first load, 3. add an event to change the value each time the category filter is used.

var selectSubject = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'Subject',
      'ui': {'caption': 'selecte a subject', 'label': 'Subject: ', 'allowNone': false, 'allowMultiple': false}
    }
  });

var
data = google.visualization.arrayToDataTable([
         
['Subject', 'Value', 'Minimum'],
         
['People', 80, 20],
         
['Homes', 40000, 10000],
         
['Households', 1.5, 0],
         
]);

var minRed = data.getValue(rowIndex, 2)

var gaugeChart = new google.visualization.ChartWrapper({
         
'chartType': 'Gauge',
         
'containerId': 'chart_div',
         
'options' : {
          width
: 400, height: 120,
          redFrom
: minRed, redTo: 40,
          yellowFrom
:80, yellowTo: 100,
          minorTicks
: 5,
          redColor
: "#FFB715",
          yellowColor
: "#FFB715"
         
},
       
'view': {'columns': [0, 1]}
       
});

Reply all
Reply to author
Forward
0 new messages