passing random number to google charts :undefined Error

[rootofpi]

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.

[ugwen]

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

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

[ugwen]

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

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

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

//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