Intro Angular Highchart Directives What this means Interactive charts using Angular directives and Highcharts. 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! 

Intro Angular Highchart Directives What this means In Summary • Angular brings Engineering into frontend, the right way. 

Intro Angular Highchart Directives What this means In Summary • Angular brings Engineering into frontend, the right way. • Angular interactivity + Highcharts charting = WIN 

Intro Angular Highchart Directives What this means In Summary • Angular brings Engineering into frontend, the right way. • Angular interactivity + Highcharts charting = WIN • Provide your filtering/choosing/interactivity on the frontend. 

Intro Angular Highchart Directives What this means 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, Rails API, Flask Restful, Seneca, ... 

Intro Angular Highchart Directives What this means 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, Rails API, Flask Restful, Seneca, ... • Building your applications using Angular is an order of magnitude better. - More for charting. 

Intro Angular Highchart Directives What this means 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, Rails API, Flask Restful, Seneca, ... • Building your applications using Angular is an order of magnitude better. - More for charting. • All your big data insight is available on your pocket phone app, beautifully! 

Intro Angular Highchart Directives What this means 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, Rails API, Flask Restful, Seneca, ... • Building your applications using Angular is an order of magnitude better. - More for charting. • All your big data insight is available on your pocket phone app, beautifully! • With these, development is a JOY! 

[email protected]