SlideShare a Scribd company logo
1 of 32
Download to read offline
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

In Summary

• Angular brings Engineering into frontend, the right way.

What this means
Intro

Angular Highchart Directives

In Summary

• Angular brings Engineering into frontend, the right way.
• Angular interactivity + Highcharts charting = WIN

What this means
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!
hello@lakshmanprasad.com

More Related Content

Similar to Intro to Angular Directives using Interactive charting directives that use Highcharts

Angular presentation
Angular presentationAngular presentation
Angular presentationmerlihan
 
David Bilík: Anko – modern way to build your layouts?
David Bilík: Anko – modern way to build your layouts?David Bilík: Anko – modern way to build your layouts?
David Bilík: Anko – modern way to build your layouts?mdevtalk
 
How to use apolloJS on React ?
How to use apolloJS on React ?How to use apolloJS on React ?
How to use apolloJS on React ?Jonathan Jalouzot
 
Create Location Sharing apps using the Ionic framework
Create Location Sharing apps using the Ionic framework					Create Location Sharing apps using the Ionic framework
Create Location Sharing apps using the Ionic framework Shelly Megan
 
Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps Ahmed Bouchefra
 
Brief introduction to Angular 2.0 & 4.0
Brief introduction to Angular 2.0 & 4.0Brief introduction to Angular 2.0 & 4.0
Brief introduction to Angular 2.0 & 4.0Nisheed Jagadish
 
Best practices: embedding interactive reports & visualizations in your app
Best practices: embedding interactive reports & visualizations in your appBest practices: embedding interactive reports & visualizations in your app
Best practices: embedding interactive reports & visualizations in your appTIBCO Jaspersoft
 
Vitaliy Makogon: Migration to ivy. Angular component libraries with IVY support.
Vitaliy Makogon: Migration to ivy. Angular component libraries with IVY support.Vitaliy Makogon: Migration to ivy. Angular component libraries with IVY support.
Vitaliy Makogon: Migration to ivy. Angular component libraries with IVY support.VitaliyMakogon
 
Migrating from AngularJS when you can't use the word "Big Bang@
Migrating from AngularJS when you can't use the word "Big Bang@Migrating from AngularJS when you can't use the word "Big Bang@
Migrating from AngularJS when you can't use the word "Big Bang@Asim Hussain
 
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure FunctionsEuropean Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure FunctionsSébastien Levert
 
django Forms in a Web API World
django Forms in a Web API Worlddjango Forms in a Web API World
django Forms in a Web API WorldTareque Hossain
 
AngularJS Vs Angular: Understanding the Differences
AngularJS Vs Angular: Understanding the DifferencesAngularJS Vs Angular: Understanding the Differences
AngularJS Vs Angular: Understanding the DifferencesTechtic Solutions
 
Api-First service design
Api-First service designApi-First service design
Api-First service designStefaan Ponnet
 
(ATS3-PLAT09) Advanced Reporting Customizations and Applications
(ATS3-PLAT09) Advanced Reporting Customizations and Applications(ATS3-PLAT09) Advanced Reporting Customizations and Applications
(ATS3-PLAT09) Advanced Reporting Customizations and ApplicationsBIOVIA
 
SenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch Charts
SenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch ChartsSenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch Charts
SenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch ChartsGaurav Kheterpal
 
From AngularJS to React: why migration is a must
From AngularJS to React: why migration is a mustFrom AngularJS to React: why migration is a must
From AngularJS to React: why migration is a mustAdam Kosmala
 
Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3Bruce Pentreath
 
React or Angular and SharePoint Framework Development
React or Angular and SharePoint Framework DevelopmentReact or Angular and SharePoint Framework Development
React or Angular and SharePoint Framework DevelopmentDarin Dickey
 

Similar to Intro to Angular Directives using Interactive charting directives that use Highcharts (20)

Angular presentation
Angular presentationAngular presentation
Angular presentation
 
David Bilík: Anko – modern way to build your layouts?
David Bilík: Anko – modern way to build your layouts?David Bilík: Anko – modern way to build your layouts?
David Bilík: Anko – modern way to build your layouts?
 
How to use apolloJS on React ?
How to use apolloJS on React ?How to use apolloJS on React ?
How to use apolloJS on React ?
 
Create Location Sharing apps using the Ionic framework
Create Location Sharing apps using the Ionic framework					Create Location Sharing apps using the Ionic framework
Create Location Sharing apps using the Ionic framework
 
Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps
 
