Google Tableau de bord tableau de bord plusieurs données

J'ai créé un tableau de bord Google Maps avec des données différentes pour chaque graphique beignet, mais seulement data_2 renvoie, au lieu de data_1 pour le premier graphique <div> et data_2 pour le deuxième graphique <div>. Source document pour multi-graphique w/différentes données nécessite des fonctions distinctes, mais existe-t-il un moyen d'utiliser deux ensembles de données dans la première fonction drawStuff_1?
Je veux finalement un tableau de bord, un ControlWrapper (un-à-plusieurs), plusieurs ensembles de données (carlos, josh, etc.) et plusieurs diagrammes de donut (<div> pour carlos, <div> pour Josh, qui d'autre).Google Tableau de bord tableau de bord plusieurs données

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
    <script type="text/javascript"> 
 
     google.charts.load('current', {'packages':['corechart', 'controls']}); 
 
     google.charts.setOnLoadCallback(drawStuff_1); 
 
     google.charts.setOnLoadCallback(drawStuff_2); 
 

 
     function drawStuff_1() { 
 

 
     var dashboard = new google.visualization.Dashboard(
 
      document.getElementById('programmatic_dashboard_div')); 
 
      
 
     programmaticFilter_1 = new google.visualization.ControlWrapper({ 
 
      'controlType': 'CategoryFilter', 
 
      'containerId': 'programmatic_control_div_1', 
 
      'options': { 
 
      'filterColumnLabel': 'Status', 
 
      'ui': {'labelStacking': 'vertical'} 
 
      } 
 
     }); 
 
    // First dataset 
 
     var data_1 = new google.visualization.arrayToDataTable([ 
 
     ['Status', 'Count'], 
 
     ['Dual Approved' , 5], 
 
     ['Approved', 7], 
 
     ['Review', 3], 
 
     ['Draft', 2], 
 
     ['Not In', 6], 
 
     ['Edit Rerun', 1], 
 
     ]); 
 
     programmaticChart_1 = new google.visualization.ChartWrapper({ 
 
     'chartType': 'PieChart', 
 
     'containerId': 'programmatic_chart_div_1', 
 
     'options': { 
 
      'width': 290, 
 
      'height': 220, 
 
      'chartArea': {'left': 20, 'top': 20, 'right': 0, 'bottom': 0}, 
 
      'pieSliceText': 'value', //percentage' 'value' 'label''none' 
 
      'pieHole': 0.4, 
 
      'legend': {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }}, 
 
      'pieSliceBorderColor': 'Black', 
 
      'title': 'Josh', 
 
      
 
     } 
 
     }); 
 

 
     dashboard.bind(programmaticFilter_1, programmaticChart_1); 
 
     dashboard.draw(data_1); 
 

 
    } 
 
    
 
    function drawStuff_2() { 
 

 
     var dashboard = new google.visualization.Dashboard(
 
      document.getElementById('programmatic_dashboard_div')); 
 
      
 
// second dataset  
 
      var data_2 = new google.visualization.arrayToDataTable([ 
 
     ['Status', 'Count'], 
 
     ['Dual Approved' , 1], 
 
     ['Approved', 10], 
 
     ['Review', 2], 
 
     ['Draft', 9], 
 
     ['Not In', 10], 
 
     ['Edit Rerun', 4], 
 
     ]); 
 
     
 
     programmaticChart_2 = new google.visualization.ChartWrapper({ 
 
     'chartType': 'PieChart', 
 
     'containerId': 'programmatic_chart_div_2', 
 
     'options': { 
 
      'width': 250, 
 
      'height': 220, 
 
      'legend': 'none', 
 
      'chartArea': {'left': 20, 'top': 20, 'right': 0, 'bottom': 0}, 
 
      'pieSliceText': 'value', //percentage' 'value' 'label''none' 
 
      'pieHole': 0.4, 
 
      'pieSliceBorderColor': 'Black', 
 
      'title': 'Carlos', 
 
     } 
 
     }); 
 

 
     dashboard.bind(programmaticFilter_1, programmaticChart_2); 
 
     dashboard.draw(data_2); 
 
} 
 
    </script> 
 
    
 
    <body> 
 
    <div id="programmatic_dashboard_div" style="border: 1px solid #ccc"> 
 
       <td> 
 
      <div id="programmatic_control_div_1" style="padding-left: 2em; min-width: 250px"></div> 
 
      </td> 
 
     <table class="columns"> 
 
     <tr> 
 
      <td> 
 
      <div id="programmatic_chart_div_1"></div> 
 
      </td> 
 
      <td> 
 
      <div id="programmatic_chart_div_2"></div> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </body>

