Sterowanie filtrem kategorii dla linii prostej w Google Narzędzia wykresów

Question

Przeznaczenie: Pokaż wykresy liniowe z opcją wyboru linii, które chcesz wyświetlić. Innymi słowy, powiedzmy, że istnieje wykres liniowy i mam 2 linie, więc chcę 3 opcje, pokazać obie, tylko pierwszą lub tylko drugą.

Coś funkcjonalności przedstawionej tutaj, ale dla wykresów liniowych:http://code.google.com/apis/ajax/playground/?type=visualization#categoryfilter_control

Kod:

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'], 
    ['A', 1,  1,   0.5], 
    ['B', 2,  0.5,   1], 
    ['C', 4,  1,   0.5], 
    ['D', 8,  0.5,   1], 
    ['E', 7,  1,   0.5], 
    ['F', 7,  0.5,   1], 
    ['G', 8,  1,   0.5], 
    ['H', 4,  0.5,   1], 
    ['I', 2,  1,   0.5], 
    ['J', 3.5,  0.5,   1], 
    ['K', 3,  1,   0.5], 
    ['L', 3.5,  0.5,   1], 
    ['M', 1,  1,   0.5], 
    ['N', 1,  0.5,   1] 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
     draw(data, {curveType: "function", 
        width: 500, height: 400, 
        vAxis: {maxValue: 10}} 
     ); 
} 

Kod można także znaleźć tutaj: http://code.google.com/apis/ajax/playground/?type=visualization#line_chart

Jak można Osiągam tę funkcjonalność?

Answer 1

Wariant A: Upewnij Przyciski

Można zrobić przycisk (przy użyciu znacznika, albo, etc.), który uruchamia skrypt do filtrowania danych. Oznacza to, że możesz utworzyć trzy przyciski (lub 3 pola wyboru radioodbiornika lub dwa pola wyboru i przycisk, lub cokolwiek innego), które będą uruchamiały javascript po zaznaczeniu.

Ten javascript powinien zawierać funkcję, która będzie filtrować twoje dane (prawdopodobnie używając DataView Class z SetColumns), aby zawierały właściwe kolumny dla twojego wyboru. Istnieją tryliony sposobów na zrobienie tego, a ponieważ używasz pewnych ogólnych danych, a twoja prawdziwa aplikacja jest prawdopodobnie inna, pozwolę ci dowiedzieć się, co działa najlepiej dla twoich danych/użytkowników.

Wariant B: Użyj Google Wizualizacja Kontroluje

Można również zrobić to samo za pomocą wizualizacji Google Category Filter Control z odrobiną regulacji. Doskonały przykład można znaleźć pod adresem here z wyjaśnieniem: here. Wymaga to tabeli pośredniej, ale działa dobrze, jeśli podoba Ci się wygląd/działanie filtra kategorii. Wszystko zależy od Ciebie!

Ponieważ strona chce mnie postawić inline kodu, tutaj jesteś:

google.load('visualization', '1', {packages: ['controls']}); 
google.setOnLoadCallback(drawChart); 

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Year'); 
    data.addColumn('number', 'Foo'); 
    data.addColumn('number', 'Bar'); 
    data.addColumn('number', 'Baz'); 
    data.addColumn('number', 'Cad'); 
    data.addRows([ 
     ['2005', 45, 60, 89, 100], 
     ['2006', 155, 50, 79, 24], 
     ['2007', 35, 31, 140, 53], 
     ['2008', 105, 23, 43, 82], 
     ['2009', 120, 56, 21, 67], 
     ['2010', 65, 19, 34, 134], 
     ['2011', 80, 23, 130, 40], 
     ['2012', 70, 140, 83, 90] 
    ]); 

    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)]); 
     initState.selectedValues.push(data.getColumnLabel(i)); 
    } 

    var chart = new google.visualization.ChartWrapper({ 
     chartType: 'BarChart', 
     containerId: 'chart_div', 
     dataTable: data, 
     options: { 
      title: 'Foobar', 
      width: 600, 
      height: 400 
     } 
    }); 

    chart.draw(); 

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

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

    columnFilter.draw(); 
}