JeremyMyer
5 years agoQrew Trainee
Google Charts pulling in Quickbase table data
I've got a use case where I want to display a google chart based on a table results, I think I'm close, but can't seem to figure it out..... Any coding wizards out there able to help?
Any and all comments are appreciated!! Thanks in advance!
Table results URL =
https://nsk.quickbase.com/db/bqjmcc6ih?a=q&qid=20
This table has 1 field, a concatenated "Row" with what I believe to be all the correct commas, brackets, formatting, but this may be part of the problem as well (See image for sample data)
My html page is as follows:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Fault');
data.addColumn('date', 'Fault Occur');
data.addColumn('date', 'Fault Reset');
var options = {
height: 1000,
timeline: {
groupByRowLabel: true
}
};
var url = "https://nsk.quickbase.com/db/bqjmcc6ih?act=API_GenResultsTable&qid=20&jsa=1"; $.getScript(url,function(){
data.addRows(qdb_data);
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options); });
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
But my result is a blank page.
If I paste the table output to the code, and eliminate the $.getcript portion, this code loads & displays properly.
<html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Fault');
data.addColumn('date', 'Fault Occur');
data.addColumn('date', 'Fault Reset');
data.addRows([
['Robot Command Enable (UO1)',new Date(2020,6,16,6,31,57), new Date(2020,6,16,7,34,6)],
['Robot Command Enable (UO1)',new Date(2020,6,16,9,12,21), new Date(2020,6,16,9,16,56)],
['Robot Command Enable (UO1)',new Date(2020,6,16,9,19,34), new Date(2020,6,16,10,16,14)],
['Robot Command Enable (UO1)',new Date(2020,6,16,10,16,25), new Date(2020,6,16,10,50,1)],
['Robot Command Enable (UO1)',new Date(2020,6,16,11,56,36), new Date(2020,6,16,11,58,41)],
['Robot Command Enable (UO1)',new Date(2020,6,16,12,11,31), new Date(2020,6,16,12,49,51)],
['Robot Command Enable (UO1)',new Date(2020,6,16,13,5,6), new Date(2020,6,16,13,13,18)],
['Robot Command Enable (UO1)',new Date(2020,6,15,11,7,2), new Date(2020,6,15,11,25,55)],
['Robot Command Enable (UO1)',new Date(2020,6,15,12,19,52), new Date(2020,6,15,12,50,10)],
['Robot Command Enable (UO1)',new Date(2020,6,15,12,52,9), new Date(2020,6,15,12,56,21)],
['Robot Command Enable (UO1)',new Date(2020,6,15,12,57,11), new Date(2020,6,15,12,59,17)],
['Robot Command Enable (UO1)',new Date(2020,6,15,13,12,57), new Date(2020,6,15,13,14,48)],
['Robot Command Enable (UO1)',new Date(2020,6,15,13,15,21), new Date(2020,6,15,13,15,35)],
['Robot Command Enable (UO1)',new Date(2020,6,15,13,16,21), new Date(2020,6,15,13,16,48)],
['Robot Command Enable (UO1)',new Date(2020,6,15,13,17,41), new Date(2020,6,15,13,19,14)],
['Robot Command Enable (UO1)',new Date(2020,6,15,13,24,28), new Date(2020,6,15,13,52,15)],
['Robot Control Fault (UO6)',new Date(2020,6,16,6,32,10), new Date(2020,6,16,7,34,6)],
['Robot Control Fault (UO6)',new Date(2020,6,16,9,12,37), new Date(2020,6,16,9,16,56)],
['Robot Control Fault (UO6)',new Date(2020,6,16,9,19,34), new Date(2020,6,16,10,16,14)],
['Robot Control Fault (UO6)',new Date(2020,6,16,10,16,25), new Date(2020,6,16,10,50,1)],
['Robot Control Fault (UO6)',new Date(2020,6,16,11,56,54), new Date(2020,6,16,11,58,41)],
['Robot Control Fault (UO6)',new Date(2020,6,16,12,11,31), new Date(2020,6,16,12,49,51)],
['Robot Control Fault (UO6)',new Date(2020,6,16,13,5,7), new Date(2020,6,16,13,13,18)],
['Robot Control Fault (UO6)',new Date(2020,6,15,11,7,2), new Date(2020,6,15,11,24,21)],
]);
var options = {
height: 1000,
timeline: {
groupByRowLabel: true
}
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
------------------------------
Jeremy Myer
------------------------------
Any and all comments are appreciated!! Thanks in advance!
Table results URL =
https://nsk.quickbase.com/db/bqjmcc6ih?a=q&qid=20
This table has 1 field, a concatenated "Row" with what I believe to be all the correct commas, brackets, formatting, but this may be part of the problem as well (See image for sample data)
My html page is as follows:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Fault');
data.addColumn('date', 'Fault Occur');
data.addColumn('date', 'Fault Reset');
var options = {
height: 1000,
timeline: {
groupByRowLabel: true
}
};
var url = "https://nsk.quickbase.com/db/bqjmcc6ih?act=API_GenResultsTable&qid=20&jsa=1"; $.getScript(url,function(){
data.addRows(qdb_data);
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options); });
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
But my result is a blank page.
If I paste the table output to the code, and eliminate the $.getcript portion, this code loads & displays properly.
<html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Fault');
data.addColumn('date', 'Fault Occur');
data.addColumn('date', 'Fault Reset');
data.addRows([
['Robot Command Enable (UO1)',new Date(2020,6,16,6,31,57), new Date(2020,6,16,7,34,6)],
['Robot Command Enable (UO1)',new Date(2020,6,16,9,12,21), new Date(2020,6,16,9,16,56)],
['Robot Command Enable (UO1)',new Date(2020,6,16,9,19,34), new Date(2020,6,16,10,16,14)],
['Robot Command Enable (UO1)',new Date(2020,6,16,10,16,25), new Date(2020,6,16,10,50,1)],
['Robot Command Enable (UO1)',new Date(2020,6,16,11,56,36), new Date(2020,6,16,11,58,41)],
['Robot Command Enable (UO1)',new Date(2020,6,16,12,11,31), new Date(2020,6,16,12,49,51)],
['Robot Command Enable (UO1)',new Date(2020,6,16,13,5,6), new Date(2020,6,16,13,13,18)],
['Robot Command Enable (UO1)',new Date(2020,6,15,11,7,2), new Date(2020,6,15,11,25,55)],
['Robot Command Enable (UO1)',new Date(2020,6,15,12,19,52), new Date(2020,6,15,12,50,10)],
['Robot Command Enable (UO1)',new Date(2020,6,15,12,52,9), new Date(2020,6,15,12,56,21)],
['Robot Command Enable (UO1)',new Date(2020,6,15,12,57,11), new Date(2020,6,15,12,59,17)],
['Robot Command Enable (UO1)',new Date(2020,6,15,13,12,57), new Date(2020,6,15,13,14,48)],
['Robot Command Enable (UO1)',new Date(2020,6,15,13,15,21), new Date(2020,6,15,13,15,35)],
['Robot Command Enable (UO1)',new Date(2020,6,15,13,16,21), new Date(2020,6,15,13,16,48)],
['Robot Command Enable (UO1)',new Date(2020,6,15,13,17,41), new Date(2020,6,15,13,19,14)],
['Robot Command Enable (UO1)',new Date(2020,6,15,13,24,28), new Date(2020,6,15,13,52,15)],
['Robot Control Fault (UO6)',new Date(2020,6,16,6,32,10), new Date(2020,6,16,7,34,6)],
['Robot Control Fault (UO6)',new Date(2020,6,16,9,12,37), new Date(2020,6,16,9,16,56)],
['Robot Control Fault (UO6)',new Date(2020,6,16,9,19,34), new Date(2020,6,16,10,16,14)],
['Robot Control Fault (UO6)',new Date(2020,6,16,10,16,25), new Date(2020,6,16,10,50,1)],
['Robot Control Fault (UO6)',new Date(2020,6,16,11,56,54), new Date(2020,6,16,11,58,41)],
['Robot Control Fault (UO6)',new Date(2020,6,16,12,11,31), new Date(2020,6,16,12,49,51)],
['Robot Control Fault (UO6)',new Date(2020,6,16,13,5,7), new Date(2020,6,16,13,13,18)],
['Robot Control Fault (UO6)',new Date(2020,6,15,11,7,2), new Date(2020,6,15,11,24,21)],
]);
var options = {
height: 1000,
timeline: {
groupByRowLabel: true
}
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
------------------------------
Jeremy Myer
------------------------------