I’m attempting to use a Collection Field to dynamically populate the labels in my Chart.js graph.
I don’t know how to properly write the field values so it outputs the label values in quotes.
Thanks for the help!
Site:
Site Preview
Site Designer
Photos:
1 Like
sam-g
(Sam G.)
August 20, 2019, 8:45pm
2
No sure that you can get Webflow to output the quotes for you, maybe just wrap the text in quotes in the CMS?
However, since you are using custom code, just do it there.
var wLabels = Test Label; // insert webflow variable here
var labels = "'" + wLabels.split( "," ).join( "','" ) + "'";
console.log( labels );
Give that a shot.
1 Like
Thanks for the help!
I’m very new to coding. Do you mind assisting me on where to properly place the provided code?
Here’s my best guess, but all 50 best guesses haven’t worked
sam-g
(Sam G.)
August 20, 2019, 9:17pm
4
Try this:
<canvas id="myChart" width="400" height="400">
<script>
var wLabels = {{wf {"path":"test-label","type":"PlainText"\} }}; // insert webflow variable here
var labels = "'" + wLabels.split( "," ).join( "','" ) + "'";
console.log( labels );
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Some Label',
data: [10, 20, 30, 40, 50],
backgroundColor: ["white","#A5DBFF","#B6E5F9","#D1F0FF","#8ED3FF"],
}]
},
});
</script>
</canvas>
If you can enter that and republish the site I’ll take a look, a bit hard to troubleshoot second hand, but if I can see the console log that will be a good start.
1 Like
sam-g
(Sam G.)
August 20, 2019, 9:21pm
5
Try this and republish:
Just wrap quotes around the Webflow variable, should make it string.
Which should address this issue:
1 Like
Thank you! The first issue solved, looks like I have some deeper issues. Can you shed any light on these?
sam-g
(Sam G.)
August 20, 2019, 9:37pm
7
Try changing to this:
var wLabels = "Test Label"; // insert webflow variable here
var labels = wLabels.split( "," );
console.log( labels );
You Rock! Works like a charm! Thank you Sam, I appreciate all your help.
Final Code Attached for Reference:
<canvas id="myChart" width="400" height="400">
<script>
var wLabels = "{{wf {"path":"test-label","type":"PlainText"\} }}"; // insert webflow variable here
var labels = wLabels.split( "," );
console.log( labels );
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Some Label',
data: [10, 20, 30, 40, 50],
backgroundColor: ["white","#A5DBFF","#B6E5F9","#D1F0FF","#8ED3FF"],
}]
},
});
</script>
1 Like
sam-g
(Sam G.)
August 20, 2019, 10:02pm
9
Glad you got it going, thanks for posting the final code, hopefully that helps someone else down the road. You can comment out or remove the console log line as well.
-Sam
This has been insanely helpful! It took me ages to find something that would use dynamic labels with a graph, THANK YOU!