Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

A Beginner’s Guide to Chart.js

stanleyulili.com

Post reply on HN
Print view View original

1–10 of 45 posts

Re: A Beginner’s Guide to Chart.js

#2

Post by TicklishTiger »

Now that we have Javascript modules, is all this trickery on top of a library like this one still needed?

This is how the Chart.js code begins:

    (function (global, factory) {
    typeof exports === 'object' && typeof module !== 
    'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? 
    define(factory) :
    (global.Chart = factory());
    }(this, (function () { 'use strict';
    ... now comes all the code ...
I have no idea how to read this, what this means and how to invoke a construct like this.

Re: A Beginner’s Guide to Chart.js

#3

Post by fleetfox »

TicklishTiger wrote: post #2

Now that we have Javascript modules, is all this trickery on top of a library like this one still needed? This is how the Chart.js code begins: (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.Chart = factory()); }(this, (function () { 'use strict'; ... now comes all the code…

That is an UMD bundle. What is more disappointing is that Chartjs itself seems to be written in ES5.

Re: A Beginner’s Guide to Chart.js

#4

Post by ergo14 »

fleetfox wrote: post #3
TicklishTiger wrote: post #2

Now that we have Javascript modules, is all this trickery on top of a library like this one still needed? This is how the Chart.js code begins: (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.Chart = factory()); }(this, (function () { 'use strict'; ... now comes all the code…

That is an UMD bundle. What is more disappointing is that Chartjs itself seems to be written in ES5.

Why it still works, no need to refactor the code for the sake of refactoring if this is free work.

Change to ES modules would be welcome though.

Re: A Beginner’s Guide to Chart.js

#5

Post by Escapado »

I love chartjs. It's so easy to get started with it and comes with a lot of great features out of the box. I just wish its animation system was a little more extensive like giving me the option to animate ticks and grid lines for eye candy on load.

Re: A Beginner’s Guide to Chart.js

#7

Post by tjwds »

TicklishTiger wrote: post #2

Now that we have Javascript modules, is all this trickery on top of a library like this one still needed? This is how the Chart.js code begins: (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.Chart = factory()); }(this, (function () { 'use strict'; ... now comes all the code…

> is all this trickery on top of a library like this one still needed?

If the library is imported in the way that the article recommends in step two, it's not actually loaded as an ES6 module. This code checks to see if we're currently acting as a module and accordingly makes sure that the library is available as a global object. See this link for some examples: https://devhints.io/umdjs

> I have no idea how to read this ...

I tried to add some comments [0] which will hopefully help!

[0] https://gist.github.com/tjwds/8883b20d5981518bad66497f0466ac...

Re: A Beginner’s Guide to Chart.js

#8

Post by TicklishTiger »

tjwds wrote: post #7
TicklishTiger wrote: post #2

Now that we have Javascript modules, is all this trickery on top of a library like this one still needed? This is how the Chart.js code begins: (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.Chart = factory()); }(this, (function () { 'use strict'; ... now comes all the code…

> is all this trickery on top of a library like this one still needed? If the library is imported in the way that the article recommends in step two, it's not actually loaded as an ES6 module. This code checks to see if we're currently acting as a module and accordingly makes sure that the library is available as a global object. See this link for some examples: https://devhints.io/umdjs > I have no idea how to read…

Nowadays, I either include javascript as a module or as a module dependency. I am still not sure if these will work with the given code:

As a module:
As a module dependency:

    import * as chart from 'Chart.js';

Re: A Beginner’s Guide to Chart.js

#9

Post by Spiritus »

augstein wrote: post #6

Chart.js still uses the HTML Canvas element, so charts generated with it look blurred when printed or zoomed in. Nowadays I prefer Apexcharts.js, which renders to SVG. https://github.com/apexcharts/apexcharts.js (MIT License)

Interesting. Do you know how Apexcharts.js performs with real-time graphs? We're currently using Chart.js via react-chartjs-2 and while it works, it's consuming quite a bit of CPU.

Re: A Beginner’s Guide to Chart.js

#10

Post by GordonS »

augstein wrote: post #6

Chart.js still uses the HTML Canvas element, so charts generated with it look blurred when printed or zoomed in. Nowadays I prefer Apexcharts.js, which renders to SVG. https://github.com/apexcharts/apexcharts.js (MIT License)

Wow, this looks really good! I was looking at different chart libraries recently, don't know how I didn't find Apexcharts, but wish I had!
Post reply on HN