WordPress User Meta value variable into Google Gauge Chart
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.