Discussions

 View Only

Google Charts pulling in Quickbase table data

  • 1.  Google Charts pulling in Quickbase table data

    Posted 07-31-2020 10:29
    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)
    Table Results

    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
    ------------------------------