WordPress User Meta value variable into Google Gauge Chart

Pixeldust WordPress Developer

2 years ago

I am trying to insert a Google Gauge chart on my WordPress site created with Elementor using data from WordPress user meta (current logged in user).

Using the code below, the chart is displayed with a hard-coded value of "50", however I need that value to be retrieved from the current user’s user meta data field named ‘sleepscore’.

My coding experience is very novice, so am not sure if I need to insert something into my theme’s functions.php file, and then reference that variable instead of the "50" hard-coded value below?

<html>
  <head>

   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Exercise', 50],
        ]);

        var options = {
          width: 200, height: 200,
          redFrom: 0, redTo: 33,
          yellowFrom:33, yellowTo: 66,
          greenFrom:66, greenTo: 100,
          minorTicks: 5
        };

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

        chart.draw(data, options);

      }
    </script>
  </head>
  <body>
    <div id="chart_div5" style="width: 200px; height: 200px;"></div>
  </body>
</html>

I am attaching a link that may be related, but am not sure how to implement.

Show chart in post using data passed as custom field

I believe the WordPress function get_user_meta() could be used, but again not sure how or here to use it. Perhaps something like below, but would this go in functions.php?

$uid = get_current_user_id();
$SLEEPscore = get_user_meta($uid,'sleepscore',true);

Any help would be appreciated.