CanvasJS not defined

[Purchase]

Hi,
I’m using CanvasJS within a SPFx SharePoint Online WebPart. And have issues properly loading and using it as a jQuery Plugin.
After loading jQuery 3.3.1 and jQueryUI 1.12.1, I’m loading the jquery.canvasjs.min.js.

In the browser console I see the message “CanvasJS is not defined”. I checked the jQuery object and jQuery.fn.CanvasJSChart exists, but window.CanvasJS does not.
Do you have ideas how to figure out the issue?

regards

[Vishwas R]

@purchase,

Can you kindly create jsfiddle reproducing the issue or share sample project along with sample data over google-drive or onedrive, so that we can understand the scenario better and help you out?

—
Vishwas R
Team CanvasJS

[Purchase]

@Vishwas R
I’m not able to reproduce ist on jsfiddle. It seems to be an issue in combination with a SharePoint environment.
If you provide a email I can invite you to a site where you can reproduce it.

I also made two screenshots for better understanding:
loaded scripts
console view
br, Alex

[Purchase]

It seems that CanvasJS gets broken if used together with SPFx Webparts on the same page. Do you provide TypeScript definitions to use it properly within SPFx?

[Vishwas R]

Alex,

Please check this stackoverflow thread where it says pure JS also works with SPFx. Can you kindly include jquery.canvasjs.min.js and check if that works fine in your case. Incase if you have included jquery.canvasjs.js, kindly include canvasjs.js along with jquery.canvasjs.js.

—
Vishwas R
Team CanvasJS

[Purchase]

Hi Vishwas
no luck even with loading CanvasJS.js and jquery.canvasjs.js. I also tried the jQuery independend script canvasjs.min.js…

It is working as a standalone script, but if there is a SPFx webpart on the same page or if I embed CanvasJS in SPFx, canvasJS is not loading properly.

Is it possible to have a remote session – or you also could have permissions to a example page.
br, Alex

[Vishwas R]

Alex,

Can you kindly share a sample project along with sample data over google-drive or one-drive so that we can look into your code, understand it better and help you out?

—
Vishwas R
Team CanvasJS

[Purchase]

Sure, please could you provide me a email, which I can use for invitation?

br, Alex

[Vishwas R]

Alex,

One of our team-member will contact you soon over email.

—
Vishwas R
Team CanvasJS