HTML Google chart with value argument in Javascript

Question

I try to display a google chart in HTML using an argument from Javascript. my code is the following:

HTML file chart.html:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="chart.js"></script>
<div id="chart_div"></div>
<script>
    google.charts.load('current', {packages: ['corechart', 'bar']});
    google.charts.setOnLoadCallback(drawBasic);
    drawBasic(1500000);
</script>

JavaScriptFile chart.js:

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);

function getData(number) {
    var data = google.visualization.arrayToDataTable([
        ['City', '2010 Population',],
        ['New York City, NY', 8175000],
        ['Los Angeles, CA', 3792000],
        ['Chicago, IL', 2695000],
        ['Houston, TX', 2099000],
        ['Philadelphia, PA', number]
      ]);
    return data;
}

function getOptions () {
    var options = {
        title: 'Population of Largest U.S. Cities',
        chartArea: {width: '50%'},
        hAxis: {
          title: 'Total Population',
          minValue: 0
        },
        vAxis: {
          title: 'City'
        }
      };
    return options;
}

function drawBasic(number) {

      var data = getData(number);

      var options = getOptions();

      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

      chart.draw(data, options);
    }

The chart is loaded but the bar for Philadelphia is missing. I noticed that removing this part

<script>
      google.charts.load('current', {packages: ['corechart', 'bar']});
      google.charts.setOnLoadCallback(drawBasic);
      drawBasic(1500000);
 </script>

in chart.html doesn't change the behavior. I conclude the chart is loaded right after the

<script type="text/javascript" src="chart.js"></script>

line with no argument for number. How can I give my argument number to my chart ?

WhiteHat · Accepted Answer · 2020-01-27 12:45:35Z

you need to wait for google charts to load,
before drawing a chart.

which is the point of --> setOnLoadCallback

you pass a function to this method,
which will be called when google charts has fully loaded.

here, drawBasic is called with the argument,
before google charts has loaded, and it fails.

then drawBasic is called again from the callback,
but it doesn't have the argument, so no bar for Philadelphia

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
drawBasic(1500000);

instead, use an anonymous function to pass the argument...

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(function () {
  drawBasic(1500000);
});

note: unless you plan to use a material bar chart --> google.charts.Bar
you don't need the 'bar' package...

Collectives™ on Stack Overflow

HTML Google chart with value argument in Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related