Help with Google Charts in Ninox

Dave_Irving
updated 1 yr ago
13replies

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)

Scripting and Functions

- Ninox partner
- RoSoft_Steven.1
- 1 yr 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
  
  1 yr 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
- 1 yr ago
- Reported - view
You can view this post

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

Dave_Irving
1 yr 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
- 1 yr 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
1 yr 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
1 yr 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
- 1 yr 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
  
  1 yr 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
- 1 yr ago
- Reported - view
Out of the blue, it started working today with no changes whatsoever !!! The Ninox Gods must have been listening !!!
- Dave_Irving
- 1 yr ago
- Reported - view
I also utilized a bootstrap chart today and wanted to share the results of that as well:
- szormpas
  
  1 yr ago
  
  Reported - view
  Hi, I am interesting with the bootstrap chart, can you share your code?
- Dave_Irving
  
  1 yr 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.

Content aside

1 yr agoLast active
13Replies
201Views
4 Following

Welcome to the Ninox community

Help with Google Charts in Ninox

13 replies

Content aside

Overview