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
Intro to Angular Directives using Interactive charting directives that use Highcharts
May 10, 2015
Talk at HasGeek's AngularJS Mini Conf, as a part of MetaRefresh 2013
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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!
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, 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!
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, 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!
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, 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!
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, 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!
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, 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!
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, 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!
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, 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!
Related Documents
