Using other JS libraries

[FlorianCADOZ]

Hello everybody !

I would like to make available an external JS library for all widgets so I followed this documentation here but I did not manage to implement ... My library is not recovered !
It is functional forall because I managed to use it for a single widget but my problem is to make it available for all I am afraid that the doc is not updated or I forget something!

Someone could refer me about the procedure?
thank you in advance !

[FlorianCADOZ]

My real question is : what and how can I do this with a cdn link ?

[JunshanLiu]

Does this help? Re: Uncaught Error: Bootstrap's JavaScript requires jQuery

[FlorianCADOZ]

Not really...

I do not understand ... My goal is to add the library canvasjs to insert statistical graphs in widgets so I tried to follow the doc ESRI :

- I placed my canvasjs.js file in a directory canvasjs , all in the libs directory ( ../libs/canvasjs/canvasjs.js ) ;

- I changed the main.js file ( ../libs/main.js ) by adding my library :

define ( [" ./ usng / usng ", " ./storejs/json ", " ./storejs/store " " ./canvasjs/canvasjs "] , function () {
});

- I changed the Init.js file ( ../stemapp/init.js ) by adding my library :

resources resources.concat = ( [
      window.apiUrl + ' dojo / resources / dojo.css '
      window.apiUrl + ' dijit / themes / Claro / claro.css '
      window.apiUrl + ' esri / css / esri.css '
      window.apiUrl + ' dojox / layout / resources / ResizeHandle.css '
      window.path + ' jimu.js / css / jimu.css '
        window.path + ' libs / canvasjs / canvasjs.js '
    ] ) ;

- And finally I tried to make it work in a widget but it doesn't... (but if I put my library in only one widget it works, but my goal is to make it shared for all the widget...)

Thank you by advance for your help !

--EDIT--

Oh maybe there's something I didn't understood with the delaration in the widget !

In my widget.js I have :

define([

  'dojo/_base/declare',

  'dijit/_WidgetsInTemplateMixin',

[...]

    'canvasjs'

],

function(

  declare,

  _WidgetsInTemplateMixin,

[...]

    canvasjs

){

...

Is the mistake is here ?

[MatejVrtich]

Assuming you have copied the canvasjs.js file into the libs/canvasjs folder, just delete config you made in init.js and create an alias for canvasjs inside the init.js file as following:

// init.js

dojoConfig.aliases = [

            ['canvasjs', 'libs/canvasjs/canvasjs']

        ];

Then, in your custom widget, just require the canvasjs as dependency.

// YourWidget.js

define([

    'dojo/_base/declare',

    'jimu/BaseWidget',

    'canvasjs'

], function (declare, BaseWidget, canvasjs) {

     ...

});

[FlorianCADOZ]

Matej,

First thank you for your answer, unfortunately it's not working ... I just look different dojo's doc and aliases but the syntax changes in each documentation!

- I do have my canvasjs.js file libs / canvasjs

- In my Init.js file ( ../stemapp/init.js ) I go back to the originaly code and just add the alias  :

resources = resources.concat ( [

      window.apiUrl + ' dojo / resources / dojo.css '

      window.apiUrl + ' dijit / themes / Claro / claro.css '

      window.apiUrl + ' esri / css / esri.css '

      window.apiUrl + ' dojox / layout / resources / ResizeHandle.css '

      window.path + ' jimu.js / css / jimu.css '

    ] ) ;

    dojoConfig.aliases = [

      ['canvasjs', 'libs/canvasjs/canvasjs']

    ];

- For my custom widget, it's done (thank you for having me reassured about the syntax elsewhere)

- Also, should I remove the configuration made ​​in the main.js (in libs / main.js ) ?

define ( [" ./ usng / usng ", " ./storejs/json ", " ./storejs/store " " ./canvasjs/canvasjs "] , function () {

});

[MatejVrtich]

Florian,

I guess there is no need to require canvasjs dependency in libs/main.js so revert the changes in this file.

Just include the canvasjs dependency in your custom widget. I use external libs like react and d3 this way and it works just fine.

In your custom widget, require the canvasjs dependency by its alias:

// YourWidget.js

define([

    'dojo/_base/declare',

    'jimu/BaseWidget',

    'canvasjs'

], function (declare, BaseWidget, canvasjs) {

     ...

});

[FlorianCADOZ]

I really do not understand ... I did everything you said above and it still does not work ...
At witch line in the init.js file did you put the :

dojoConfig.aliases = [
      [' canvasjs ', ' libs / canvasjs / canvasjs ']
] ;

?

[MatejVrtich]

Florian,

As I found, the CanvasJS library is not AMD compatible. The workflow I suggested (using aliases) is supported only for AMD/UMD packages.

However, you should be able to load the CanvasJS library following your previous workflow (add CanvasJS lib to resources array in init.js file).

After that, the CanvasJS is accessible as global variable window.CanvasJS (or just CanvasJS) in your custom widget.

FYI, there is nice ArcGIS GeoServices charting lib created by Esri: Esri/cedar · GitHub

[FlorianCADOZ]

Matej,

Thank you for your explanations , it already makes me feel a little more about the non-functioning of canvasjs in my widget !
However , the statement in the file Init.js still does not work and I do not understand why ...

In my ressources array there is :

    resources = resources.concat([

      window.apiUrl + 'dojo/resources/dojo.css',

      window.apiUrl + 'dijit/themes/claro/claro.css',

      window.apiUrl + 'esri/css/esri.css',

      window.apiUrl + 'dojox/layout/resources/ResizeHandle.css',

      window.path + 'jimu.js/css/jimu.css',

      window.path + 'libs/canvasjs/canvasjs.js'

    ]);

And in my custom widget there is :

define([

  'dojo/_base/declare',

  'dijit/_WidgetsInTemplateMixin',

[...]

    'CanvasJS'

],

function(

  declare,

  _WidgetsInTemplateMixin,

[...]

    CanvasJS

){...

When I run my custom widget, in the console I see it seems to search canvasjs in http://js.arcgis.com/3.14/dojo/CanvasJS.js , whatever I do in the Init.js'code ...

Otherwise, I thank you for the track is cedar unfortunately I need pie and stacked percentage column chart and cedar doesn't seem to provide this kind of functionality ....

I'm a little stuck right now !