Source

2016-09-04 Omar V.

premier, setOnLoadCallback ne doit être utilisé qu'une seule fois par page

mais il est un travail facile autour, et vous pouvez inclure les callback directement dans la déclaration load

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

Ensuite, vous ne pouvez en avoir qu'un ensemble de données par Dashboard

cependant, vous pouvez utiliser la propriété view sur la ChartWrapper
pour contrôler les colonnes ou lignes, appliquer au tableau

la propriété view est également disponible sur le ControlWrapper

voir l'extrait de travail suivant, qui comprend un tableau de bord, un contrôle,
et deux graphiques (un pour chaque Carlos et Josh)

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

 
function drawStuff() { 
 
    var dashboard = new google.visualization.Dashboard(
 
    document.getElementById('dashboard_div') 
 
); 
 

 
    // Combined dataset 
 
    var data = new google.visualization.arrayToDataTable([ 
 
    ['Status', 'Carlos', 'Josh'], 
 
    ['Dual Approved', 5, 1], 
 
    ['Approved', 7, 10], 
 
    ['Review', 3, 2], 
 
    ['Draft', 2, 9], 
 
    ['Not In', 6, 10], 
 
    ['Edit Rerun', 1, 3] 
 
    ]); 
 

 
    var programmaticFilter = new google.visualization.ControlWrapper({ 
 
    controlType: 'CategoryFilter', 
 
    containerId: 'control_div', 
 
    options: { 
 
     filterColumnLabel: 'Status', 
 
     ui: { 
 
     labelStacking: 'vertical' 
 
     } 
 
    } 
 
    }); 
 

 
    var programmaticChart_Carlos = new google.visualization.ChartWrapper({ 
 
    chartType: 'PieChart', 
 
    containerId: 'chart_div_Carlos', 
 
    options: { 
 
     width: 290, 
 
     height: 220, 
 
     chartArea: {'left': 20, 'top': 20, 'right': 0, 'bottom': 0}, 
 
     pieSliceText: 'value', 
 
     pieHole: 0.4, 
 
     legend: {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }}, 
 
     pieSliceBorderColor: 'Black' 
 
    }, 
 
    view: { 
 
     columns: [0, 1] 
 
    } 
 
    }); 
 
    programmaticChart_Carlos.setOption('title', 'Carlos'); 
 

 
    var programmaticChart_Josh = new google.visualization.ChartWrapper({ 
 
    chartType: 'PieChart', 
 
    containerId: 'chart_div_Josh', 
 
    options: { 
 
     width: 290, 
 
     height: 220, 
 
     chartArea: {'left': 20, 'top': 20, 'right': 0, 'bottom': 0}, 
 
     pieSliceText: 'value', 
 
     pieHole: 0.4, 
 
     legend: {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }}, 
 
     pieSliceBorderColor: 'Black' 
 
    }, 
 
    view: { 
 
     columns: [0, 2] 
 
    } 
 
    }); 
 
    programmaticChart_Josh.setOption('title', 'Josh'); 
 

 
    dashboard.bind(
 
    programmaticFilter, 
 
    [programmaticChart_Carlos, programmaticChart_Josh] 
 
); 
 
    dashboard.draw(data); 
 
}

.ggl-dashboard { 
 
    border: 1px solid #ccc; 
 
} 
 

 
.ggl-control (
 
    min-width: 250px; 
 
    padding-left: 2em; 
 
) 
 

 
.ggl-chart (
 
    display: inline-block; 
 
)

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 

 
<div class="ggl-dashboard" id="dashboard_div"> 
 
    <div class="ggl-control" id="control_div"></div> 
 
    <div class="ggl-chart" id="chart_div_Carlos"></div> 
 
    <div class="ggl-chart" id="chart_div_Josh"></div> 
 
</div>

Source

2016-09-05 02:07:18 WhiteHat

Ah, oui je considérais la combinaison des ensembles de données, mais la pensée était trop têtu il y avait une certaine façon, lol. Merci WhiteHat, très utile! –

Google Tableau de bord tableau de bord plusieurs données

Répondre

Questions connexes