JSFiddle - React, Tailwind, and code Playground
by SASSACB
HTML
<html>
<head>
<!--Load the AJAX API-->
<link rel="stylesheet" href=" https://drive.google.com/uc?export=download&id=1RUwGWVsJxTArKH0Fkl27qIRPMNTslblI">
<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/1rrMApXsx2N6AUoLYwRW-cB_r4oLMeCx6acv69Kry0Kc/edit#gid=725170329');
var q =''
query.setQuery("select B, C,D,E,F,G,H, I,K,J where E contains '"+ q +"'or B contains '"+ q +"' or C contains '"+ q +"' or D contains '"+ q +"'order by D offset 3 Label B 'Fornecedor', E 'observações', G 'valor a<br>pagar',F 'valor da <br>fatura',H 'forma de<br>pagamento',I 'estado'");
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);
var formatter = new google.visualization.PatternFormat(
'<a href="{1}" target="_blank">{0}</a>');
// Apply formatter and set the formatted value of the first column.
formatter.format(data, [0, 8]);
data.addColumn('string', 'Department');
var formatter1 = new google.visualization.PatternFormat(
'{0}, {1}, {2}, {3}');
// Apply formatter and set the formatted value of the first...