I have the following Dashboard in Google Chart (Code and Image Below)

My question is: How do I get the Data from a Google Sheets instead of 
manually introducing the Data? I would like to have the data in a google 
sheets and link this code to the Sheet so its get the data from the sheet 
instead of having to input the data manually.

Thank you very much for your help

<https://lh3.googleusercontent.com/-4ZRJumVRYGo/VenLPT2dTQI/AAAAAAAAArA/JWwM3R6OlAs/s1600/PieChart.JPG>

 

 

<html>

<head>

<!--Load the AJAX API-->

<script type="text/javascript" src="https://www.google.com/jsapi";></script>

<script type="text/javascript">

 

// Load the Visualization API and the controls package.

google.load('visualization', '1.0', {'packages':['controls']});

 

// Set a callback to run when the Google Visualization API is loaded.

google.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 data = google.visualization.arrayToDataTable([

['Name', 'Donuts eaten'],

['Michael' , 5],

['Elisa', 7],

['Margareth', 8]

]);

 

// 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': {

'filterColumnLabel': 'Donuts eaten'

}

});

 

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

}

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

 

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/501aa720-9734-4a2e-a9f7-c29d7a7e0754%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to