Controllo filtro categorie per LineChart in Strumenti grafico di Google

Question

Scopo: Mostra grafici a linee con l'opzione per scegliere quali linee si desidera visualizzare. In altre parole, diciamo che c'è un grafico a linee e ho 2 righe quindi voglio 3 opzioni, mostra entrambe, solo la prima o la seconda.

Qualcosa di simile alla funzionalità mostrato qui, ma per i grafici a linee:http://code.google.com/apis/ajax/playground/?type=visualization#categoryfilter_control

Codice:

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}} 
     ); 
} 

Il codice può essere trovato qui anche: http://code.google.com/apis/ajax/playground/?type=visualization#line_chart

Come può Ottengo questa funzionalità?

Answer 1

Opzione A: creare pulsanti

possibile rendere un pulsante (o utilizzando il tag, o, ecc) che corre javascript per filtrare i dati. Ciò significa che è possibile creare tre pulsanti (o 3 caselle di selezione radio, o due caselle di controllo e un pulsante, o qualsiasi altra cosa) che eseguirà javascript quando selezionato.

Tale javascript deve contenere una funzione che filtrerà i dati (probabilmente utilizzando un DataView Class con SetColumns) per contenere le colonne appropriate per la selezione. Ci sono un migliaio di modi per fare questo, e dato che stai usando alcuni dati generici e la tua vera applicazione è probabilmente diversa, ti permetterò di capire cosa funziona meglio per i tuoi dati/utenti.

Opzione B: Usa Google visualizzazione Controlli

Si può anche fare lo stesso utilizzando la visualizzazione di Google Category Filter Control con un po 'di regolazione. C'è un grande esempio di asgallant here, con una spiegazione here. Ciò richiede una tabella intermedia, ma funziona bene se ti piace come appare/funziona il filtro della categoria. Dipende tutto da te!

Dal momento che il sito mi vuole mettere il codice inline, qui sono:

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(); 
}