chart.js with WA

I have found a movie that explains how to create dynamic charts (https://www.youtube.com/watch?v=cREXtrFiJBc).

The problem is that I do not understand how to do this using Webassist tool.

On their page, the database is called with full code, instead of referring to an include page which is common.
The select statement is also created here.
Then each line is looped to create a format that chart.js understands.

I enclose their file, as well as an attempt by me that does not work. Can anyone tell me how to do this with Webassist, thanks!

index.php is the source file that works, indexCopy.php is my attempt.

This code:

//loop through the returned data

    while ($row = mysqli_fetch_array($result)) {



        $data1 = $data1 . '"'. $row['data1'].'",';

        $data2 = $data2 . '"'. $row['data2'] .'",';

    }

should be:

//loop through the returned data

    while (!$sql->atEnd()) {



        $data1 = $data1 . '"'. $sql->getColumnVal("

data1").'",';

        $data2 = $data2 . '"'. $sql->getColumnVal("

data2") .'",';

$sql->moveNext()

    }

I've attached a chart.js user registration chart example I created for another project you might get some ideas from.

Im sorry, but It only displays the first value from the two datasets, in the chart?
<?php require_once('../../Connections/bucketListHub.php'); ?>
<?php require_once('../../webassist/mysqli/rsobj.php'); ?>
<?php
$data1 = '';
$data2 = '';
?>
<?php
$sql = new WA_MySQLi_RS("sql",$bucketListHub,1);
$sql->setQuery("SELECT * FROM chartTst");
$sql->execute();
?>
<?php
//loop through the returned data
while (!$sql->atEnd()) {

$data1 = $data1 . '"'. $sql->getColumnVal("data1").'",';
$data2 = $data2 . '"'. $sql->getColumnVal("data2") .'",';
$sql->moveNext();
}

$data1 = trim($data1,",");
$data2 = trim($data2,",");
?>

$sql = new WA_MySQLi_RS("sql",$bucketListHub,1);

should be:

$sql = new WA_MySQLi_RS("sql",$bucketListHub,0);

Now, when you say that, it sounds obvious.
For some reason, the number 0 does not appear in my bar graph (it starts at 1 on the y-axes), even though I typed 'beginAtZero: true'.
This is a bit annoying then, it is sometimes only value 1.

Here's the code:
<?php
$data = '';
$label = '';
$colorCode = '';

//loop through the returned data

while (!$rsCount->atEnd()) {

$data = $data . '"'. $rsCount->getColumnVal("countEachCategory").'",';
$label = $label . '"'. $rsCount->getColumnVal("categoryName").'",';
$colorCode = $colorCode . '"'. $rsCount->getColumnVal("colorcode").'",';
$rsCount->moveNext();
}

$data = trim($data,",");
$label = trim($label,",");
$colorCode = trim($colorCode,",");
?>

----

<script>
let labels = [<?php echo $label; ?>]
let data = [<?php echo $data; ?>];
let colors = [<?php echo $colorCode; ?>];

var ctx = document.getElementById("chart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets:
[{
label: '',
data: data,
backgroundColor: colors,
}]
},
options: {
scales: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
}
},
tooltips: {
mode: 'index'
},
legend: {
display: false
}
}
});
</script>

You have:
options: {
scales: {
scales: {
yAxes: [{

it should be:
options: {
scales: {
yAxes: [{

,and remove the corresponding close }