Working with require and typeof

[iwato]

BACKGROUND:  I recently installed chart.js using npm but had much trouble in do doing and would like now to verify that it is working properly.  Accordingly, I ran the following two pieces of code followed by console.log(typeof myChart) in my browser's console.

var Chart = require('chart.js');
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {});

and

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {});

only to discover that the results were the same -- namely,

object

QUESTION:  Is this telling me that the require statement is unnecessary, or is it telling me that no matter how you use the new expression it will always produce an object? 

OBSERVATION:  Indeed, when I enter the chart.js sample code, the <canvas> item does not fill with the intended chart.

Please advise.

Roddy

[Funce]

I would think that this would depend on what scope you were using it in. 

Is this run on a webpage? If so...

• Is Chart.js included in your page? That would bring in all the class definitions so you wouldn't need to 'require'.

You stated that this was in your browser console. Did you refresh the page to clear the console of imported modules after your first test?

[iwato]

Hello Funce!

Chart.js is installed at the root level as an npm package.json.  As far as I know, the scope could not be any greater.  When I refresh the page the console refreshes automatically.

There are no class definitions.  This is Javascript -- not PHP.

QUESTION:  Is this telling me that the require statement is unnecessary, or is it telling me that no matter how you use the new expression it will always produce an object?

Roddy

Edited September 3, 2018 by iwato

[Funce]

The new expression produces an object using a Constructor function already defined (In this case, Chart). So if your second example works, it has to be defined elsewhere. (Hence I also wanted to make sure that the console was clear before attempting the second example)

Are there any scripts that run on the page you're loading? Perhaps it's loaded there.

 

Derp, Javascript is classless. Curse the PHP familiarity in syntax!

[iwato]

So, the conclusion is that the constructor Chart must be defined elsewhere, else the expression new would produce nothing or even an error.  Is this correct?

In other words, my installation of Chart.js has succeeded.  Simply, I do not yet know how to use it.

It is much easier for a native English speaker to learn French, then it is to learn, say Japanese.  Yes confusion often arises between English and French, because they are so close, but to not damn the good, when the bad is small in comparison.

Roddy

Edited September 3, 2018 by iwato

[Funce]

Indeed Roddy,

That sounds about right.

And then defining cat.

I get what you mean in regards to languages! I guess I'm more cursing my forgetfulness than the language itself. Thank you for the insight.

Edited September 3, 2018 by Funce

[justsomeguy]

NPM is a package manager, are you also using a build tool to build a file that you can use in the browser?  What happens when you pull up the console and just type "Chart"?

[iwato]

When I type Chart in the Web Console it returns the following:

Chart --->: clear

When I type in myChart or Chart() it returns essentially nothing

myChart

and

Chart()

What does any of this tell you?

Roddy

 

[justsomeguy]

Try some other things.  Type XMLHttpRequest and press enter.  That's a defined object.  That's what it shows for something that is defined.  Type something that you know is not defined, and see what it shows for that.

[iwato]

Typing XMLHttpRequest produces the same result as typing myChart nothing appears but what I have typed.

Roddy

[justsomeguy]

And what happens when you type the name of something which you know wouldn't exist?

[iwato]

Based upon the following you would then conclude that Chart, Chart(), and peanutButter are all being treated the same -- namely, non-existent. 

Chart
ReferenceError: Chart is not defined

Chart()
ReferenceError: Chart is not defined

peanutButter
ReferenceError: peanutButter is not defined

myChart
<canvas id="myChart">

This, however, need only prove one of two things, need it not?  One, I have installed Chart.js properly, but I do not know how to access it.  Two, I have not installed Chart.js properly, and under no circumstance am I able to access what has not been properly installed.

Because all of the following commands appear to work, I believe that at least part of the installation has succeeded.

node -v
npm -v
which node
which npm

My problem is that I am working with cPanel in a completely foreign operational environment -- namely, Centos 7.5 -- with near zero effective support from my host server support team.  After two weeks I have watched my server crash three times.  On this last time, my server was down for more than 12 hours.  I am seriously considering finding a new host, but dread the thought of having to start all over again.

Do you know anything about working with cPanel in a Centos 7.5 environment?

Roddy

 

 

 

 

 

[iwato]

When I go to the Chart.js installation page I am provided with sever alternatives for installation:

1) npm - I have largely failed in this regard.  After more than two weeks, I still have not gotten it to work.

2) Bower - A deprecated package manager.

3) CDN -  Probably the easiest solution, but it exposes me to updates that I may or may not want and potential third party interference.

4) jsDelivr - What appears to be still another foreign package manager with which I have zero experience.

5) GitHub - A place that is usually quite reliable, but that would require that i build the application from the downloaded library.  Once again, something that I have never done before -- well, at least not manually.  On top of this Chart.js recommends not to use this alternative.

Among the above alternatives what would you recommend and why?

Roddy

 

[Ingolme]

Is it not possible to just include the Javascript file with a <script> tag?

[justsomeguy]

Again, npm is just a package manager, it is not a build tool.  We use webpack, for example, to build the actual file we deploy.  npm does not do that, it just gathers the required packages and handles dependencies.  Actually building the project to deploy is another process.

If you open your Chart.js file and look at it, what do you see?  Does it define a Chart object?

Do you know anything about working with cPanel in a Centos 7.5 environment?

Yes, all of our servers use that environment.  We have 7 servers online right now, as the CTO part of my job is running them.  Our servers don't crash, but occasionally one fills up its hard drive or something else fun happens.

3) CDN -  Probably the easiest solution, but it exposes me to updates that I may or may not want and potential third party interference.

Why not download and save a copy of the file that you then serve locally?

[iwato]

OK.  I believe that I have wisely ceded ground in a battle that I was not winning and redirected my energy along the path of least resistance. With the burden of ignorance finally removed, I was able to achieve a successful beachhead in the display of time series display.  You can see the first result of this effort by clicking on the Charts & Graphs option in the Visitor Profile menu in the navigation bar on the Grammar Captive mainpage. 

I dare not count the number of hours spent on achieving this humble task, but when I contemplate everything that has resulted from the attempt, it was surely well worth the effort.  Slowly, but surely I am conquering Matomo despite the lack of active support from the Matomo team.

Roddy