JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?.js"></script>
<input type="button" value="sort labels ascending" id="sortAsc" />
<input type="button" value="sort labels descending" id="sortDesc" />
<div id="chart_div1"></div>
<div id="chart_div2"></div>
JavaScript
function drawCharts () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value 1');
data.addColumn('number', 'Value 2');
data.addColumn('string', 'Slice Color');
data.addRows([
['Foo', 10, 99, 'blue'],
['Bar', 9, 100, 'red']
]);
function getColors () {
// build colors array
var colors = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
colors.push(data.getValue(i, 3));
}
return colors;
}
var pie1 = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'chart_div1',
dataTable: data,
options: {
height: 400,
width: 600,
colors: getColors()
},
view: {
columns: [0, 1]
}
});
var pie2 = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'chart_div2',
dataTable: data,
options: {
height: 400,
width: 600,
colors: getColors()
},
view: {
columns: [0, 2]
}
});
pie1.draw();
pie2.draw();
function sortAsc () {
data.sort([0]);
pie1.setOption('colors', getColors());
pie2.setOption('colors', getColors());
pie1.draw();
pie2.draw();
}
function sortDesc () {
data.sort([{column: 0, desc: true}]);
pie1.setOption('colors', getColors());
pie2.setOption('colors', getColors());
pie1.draw();
pie2.draw();
}
var asc = document.querySelector('#sortAsc');
var desc = document.querySelector('#sortDesc');
if (document.addEventListener) {
asc.addEventListener('click', sortAsc);
desc.addEventListener('click', sortDesc);
}
else if (document.attachEvent) {
asc.attachEvent('onclick', sortAsc);
...