Scalable Dynamic Graphs & Charts Using AngularJS and SVG

Use AngularJS and SVG to produce animated, configurable pie charts, gauges, and bar graphs.
Course info
Rating
(21)
Level
Intermediate
Updated
Mar 7, 2016
Duration
2h 23m
Table of contents
Course Overview
Scalable Dynamic Graphs & Charts Using AngularJS and SVG
Creating a Gauge Widget with AngularJS and SVG
Creating a Pie Chart Widget with AngularJS and SVG
Using CSS Animation for the AngularJS/SVG Widgets
Description
Course info
Rating
(21)
Level
Intermediate
Updated
Mar 7, 2016
Duration
2h 23m
Description

With AngularJS and SVG, we can produce compelling graphical content for web sites - pie charts, gauges, and bar graphs - using capabilities that are already built in to modern browsers and mobile devices. These graphics will be professional-looking, scalable, configurable and can be created with surprisingly little code.

About the author
About the author

Tim Gulstine is a .NET Web Developer with over twenty years of software development experience.

Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi. This is Tim Gulstine. I've been writing software professionally for over 20 years, and during that time I've learned the value of diversifying your skillset. Learning new technologies keeps you fresh. You want to be adaptable. To that end, this course explores the use of two popular technologies, AngularJS, and SVG. SVG isn't an entirely new technology, but I think it's underpublicized and underutilized. When it comes to developing graphics for the web it's an excellent choice. Your browser is already capable of producing svg graphics. No need for a third party plugin, and no need to learn a new syntax. Svg looks like HTML and XML. To make these graphics adaptable and dynamic we enlist the support of AngularJS in this course, the powerful and popular scripting library. With AngularJS we gain the ability to add animation to our svg graphics, and we have the ability to change the graphics in real time as the data changes. Most importantly, AngularJS gives us the ability to organize our code. When your application has dozens of moving parts you need a technology that enables you to manage complexity, not be overwhelmed by it, so these two technologies, svg and AngularJS, used in tandem position us well for the task at hand, building a dashboard of dynamic, professional looking graphical controls.