Sandeep Kesari Ответов: 0

Фильтр в скрипте приложения Google

<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>


Что я уже пробовал:

** сильный текст**

Я хотел добавить фильтры google со своим следующим запросом.Упоминается ниже :-



приборная панель ВАР = новый Google.визуализация.Dashboard (document. getElementById ('dashboard-div'));
ВАР секторная диаграмма = новый Google.визуализация.Картограф({
'тип диаграммы': 'комплексная',
'containerId': 'piechart-div',
// Круговая диаграмма будет использовать столбцы " имя " и "пончики съедены".
// из всех доступных.
'view': {'columns': [0, 3]}
});

параметр = новый Google.визуализация.Картограф({
'тип диаграммы': 'стол',
'containerId': 'table-div'
});
var donutSlider = новый google. визуализация.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'slider-div',
"варианты": {
'filterColumnLabel': 'возраст'
}
});

var genderPicker = новый google. визуализация.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'selector-div',
"варианты": {
'filterColumnLabel': 'пол'
}
});
// Настройка зависимостей между элементами управления и диаграммами
приборная панель.персонализация(donutSlider, [круговую диаграмму,таблицу]);
приборная панель.персонализация(genderPicker, [круговую диаграмму,таблицу]);
// Нарисуйте все компоненты визуализации панели мониторинга


Пожалуйста, помогите мне сделать то же самое !!!








Я пытался использовать фильтр с запросом, но не смог этого сделать.

0 Ответов