Webstudio

Log inLog into community

Join the Webstudio community

Updated 3 months ago

Issue Integrating Dynamic Values into a Google Chart Script via HTML Embed

Issue Integrating Dynamic Values into a Google Chart Script via HTML Embed

At a glance

The community member is having difficulty integrating dynamic values from a WordPress CMS into a Google Chart script on Webstudio using the HTML embed component. The chart works with static values, but when trying to use dynamic values retrieved via a GraphQL API, the gauges either show zero or nothing is displayed at all.

The community members have tried various approaches, including using backticks around the script, separating the variable assignment for data, and checking the structure of the data object. However, they are still struggling to get the dynamic values to display correctly in the chart.

There is no explicitly marked answer, but the community members continue to work with the moderator to troubleshoot the issue and find a solution.

Useful resources

·

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,

M

t

O

35 comments

MMilan Boisgard | Uncode School

do you have a link? I would be easier to help you debugging

Hello Milan !

Thank you so much for your quick response! Here’s the link to the page where I’m encountering the issue:

https://site.postgrad.fr/of/digilib/titi-et-grominet

The dynamic values are not rendering in the Google Charts, even though they are displayed correctly elsewhere when printed outside the script. Your help with debugging this would be greatly appreciated.

Thanks again for your fast and kind assistance!

Best regards,

you can get your entire json from data into js as a single variable

const data = ${whatever.data.data}

MMilan Boisgard | Uncode School

You're welcome. I need a share link please in order to check how you implement the script. Thanks!

MMilan Boisgard | Uncode School

Because on this page I don't know where you want to place the script?

Sorry, Milan! Thank you for helping me! Here is the link:
https://p-1859c9c7-1cf6-437e-b6b7-d1488bc669db.apps.webstudio.is/?authToken=7497644a-2d62-43c5-8287-60c88b8931a3&mode=edit

It’s on the formation page.

Thank you again for your assistance!

Best regards,

Thank you @Oleg Isonen i'll try this !

hello @Oleg Isonen

I am reaching out following your recommendations on how to insert dynamic data into my JavaScript code. I followed your instructions and tested the suggested method, but it’s not working as expected.

Here is the code I integrated into my project:

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

function drawChart() {
const data = $ws$dataSource$rCG95v4lQ64tOkvTAv7QDASH.data.data;

console.log('Retrieved data:', data);

const tauxDeSatisfaction = data.formation.dataformation.tauxDeSatisfaction;
const tauxDeReussite = data.formation.dataformation.tauxDeReussite;

if (tauxDeSatisfaction && tauxDeReussite) {
var chartData = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Satisfaction', tauxDeSatisfaction],
['Success', 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(chartData, options);
} else {
console.log("Data is not available.");
}
}
</script>

<div id="chart_div" style="width: 400px; height: 120px;"></div>
I also checked the console in my browser using console.log(data);, but nothing is displayed. Could you please confirm if this code is correct and follows your recommendations? Or is there something that I need to adjust?

Thank you in advance for your help.

MMilan Boisgard | Uncode School

ok all right I understand your problem

MMilan Boisgard | Uncode School

you have to have backticks around your script

MMilan Boisgard | Uncode School

like that

MMilan Boisgard | Uncode School

<script>...</script>and not "<script>...</script>"

MMilan Boisgard | Uncode School

if you have backtick it works

MMilan Boisgard | Uncode School

Attachment

toa avoid such a large messy script, better separate the variable assignment for data from that

make a separate htmlembed for data

you will need to use window.myData = ${data}

in the future we will come up with a way of formatting it normally without template string

@Milan Boisgard | Uncode School

Thank you so much for your time and the guidance you’ve been providing, it’s been super helpful! I followed your instructions and added the backticks around the script as you suggested. While the script doesn’t throw any errors anymore, unfortunately, I still can’t see the charts on the page.

I’ve attached a screenshot to show you what I see. I’d really appreciate any further advice you might have to help me figure out what’s going wrong.

Thanks again for all your support, it means a lot!

Attachment

Capture_decran_2024-10-18_a_15.33.52.png

MMilan Boisgard | Uncode School

It's normal. You have a script but an HTML element to display it that's why

MMilan Boisgard | Uncode School

Maybe it would be easier to use ChartJS otherwise?

@Milan Boisgard | Uncode School I just wanted to say thank you so much for your time and the advice you’ve been giving me. I really appreciate it !

I’ve tried working with ChartJS, but I think it’s a bit too complicated for me at the moment, so I’ll probably stick to something simpler for now. Maybe in the future, Webstudio will have a feature for easier chart integration!

MMilan Boisgard | Uncode School

It semms your code should be structure like that :

<!DOCTYPE html>
<html>
<head>
    <title>Gauge Chart</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
    <div id="chart_div"></div>

    <script type="text/javascript">
        // Votre code JavaScript ici
        google.charts.load('current', {'packages':['gauge']});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            // Le reste de votre code...
        }
    </script>
