Добавление поискового запроса в таблицу визуализации Google

Я создал базу данных с использованием Google-визуализации со следующим кодом.Добавление поискового запроса в таблицу визуализации Google

Вот версия HTML:

<html> 
    <head> 
    <script type='text/javascript' src='https://www.google.com/jsapi'></script> 
    <script type='text/javascript'> 
     google.load('visualization', '1', {packages:['table']}); 
     google.setOnLoadCallback(drawTable); 
     function drawTable() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Name'); 
     data.addColumn('string', 'Team'); 
     data.addColumn('string', 'Nationality'); 
     data.addColumn('number', 'Height'); 
     data.addColumn('number', 'Weight'); 
     data.addColumn('number', 'OverallRating'); 
     data.addColumn('string', 'Foot'); 
     data.addRows([ 
      ['MESSI','FC BARCELONA','ARGENTINA',169,67,25,'Left foot'], 
['A. INIESTA','FC BARCELONA','SPAIN',170,65,28,'Right foot'], 
['XAVI','FC BARCELONA','SPAIN',170,68,32,'Right foot'] 
, 
     ]); 

     var table = new google.visualization.Table(document.getElementById('table_div')); 
     table.draw(data, {showRowNumber: true}); 
     } 
    </script> 
    </head> 

    <body> 
    <div id='table_div'></div> 
    </body> 
</html>

Вот версия Javascript код:

<!-- 
You are free to copy and use this sample in accordance with the terms of the 
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html) 
--> 

<!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="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load('visualization', '1', {packages: ['table']}); 
    </script> 
    <script type="text/javascript"> 
    <html> 
     <head> 
     <script type='text/javascript' src='https://www.google.com/jsapi'></script> 
     <script type='text/javascript'> 
      google.load('visualization', '1', {packages:['table']}); 
      google.setOnLoadCallback(drawTable); 
      function drawTable() { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Name'); 
      data.addColumn('string', 'Team'); 
      data.addColumn('string', 'Nationality'); 
      data.addColumn('number', 'Height'); 
      data.addColumn('number', 'Weight'); 
      data.addColumn('number', 'OverallRating'); 
      data.addColumn('string', 'Foot'); 
      data.addRows([ 
       ['MESSI','FC BARCELONA','ARGENTINA',169,67,25,'Left foot'], 
    ['A. INIESTA','FC BARCELONA','SPAIN',170,65,28,'Right foot'], 
    ['XAVI','FC BARCELONA','SPAIN',170,68,32,'Right foot'] 
    , 
      ]); 

      var table = new google.visualization.Table(document.getElementById('table_div')); 
      table.draw(data, {showRowNumber: true}); 
      } 
     </script> 
     </head> 

     <body> 
     <div id='table_div'></div> 
     </body> 
    </html> 

    google.setOnLoadCallback(drawVisualization); 
    </script> 
    </head> 
    <body style="font-family: Arial;border: 0 none;"> 
    <div id="table"></div> 
    </body> 
</html>

Мой вопрос, как я могу вставить окно поиска в верхней части страницы, которая позволяет пользователю искать игроков, набрав их имя? Даже лучше этого, как я мог бы также реализовать функцию поиска, которая будет отображать результаты на основе определенных столбцов, находящихся над определенным числом, например. «показывать только игроков с общим рейтингом выше 80»?

источник

2013-08-26 PauloCot

То, что вы хотите это Dashboard с StringFilter Control и NumberRangeFilter Control:

function drawTable() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Name'); 
    data.addColumn('string', 'Team'); 
    data.addColumn('string', 'Nationality'); 
    data.addColumn('number', 'Height'); 
    data.addColumn('number', 'Weight'); 
    data.addColumn('number', 'OverallRating'); 
    data.addColumn('string', 'Foot'); 
    data.addRows([ 
     ['MESSI','FC BARCELONA','ARGENTINA',169,67,25,'Left foot'], 
     ['A. INIESTA','FC BARCELONA','SPAIN',170,65,28,'Right foot'], 
     ['XAVI','FC BARCELONA','SPAIN',170,68,32,'Right foot'] 
    ]); 

    var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard')); 

    var stringFilter = new google.visualization.ControlWrapper({ 
     controlType: 'StringFilter', 
     containerId: 'string_filter_div', 
     options: { 
      filterColumnIndex: 0 
     } 
    }); 

    var numberRangeFilter = new google.visualization.ControlWrapper({ 
     controlType: 'NumberRangeFilter', 
     containerId: 'numnber_range_filter_div', 
     options: { 
      filterColumnIndex: 5, 
      minValue: 0, 
      maxValue: 100, 
      ui: { 
       label: 'Overall Rating' 
      } 
     } 
    }); 

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

    dashboard.bind([stringFilter, numberRangeFilter], [table]); 
    dashboard.draw(data); 
} 
google.load('visualization', '1', {packages:['controls'], callback: drawTable});

См http://jsfiddle.net/asgallant/Ena84/

источник

2013-08-26 18:58:30 asgallant

Да, это фантастика спасибо. Один вопрос: как вы можете включить несколько фильтров строк и номеров? – PauloCot

Этот ответ был очень полезен для меня. У него должно быть больше оборотов! ;-) – dalloliogm

Великий человек Это помогло мне –

Добавление поискового запроса в таблицу визуализации Google

ответ

Смежные вопросы