Chart.js doesn't work

[javinv (Javi)]

Hi,

I’m trying to integrate a chart.js into my website.

This chart will only appear on a subpage, so I modified just that page settings and added:

in the inside tag and starting with a <

script src=“https://raw.githubusercontent.com/chartjs/Chart.js/master/dist/Chart.js”>

and in the before tag:

var chrt = document.getElementById(“mycanvas”).getContext(“2d”);
var myarr = [65, 59, 80, 81, 56, 55, 40];
var data = {
labels: [“January”, “February”, “March”, “April”, “May”, “June”, “July”], //x-axis
datasets: [
{
label: “My First dataset”, //optional
fillColor: “rgba(220,220,220,0.8)”,
strokeColor: “rgba(220,220,220,0.8)”,
highlightFill: “rgba(220,220,220,0.75)”,
highlightStroke: “rgba(220,220,220,1)”,
data: [65, 59, 80, 81, 56, 55, 40] // y-axis
},
{
label: “My Second dataset”, //optional
fillColor: “rgba(220,120,220,0.8)”,
strokeColor: “rgba(220,120,220,0.8)”,
highlightFill: “rgba(220,220,220,0.75)”,
highlightStroke: “rgba(220,220,220,1)”,
data: myarr
}
]
};

var myFirstChart = new Chart(chrt).Bar(data);

And finally, in a html widget:

When I publish my website, I only see the empty space of the html widget with the dimensions that appear on the widget (400x400px).

What am I doing wrong ?

Thank you

Here is an example :

http://javiers-fantabulous-site-66f100.webflow.io

https://preview.webflow.com/preview/javiers-fantabulous-site-66f100?preview=b3a2f683b51015374664b0ecadd336de

[MaciejIVE (Maciej)]

I think there is no need to use embed element in the designer. Try to use div block instead and give it an ID “mycanvas” in the div settings.

EDIT: Sorry, I tried it and it doesn’t work

[javinv (Javi)]

Thanks for your help !

I tried that and now I get the text from the “mycanvas” section directly loaded into the div block; loaded as text I mean:

http://javiers-fantabulous-site-66f100.webflow.io

[MaciejIVE (Maciej)]

That’s because you didn’t close script tag.

<script>
var chrt = document.getElementById("mycanvas").getContext("2d");
var myarr = [65, 59, 80, 81, 56, 55, 40];
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"], //x-axis
datasets: [
{
label: "My First dataset", //optional
fillColor: "rgba(220,220,220,0.8)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40] // y-axis
},
{
label: "My Second dataset", //optional
fillColor: "rgba(220,120,220,0.8)",
strokeColor: "rgba(220,120,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: myarr
}
]
};

var myFirstChart = new Chart(chrt).Bar(data);</script>

[javinv (Javi)]

Thank you so much !

Now webflow’s editor colors the script as an actual script, and not as plain text as it did before !

Now I get an empty white page.

Could it be that the script for the chart.js is wrong ? it works in jsfiddle …

<script src="https://raw.githubusercontent.com/chartjs/Chart.js/master/dist/Chart.js">

is wrong ? I’m adding that in the “inside tag”.

I’ve tried to complete the inside and before tags, both in the general settings and in the individual page ones… without any luck…

[samliew (webflowexpert.com)]

The above script tags has to be closed.

<script src="https://raw.githubusercontent.com/chartjs/Chart.js/master/dist/Chart.js">
</script>

[javinv (Javi)]

Thank you !

It works now but only with chart.js 1.1 … It still shows a white empty page if I try it with chart.js 2.1.4.

I’m gonna try with prior 2.x versions to check if it’s just some kind of incompatibility, now that I know that it’s correctly inserted into webflow.

Thank you again

[javinv (Javi)]

I was using the wrong char.js. This is the correct one, for in the case that this helps someone with the same problem:

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js

My chart has an animation but when I scroll into the section of the page in which it appears, it’s already loaded. I’m trying to apply a triggered effect in which its initial appearance state is “display:none” , triggered by scroll into view with a 25% of delay, but it doesn’t affect it, it’s already loaded when I get to its section. Is there something I’m missing about the display:none state ? this kind of triggered effect works for me with the opacity and movement, as in the tutorials; it’s not the same for the initial appearance effect ? or is there anyway in which I could make it load the html widget when I get to that height of the page ?

[samliew (webflowexpert.com)]

@javinv

Is there something I missing with the display:none state ? this kind of triggered effect works for me with the opacity and movement, as in the tutorials; it’s not the same for the initial appearance effect ? or is there anyway in which I could make it load the html widget when I get to that height of the page ?

Sorry, I didn’t understand your question. Please have a clear problem statement, what steps you took to do what you have already done, screenshots with a circle drawn around the problem, and a statement of what you want it to look like.

[javinv (Javi)]

I’m sorry, I’ll try to explain it better. It’s very simple.

• The chart (chart.js) that you helped me to integrate into my webpage has a short load animation: just when the chart appears, all of its bars (it’s a bar chart) rise from 0 to their actual value, with a little elastic bounce effect.

• If I place this chart at the very top of my webpage, I see the animation effect when the page loads; if the chart is not at the top (I mean that the chart is not visible when the page loads), I guess that the chart completes its animation at the same time that the whole page loads, thus when I scroll down to its position, it has already completed its load animation.

• I’ve tried to add various combinations of effects, most of them, with the “scroll into view” trigger option. I haven’t had any success, the chart is always already loaded when I get to its position. I guess that what I have learnt with the (fantastic) webflow tutorials on load animation and effects, works to make an element appear, changing its opacity, but that doesn’t seem to stop it from loading its own “load animation”, if it has one.

• So my question is: Would it be possible to configure an effect that holds this kind of elements (such as in this case a chart.js script or even an animated gif secuence that just repeats itself once), until I scroll into them ?

Thank you very much.

P.S: Here you have an example. The chart is under a DIV block that occupies all the initial visible area of the webpage. If the HTML embedded widget is placed above the DIV block, you can see its loading animation when the page loads (or reloads). I’ve tried, without any success, to add an interaction, setting its initial display state as “none”, and then a scroll trigger that changes its display state to “block”.

https://webflow.com/website/javiers-fantabulous-site-66f100#