Google Charts API에서 두 가지 유형의 카테고리 필터 결합

사용자가 차트에 표시된 결과를 필터링 할 수있게하고 싶었습니다. Google API는 행별 필터링을 적용하는 CategoryFilter를 제공합니다. 여기하지만 내 데이터 테이블에, 나는 또한 열을 기준으로 필터링 할 것 Google Charts API에서 두 가지 유형의 카테고리 필터 결합

<html> 
    <head> 
    <!--Load the Ajax API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

    // Load the Visualization API and the piechart package. 
    google.load('visualization', '1', {'packages':['controls']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 

    function drawChart() { 

     // Create our data table out of JSON data loaded from server. 
     var data = new google.visualization.DataTable(<?=$jsonTable?>); 

    var countryPicker = new google.visualization.ControlWrapper({ 
    controlType: 'CategoryFilter', 
    containerId: 'negeri', 
    dataTable: data, 
    options: { 
     filterColumnLabel: 'Negeri', 
     ui: { 
     labelStacking: 'vertical', 
     allowTyping: false, 
     allowMultiple: true 
     } 
    }, 
    // Define an initial state, i.e. a set of metrics to be initially selected. 
    state: {'selectedValues': ['Kedah', 'Johor']} 
    }); 


     var chart = new google.visualization.ChartWrapper({ 
     chartType: 'ColumnChart', 
     containerId: 'chart_div', 
     options: { 
      title: 'Statistik Negeri vs. Kategori Sukan', 
      width: 1000, 
      height: 1000, 
      hAxis: {title: 'Negeri', titleTextStyle: {color: 'blue'}}, 
      vAxis: {title: 'Jumlah Kategori', titleTextStyle: {color: 'blue'}} 
     } 
    }); 




    // Create the dashboard. 
    new google.visualization.Dashboard(document.getElementById('dashboard')). 
    // Configure the controls so that: 
    // - the 'Country' selection drives the 'Region' one, 
    // - the 'Region' selection drives the 'City' one, 
    // - and finally the 'City' output drives the chart 
    bind(countryPicker, chart). 
    // Draw the dashboard 
    draw(data); 
    } 
    </script> 
    </head> 

    <body> 
    <div id="dashboard"> 
<div id="negeri"></div> 
<div id="chart_div"></div> 
</div> 
    </body> 
</html>

완벽하게 잘 작동 내 코드입니다. 이 두 가지 유형의 필터링은 함께 작동해야합니다. (의존, bind() 함수에 의해). 저는 @asgallant 인 http://jsfiddle.net/asgallant/WaUu2/을 언급했으며 이것이 내가 결합하고 싶은 기능입니다.

어떻게 결합 할 수 있습니까? 나는 Google 대시 보드()와 함께 @ asgallant에 의해 setChartView() 결합 시도했지만 작동하지 않습니다.

<html> 
    <head> 
    <!--Load the Ajax API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

    // Load the Visualization API and the piechart package. 
    google.load('visualization', '1', {'packages':['controls']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 

    function drawChart() { 

     // Create our data table out of JSON data loaded from server. 
     var data = new google.visualization.DataTable(<?=$jsonTable?>); 

     var columnsTable = new google.visualization.DataTable(); 
    columnsTable.addColumn('number', 'colIndex'); 
    columnsTable.addColumn('string', 'colLabel'); 
    var initState= {selectedValues: []}; 
    // put the columns into this data table (skip column 0) 
    for (var i = 1; i < data.getNumberOfColumns(); i++) { 
     columnsTable.addRow([i, data.getColumnLabel(i)]); 
     // you can comment out this next line if you want to have a default selection other than the whole list 
     initState.selectedValues.push(data.getColumnLabel(i)); 
    } 

    var countryPicker = new google.visualization.ControlWrapper({ 
    controlType: 'CategoryFilter', 
    containerId: 'negeri', 
    dataTable: data, 
    options: { 
     filterColumnLabel: 'Negeri', 
     ui: { 
     labelStacking: 'vertical', 
     allowTyping: false, 
     allowMultiple: true 
     } 
    }, 
    // Define an initial state, i.e. a set of metrics to be initially selected. 
    state: {'selectedValues': ['Kedah', 'Johor']} 
    }); 

var columnFilter = new google.visualization.ControlWrapper({ 
     controlType: 'CategoryFilter', 
     containerId: 'colFilter_div', 
     dataTable: columnsTable, 
     options: { 
      filterColumnLabel: 'colLabel', 
      ui: { 
       label: 'Kategori Sukan', 
       allowTyping: false, 
       allowMultiple: true, 
       allowNone: false, 
       selectedValuesLayout: 'belowStacked' 
      } 
     }, 
     state: initState 
    }); 


     var chart = new google.visualization.ChartWrapper({ 
     chartType: 'ColumnChart', 
     containerId: 'chart_div', 
     options: { 
      title: 'Statistik Negeri vs. Kategori Sukan', 
      width: 1000, 
      height: 1000, 
      hAxis: {title: 'Negeri', titleTextStyle: {color: 'blue'}}, 
      vAxis: {title: 'Jumlah Kategori', titleTextStyle: {color: 'blue'}} 
     } 
    }); 




    // Create the dashboard. 
    new google.visualization.Dashboard(document.getElementById('dashboard')). 
    // Configure the controls so that: 
    // - the 'Country' selection drives the 'Region' one, 
    // - the 'Region' selection drives the 'City' one, 
    // - and finally the 'City' output drives the chart 
    bind(countryPicker, columnFilter). 
    bind(columnFilter, chart). 
    // Draw the dashboard 
    draw(data); 
    } 
    </script> 
    </head> 

    <body> 
    <div id="dashboard"> 
<div id="negeri"></div> 
<div id="chart_div"></div> 
</div> 
    </body> 
</html>

출처

2014-01-28 mfmz

당신은 정상적으로 차트에 countryPicker 필터를 결합하기를 원하지만 아무것도에 columnFilter 컨트롤을 바인딩하지 않음 - setChartView 기능은 columnFilter에 대한 모든 것을 처리합니다. 대시 보드에서 작동하려면 다른 두 줄을 조정해야하지만 중요한 것은 없습니다. 다음과 같이 표시되어야합니다.

function drawChart() { 
    // Create our data table out of JSON data loaded from server. 
    var data = new google.visualization.DataTable(<?=$jsonTable?>); 

    var columnsTable = new google.visualization.DataTable(); 
    columnsTable.addColumn('number', 'colIndex'); 
    columnsTable.addColumn('string', 'colLabel'); 
    var initState= {selectedValues: []}; 
    // put the columns into this data table (skip column 0) 
    for (var i = 1; i < data.getNumberOfColumns(); i++) { 
     columnsTable.addRow([i, data.getColumnLabel(i)]); 
     // you can comment out this next line if you want to have a default selection other than the whole list 
     initState.selectedValues.push(data.getColumnLabel(i)); 
    } 

    var countryPicker = new google.visualization.ControlWrapper({ 
     controlType: 'CategoryFilter', 
     containerId: 'negeri', 
     dataTable: data, 
     options: { 
      filterColumnLabel: 'Negeri', 
      ui: { 
       labelStacking: 'vertical', 
       allowTyping: false, 
       allowMultiple: true 
      } 
     }, 
     // Define an initial state, i.e. a set of metrics to be initially selected. 
     state: {'selectedValues': ['Kedah', 'Johor']} 
    }); 

    var columnFilter = new google.visualization.ControlWrapper({ 
     controlType: 'CategoryFilter', 
     containerId: 'colFilter_div', 
     dataTable: columnsTable, 
     options: { 
      filterColumnLabel: 'colLabel', 
      ui: { 
       label: 'Kategori Sukan', 
       allowTyping: false, 
       allowMultiple: true, 
       allowNone: false, 
       selectedValuesLayout: 'belowStacked' 
      } 
     }, 
     state: initState 
    }); 

    var chart = new google.visualization.ChartWrapper({ 
     chartType: 'ColumnChart', 
     containerId: 'chart_div', 
     options: { 
      title: 'Statistik Negeri vs. Kategori Sukan', 
      width: 1000, 
      height: 1000, 
      hAxis: {title: 'Negeri', titleTextStyle: {color: 'blue'}}, 
      vAxis: {title: 'Jumlah Kategori', titleTextStyle: {color: 'blue'}} 
     } 
    }); 

    // Create the dashboard. 
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')). 
    bind(countryPicker, chart); 

    function setChartView() { 
     var state = columnFilter.getState(); 
     var row; 
     var view = { 
      columns: [0] 
     }; 
     for (var i = 0; i < state.selectedValues.length; i++) { 
      row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0]; 
      view.columns.push(columnsTable.getValue(row, 0)); 
     } 
     // sort the indices into their original order 
     view.columns.sort(function (a, b) { 
      return (a - b); 
     }); 
     chart.setView(view); 
     chart.draw(); 
    } 
    google.visualization.events.addListener(columnFilter, 'statechange', setChartView); 
    var runOnce = google.visualization.events.addListener(dashboard, 'ready', function() { 
     google.visualization.events.removeListener(runOnce); 
     setChartView(); 
    }); 

    columnFilter.draw(); 
    dashboard.draw(data); 
} 
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

출처

2014-01-28 17:05:01 asgallant

제안 된 코드를 사용했으며 HTML 본문에 columnFilter의 div ID를 추가했습니다. 그러나 무언가가 어딘가에서 잘못되었을 수 있습니다. columnFilter는 countryPicker처럼 차트에 표시되지 않았습니다. – mfmz

죄송합니다. 열 필터에 대한 그리기 호출을 추가해야합니다. 전화로 답변을 수정하겠습니다. – asgallant

너 정말 잘 하네. 고마워. – mfmz

Google Charts API에서 두 가지 유형의 카테고리 필터 결합

답변

관련 문제