How to add chartjs into a custom plugin

How to add chartjs into a custom plugin

ដោយ Dulitha Rajapaksha នៅ
ចំនួនតប៖ 6

I am creating a custom plugin and I have successfully integrated chartjs (https://www.chartjs.org/). It works perfectly in my development environment when the cache is disabled. But when I turn on my cache below error appears in the console.



local_mql is my custom plugin and the js file is added under amd/src/mql.js and minified version is under amd/build/mql.min.js.

Below is my code.


requirejs.config({
    paths: {
        "chartjs": "https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min"
    }
});

define(
    [
        'jquery',
        'core/str',
        'core/ajax',
        'core/templates',
        'jqueryui',
        'core/modal_factory',
        'core/modal_events',
        'chartjs'
    ],
    function (
        $,
        Str,
        ajax,
        templates,
        jqui,
        ModalFactory,
        ModalEvents,
        Chart
    ){
// JS code here..
});
 What am I doing wrong? And how do I fix this?

មធ្យមភាគនៃរង្វាយតម្លៃ: -
ឆ្លើយតបទៅកាន់ Dulitha Rajapaksha

Re: How to add chartjs into a custom plugin

ដោយ Justin Hunt នៅ
រូបភាព Particularly helpful Moodlers រូបភាព Plugin developers
If you just add the URL to chart js directly into the array passed as the first param of the define call, and dont set the path, it might work.
ie.
define(
    [
        'jquery',
        'core/str',
        'core/ajax',
        'core/templates',
        'jqueryui',
        'core/modal_factory',
        'core/modal_events',
        'https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js'
    ],
    function (
        $,
        Str,
        ajax,
        templates,
        jqui,
        ModalFactory,
        ModalEvents,
        Chart
    ){
// JS code here..
});
 It also might be that you just need to add ".js" to the URL of your chart js lib, because it is loaded from https. thats just a guess though
មធ្យមភាគនៃរង្វាយតម្លៃ:Useful (1)
ឆ្លើយតបទៅកាន់ Justin Hunt

Re: How to add chartjs into a custom plugin

ដោយ Dulitha Rajapaksha នៅ
It worked! Why would that happen? Why can't I use it as a path?
មធ្យមភាគនៃរង្វាយតម្លៃ: -
ឆ្លើយតបទៅកាន់ Dulitha Rajapaksha

Re: How to add chartjs into a custom plugin

ដោយ Dominique Palumbo នៅ
រូបភាព Particularly helpful Moodlers រូបភាព Plugin developers
Hi,

if you click on your link : https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min
You will see that : Couldn't find the requested file /dist/chart.min in chart.js.

You need to put the extension.

Dominique.
មធ្យមភាគនៃរង្វាយតម្លៃ: -
ឆ្លើយតបទៅកាន់ Dominique Palumbo

Re: How to add chartjs into a custom plugin

ដោយ Dulitha Rajapaksha នៅ
No need to put that when I add that to the path. .js is automatically getting added by require js. If I put the .js ext it will look for the file chart.min.js.js
មធ្យមភាគនៃរង្វាយតម្លៃ: -
ឆ្លើយតបទៅកាន់ Dulitha Rajapaksha

Re: How to add chartjs into a custom plugin

ដោយ Mark Sharp នៅ
រូបភាព Core developers រូបភាព Particularly helpful Moodlers រូបភាព Plugin developers
chartjs is already included in core, so you shouldn't need to load it from a remote source, unless you're using features that aren't in core. https://docs.moodle.org/dev/Charts_API
មធ្យមភាគនៃរង្វាយតម្លៃ:Useful (2)