passing random number to google charts :undefined Error

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.

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

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

You need to put the setInterval inside the drawChart function. Otherwise, only the value in the input element will change. Also, if you want each of the gauges to be independent of each other, then you will need to specify different random numbers to each specifying the correct row index (the first argument of chart.setValue()).

const drawChart = () => {
  const generateRandomNum = (min, max) =>
    Math.floor(Math.random() * (max - min + 1)) + min;

  const drawRandomData = (rowIndex, min, max) => {
    const val = generateRandomNum(min, max);
    data.setValue(rowIndex, 1, val);
    chart.draw(data, options);
  };

  const memoryColIndex = 0;
  const cpuColIndex = 1;
  const networkColIndex = 2;

  const data = google.visualization.arrayToDataTable([
    ["Label", "Value"],
    ["Memory", 34],
    ["CPU", 55],
    ["Network", 68]
  ]);

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

  const chart = new google.visualization.Gauge(
    document.getElementById("chart_div")
  );

  chart.draw(data, options);

  setInterval(() => drawRandomData(memoryColIndex, 40, 90), 1000);
  setInterval(() => drawRandomData(cpuColIndex, 15, 50), 750);
  setInterval(() => drawRandomData(networkColIndex, 1, 60), 1500);
};

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

google.charts.setOnLoadCallback(drawChart);
1 Like