CODEWITHSUNDEEP
javascriptgoogle-visualizationgoogle-sheets
user2828251
user2828251

Reputation: 235

adding a category filter to google visualization api

I am a newbie to google chart visualization. I am using a "google spreadsheet" as datasource for my charts, but when I am trying to add a filter category I don't seem to manage to control and combine the two examples in the google play ground

This is how I am presenting my pie chart:

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var query = new google.visualization.Query(
      'http://spreadsheets.google.com/tq?key=0ArCLNmjk_GPpdHVZbVVuUlNKUF9TTHlpaWxPY1dmUnc&range=B1:C4&pub=1');

  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();
  var chart = new google.visualization.PieChart(document.getElementById('columnchart'));
  chart.draw(data, null);
}
</script>

<title>Data from a Spreadsheet</title>
</head>

<body>
<span id='columnchart'></span>
</body>
</html>​

My first range in the spreadsheet (COLUMN A) has definitions of "category" which i want to add the filters to my chart.

Upvotes: 0

Views: 4123

Answers (1)

asgallant
asgallant

Reputation: 26340

You have a few things that need to be fixed for this: first, your query is restricted to two columns in your spreadsheet (B1:C4, both called "count"), which doesn't include the control. Second, your chart's container should be a div, not a span. Third, in order to use controls, you need to use a ChartWrapper for your chart, and you must laod the "controls" package for the API. Here's a code sample that works:

[javascript]

function drawChart() {
    var query = new google.visualization.Query('http://spreadsheets.google.com/tq?key=0ArCLNmjk_GPpdHVZbVVuUlNKUF9TTHlpaWxPY1dmUnc&pub=1');

    query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }

    var data = response.getDataTable();

    var control = new google.visualization.ControlWrapper({
        containerId: 'control_div',
        controlType: 'CategoryFilter',
        options: {
            filterColumnIndex: 0,
            ui: {

            }
        }
    });

    var chart = new google.visualization.ChartWrapper({
        containerId: 'chart_div',
        chartType: 'PieChart',
        options: {
            height: 400,
            width: 600
        },
        view: {
            columns: [0, 1]
        }
    });

    var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));
    dashboard.bind([control], [chart]);
    dashboard.draw(data);
}
google.load('visualization', '1', {packages:['controls'], callback: drawChart});

[HTML]

<div id="dashboard">
    <div id="control_div"></div>
    <div id="chart_div"></div>
</div>

See it working here: http://jsfiddle.net/asgallant/rS4L8/

Upvotes: 3

Related Questions