Using L&L to render chart values

Here is a fun one I am trying to create, would welcome any input / ideas on how to get it to work.

I have the following html that generates a bar chart:

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<body>

<canvas id="myChart" style="width:100%;max-width:600px"></canvas>

<script>
var xValues = ["3+", "5+", "7+"];
var yValues = [55, 49, 44];
var barColors = ["green", "yellow","red"];

new Chart("myChart", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    legend: {display: false},
    title: {display: false,
      text: "title can go here"
    }
  }
});
</script>

</body>
</html>

What I want to try and achieve is to use L&L templates I have that are generating a count value that can replace the values in the following html element.

var yValues = [55, 49, 44];

Hi Mr. Cooper:)

I tried what you made and it sounds to me like you just need the Math module in L&L

You can check this out and might help you:

https://loop.tangible.one/modules/math

Hey I should have been clearer - I was trying to get the values to render - when I add them in the var it breaks the chart - I am ok getting the values - its just getting them to replace the coded values

iC Mr. Cooper,
So I tried to do some testing to understand javascript you made cuz I don’t have an idea how to use javascript but upon checking on the documentation of L&L and tried your code myself, this is what I come up with:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

      <canvas id="myChart" style="width:100%;max-width:600px"></canvas>
      <Set js=y1 type=number>59</Set>
      <Set js=y2 type=number>54</Set>
      <Set js=y3 type=number>49</Set>

and you have to include your script to the script tab in your template and this is how it looks like:

console.log(y1);
console.log(y2);
console.log(y3);

var xValues = ['3+', '5+', '7+'];
var yValues = [y1, y2, y3];
var barColors = ['green', 'yellow','red'];
new Chart("myChart", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    legend: {display: false},
    title: {display: false,
      text: "title can go here"
    }
  }
});

The console log is actually for you to see that the variables actually made it to JS.

Note:
I got all those in
Get and Set

Then on the bottom part of the page you will see the Variable types part to set variables in JS which is this:
Get and Set JS

Have fun Mr. Cooper:)