Click here to Skip to main content
15,867,453 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
C#
<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 4:40am

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900