Click here to Skip to main content
14,356,475 members
Rate this:
Please Sign up or sign in to vote.
See more:
<html>
  <head>
   
    <script type="text/javascript">
     google.charts.load('current', {'packages':['corechart', 'controls']});
      
      google.load("visualization", "1.0", {packages:["corechart"]});

      google.load("visualization", "1", {packages:["columnchart"]}); 

      //google.charts.setOnLoadCallback(drawStuff);
      google.charts.setOnLoadCallback(drawVisualization1);
      google.charts.setOnLoadCallback(drawVisualization2);
      
       function drawVisualization1() 
        {
        
          var opts = {sendMethod: 'auto'};
          var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1tNWnpOh5wx8OFPgRjVklh5NF6d4lwIB082Xmx_9wLc4/edit#gid=0', opts);
          query.setQuery('select B,count(A) group by B pivot D');
          query.send(handleQueryResponse);
         // .getSpreadsheetData();
        }
      
       function drawVisualization2()
        {
         var opts = {sendMethod: 'auto'};
          var query = new google.visualization.Query('https://docs.google.com/a/jaguarlandrover.com/spreadsheets/d/1IshZHO_02l8HgUjltE7Txw200KjQioYehlllora17yA/edit?usp=sharing', opts);
          query.setQuery('select C, count(A) group by C pivot E');
          query.send(handleQueryResponse1);
           
        }
      

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

  var data = response.getDataTable();

   var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2,
                       { calc: "stringify",
                         sourceColumn: 2,
                         type: "string",
                         role: "annotation" },
                       3,
                         { calc: "stringify",
                         sourceColumn: 3,
                         type: "string",
                         role: "annotation" },
                       ]);
                       
     
                       
                       
                       
   
   //var chart = new google.visualization.ColumnChart(document.getElementById('vis_div2'));
   //chart.draw(data, {width: 750, height: 400, is3D: true});
   var options = {
        title: "Heavy deck report (Month-Year Vs Incident Count)",
        width: 900,
        height: 300,
        bar: {groupWidth: "100%"}
      };
      
  
      var chart = new google.visualization.ColumnChart(document.getElementById("vis_div1"));     
      
      chart.draw(view, options); 
      
   }
      
      
       function handleQueryResponse1(response) {
     if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
    }

   var data = response.getDataTable();
   var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2,
                       { calc: "stringify",
                         sourceColumn: 2,
                         type: "string",
                         role: "annotation" },
                         3,
                         { calc: "stringify",
                         sourceColumn: 3,
                         type: "string",
                         role: "annotation" },
                       ]);
   
   //var chart = new google.visualization.ColumnChart(document.getElementById('vis_div2'));
   //chart.draw(data, {width: 750, height: 400, is3D: true});
   var options = {
        title: "Heavy deck report",
        width: 900,
        height: 300,
        bar: {groupWidth: "100%"}
      };
      var chart = new google.visualization.LineChart(document.getElementById("vis_div2"));
      chart.draw(view, options);
      
      
    
  
   }
        
      
      
          
   </script>
   </head>   
     <body>  
  
  <table border="1"> 
   <tr>
  <td>
   <div id="vis_div1" style="width: 900px; height: 300px;"></div>    
  </td>
   </tr>
   <tr>
  <td>
   <div id="vis_div2" style="width: 900px; height: 300px;"></div>
  </td>
  </tr>  
  </table>  
  </body>
</html>


What I have tried:

**strong text**

I wanted to add google filters with my following query.Metioned below :-



var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard-div'));
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'piechart-div',
// The pie chart will use the columns 'Name' and 'Donuts eaten'
// out of all the available ones.
'view': {'columns': [0, 3]}
});

var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table-div'
});
var donutSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'slider-div',
'options': {
'filterColumnLabel': 'Age'
}
});

var genderPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'selector-div',
'options': {
'filterColumnLabel': 'Gender'
}
});
// Set up dependencies between controls and charts
dashboard.bind(donutSlider, [pieChart,table]);
dashboard.bind(genderPicker, [pieChart,table]);
// Draw all visualization components of the dashboard


Please help me for the same !!!








I have tried to use filter with the query but failed to do it.
Posted
Updated 10-Sep-16 5:40am

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100