Coops
(Chris Cooper)
August 19, 2022, 3:34pm
1
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];
Sunskie
(Jhoanne Dy)
August 19, 2022, 3:51pm
2
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
Coops
(Chris Cooper)
August 19, 2022, 4:00pm
3
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
Sunskie
(Jhoanne Dy)
August 19, 2022, 5:44pm
4
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:)