how can we set selection or highlight columns based on the value like City='A' in google chart using java script-

58 views
Skip to first unread message

kungfupanda

unread,
Jan 22, 2018, 3:11:22 AM1/22/18
to Google Visualization API
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawAxisTickColors);

function drawAxisTickColors() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'City');
      data.addColumn('number', 'Motivation Level');
      data.addColumn('number', 'Energy Level');

      data.addRows([
        ['A', 1, .25],
        ['B', 2, .5],
        ['C', 3, 1],
        ['D', 4, 2.25],
        ['E', 5, 2.25],
 
      ]);

      var options = {
        title: 'Motivation and Energy Level Throughout the Day',
        focusTarget: 'category',
        hAxis: {
          title: 'City Name',
          format: 'h:mm a',
          viewWindow: {
            min: [7, 30, 0],
            max: [17, 30, 0]
          },
          textStyle: {
            fontSize: 14,
            color: '#053061',
            bold: true,
            italic: false
          },
          titleTextStyle: {
            fontSize: 18,
            color: '#053061',
            bold: true,
            italic: false
          }
        },
        vAxis: {
          title: 'Rating (scale of 1-10)',
          textStyle: {
            fontSize: 18,
            color: '#67001f',
            bold: false,
            italic: false
          },
          titleTextStyle: {
            fontSize: 18,
            color: '#67001f',
            bold: true,
            italic: false
          }
        }
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

Sean Larson

unread,
Jan 22, 2018, 12:52:41 PM1/22/18
to Google Visualization API
The documentation discusses methods for setSelection. To know what row to pass into setSelection, you could use getFilteredRows, which needs a column and criteria. That, or do a for loop on your dataTable by using i < data.getRows(), and data.getValue(0, i) and check if value is "a" 

Do not quote me on any of the syntax here, check those methods in the documentation for exact syntax.
Reply all
Reply to author
Forward
0 new messages