<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js">
</script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(yourFunctionToDrawAChart);
</script>
<script type="text/javascript">
google.charts.load('current', {packages: [
'corechart',
'geochart',
'orgchart']
});
google.charts.setOnLoadCallback(yourFunctionToDrawAChart);
</script>
<script type="text/javascript">
google.charts.load('current', {
packages: ['corechart'],
'language': 'ja',
'mapsApiKey': 'myMapsApiKey'
});
google.charts.setOnLoadCallback(yourFunctionToDrawAChart);
</script>
var data = new google.visualization.DataTable();
data.addColumn('string', 'Flavor');
data.addColumn('number', 'Probability it is the best');
data.addRows([
['Peach-Pear', 99],
['Coconut', 15],
['Pamplemousse', 84],
['Passionfruit', 68],
['Pure', 2]
]);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Flavor');
data.addColumn('number', 'Probability it is the best');
data.addRows([
['Peach-Pear', 99],
['Coconut', 15],
['Pamplemousse', 84],
['Passionfruit', 68],
['Pure', 2]
]);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Flavor');
data.addColumn('number', 'Probability it is the best');
data.addRows([
['Peach-Pear', 99],
['Coconut', 15],
['Pamplemousse', 84],
['Passionfruit', 68],
['Pure', 2]
]);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Flavor');
data.addColumn('number', 'Probability it is the best');
data.addRows([
['Peach-Pear', 99],
['Coconut', 15],
['Pamplemousse', 84],
['Passionfruit', 68],
['Pure', 2]
]);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Flavor');
data.addColumn('number', 'Probability it is the best');
for (var i = 0; i < flavors.length; i++) {
data.addRow([flavors[i].name,flavors[i].percentage]);
}
var options = {
'title':'Flavor Rankings FINAL',
'width':400,
'height':300
};
var element = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(element);
chart.draw(data, options);
google.visualization.events.addListener(chart, 'ready', function() {
document.getElementById('chart_img').src = chart.getImageURI();
});
google.visualization.events.addListener(chart, 'select', selectHandler);
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var topping = data.getValue(selectedItem.row, 0);
document.getElementById('interactivty_image').src = waters[selectedItem.row];
}
}
var options = {
'title': 'Rankings of La Croix Flavors',
'width': 800,
'height': 500,
'legend': 'none',
animation: {
duration: 1000,
easing: 'out',
},
};
Tristan Sokol - @tristansokol