Intro

Angular Highchart Directives

What this means

Interactive charts using Angular directives and
Highcharts.
Lakshman...
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

In Summary

• Angular brings Engineering into frontend, the right way.

What this mea...
Intro

Angular Highchart Directives

In Summary

• Angular brings Engineering into frontend, the right way.
• Angular inte...
Intro

Angular Highchart Directives

What this means

In Summary

• Angular brings Engineering into frontend, the right wa...
Intro

Angular Highchart Directives

What this means

In Summary

• Angular brings Engineering into frontend, the right wa...
Intro

Angular Highchart Directives

What this means

In Summary

• Angular brings Engineering into frontend, the right wa...
Intro

Angular Highchart Directives

What this means

In Summary

• Angular brings Engineering into frontend, the right wa...
Intro

Angular Highchart Directives

What this means

In Summary

• Angular brings Engineering into frontend, the right wa...
hello@lakshmanprasad.com
Upcoming SlideShare
Loading in …5
×

Intro to Angular Directives using Interactive charting directives that use Highcharts

5,016 views

Published on

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

Published in: Technology, Business

Intro to Angular Directives using Interactive charting directives that use Highcharts

  1. 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. 2. Sachin’s Stats’ Visualisation: http://j.mp/sachinst
  3. 3. Server side charts
  4. 4. Good enough for publishing statics
  5. 5. There are good ”modern” themes, too
  6. 6. The modren interactive charts
  7. 7. We want to choose what we want to see
  8. 8. Highcharts charting library
  9. 9. All kinds of charts. Very friendly API. Quite Performant.
  10. 10. JSON options
  11. 11. 2 way binding of Angular
  12. 12. Step (-1): Without Angular.
  13. 13. Step 0: With the relevant controller.
  14. 14. Step 1: The Chart directive.
  15. 15. Step 2: Highchart options into a factory.
  16. 16. Enough to render awesome HighCharts!
  17. 17. Step 3: Options: Watch them in the controller
  18. 18. Step 3b: Highchart options: Redraw, animate, instant-update
  19. 19. Step 4: Multi-level jsons
  20. 20. Step 5: Put the controller inside the directive and Child Directives.
  21. 21. Highly interactive chart
  22. 22. All it takes!
  23. 23. Charts and options dynamically rendered!
  24. 24. Deja Vu!
  25. 25. Intro Angular Highchart Directives In Summary • Angular brings Engineering into frontend, the right way. What this means
  26. 26. Intro Angular Highchart Directives In Summary • Angular brings Engineering into frontend, the right way. • Angular interactivity + Highcharts charting = WIN What this means
  27. 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. 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. 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. 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. 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. 32. hello@lakshmanprasad.com

×