Brief introduction to Angular 2.0 & 4.0
Brief introduction to Angular 2.0 & 4.0Brief introduction to Angular 2.0 & 4.0
Brief introduction to Angular 2.0 & 4.0
 
Best practices: embedding interactive reports & visualizations in your app
Best practices: embedding interactive reports & visualizations in your appBest practices: embedding interactive reports & visualizations in your app
Best practices: embedding interactive reports & visualizations in your app
 
Vitaliy Makogon: Migration to ivy. Angular component libraries with IVY support.
Vitaliy Makogon: Migration to ivy. Angular component libraries with IVY support.Vitaliy Makogon: Migration to ivy. Angular component libraries with IVY support.
Vitaliy Makogon: Migration to ivy. Angular component libraries with IVY support.
 
Migrating from AngularJS when you can't use the word "Big Bang@
Migrating from AngularJS when you can't use the word "Big Bang@Migrating from AngularJS when you can't use the word "Big Bang@
Migrating from AngularJS when you can't use the word "Big Bang@
 
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure FunctionsEuropean Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
 
Resolver in Angular
Resolver in AngularResolver in Angular
Resolver in Angular
 
django Forms in a Web API World
django Forms in a Web API Worlddjango Forms in a Web API World
django Forms in a Web API World
 
AngularJS Vs Angular: Understanding the Differences
AngularJS Vs Angular: Understanding the DifferencesAngularJS Vs Angular: Understanding the Differences
AngularJS Vs Angular: Understanding the Differences
 
Api-First service design
Api-First service designApi-First service design
Api-First service design
 
(ATS3-PLAT09) Advanced Reporting Customizations and Applications
(ATS3-PLAT09) Advanced Reporting Customizations and Applications(ATS3-PLAT09) Advanced Reporting Customizations and Applications
(ATS3-PLAT09) Advanced Reporting Customizations and Applications
 
SenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch Charts
SenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch ChartsSenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch Charts
SenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch Charts
 
From AngularJS to React: why migration is a must
From AngularJS to React: why migration is a mustFrom AngularJS to React: why migration is a must
From AngularJS to React: why migration is a must
 
Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
 
React or Angular and SharePoint Framework Development
React or Angular and SharePoint Framework DevelopmentReact or Angular and SharePoint Framework Development
React or Angular and SharePoint Framework Development
 

More from Lakshman Prasad

djangoic approach to implement common web development paradigms
djangoic approach to implement common web development paradigmsdjangoic approach to implement common web development paradigms
djangoic approach to implement common web development paradigmsLakshman Prasad
 
Web Development Paradigms and djangoic approach to deal with them
Web Development Paradigms and djangoic approach to deal with themWeb Development Paradigms and djangoic approach to deal with them
Web Development Paradigms and djangoic approach to deal with themLakshman Prasad
 
Building Pluggable Web Applications using Django
Building Pluggable Web Applications using DjangoBuilding Pluggable Web Applications using Django
Building Pluggable Web Applications using DjangoLakshman Prasad
 
Python Meta Classes and how django uses them
Python Meta Classes and how django uses themPython Meta Classes and how django uses them
Python Meta Classes and how django uses themLakshman Prasad
 
Web Development in Django
Web Development in DjangoWeb Development in Django
Web Development in DjangoLakshman Prasad
 

More from Lakshman Prasad (7)

Pycon India 12
Pycon India 12Pycon India 12
Pycon India 12
 
djangoic approach to implement common web development paradigms
djangoic approach to implement common web development paradigmsdjangoic approach to implement common web development paradigms
djangoic approach to implement common web development paradigms
 
Web Development Paradigms and djangoic approach to deal with them
Web Development Paradigms and djangoic approach to deal with themWeb Development Paradigms and djangoic approach to deal with them
Web Development Paradigms and djangoic approach to deal with them
 
Building Pluggable Web Applications using Django
Building Pluggable Web Applications using DjangoBuilding Pluggable Web Applications using Django
Building Pluggable Web Applications using Django
 
Python Meta Classes and how django uses them
Python Meta Classes and how django uses themPython Meta Classes and how django uses them
Python Meta Classes and how django uses them
 
Web Development in Django
Web Development in DjangoWeb Development in Django
Web Development in Django
 
Seminar
SeminarSeminar
Seminar
 

Recently uploaded

Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 

Recently uploaded (20)

Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 

Intro to Angular Directives using Interactive charting directives that use Highcharts