Google Graphique: Diagramme circulaire tranche basée sur les légendes

Question

\t \t google.load('visualization', '1.1', { 
 
\t \t \t packages : [ 'controls' ] 
 
\t \t }); 
 
\t \t google.load('visualization', '1', { 
 
\t \t \t packages : [ 'table' ] 
 
\t \t }); 
 
\t \t google.load('visualization', '1.0', { 
 
\t \t \t 'packages' : [ 'corechart' ] 
 
\t \t }); 
 
\t \t google.setOnLoadCallback(drawVisualization); 
 
function drawVisualization() { 
 
    var data = [{tagId:'2a:10',isSafe:'Safe'},{tagId:'dd:80',isSafe:'Unsafe'},{tagId:'0a:07',isSafe:'Safe'},{tagId:'29:11',isSafe:'Safe'}]; 
 
      var dataArray = []; 
 
      var datatable = new google.visualization.DataTable(); 
 
      datatable.addColumn('string', 'TagID'); 
 
      datatable.addColumn('string', 'Status'); 
 

 
      $.each(data, function(i, obj) { 
 
       dataArray.push([ obj.tagId, obj.isSafe]); 
 
      }); 
 

 
      datatable.addRows(dataArray); 
 

 
      var tagDivPicker = new google.visualization.ControlWrapper({ 
 
       'controlType' : 'CategoryFilter', 
 
       'containerId' : 'tag_control_div', 
 
       'options' : { 
 
\t \t \t \t \t filterColumnIndex : 0, 
 
\t \t \t \t \t 'ui' : { 
 
\t \t \t \t \t \t 'labelStacking' : 'vertical', 
 
\t \t \t \t \t \t 'allowTyping' : false, 
 
\t \t \t \t \t \t 'allowMultiple' : false 
 
\t \t \t \t \t //,'cssClass':'form-control1 input-sm m-bot15' 
 
\t \t \t \t \t } 
 
        } 
 
      }); 
 
      var table_data = new google.visualization.ChartWrapper({ 
 
       'chartType' : 'Table', 
 
       'containerId' : 'table_data', 
 
       'view' : { 
 
        'columns' : [ 0, 1] 
 
       } 
 
      }); 
 

 
      var dataGroupColumnChart = google.visualization.data.group(
 
        datatable, [1], [{ 
 
         'column': 1, 
 
         'aggregation': google.visualization.data.count, 
 
         'type': 'number' 
 
        }]); 
 

 
      var pieChart = new google.visualization.ChartWrapper({ 
 
       'chartType': 'PieChart', 
 
       'containerId': 'pie_chart', 
 
       'dataTable': dataGroupColumnChart, 
 
       options: { 
 
        'width': 600, 
 
        'height': 400, 
 
        title: 'Total Compliance', 
 
        slices: {0: {color: 'green'}, 1:{color: 'red'}} 
 
       } 
 
      }); 
 
      pieChart.draw(); 
 

 
      // Create the dashboard. 
 
      var dashboard = new google.visualization.Dashboard(document 
 
        .getElementById('dashboard')) 
 
      .bind([ tagDivPicker ], 
 
        [ table_data ]); 
 

 
      dashboard.draw(datatable); 
 

 
      google.visualization.events.addListener(tagDivPicker, 'statechange', function(event) { 
 
       pieChart.setDataTable(google.visualization.data.group(
 
        // get the filtered results 
 
        table_data.getDataTable(), 
 
        [2], [{ 
 
         'column': 2, 
 
         'aggregation': google.visualization.data.count, 
 
         'type': 'number' 
 
        }] 
 
       )); 
 
       // redraw the pie chart to reflect changes 
 
       pieChart.draw(); 
 
      }); 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
\t <script type="text/javascript" 
 
\t \t src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="dashboard"> 
 
\t <div style="float: left;" id="table_data"></div> 
 
\t <div style="float: right;" id="pie_chart"></div> 
 
\t <div id="tag_control_div"></div> 
 
</div>

Contexte:

J'utilise Google Chart tableau de bord et l'agrégation pour manipuler le tableau de. Actuellement, je suis en mesure de modifier les données du tableau de bord en fonction de plusieurs filtres, y compris un graphique à secteurs et un filtre de catégorie.

Lorsque je sélectionne le CategoryFilter et qu'il n'y a qu'une seule tranche disponible, le camembert prend la première couleur de tranche qui n'est pas la belle interface utilisateur.

Par exemple, les données ci-dessous suggèrent Safe-Unsafe Chart. La couleur des légendes sera donc verte pour la sécurité et rouge pour la sécurité.

Énoncé du problème:

Maintenant, s'il n'y a pas des documents de sécurité disponibles alors camembert censé montrer tranche avec la couleur rouge, mais le tableau prend la première tranche comme la couleur par défaut s'il n'y a pas de dossiers pour la deuxième tranche ou la légende.

données:

[{"tagId":"2a:10","isSafe":"Safe"},{"tagId":"dd:80","isSafe":"Unsafe"},{"tagId":"0a:07","isSafe":"Safe"},{"tagId":"29:11","isSafe":"Safe"}] 

Answer 1

1. ne ont pas besoin à la fois jsapi et loader.js

plus, selon la release notes ...

La version de Google Charts que reste disponible via le chargeur jsapi n'est plus mis à jour de manière cohérente. Veuillez utiliser le nouveau chargeur gstatic (loader.js) à partir de maintenant.

cela va changer la déclaration load à ...

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

(vous pouvez inclure le callback dans la déclaration load)

2. puisque le diagramme circulaire est en cours d'élaboration séparément , agg les données du tableau,
chaque fois que l'événement 'ready' est déclenché

puis attribuez-lui les couleurs de tranche, selon les valeurs de la ligne dans le tableau de la table, en utilisant l'option colors

voir ci-dessous extrait de travail ...

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

 
function drawVisualization() { 
 
    var data = [{tagId:'2a:10',isSafe:'Safe'},{tagId:'dd:80',isSafe:'Unsafe'},{tagId:'0a:07',isSafe:'Safe'},{tagId:'29:11',isSafe:'Safe'}]; 
 
    var dataArray = []; 
 
    var datatable = new google.visualization.DataTable(); 
 
    datatable.addColumn('string', 'TagID'); 
 
    datatable.addColumn('string', 'Status'); 
 

 
    $.each(data, function(i, obj) { 
 
    dataArray.push([obj.tagId, obj.isSafe]); 
 
    }); 
 
    datatable.addRows(dataArray); 
 

 
    var tagDivPicker = new google.visualization.ControlWrapper({ 
 
    controlType: 'CategoryFilter', 
 
    containerId: 'tag_control_div', 
 
    options: { 
 
     filterColumnIndex: 0, 
 
     ui: { 
 
     labelStacking: 'vertical', 
 
     allowTyping: false, 
 
     allowMultiple: true 
 
     } 
 
    } 
 
    }); 
 

 
    var table_data = new google.visualization.ChartWrapper({ 
 
    chartType: 'Table', 
 
    containerId: 'table_data', 
 
    view: { 
 
     columns: [0, 1] 
 
    } 
 
    }); 
 

 
    var dashboard = new google.visualization.Dashboard(document 
 
    .getElementById('dashboard')) 
 
    .bind([tagDivPicker], [table_data]) 
 
    .draw(datatable); 
 

 
    google.visualization.events.addListener(table_data, 'ready', function() { 
 
    var colors = { 
 
     Safe: 'green', Unsafe: 'red' 
 
    }; 
 
    var pieColors = []; 
 

 
    var dataGroupColumnChart = google.visualization.data.group(
 
     table_data.getDataTable(), [1], [{ 
 
     column: 1, 
 
     aggregation: google.visualization.data.count, 
 
     type: 'number' 
 
    }]); 
 

 
    for (var i = 0; i < dataGroupColumnChart.getNumberOfRows(); i++) { 
 
     pieColors.push(colors[dataGroupColumnChart.getValue(i, 0)]); 
 
    } 
 

 
    var pieChart = new google.visualization.ChartWrapper({ 
 
     chartType: 'PieChart', 
 
     containerId: 'pie_chart', 
 
     dataTable: dataGroupColumnChart, 
 
     options: { 
 
     width: 600, 
 
     height: 400, 
 
     title: 'Total Compliance', 
 
     colors: pieColors 
 
     } 
 
    }); 
 
    pieChart.draw(); 
 
    }); 
 
}

.float { 
 
    display: inline-block; 
 
    padding: 4px; 
 
    vertical-align: top; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="dashboard"> 
 
    <div class="float" id="table_data"></div> 
 
    <div class="float" id="tag_control_div"></div> 
 
    <div id="pie_chart"></div> 
 
</div>