Streaming live at 10am (PST)

Using CMS Plain Text Field with Chart.js

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:



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 :stuck_out_tongue_winking_eye:

Try this:

<canvas id="myChart" width="400" height="400">
	<script>
    var wLabels = {{wf {&quot;path&quot;:&quot;test-label&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}; // 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

Try this and republish:

Just wrap quotes around the Webflow variable, should make it string.

Which should address this issue:

image

1 Like

Thank you! The first issue solved, looks like I have some deeper issues. Can you shed any light on these?

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 {&quot;path&quot;:&quot;test-label&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"; // 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

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