Create JavaScript charts and graphs with libraries such as React, Angular & Meteor

Angular, Meteor, React and Highcharts logo

(If you don’t care for the JavaScript history lesson, skip to the bottom for the guides.)

AND NOW, SOMETHING COMPLETELY DIFFERENT

Before Apple switched to from the PowerPC architecture to Intel x86 CPUs, Steve Jobs was asked about whether he was worried that Apple would detract power-users since the x86 architecture seemed to outpace PowerPC in terms of computing power and cost. He replied that the most powerful computer is the one you actually (can) use.

Yes, technology is only powerful when it helps you get the job done.

To me, it feels like JavaScript is in a similar place: It may not be the best performing programming language for all web development, but it may just be the most powerful.

WHY JAVASCRIPT LIBRARIES ARE HELPFUL TO DEVELOPERS

There are two factors to JavaScript’s surging popularity. First, there was invention of node.js in 2009. Node is a fast and stable open-source, cross-platform runtime environment for developing server-side web applications, leveraging the Google V8 JavaScript engine to execute code.

The other contributing factor is the increasing processing power of modern computers and smartphones. This allows much of the application logic to be implemented in the browser. (The fact that “everybody” hates Flash doesn’t hurt either).

However, the “perfect storm” that made JavaScript the most powerful language, is the ability (with the proper abstractions) to use the same libraries and API calls on both the client and server. What you get is a toolkit that builds on existing infrastructure and reuses frameworks such as bind models, controller logic and routing from other projects. This simplifies engineering and makes full-stack web development a one-language affair and easier to get started with.

It is also worth noting these libraries are open-source and are attracting the best developers in the industry to build and improve upon them, along with a large community to help and troubleshoot issues for newbies.

The biggest challenge a developer may have is actually picking which JavaScript libraries to use. There has been tremendous innovation in this space over the last years. Among the most popular client-side libraries/frameworks are React (can also be used server side, btw.),Angular, Backbone and Ember which are often mixed with popular node.js based libraries such as Express/LoopBack, Hapi and Restify. Then there is isomorphic frameworks such as Meteor, Derby and Rendr. “Isomorphic” (or “universal JavaScript”) meaning, the application state and code is shared between the browser and server. (I know the lines are getting blurred between what’s front end, back-end and isomorphic, so feel free to refrain from picking a fight about semantics).

MAKING CHARTS AND GRAPHS IN REACT, ANGULAR AND METEOR

At Highcharts we believe that good software tools make developers’ lives easier.  We’ve therefore found reasons to fall in love with virtually every library out there! When it came to building tighter integrations with these nascent libraries we had to start somewhere.

We are excited to share with you some best practices for combining the power of Highcharts with React, Angular and Meteor. We encourage you to play with these examples, improve upon them and share your best work on GitHub. We will showcase the best solutions on this page for everyone to see and learn.

Without further ado, here are 3 short how-to’s: