How to add second chart into the dashboard in google charts?

Question

I'm suppose to display 3 graphs and a controller. I have one graph and a controller for it. now I need to use the same database (spreadsheet link) to create two more charts other than pie chart, example bar chart or line chart or .... my code so far is below.

I have recently started javascript and this is just my first week so I don't know how to get it work. any help is appreciated.

PS you may use any column you want for chart.

 <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>

Answer 1

if using the same data source, then just add more charts in the same function as the existing chart...

be sure to add containers <div>

and the dashboard will take an array of controls and / or charts...

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

see following working snippet...

 <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>

How to add second chart into the dashboard in google charts?

Question

1 answers

solution1
0 2017-06-19 12:30:00

How to add second chart into the dashboard in google charts?

Question

1 answers

solution1 0 2017-06-19 12:30:00

solution1
0 2017-06-19 12:30:00