intro to angular directives using interactive charting directives that use highcharts

Intro Angular Highchart Directives What this means

Interactive charts using Angular directives andHighcharts.

Lakshman Prasad(twitter.com/becomingGuru)

AngularJS Mini Conf

Feb 11, 2014, Bangalore

Sachin’s Stats’ Visualisation: http://j.mp/sachinst

Server side charts

Good enough for publishing statics

There are good ”modern” themes, too

The modren interactive charts

We want to choose what we want to see

Highcharts charting library

All kinds of charts. Very friendly API. Quite Performant.

JSON options

2 way binding of Angular

Step (-1): Without Angular.

Step 0: With the relevant controller.

Step 1: The Chart directive.

Step 2: Highchart options into a factory.

Enough to render awesome HighCharts!

Step 3: Options: Watch them in the controller

Step 3b: Highchart options: Redraw, animate, instant-update

Step 4: Multi-level jsons

Step 5: Put the controller inside the directive and Child Directives.

Highly interactive chart

All it takes!

Charts and options dynamically rendered!

Deja Vu!

In Summary

• Angular brings Engineering into frontend, the right way.

• Angular interactivity + Highcharts charting = WIN

• Provide your filtering/choosing/interactivity on the frontend.

• Optionally attach a backend Django Rest Framework, RailsAPI, Flask Restful, Seneca, ...

• Building your applications using Angular is an order ofmagnitude better. - More for charting.

• All your big data insight is available on your pocket phoneapp, beautifully!

• With these, development is a JOY!

In Summary

[email protected]

Technology