# Passing random number to google charts :undefined Error

**URL:** <https://forum.freecodecamp.org/t/passing-random-number-to-google-charts-undefined-error/563333>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [October 15, 2022, 12:58pm UTC](https://forum.freecodecamp.org/t/passing-random-number-to-google-charts-undefined-error/563333 "2022-10-15T12:58:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rootofpi](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/rootofpi/32/249516_2.png) [@rootofpi](https://forum.freecodecamp.org/u/rootofpi)\
**Post date:** [October 15, 2022, 12:58pm UTC](https://forum.freecodecamp.org/t/passing-random-number-to-google-charts-undefined-error/563333/1 "2022-10-15T12:58:49Z")

</div>

To learn more, I’m gridding a JavaScript and experimenting with various projects. I am stuck at passing value. Where I am generating random numbers through the `setInterval()`, I am able to generate random numbers, and it is working fine. But I want to pass that random number to Google Charts so that charts work like real-time data. So what I was planning was to generate that random number, and through inner html, I will insert it into the span element, and later, through `.value`, I will get the value of the span element and pass it to the charts. but it was not working so I `console.log(output.value)`. I am getting the output as `undefined` so when I `console.log(value.output)` inside that `setInterval()` it shows the correct output.

here’s my code

```
window.onload = function() {
  var output = document.getElementById('foo');
  setInterval(function() {
    output.innerHTML = Math.floor(Math.random() * 100);
  }, 500);
}

google.charts.load('current', {
  'packages': ['gauge']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Memory', 34],
    ['CPU', 55],
    ['Network', 68]
  ]);

  var options = {
    width: 400,
    height: 120,
    redFrom: 90,
    redTo: 100,
    yellowFrom: 75,
    yellowTo: 90,
    minorTicks: 5
  };

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

  chart.draw(data, options);

  console.log(foo.value);
}

```

```
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<h3>
  Random number from 0 to 9:
  <h1 id="foo"></h1>
</h3>

<div id="chart_div" style="width: 400px; height: 120px;"></div>

```

In this program basically, the number will generate randomly and it will be displayed in the `<h1>` tag. So I’m going to get that value from h1 and feed it into Google Charts. But it won’t work rather charts get to hide. So I just want to pass the output value to `['Memory', {here}],` here. As a result, Google Charts operate in real-time because they derive their value from randomly generated random numbers.

---

<div class="post-metadata">

**Author:** ![ugwen](https://avatars.discourse-cdn.com/v4/letter/u/898d66/32.png) [@ugwen](https://forum.freecodecamp.org/u/ugwen)\
**Post date:** [October 15, 2022, 1:53pm UTC](https://forum.freecodecamp.org/t/passing-random-number-to-google-charts-undefined-error/563333/2 "2022-10-15T13:53:45Z")

</div>

something to do with `window.onload`?  
this works for log:

```auto
var val = Math.floor(Math.random() * 10)
document.getElementById("foo").value = val;

google.charts.load('current', {
  'packages': ['gauge']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Memory', 34],
    ['CPU', 55],
    ['Network', 68]
  ]);

  var options = {
    width: 400,
    height: 120,
    redFrom: 90,
    redTo: 100,
    yellowFrom: 75,
    yellowTo: 90,
    minorTicks: 5
  };

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

  chart.draw(data, options);

}

  console.log('v', document.getElementById('foo').value);

```

but is not displaying in html so not a solution if you need that

---

<div class="post-metadata">

**Author:** ![ugwen](https://avatars.discourse-cdn.com/v4/letter/u/898d66/32.png) [@ugwen](https://forum.freecodecamp.org/u/ugwen)\
**Post date:** [October 15, 2022, 2:09pm UTC](https://forum.freecodecamp.org/t/passing-random-number-to-google-charts-undefined-error/563333/3 "2022-10-15T14:09:05Z")

</div>

sorry, i’m learning with you here, but i had some more success:

```auto
setInterval(function() {
  var val = Math.floor(Math.random() * 10)
  console.log('v frm inner:',val)
  document.getElementById('foo').innerHTML = val;
  document.getElementById('foo').value = val;
}, 1000);

google.charts.load('current', {
  'packages': ['gauge']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Memory', 34],
    ['CPU', 55],
    ['Network', 68]
  ]);

  var options = {
    width: 400,
    height: 120,
    redFrom: 90,
    redTo: 100,
    yellowFrom: 75,
    yellowTo: 90,
    minorTicks: 5
  };

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

  chart.draw(data, options);

}

  console.log('v outer:', document.getElementById('foo').value);

```

or

```auto
google.charts.load('current', {
  'packages': ['gauge']
});
const val = 0

setInterval(function(val) {
  val = Math.floor(Math.random() * 100)
  document.getElementById('foo').innerHTML = val;
  document.getElementById('foo').value = val;
  google.charts.setOnLoadCallback(drawChart(val));
}, 1000);

function drawChart(val) {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Memory', val],
    ['CPU', val],
    ['Network', val]
  ]);
  var options = {
    width: 400,
    height: 120,
    redFrom: 90,
    redTo: 100,
    yellowFrom: 75,
    yellowTo: 90,
    minorTicks: 5
  };
  var chart = new google.visualization.Gauge(document.getElementById('chart_div'))
  chart.draw(data, options);
}

```

or

```auto
//let val = 0

setInterval(function() {
  const val = Math.floor(Math.random() * 100)
  //document.getElementById('foo').innerHTML = val;
  document.getElementById('foo').value = val;
  google.charts.setOnLoadCallback(drawChart());
}, 1000);

function drawChart() {
  const val2 = document.getElementById('foo').value
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Memory', val2],
    ['CPU', val2],
    ['Network', val2]
  ]);

```

but randells solution is bootiful

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [April 16, 2023, 3:20am UTC](https://forum.freecodecamp.org/t/passing-random-number-to-google-charts-undefined-error/563333/5 "2023-04-16T03:20:55Z")

</div>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.