Forum Discussion

JeremyMyer's avatar
JeremyMyer
Qrew Trainee
5 years ago

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
------------------------------
No RepliesBe the first to reply