</body>
</html>

MMilan Boisgard | Uncode School

Try something like that

@Milan Boisgard | Uncode School
I just wanted to clarify something. From what I understand, Webstudio manages the page structure (like the <html>, <head>, and <body> tags), so I didn’t think it was necessary or possible for me to manually include those in my code.

Could you confirm if that’s correct, or if I should still be using the full HTML structure inside Webstudio?

@Milan Boisgard | Uncode School I wanted to give you an update regarding the Google Charts integration. I’ve tested the following code with static values, and it works perfectly:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

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

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

function drawChart() {
const tauxDeSatisfaction = 80;
const tauxDeReussite = 90;

if (tauxDeSatisfaction && tauxDeReussite) {
var chartData = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Satisfaction', tauxDeSatisfaction],
['Success', 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(chartData, options);
} else {
console.log("Data is not available.");
}
}
</script>
However, when I try to use dynamic values from Webstudio, it doesn’t seem to work. I’m not sure if the data is being retrieved correctly.

Do you have any thoughts on why this might be happening, or what I could check to ensure that the dynamic values are properly loaded?

Thanks again for your help!

Attachment

Capture_decran_2024-10-18_a_16.21.00.png

MMilan Boisgard | Uncode School

All right, it works on my side.

Just :

add backtick on script tag as I told you
concerning the variable you have to add ${your_variable}

And it's fine!

@Milan Boisgard | Uncode School

That's fantastic !

Unfortunately, I'm still having issues on my side with the following code:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

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

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

    function drawChart() {
        const data = ${$ws$dataSource$rCG95v4lQ64tOkvTAv7Q__DASH__.data.data};

        console.log('Retrieved data:', data);
        
        const tauxDeSatisfaction = data.formation.dataformation.tauxDeSatisfaction;
        const tauxDeReussite = data.formation.dataformation.tauxDeReussite;

        console.log("Taux de Satisfaction:", tauxDeSatisfaction);
        console.log("Taux de Réussite:", tauxDeReussite);

        if (tauxDeSatisfaction && tauxDeReussite) {
            var chartData = google.visualization.arrayToDataTable([
                ['Label', 'Value'],
                ['Satisfaction', tauxDeSatisfaction],
                ['Success', 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(chartData, options);
        } else {
            console.log("Data is not available.");
        }
    }
</script>

I’m not sure why it's not working for me. If you have any suggestions or insights, I would really appreciate your help!

MMilan Boisgard | Uncode School

here is the right way to do it

MMilan Boisgard | Uncode School

Attachment

Hi Milan,

I don't know if i understand your instructions, and I’ve implemented exactly what you suggested with the following code 👆

However, nothing seems to happen when I try to run it. I apologize for being a bit of a pain; I’m still learning how to navigate Webstudio and appreciate your patience!

Thanks again for all your help!

Attachment

Capture_decran_2024-10-18_a_17.33.31.png

MMilan Boisgard | Uncode School

Look my code it's not the same

MMilan Boisgard | Uncode School

your data is not a number

MMilan Boisgard | Uncode School

you have to have ${stats form.data.data.formation.dataformation.tauxDeReussite} instead of {stats form.data.data}

Hi @Milan Boisgard | Uncode School

I thought that using

const data = ${stats forms.data.data};

would let me store the entire data object and access tauxDeSatisfaction and tauxDeReussite. I understand I need to check the structure of the object and ensure the values exist.

However, I'm still struggling to get it to display correctly. Any tips would be super appreciated!

Thanks for your help!

Add a reply

Sign up and join the conversation on Discord

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,","url":"https://help.webstudio.is/issue-integrating-dynamic-values-into-a-google-chart-script-via-html-embed-48Q9yBHvYyDq","identifier":"48Q9yBHvYyDq","publisher":{"@type":"Organization","name":"Webstudio","logo":{"@type":"ImageObject","url":"https://assets.usehall.com/org_01JEYTC8WWMF7N46W9J4J7CFDP/c7f10f06-f934-4e35-b008-431a89254f9f.png"}},"comment":[{"@type":"Comment","text":"do you have a link? I would be easier to help you debugging","dateCreated":"2024-10-18T09:59:45.583Z","dateModified":"2024-10-18T09:59:45.583Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":1,"upvoteCount":0},{"@type":"Comment","text":"Hello Milan ! Thank you so much for your quick response! Here’s the link to the page where I’m encountering the issue:https://site.postgrad.fr/of/digilib/titi-et-grominetThe dynamic values are not rendering in the Google Charts, even though they are displayed correctly elsewhere when printed outside the script. Your help with debugging this would be greatly appreciated.Thanks again for your fast and kind assistance!Best regards,","dateCreated":"2024-10-18T10:08:29.126Z","dateModified":"2024-10-18T10:08:29.126Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/efbbf60c-957c-484e-bae0-d90b429454a9","name":"tyosteo","identifier":"efbbf60c-957c-484e-bae0-d90b429454a9","image":"https://cdn.discordapp.com/embed/avatars/1.png"},"commentCount":0,"comment":[],"position":2,"upvoteCount":0},{"@type":"Comment","text":"you can get your entire json from data into js as a single variableconst data = ${whatever.data.data}","dateCreated":"2024-10-18T10:46:32.920Z","dateModified":"2024-10-18T10:46:32.920Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":3,"upvoteCount":0},{"@type":"Comment","text":"You're welcome. I need a share link please in order to check how you implement the script. Thanks!","dateCreated":"2024-10-18T10:52:39.276Z","dateModified":"2024-10-18T10:52:39.276Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":4,"upvoteCount":0},{"@type":"Comment","text":"Because on this page I don't know where you want to place the script?","dateCreated":"2024-10-18T11:12:43.064Z","dateModified":"2024-10-18T11:12:43.064Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":5,"upvoteCount":0},{"@type":"Comment","text":"Sorry, Milan! Thank you for helping me! Here is the link:https://p-1859c9c7-1cf6-437e-b6b7-d1488bc669db.apps.webstudio.is/?authToken=7497644a-2d62-43c5-8287-60c88b8931a3&mode=editIt’s on the formation page.Thank you again for your assistance!Best regards,","dateCreated":"2024-10-18T12:10:33.926Z","dateModified":"2024-10-18T12:10:33.926Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/efbbf60c-957c-484e-bae0-d90b429454a9","name":"tyosteo","identifier":"efbbf60c-957c-484e-bae0-d90b429454a9","image":"https://cdn.discordapp.com/embed/avatars/1.png"},"commentCount":0,"comment":[],"position":6,"upvoteCount":0},{"@type":"Comment","text":"Thank you @Oleg Isonen i'll try this !","dateCreated":"2024-10-18T12:10:53.439Z","dateModified":"2024-10-18T12:10:53.439Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/efbbf60c-957c-484e-bae0-d90b429454a9","name":"tyosteo","identifier":"efbbf60c-957c-484e-bae0-d90b429454a9","image":"https://cdn.discordapp.com/embed/avatars/1.png"},"commentCount":0,"comment":[],"position":7,"upvoteCount":0},{"@type":"Comment","text":"hello @Oleg Isonen I am reaching out following your recommendations on how to insert dynamic data into my JavaScript code. I followed your instructions and tested the suggested method, but it’s not working as expected.Here is the code I integrated into my project:javascriptCopier le code

I also checked the console in my browser using console.log(data);, but nothing is displayed. Could you please confirm if this code is correct and follows your recommendations? Or is there something that I need to adjust?Thank you in advance for your help.","dateCreated":"2024-10-18T13:20:06.036Z","dateModified":"2024-10-18T13:20:06.036Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/efbbf60c-957c-484e-bae0-d90b429454a9","name":"tyosteo","identifier":"efbbf60c-957c-484e-bae0-d90b429454a9","image":"https://cdn.discordapp.com/embed/avatars/1.png"},"commentCount":0,"comment":[],"position":8,"upvoteCount":0},{"@type":"Comment","text":"ok all right I understand your problem","dateCreated":"2024-10-18T13:20:25.459Z","dateModified":"2024-10-18T13:20:25.459Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":9,"upvoteCount":0},{"@type":"Comment","text":"you have to have backticks around your script","dateCreated":"2024-10-18T13:20:44.610Z","dateModified":"2024-10-18T13:20:44.610Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":10,"upvoteCount":0},{"@type":"Comment","text":"like that","dateCreated":"2024-10-18T13:20:47.288Z","dateModified":"2024-10-18T13:20:47.288Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":11,"upvoteCount":0},{"@type":"Comment","text":"and not \"\"","dateCreated":"2024-10-18T13:21:19.146Z","dateModified":"2024-10-18T13:21:19.146Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":12,"upvoteCount":0},{"@type":"Comment","text":"if you have backtick it works","dateCreated":"2024-10-18T13:21:37.398Z","dateModified":"2024-10-18T13:21:37.398Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":13,"upvoteCount":0},{"@type":"Comment","text":"","dateCreated":"2024-10-18T13:23:01.741Z","dateModified":"2024-10-18T13:23:01.741Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":14,"upvoteCount":0},{"@type":"Comment","text":"toa avoid such a large messy script, better separate the variable assignment for data from thatmake a separate htmlembed for data","dateCreated":"2024-10-18T13:26:48.023Z","dateModified":"2024-10-18T13:26:48.023Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":15,"upvoteCount":0},{"@type":"Comment","text":"you will need to use window.myData = ${data}","dateCreated":"2024-10-18T13:27:11.659Z","dateModified":"2024-10-18T13:27:11.659Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":16,"upvoteCount":0},{"@type":"Comment","text":"in the future we will come up with a way of formatting it normally without template string","dateCreated":"2024-10-18T13:27:41.797Z","dateModified":"2024-10-18T13:27:41.797Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":17,"upvoteCount":0},{"@type":"Comment","text":"@Milan Boisgard | Uncode School Thank you so much for your time and the guidance you’ve been providing, it’s been super helpful! I followed your instructions and added the backticks around the script as you suggested. While the script doesn’t throw any errors anymore, unfortunately, I still can’t see the charts on the page.I’ve attached a screenshot to show you what I see. I’d really appreciate any further advice you might have to help me figure out what’s going wrong.Thanks again for all your support, it means a lot!","dateCreated":"2024-10-18T13:36:29.411Z","dateModified":"2024-10-18T13:36:29.411Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/efbbf60c-957c-484e-bae0-d90b429454a9","name":"tyosteo","identifier":"efbbf60c-957c-484e-bae0-d90b429454a9","image":"https://cdn.discordapp.com/embed/avatars/1.png"},"commentCount":0,"comment":[],"position":18,"upvoteCount":0},{"@type":"Comment","text":"It's normal. You have a script but an HTML element to display it that's why","dateCreated":"2024-10-18T13:38:13.567Z","dateModified":"2024-10-18T13:38:13.567Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":19,"upvoteCount":0},{"@type":"Comment","text":"Maybe it would be easier to use ChartJS otherwise?","dateCreated":"2024-10-18T13:38:41.878Z","dateModified":"2024-10-18T13:38:41.878Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":20,"upvoteCount":0},{"@type":"Comment","text":"@Milan Boisgard | Uncode School I just wanted to say thank you so much for your time and the advice you’ve been giving me. I really appreciate it !I’ve tried working with ChartJS, but I think it’s a bit too complicated for me at the moment, so I’ll probably stick to something simpler for now. Maybe in the future, Webstudio will have a feature for easier chart integration!","dateCreated":"2024-10-18T14:01:03.151Z","dateModified":"2024-10-18T14:01:03.151Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/efbbf60c-957c-484e-bae0-d90b429454a9","name":"tyosteo","identifier":"efbbf60c-957c-484e-bae0-d90b429454a9","image":"https://cdn.discordapp.com/embed/avatars/1.png"},"commentCount":0,"comment":[],"position":21,"upvoteCount":0},{"@type":"Comment","text":"It semms your code should be structure like that :\n\n Gauge Chart \n\n

\n\n","dateCreated":"2024-10-18T14:06:45.772Z","dateModified":"2024-10-18T14:06:45.772Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":22,"upvoteCount":0},{"@type":"Comment","text":"Try something like that","dateCreated":"2024-10-18T14:06:56.195Z","dateModified":"2024-10-18T14:06:56.195Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":23,"upvoteCount":0},{"@type":"Comment","text":"@Milan Boisgard | Uncode School I just wanted to clarify something. From what I understand, Webstudio manages the page structure (like the , , and tags), so I didn’t think it was necessary or possible for me to manually include those in my code.Could you confirm if that’s correct, or if I should still be using the full HTML structure inside Webstudio?","dateCreated":"2024-10-18T14:13:51.977Z","dateModified":"2024-10-18T14:13:51.977Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/efbbf60c-957c-484e-bae0-d90b429454a9","name":"tyosteo","identifier":"efbbf60c-957c-484e-bae0-d90b429454a9","image":"https://cdn.discordapp.com/embed/avatars/1.png"},"commentCount":0,"comment":[],"position":24,"upvoteCount":0},{"@type":"Comment","text":"@Milan Boisgard | Uncode School I wanted to give you an update regarding the Google Charts integration. I’ve tested the following code with static values, and it works perfectly:

However, when I try to use dynamic values from Webstudio, it doesn’t seem to work. I’m not sure if the data is being retrieved correctly.Do you have any thoughts on why this might be happening, or what I could check to ensure that the dynamic values are properly loaded?Thanks again for your help!","dateCreated":"2024-10-18T14:19:41.071Z","dateModified":"2024-10-18T14:19:41.071Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/efbbf60c-957c-484e-bae0-d90b429454a9","name":"tyosteo","identifier":"efbbf60c-957c-484e-bae0-d90b429454a9","image":"https://cdn.discordapp.com/embed/avatars/1.png"},"commentCount":0,"comment":[],"position":25,"upvoteCount":0},{"@type":"Comment","text":"","dateCreated":"2024-10-18T14:21:07.368Z","dateModified":"2024-10-18T14:21:07.368Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/efbbf60c-957c-484e-bae0-d90b429454a9","name":"tyosteo","identifier":"efbbf60c-957c-484e-bae0-d90b429454a9","image":"https://cdn.discordapp.com/embed/avatars/1.png"},"commentCount":0,"comment":[],"position":26,"upvoteCount":0},{"@type":"Comment","text":"All right, it works on my side.Just :add backtick on script tag as I told youconcerning the variable you have to add ${your_variable}And it's fine!","dateCreated":"2024-10-18T15:08:21.824Z","dateModified":"2024-10-18T15:08:21.824Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":27,"upvoteCount":0},{"@type":"Comment","text":"@Milan Boisgard | Uncode School That's fantastic !Unfortunately, I'm still having issues on my side with the following code:

I’m not sure why it's not working for me. If you have any suggestions or insights, I would really appreciate your help!","dateCreated":"2024-10-18T15:19:41.737Z","dateModified":"2024-10-18T15:19:41.737Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/efbbf60c-957c-484e-bae0-d90b429454a9","name":"tyosteo","identifier":"efbbf60c-957c-484e-bae0-d90b429454a9","image":"https://cdn.discordapp.com/embed/avatars/1.png"},"commentCount":0,"comment":[],"position":28,"upvoteCount":0},{"@type":"Comment","text":"here is the right way to do it","dateCreated":"2024-10-18T15:22:08.366Z","dateModified":"2024-10-18T15:22:08.366Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":29,"upvoteCount":0},{"@type":"Comment","text":"","dateCreated":"2024-10-18T15:22:17.861Z","dateModified":"2024-10-18T15:22:17.861Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":30,"upvoteCount":0},{"@type":"Comment","text":"Hi Milan,I don't know if i understand your instructions, and I’ve implemented exactly what you suggested with the following code 👆 However, nothing seems to happen when I try to run it. I apologize for being a bit of a pain; I’m still learning how to navigate Webstudio and appreciate your patience!Thanks again for all your help!","dateCreated":"2024-10-18T15:34:43.501Z","dateModified":"2024-10-18T15:34:43.501Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/efbbf60c-957c-484e-bae0-d90b429454a9","name":"tyosteo","identifier":"efbbf60c-957c-484e-bae0-d90b429454a9","image":"https://cdn.discordapp.com/embed/avatars/1.png"},"commentCount":0,"comment":[],"position":31,"upvoteCount":0},{"@type":"Comment","text":"Look my code it's not the same","dateCreated":"2024-10-18T15:58:11.773Z","dateModified":"2024-10-18T15:58:11.773Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":32,"upvoteCount":0},{"@type":"Comment","text":"your data is not a number","dateCreated":"2024-10-18T15:58:28.289Z","dateModified":"2024-10-18T15:58:28.289Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":33,"upvoteCount":0},{"@type":"Comment","text":"you have to have ${stats form.data.data.formation.dataformation.tauxDeReussite} instead of {stats form.data.data}","dateCreated":"2024-10-18T15:59:30.209Z","dateModified":"2024-10-18T15:59:30.209Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a5bb43e0-c553-447b-82cc-c4c4177bf6b9","name":"Milan Boisgard | Uncode School","identifier":"a5bb43e0-c553-447b-82cc-c4c4177bf6b9","image":"https://cdn.discordapp.com/avatars/378836225009647628/67e9e7df4880d828a727cc3efba93c81.webp?size=256"},"commentCount":0,"comment":[],"position":34,"upvoteCount":0},{"@type":"Comment","text":"Hi @Milan Boisgard | Uncode School I thought that usingconst data = ${stats forms.data.data};would let me store the entire data object and access tauxDeSatisfaction and tauxDeReussite. I understand I need to check the structure of the object and ensure the values exist.However, I'm still struggling to get it to display correctly. Any tips would be super appreciated!Thanks for your help!","dateCreated":"2024-10-19T08:03:13.959Z","dateModified":"2024-10-19T08:03:13.959Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/efbbf60c-957c-484e-bae0-d90b429454a9","name":"tyosteo","identifier":"efbbf60c-957c-484e-bae0-d90b429454a9","image":"https://cdn.discordapp.com/embed/avatars/1.png"},"commentCount":0,"comment":[],"position":35,"upvoteCount":0}],"author":{"@type":"Person","url":"https://help.webstudio.is/members/efbbf60c-957c-484e-bae0-d90b429454a9","name":"tyosteo","identifier":"efbbf60c-957c-484e-bae0-d90b429454a9","image":"https://cdn.discordapp.com/embed/avatars/1.png"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}}]