Dashboard Google Charts - nascondi colonne

Question

Io uso la dashboard di google charts per visualizzare un grafico a linee e vorrei controllare gli elementi visualizzati in fase di esecuzione. per esempio:

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

Vorrei controllare la visibilità delle Cats, Blanket 1 e Blanket 2 in modo simile a come è stato fatto in this Google Charts category filter example.

Answer 1

Un modo sarebbe utilizzare un valore di flag per mappare a Cats/Blanket 1/Blanket 2 e quindi richiamare la funzione con un'inizializzazione dei dati adeguata.

google.charts.load('current', {packages: ['corechart']}); 
 

 
function drawVisualization(flag) { 
 
    if(flag=="cats") 
 
     var data = google.visualization.arrayToDataTable([ 
 
     ['x', 'Cats' ], 
 
     ['A', 1 ], 
 
     ['B', 2 ], 
 
     ['C', 4 ], 
 
     ['D', 8 ], 
 
     ['E', 7 ], 
 
     ['F', 7 ], 
 
     ['G', 8 ], 
 
     ['H', 4 ], 
 
     ['I', 2 ], 
 
     ['J', 3.5 ], 
 
     ['K', 3 ], 
 
     ['L', 3.5 ], 
 
     ['M', 1 ], 
 
     ['N', 1 ] 
 
     ]); 
 

 
    else if (flag=="Blanket 1") 
 
     var data = google.visualization.arrayToDataTable([ 
 
     ['x', 'Blanket 1'], 
 
     ['A', 1], 
 
     ['B', 0.5], 
 
     ['C', 1], 
 
     ['D', 0.5], 
 
     ['E', 1], 
 
     ['F', 0.5], 
 
     ['G', 1], 
 
     ['H', 0.5], 
 
     ['I', 1], 
 
     ['J', 0.5], 
 
     ['K', 1], 
 
     ['L', 0.5], 
 
     ['M', 1 ], 
 
     ['N', 0.5 ] 
 
     ]); 
 

 
    else if(flag=="Blanket 2") 
 
     var data = google.visualization.arrayToDataTable([ 
 
     ['x', 'Blanket 2'], 
 
     ['A', 0.5], 
 
     ['B', 1], 
 
     ['C', 0.5], 
 
     ['D', 1], 
 
     ['E', 0.5], 
 
     ['F', 1], 
 
     ['G', 0.5], 
 
     ['H', 1], 
 
     ['I', 0.5], 
 
     ['J', 1], 
 
     ['K', 0.5], 
 
     ['L', 1], 
 
     ['M', 0.5], 
 
     ['N', 1] 
 
     ]); 
 

 
    else 
 
     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] 
 
     ]); 
 
    
 
    new google.visualization.LineChart(document.getElementById('visualization')). 
 
     draw(data, {curveType: "function", 
 
        width: 500, height: 400, 
 
        vAxis: {maxValue: 10}} 
 
     ); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div class="btn-group" role="group" aria-label="..."> 
 
    <button type="button" class="btn btn-default" onclick="drawVisualization('Cats')">Cats</button> 
 
    <button type="button" class="btn btn-default" onclick="drawVisualization('Blanket 1')">Blanket 1</button> 
 
    <button type="button" class="btn btn-default" onclick="drawVisualization('Blanket 2')">Blanket 2</button> 
 
</div> 
 

 
<div id="visualization"></div>

Answer 2

Ti consiglio di utilizzare un DataView per nascondere le colonne ...

google.charts.load('current', { 
 
    packages: ['corechart'], 
 
    callback: drawVisualization 
 
}); 
 

 
function drawVisualization(category) { 
 
    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] 
 
    ]); 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('visualization')); 
 
    var options = { 
 
    curveType: 'function', 
 
    width: 500, 
 
    height: 400, 
 
    vAxis: { 
 
     maxValue: 10 
 
    } 
 
    }; 
 

 
    var view = new google.visualization.DataView(data); 
 
    var viewColumns = [0]; 
 

 
    switch (category) { 
 
    case 'Cats': 
 
     viewColumns.push(1); 
 
     break; 
 

 
    case 'Blanket 1': 
 
     viewColumns.push(2); 
 
     break; 
 

 
    case 'Blanket 2': 
 
     viewColumns.push(3); 
 
     break; 
 

 
    default: 
 
     viewColumns.push(1); 
 
     viewColumns.push(2); 
 
     viewColumns.push(3); 
 
    } 
 

 
    view.setColumns(viewColumns); 
 
    chart.draw(view, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="btn-group"> 
 
    <button type="button" class="btn btn-default" onclick="drawVisualization()">All</button> 
 
    <button type="button" class="btn btn-default" onclick="drawVisualization('Cats')">Cats</button> 
 
    <button type="button" class="btn btn-default" onclick="drawVisualization('Blanket 1')">Blanket 1</button> 
 
    <button type="button" class="btn btn-default" onclick="drawVisualization('Blanket 2')">Blanket 2</button> 
 
</div> 
 
<div id="visualization"></div>