Forum Discussion

EleonoraRuffini's avatar
EleonoraRuffini
Qrew Member
3 years ago

Code Page for Google Chart

Hello,
I am trying to build a code page that would allow me to display some plots from Google Charts in which I feed some data from Quickbase. The idea is to then display the page in a form as iframe.

I am really a beginner for what concerns code pages, so I would need some help.

The following is one of the html pages where I would want to plug in my data.

  <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

I thought I could change the array passed in the data variable as follow, but it does not seem to work. Any thought?

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
       google.charts.load('current', {'packages':['corechart']});
       google.charts.setOnLoadCallback(drawChart);

       function drawChart() {
         var data = google.visualization.arrayToDataTable();

         var options = {
             title: 'Company Performance',
             curveType: 'function',
             legend: { position: 'bottom' }
         };

$.getScript("https://xxxxxx.quickbase.com/db/xxxxxx?a=API_GenResultsTable&apptoken=xxxxxx&query={20.EX.38}&clist=17&jsa=1",function(){
console.log(qdb_data);
});
         data.addRows(qdb_data);

         var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>


------------------------------
Eleonora R.
------------------------------
Code Page

1 Reply

Sort By
  • QuickBaseJunkie's avatar
    QuickBaseJunkie
    Qrew Captain
    3 years ago

    Hi Elenora,

    I haven't used the specific chart you're trying to use, but I have used Google charts in Quickbase code pages for org charts.

    I noticed 2 differences in your code from what I've used.

    1. The use of data.addColumn to define the data used in the chart.
    2. The quickbase URL starts with www.quickbase.com vs the usual company.quickbase.com.


    <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.load('visualization', 'current', {packages:['orgchart']});
          google.setOnLoadCallback(drawChart);
          function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Child');
            data.addColumn('string', 'Parent');
            date.addColumn('string', 'Tool Tip');
            var url = "https://www.quickbase.com/db/mytableid?a=API_GenResultsTable&jsa=1";
            $.getScript(url,function(){
              data.addRows(qdb_data);
              var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
              chart.draw(data, {allowHtml:true, allowCollapse:true});
            });
          }
        </script>
      </head>

      <body>
        <div id='chart_div'></div>
      </body>
    </html>

    Let me know if this was helpful 👍

    -Sharon



    ------------------------------
    Quick Base Junkie
    Quick Base Junkie
    https://quickbasejunkie.com
    ------------------------------