CODEWITHSUNDEEP
javascripthtml
Brody
Brody

Reputation: 89

Google Gauge not displaying

I'm trying to create an HTML based dashboard from which we can monitor the temperature of different server cabinets around work. My problem is that I can't get the gauges to display at all. Included below is the code I have so far.

Thanks

<!DOCTYPE html?>
<html>
<head>
    <title>BCS Temperature Monitor</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"/>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['gauge']]);
        google.charts.setOnLoadCallback(drawChart);

        function drawChart (){

            var data = google.visualization.arrayToDataTable([
                ['Label', 'Value'],
                ['Memory', 80],
                ['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);

            setInterval(function() {
                data.setValue(0, 1, 40 + Math.round(60 * Math.random)));
                chart.draw(data, options);
            }, 13000);

            setInterval(function() {
                data.setValue(1, 1, 40 + Math.round(60 * Math.random)));
                chart.draw(data, options);
            }, 5000);

            setInterval(function() {
                data.setValue(2, 1, 60 + Math.round(20 * Math.random)));
                chart.draw(data, options);
            }, 26000);
        }

    </script>

</head>

<body>

    <div class="page">

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

        <div class="wrapper" id="content">
        </div>

        <div class="wrapper" id="footer">
        </div>


    </div>

</body>

Upvotes: 0

Views: 239

Answers (1)

Joe
Joe

Reputation: 1885

There are a number of small mistakes, see working demo here: http://codepen.io/anon/pen/wzBArA

  • Script tags cannot be closed with <script />, you must use <script></script>
  • Your line calling google.charts.load used a second ] instead of a }
  • Your setInterval method had an extra ) after the Math.random call

Upvotes: 1

Related Questions