Comment ajouter un deuxième graphique dans le tableau de bord dans Google Maps?

Je suis supposé afficher 3 graphiques et un contrôleur. J'ai un graphique et un contrôleur pour cela. Maintenant, j'ai besoin d'utiliser la même base de données (lien tableur) pour créer deux autres graphiques autres que camembert, exemple de graphique à barres ou graphique linéaire ou .... mon code jusqu'à présent est ci-dessous.Comment ajouter un deuxième graphique dans le tableau de bord dans Google Maps?

J'ai récemment commencé javascript et c'est juste ma première semaine donc je ne sais pas comment le faire fonctionner. toute aide est appréciée.

P.S. vous pouvez utiliser n'importe quelle colonne pour le graphique.

<html> 
 

 
<head> 
 
    <!--Load the AJAX API--> 
 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
    <script type="text/javascript"> 
 
    // Load the Visualization API and the controls package. 
 
    google.charts.load('current', { 
 
     'packages': ['corechart', 'controls'] 
 
    }); 
 

 
    // Set a callback to run when the Google Visualization API is loaded. 
 
    google.charts.setOnLoadCallback(drawDashboard); 
 

 
    // Callback that creates and populates a data table, 
 
    // instantiates a dashboard, a range slider and a pie chart, 
 
    // passes in the data and draws it. 
 
    function drawDashboard() { 
 

 
     // Create our data table. 
 
     var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1PlT8k6qXsCkOCEEJFn7apKYgDunLi1Lzmnmo_AKQBXc/edit#gid=0'); 
 

 
     query.setQuery('SELECT C,H LIMIT 10 OFFSET 3'); 
 
     query.send(handleQueryResponse); 
 
    } 
 

 
    function handleQueryResponse(response) { 
 

 
     if (response.isError()) { 
 
     alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
 
     return; 
 
     } 
 

 
     var data = response.getDataTable(); 
 

 

 
     var data_view = new google.visualization.DataView(data); 
 
     data_view.setColumns([ 
 
     // 0'th column formatted to string. 
 
     { 
 
      calc: function(data, row) { 
 
      return data.getFormattedValue(row, 0); 
 
      }, 
 
      type: 'string' 
 
     }, 
 
     // 1th column. 
 
     1 
 
     ]); 
 

 
     // Create a dashboard. 
 
     var dashboard = new google.visualization.Dashboard(
 
     document.getElementById('dashboard_div')); 
 

 
     // Create a range slider, passing some options 
 
     var donutRangeSlider = new google.visualization.ControlWrapper({ 
 
     'controlType': 'NumberRangeFilter', 
 
     'containerId': 'filter_div', 
 
     'options': { 
 
      'filterColumnIndex': 1 
 
     } 
 
     }); 
 

 
     // Create a pie chart, passing some options 
 
     var pieChart = new google.visualization.ChartWrapper({ 
 
     'chartType': 'PieChart', 
 
     'containerId': 'chart_div', 
 
     'options': { 
 
      'width': 300, 
 
      'height': 300, 
 
      'pieSliceText': 'value', 
 
      'legend': 'right' 
 
     } 
 
     }); 
 

 
     // Establish dependencies, declaring that 'filter' drives 'pieChart', 
 
     // so that the pie chart will only display entries that are let through 
 
     // given the chosen slider range. 
 
     dashboard.bind(donutRangeSlider, pieChart); 
 

 
     // Draw the dashboard. 
 
     dashboard.draw(data_view); 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <!--Div that will hold the dashboard--> 
 
    <div id="dashboard_div"> 
 
    <!--Divs that will hold each control and chart--> 
 
    <div id="filter_div"></div> 
 
    <div id="chart_div"></div> 
 
    </div> 
 

 

 
</body> 
 

 
</html>

Source

2017-06-18 iDevilsdocry

si vous utilisez la même source de données, puis ajouter un peu plus graphiques dans la même fonction que le graphique existant ...

assurez-vous d'ajouter des conteneurs <div>

et le tableau de bord prendra un tableau de contrôles et/ou des graphiques ...

dashboard.bind(donutRangeSlider, [pieChart, colChart, lineChart]);

voir après les extrait de travail ...

<html> 
 

 
<head> 
 
    <!--Load the AJAX API--> 
 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
    <script type="text/javascript"> 
 
    // Load the Visualization API and the controls package. 
 
    google.charts.load('current', { 
 
     'packages': ['corechart', 'controls'] 
 
    }); 
 

 
    // Set a callback to run when the Google Visualization API is loaded. 
 
    google.charts.setOnLoadCallback(drawDashboard); 
 

 
    // Callback that creates and populates a data table, 
 
    // instantiates a dashboard, a range slider and a pie chart, 
 
    // passes in the data and draws it. 
 
    function drawDashboard() { 
 

 
     // Create our data table. 
 
     var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1PlT8k6qXsCkOCEEJFn7apKYgDunLi1Lzmnmo_AKQBXc/edit#gid=0'); 
 

 
     query.setQuery('SELECT C,H LIMIT 10 OFFSET 3'); 
 
     query.send(handleQueryResponse); 
 
    } 
 

 
    function handleQueryResponse(response) { 
 

 
     if (response.isError()) { 
 
     alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
 
     return; 
 
     } 
 

 
     var data = response.getDataTable(); 
 

 

 
     var data_view = new google.visualization.DataView(data); 
 
     data_view.setColumns([ 
 
     // 0'th column formatted to string. 
 
     { 
 
      calc: function(data, row) { 
 
      return data.getFormattedValue(row, 0); 
 
      }, 
 
      type: 'string' 
 
     }, 
 
     // 1th column. 
 
     1 
 
     ]); 
 

 
     // Create a dashboard. 
 
     var dashboard = new google.visualization.Dashboard(
 
     document.getElementById('dashboard_div')); 
 

 
     // Create a range slider, passing some options 
 
     var donutRangeSlider = new google.visualization.ControlWrapper({ 
 
     'controlType': 'NumberRangeFilter', 
 
     'containerId': 'filter_div', 
 
     'options': { 
 
      'filterColumnIndex': 1 
 
     } 
 
     }); 
 

 
     // Create a pie chart, passing some options 
 
     var pieChart = new google.visualization.ChartWrapper({ 
 
     'chartType': 'PieChart', 
 
     'containerId': 'chart_div', 
 
     'options': { 
 
      'width': 300, 
 
      'height': 300, 
 
      'pieSliceText': 'value', 
 
      'legend': 'right' 
 
     } 
 
     }); 
 

 
     // Create a column chart 
 
     var colChart = new google.visualization.ChartWrapper({ 
 
     'chartType': 'ColumnChart', 
 
     'containerId': 'chart_div_col', 
 
     'options': { 
 
      'width': 300, 
 
      'height': 300, 
 
      'pieSliceText': 'value', 
 
      'legend': 'right' 
 
     } 
 
     }); 
 

 
     // Create a line chart 
 
     var lineChart = new google.visualization.ChartWrapper({ 
 
     'chartType': 'LineChart', 
 
     'containerId': 'chart_div_line', 
 
     'options': { 
 
      'width': 300, 
 
      'height': 300, 
 
      'pieSliceText': 'value', 
 
      'legend': 'right' 
 
     } 
 
     }); 
 

 
     // Establish dependencies, declaring that 'filter' drives 'pieChart', 
 
     // so that the pie chart will only display entries that are let through 
 
     // given the chosen slider range. 
 
     dashboard.bind(donutRangeSlider, [pieChart, colChart, lineChart]); 
 

 
     // Draw the dashboard. 
 
     dashboard.draw(data_view); 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <!--Div that will hold the dashboard--> 
 
    <div id="dashboard_div"> 
 
    <!--Divs that will hold each control and chart--> 
 
    <div id="filter_div"></div> 
 
    <div id="chart_div"></div> 
 
    <div id="chart_div_col"></div> 
 
    <div id="chart_div_line"></div> 
 
    </div> 
 

 

 
</body> 
 

 
</html>

Source

2017-06-19 12:30:00 WhiteHat

espérons que cette aide ... – WhiteHat

Comment ajouter un deuxième graphique dans le tableau de bord dans Google Maps?

Répondre

Questions connexes