Talk at HasGeek's AngularJS Mini Conf, as a part of MetaRefresh 2013

1. 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

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

3. Server side charts

4. Good enough for publishing statics

5. There are good ”modern” themes, too

6. The modren interactive charts

7. We want to choose what we want to see

8. Highcharts charting library

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

10. JSON options

11. 2 way binding of Angular

12. Step (-1): Without Angular.

13. Step 0: With the relevant controller.

14. Step 1: The Chart directive.

15. Step 2: Highchart options into a factory.

16. Enough to render awesome HighCharts!

17. Step 3: Options: Watch them in the controller

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

19. Step 4: Multi-level jsons

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

21. Highly interactive chart

22. All it takes!

23. Charts and options dynamically rendered!

24. Deja Vu!

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

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

27. 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.

28. 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, ...

29. 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.

30. 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!

31. 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!

32. hello@lakshmanprasad.com