CODEWITHSUNDEEP
chartsgoogle-visualization
Ibraheem Ibraheem
Ibraheem Ibraheem

Reputation: 774

How can one change the default text in a google visualization controller?

How can one change the default text in the CategoryFilter controller from "Choose a value" to something else?

enter image description here

Upvotes: 1

Views: 54

Answers (1)

WhiteHat
WhiteHat

Reputation: 61230

you can use the following option --> ui.caption 

var control = new google.visualization.ControlWrapper({
  controlType: 'CategoryFilter',
  containerId: 'control',
  dataTable: dataTable,
  options: {
    filterColumnIndex: 0,
    ui: {
      allowTyping: false,
      caption: 'Choose a year...'
    }
  }
});

see following working snippet... 

google.charts.load('current', {
  packages:['controls']
}).then(function () {
  var dataTable = new google.visualization.DataTable({
    cols: [
      {label: 'Year', type: 'string'},
      {label: 'y0', type: 'number'},
      {label: 'y1', type: 'number'},
      {label: 'y2', type: 'number'}
    ],
    rows: [
      {c:[{v: '2014'}, {v: 8}, {v: 20}, {v: 12}]},
      {c:[{v: '2015'}, {v: 20}, {v: 50}, {v: 15}]},
      {c:[{v: '2016'}, {v: 100}, {v: 12}, {v: 50}]},
      {c:[{v: '2017'}, {v: 75}, {v: 18}, {v: 45}]}
    ]
  });

  var control = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'control',
    dataTable: dataTable,
    options: {
      filterColumnIndex: 0,
      ui: {
        allowTyping: false,
        caption: 'Choose a year...'
      }
    }
  });
  control.draw();
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="control"></div>

Upvotes: 1

Related Questions