Streaming live at 10am (PST)

Creating multiple Chart.js graphs

Hi there

I’ve been watching PixelGeek’s video (skip to 50 mins) about using a CMS collection to power a Chart.js graph.

I want to be able to adapt his code to have another graph on the same page. I’ve been quite careful how I have set up the CMS and the on-page items, making sure to give a new class to the CMS items to reference in the code.

My CMS collection works with his code and I am sure it is my lack of coding knowledge is that is probably the issue here. It would be very surprising if I managed to code it right with no help

You can look at the ‘Datasets’ template page on the link below, or just read on.

Any advice on how to do this would be great.

PixellGeeks CMS setup and code works fine with this code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"> </script>
<script>
var labelarray = [],
    datapointarray = [];

//orig QTD jQuery
$('.label-item').each(function(){
labelitem = $(this).text();
labelarray.push(labelitem);
});
$('.datapoint-item').each(function(){
datapointitem = $(this).text();
datapointarray.push(datapointitem);
});


//orig code
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {

//The type of chart we want to create
type: '{{wf {&quot;path&quot;:&quot;type-of-chart&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}',

// the data for our dataset
data:{
labels: labelarray,
datasets: [{
label: '{{wf {&quot;path&quot;:&quot;name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}',
backgroundColor: '{{wf {&quot;path&quot;:&quot;bg-color&quot;,&quot;type&quot;:&quot;Color&quot;\} }}',
borderColor: '{{wf {&quot;path&quot;:&quot;border-color&quot;,&quot;type&quot;:&quot;Color&quot;\} }}',
data: datapointarray
}]
},

//configuation options go here
options: {}
});
</script>

My attempt at incorporating a new graph (QTD) on the same page;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"> </script>
<script>
var labelarray = [],
    datapointarray = [],
    labelarrayQTD = [],
    datapointarrayQTD = [];

//orig QTD jQuery
$('.label-item').each(function(){
labelitem = $(this).text();
labelarray.push(labelitem);
});
$('.datapoint-item').each(function(){
datapointitem = $(this).text();
datapointarray.push(datapointitem);
});

//My new QTD jQuery
$('.label-itemQTD').each(function(){
labelitemQTD = $(this).text();
labelarrayQTD.push(labelitemQTD);
});
$('.datapoint-itemQTD').each(function(){
datapointitemQTD = $(this).text();
datapointarrayQTD.push(datapointitemQTD);
});


//orig code

var ctx = document.getElementById('myChart').getContext('2d');
var firstchart = new Chart(ctx, {

//The type of chart we want to create

type: '{{wf {&quot;path&quot;:&quot;type-of-chart&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}',

// the data for our dataset

data:{
labels: labelarray,
datasets: [{
label: '{{wf {&quot;path&quot;:&quot;name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}',
backgroundColor: '{{wf {&quot;path&quot;:&quot;bg-color&quot;,&quot;type&quot;:&quot;Color&quot;\} }}',
borderColor: '{{wf {&quot;path&quot;:&quot;border-color&quot;,&quot;type&quot;:&quot;Color&quot;\} }}',
data: datapointarray
}]
},

//configuation options go here
options: {}
});



//PP code

var ctx2 = document.getElementById('myChartQTD').getContext('2d');
var secondchart = new Chart(ctx2, {

//The type of chart we want to create

type: '{{wf {&quot;path&quot;:&quot;type-of-chart&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}',

// the data for our dataset

data:{
labels: labelarrayQTD,
datasets: [{
label: '{{wf {&quot;path&quot;:&quot;name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}',
backgroundColor: '{{wf {&quot;path&quot;:&quot;bg-color&quot;,&quot;type&quot;:&quot;Color&quot;\} }}',
borderColor: '{{wf {&quot;path&quot;:&quot;border-color&quot;,&quot;type&quot;:&quot;Color&quot;\} }}',
data: datapointarrayQTD
}]
},

//configuation options go here
options: {}
});


</script>

Here is my site Read-Only: Webflow - DEMZ
(how to share your site Read-Only link)

Try setting your class names to lowercase in your script.

label-itemqtd instead of label-itemQTD etc.

Webflow makes all class names lower case it seems, which messes up with scripts selecting class names with upper case names.

Fonsume - thanks!! :rofl: how can it be so easy - ive spent hours on this

1 Like

Been there, done that :wink:

1 Like