0

Help with Google Charts in Ninox

So, I just wanted to start with a very basic Google Chart in ninox.  With Google's default data, the chart shows, however when I try to replace it with my data it no longer works.  Below is my code.  I tried without wrapping it number and with as well.

let gcode := "
  <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([
  ['Status Counts', 'Total Counts'],
          ['Bad Phone/Email', " +
    number('Bad #/ Email') +
    "],
          ['Foreign Speaking', " +
    number('Foreign Speaking') +
    "],
          ['Not Interested', " +
    number('Not Interested') +
    "],
          ['Unresponsive', " +
    number(Unresponsive) +
    "],
          ['Unqualified', " +
    number(Unqualified) +
    "]
          ['Bots', " +
    number(Bots) +
    "]);
        var options = {
          title: 'Negative Leads',
          is3D: true,
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id=""piechart_3d"" style=""width: 900px; height: 500px;""></div>
  </body>";
html(gcode)

 

 

13 replies

null
    • Ninox partner
    • RoSoft_Steven.1
    • 7 mths ago
    • Reported - view

    As you can see in this example the data should be numbers. Can you upload a example database with dummy data if you don't get it to work?

      • Dave_Irving
      • 7 mths ago
      • Reported - view

      they are formula fields that result in a number, thus why I attempted to wrap them in number function.

       

    • Rafael Sanchis
    • Rafael_Sanchis
    • 7 mths ago
    • Reported - view

    You can view this post

    https://forum.ninox.com/t/y4hcxn7/no-plot-null-values

    • Dave_Irving
    • 7 mths ago
    • Reported - view

    Even tried this just to see if moving things around would make a difference.  Still no luck!

     

    let Vairable1 := number('Bad #/ Email');
let Variable2 := number('Foreign Speaking');
let Variable3 := number('Not Interested');
let Variable4 := number(Unresponsive);
let Variable5 := number(Unqualified);
let Variable6 := number(Bots);
let gcode := "
  <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([
  ['Status Counts', 'Total Counts'],
          ['Bad Phone/Email', " +
    Vairable1 +
    "],
          ['Foreign Speaking', " +
    Variable2 +
    "],
          ['Not Interested', " +
    Variable3 +
    "],
          ['Unresponsive', " +
    Variable4 +
    "],
          ['Unqualified', " +
    Variable5 +
    "]
          ['Bots', " +
    Variable6 +
    "]);
        var options = {
          title: 'Negative Leads',
          is3D: true,
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id=""piechart_3d"" style=""width: 900px; height: 500px;""></div>
  </body>";
html(gcode)
    • Dave_Irving
    • 7 mths ago
    • Reported - view

    Also, just for fun, i create some number fields...put random numbers in there, add those to the google chart...still nothing !!!

    • Ninox partner
    • RoSoft_Steven.1
    • 7 mths ago
    • Reported - view

    At first sight, you are missing a comma after variabele 5. Also, i would use single quotes instead of double double quotes. You might also wrap your code in <htlm> ... </html> tags. Hope this helps. Btw this code works : 

    let gcode := "
  <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([
          ['Status Counts', 'Total Counts'],
          ['Bad Phone/Email', " +
    20 +
    "],
          ['Foreign Speaking', " +
    55 +
    "],
          ['Not Interested', " +
    25 +
    "],
          ['Unresponsive', " +
    30 +
    "],
          ['Unqualified', " +
    80 +
    "],
          ['Bots', " +
    40 +
    "]
          ]);
        var options = {
          title: 'Negative Leads',
           is3D: true,
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id='piechart_3d' style='width: 900px; height: 500px;'></div>
  </body>
</html>
      • Dave_Irving
      • 7 mths ago
      • Reported - view

      , okay.  I put it in exactly like that, still nothing.  I am utterly confused.  Do I need Ninext Project on my ninox to parse the javascript?

       

      let gcode := "
  <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([
          ['Status Counts', 'Total Counts'],
          ['Bad Phone/Email', " +
    20 +
    "],
          ['Foreign Speaking', " +
    55 +
    "],
          ['Not Interested', " +
    25 +
    "],
          ['Unresponsive', " +
    30 +
    "],
          ['Unqualified', " +
    80 +
    "],
          ['Bots', " +
    40 +
    "]
          ]);
        var options = {
          title: 'Negative Leads',
           is3D: true,
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id='piechart_3d' style='width: 900px; height: 500px;'></div>
  </body>
</html>";
html(gcode)
    • Ninox partner
    • RoSoft_Steven.1
    • 7 mths ago
    • Reported - view

    I observed a strange behavior also with me. When opening the form, the chart was not visible. When closing and reopening the form the chart was shown. I do not know what causes this strange behavior. Putting the value's in a variabele doesn't wort eighter. It will probably be a bug in Ninox.

      • Dave_Irving
      • 7 mths ago
      • Reported - view

      Yes, this is the weirdest thing.  I went ahead and installed Ninext and that didn't solve the problem either.  Does anybody else have any suggestions to use besides Google Charts?  Any good bootstrap HTML charts out there?

    • Dave_Irving
    • 7 mths ago
    • Reported - view

    Out of the blue, it started working today with no changes whatsoever !!!  The Ninox Gods must have been listening !!!

     

    • Dave_Irving
    • 7 mths ago
    • Reported - view

    I also utilized a bootstrap chart today and wanted to share the results of that as well:

     

      • szormpas
      • 7 mths ago
      • Reported - view

         Hi, I am interesting with the bootstrap chart, can you share your code?

      • Dave_Irving
      • 7 mths ago
      • Reported - view

      I can't provide you the HTML, because it is someone else's.  I utilized Loople Dashboard Creator, downloaded the source code and tweaked the HTML to what I needed.  I further tweaked it to be more condensed.

Login to reply

Content aside

  • 7 mths agoLast active
  • 13Replies
  • 162Views
  • 4 Following