Integrating Angular ChartJs and Angular Material

October 30, 2016


Angular Chart JS

Preface

One of the cool things about Front End Development is that you get to choose from a multitude of libraries and play mad scientist, come along and see if we can mix some libraries right here in codepen.

Note - Challenges: I gave myself little challenges you are welcome to try if you want to recreate my own experimentation.

What's the plan ?

The plan is to use 3 libraries and a plugin:

Pssst... If you are a little lost with the libraries, here are some handy posts you might like:

The first thing I would like to do, is try a minimal example without Angular Material and then move up from there,styling will be next.

Experiment: Import Angular.js, Chart.js and Angular-chart
Note - I'll be using Angular 1.5 for now, I'll update to Angular 2 at some point in the future.

See the Pen Angular-Chart.js by Eugenio - Keno - Leon (@k3no) on CodePen.

And there you have it, not much to it, just add the libraries and define your directives (data, options etc).

What's next ?

The next thing I would like to investigate, is how to modify the chart via Angular’s two way data binding.

Experiment: Bind Chart Data 2 ways with Angular

See the Pen Angular-Chart.js Data Binding by Eugenio - Keno - Leon (@k3no) on CodePen.

So far so good, let’s now try adding a basic Angular Material container before going further…

Experiment: Add a basic Angular Material container to a chart.

See the Pen Angular Material + Chart.js by Eugenio - Keno - Leon (@k3no) on CodePen.

Almost there !, besides the sheer number of dependencies needed, 7 Javascript Imports and a couple of Stylesheets, nothing to be scared off, so Now I think we are ready to start adding some more complex Angular Material Directives.

Experiment: Add 2 way binding Angular Material Directives

See the Pen Angular Material + Chart.js + DataBinding by Eugenio - Keno - Leon (@k3no) on CodePen.

Surprisingly, most of the hard work was figuring out the right Material design components to use, the data binding was basically dealt with ng-repeat and ng-model. So now that we have a good understanding of how the libraries work together, let’s trow the Material Kitchen sink at it…

Final Experiment: Add more and more Material design elements ( The kitchen sink ) to a chart.js Angular App

See the Pen Chart.js with Angular Material KitchenSink WIP by Eugenio - Keno - Leon (@k3no) on CodePen.

And there you have it, a responsive web App made with Angular, Angular Material and Chart.js, the only thing missing would be a backend to store information,manage users and add stuff, you will definitely need stuff :).

Conclusion

Integrating various Javascript libraries is fun, especially if you do it with a cautious step by step approach

Best,

Keno.