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 {"path":"type-of-chart","type":"PlainText"\} }}',
// the data for our dataset
data:{
labels: labelarray,
datasets: [{
label: '{{wf {"path":"name","type":"PlainText"\} }}',
backgroundColor: '{{wf {"path":"bg-color","type":"Color"\} }}',
borderColor: '{{wf {"path":"border-color","type":"Color"\} }}',
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 {"path":"type-of-chart","type":"PlainText"\} }}',
// the data for our dataset
data:{
labels: labelarray,
datasets: [{
label: '{{wf {"path":"name","type":"PlainText"\} }}',
backgroundColor: '{{wf {"path":"bg-color","type":"Color"\} }}',
borderColor: '{{wf {"path":"border-color","type":"Color"\} }}',
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 {"path":"type-of-chart","type":"PlainText"\} }}',
// the data for our dataset
data:{
labels: labelarrayQTD,
datasets: [{
label: '{{wf {"path":"name","type":"PlainText"\} }}',
backgroundColor: '{{wf {"path":"bg-color","type":"Color"\} }}',
borderColor: '{{wf {"path":"border-color","type":"Color"\} }}',
data: datapointarrayQTD
}]
},
//configuation options go here
options: {}
});
</script>
Here is my site Read-Only: https://preview.webflow.com/preview/demz?utm_medium=preview_link&utm_source=designer&utm_content=demz&preview=d6798950acbbe51de07252cf561a303e&pageId=60ba4b07b0270731b67c20c4&itemId=60ba4b5e9cc15425b6efe454&workflow=preview
(how to share your site Read-Only link)
how can it be so easy - ive spent hours on this