Hello,

I’m encountering difficulties integrating dynamic values from my WordPress CMS into a Google Chart script on Webstudio using the HTML embed component.

The chart works perfectly when using static values, but when I try to insert dynamic values from Webstudio (such as satisfaction or success rates retrieved via a GraphQL API), the gauges either show zero or nothing is displayed at all.

Here is an example of the script I’m using with dynamic values in an HTML embed:

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

function drawChart() {
var tauxDeSatisfaction = $ws$dataSource$rCG95v4lQ64tOkvTAv7QDASH.data.data.formation.dataformation.tauxDeSatisfaction;
var tauxDeReussite = $ws$dataSource$rCG95v4lQ64tOkvTAv7QDASH.data.data.formation.dataformation.tauxDeReussite;

var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Satisfaction', parseFloat(tauxDeSatisfaction)],
['Success', parseFloat(tauxDeReussite)]
]);

var options = {
width: 400, height: 120,
redFrom: 0, redTo: 50,
yellowFrom: 50, yellowTo: 75,
greenFrom: 75, greenTo: 100,
minorTicks: 5
};

var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>

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

When I call these dynamic values, the chart either doesn’t display or the gauges remain at zero. However, when I print these dynamic values directly inside a paragraph element or outside the script, they display correctly.

Could you please advise if there’s a specific method or syntax required for integrating dynamic variables into a Google Chart script in Webstudio via the HTML embed? I’d appreciate your assistance in troubleshooting this issue.

Thank you in advance for your help.

Best regards,