iwato Posted September 3, 2018 Share Posted September 3, 2018 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 Link to comment Share on other sites More sharing options...
Funce Posted September 3, 2018 Share Posted September 3, 2018 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? Link to comment Share on other sites More sharing options...
iwato Posted September 3, 2018 Author Share Posted September 3, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
Funce Posted September 3, 2018 Share Posted September 3, 2018 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! Link to comment Share on other sites More sharing options...
iwato Posted September 3, 2018 Author Share Posted September 3, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
Funce Posted September 3, 2018 Share Posted September 3, 2018 (edited) 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 1 Link to comment Share on other sites More sharing options...
justsomeguy Posted September 4, 2018 Share Posted September 4, 2018 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"? Link to comment Share on other sites More sharing options...
iwato Posted September 4, 2018 Author Share Posted September 4, 2018 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted September 4, 2018 Share Posted September 4, 2018 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. Link to comment Share on other sites More sharing options...
iwato Posted September 4, 2018 Author Share Posted September 4, 2018 Typing XMLHttpRequest produces the same result as typing myChart nothing appears but what I have typed. Roddy Link to comment Share on other sites More sharing options...
justsomeguy Posted September 4, 2018 Share Posted September 4, 2018 And what happens when you type the name of something which you know wouldn't exist? Link to comment Share on other sites More sharing options...
iwato Posted September 6, 2018 Author Share Posted September 6, 2018 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 Link to comment Share on other sites More sharing options...
iwato Posted September 6, 2018 Author Share Posted September 6, 2018 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 Link to comment Share on other sites More sharing options...
Ingolme Posted September 6, 2018 Share Posted September 6, 2018 Is it not possible to just include the Javascript file with a <script> tag? 1 Link to comment Share on other sites More sharing options...
justsomeguy Posted September 6, 2018 Share Posted September 6, 2018 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? 1 Link to comment Share on other sites More sharing options...
iwato Posted September 20, 2018 Author Share Posted September 20, 2018 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now