CODEWITHSUNDEEP
javascripthtmlvariablesgoogle-visualization
MikiMrki
MikiMrki

Reputation: 195

Google visualisation chart control - stringFilter

Here I have a very powerful google table with control: http://jsbin.com/IhEmetI/1/edit

and CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['controls']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Prepare the data
        var data = google.visualization.arrayToDataTable([
          ['Name', 'Gender', 'Age', 'Donuts eaten'],
          ['Michael' , 'Male', 12, 5],
          ['Elisa', 'Female', 20, 7],
          ['Robert', 'Male', 7, 3],
          ['John', 'Male', 54, 2],
          ['Jessica', 'Female', 22, 6],
          ['Aaron', 'Male', 3, 1],
          ['Margareth', 'Female', 42, 8],
          ['Miranda', 'Female', 33, 6]
        ]);

        // Define a slider control for the Age column.
        var slider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'control1',
          'options': {
            'filterColumnLabel': 'Age',
          'ui': {'labelStacking': 'vertical'}
          }
        });


        // Define a category picker control for the Gender column
        var categoryPicker = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'control2',
          'options': {
            'filterColumnLabel': 'Gender',
            'ui': {
            'labelStacking': 'vertical',
              'allowTyping': false,
              'allowMultiple': false
            }
          }
        });
        var stringFilter = new google.visualization.ControlWrapper({
          'controlType': 'StringFilter',
          'containerId': 'control3',
          'options': {
          'filterColumnLabel': 'Name',
          'ui': {'labelStacking': 'vertical'}

          }
        });

        // Define a Pie chart
        var pie = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'chart1',
          'options': {
            'width': 300,
            'height': 300,
            'legend': 'none',
            'title': 'Donuts eaten per person',
            'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
            'pieSliceText': 'label'
          },
          // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
          // from the 'data' DataTable.
          'view': {'columns': [0, 3]}
        });

        // Define a table
        var table = new google.visualization.ChartWrapper({
          'chartType': 'Table',
          'containerId': 'chart2',
          'options': {
            'width': '300px'
          }
        });

        // Create a dashboard
        new google.visualization.Dashboard(document.getElementById('dashboard')).
            // Establish bindings, declaring the both the slider and the category
            // picker will drive both charts.
            bind([slider, categoryPicker], [pie, table], [stringFilter, table]).
            // Draw the entire dashboard.
            draw(data);
      }


      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="dashboard">
      <table>
        <tr style='vertical-align: top'>
          <td style='width: 300px; font-size: 0.9em;'>
            <div id="control1"></div>
            <div id="control2"></div>
            <div id="control3"></div>
            <div id="control4"></div>

          </td>
          <td style='width: 600px'>
            <div style="float: left;" id="chart1"></div>
            <div style="float: left;" id="chart2"></div>
            <div style="float: left;" id="chart3"></div>
            <div style="float: left;" id="chart4"></div>

          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

​ but I can't show stringFilter, so to search column by Name ... what is problem with this code:

var stringFilter = new google.visualization.ControlWrapper({
          'controlType': 'StringFilter',
          'containerId': 'control3',
          'options': {
          'filterColumnLabel': 'Name',
          'ui': {'labelStacking': 'vertical'}

          }
        });

and HTML:

    <div id="control3"></div>

So there is basic google visualisation table and control chart usage, and I need to filter column by name, but dont work. What is exactly problem?

Upvotes: 0

Views: 4530

Answers (1)

asgallant
asgallant

Reputation: 26340

Your call to Dashboard#bind is not formatted correctly. If you want to bind the control to both the PieChart and the Table, you need to specify it like this:

// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// bind the NumberRangeFilter, CategoryFilter, and StringFilter to the PieChart and Table
bind([slider, categoryPicker, stringFilter], [pie, table]).
// Draw the entire dashboard.
draw(data);

If you want the StringFilter to control only the table, you need to specify it like this:

// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// bind the NumberRangeFilter and CategoryFilter to the PieChart and Table
bind([slider, categoryPicker], [pie, table]).
// bind the StringFilter to the Table
bind([stringFilter], [table]).
// Draw the entire dashboard.
draw(data);

[Edit - code to properly set the cssClassNames option]

var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'chart2',
    options: {
        cssClassNames: cssClassNames,
        allowHtml: true
    }
});

Upvotes: 1

Related Questions