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
(20)
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
(20)
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.

Creating a Gauge Widget with AngularJS and SVG
We move on now to the generation of more complex graphics, specifically a gauge widget. The bar graph introduced us to basic SVG graphical elements. You may have been saying to yourself, I could have done this with HTML or CSS, and that's true, so let's move on to somewhat more difficult graphical capabilities where SVG can distinguish itself. The gauge is a widget that can be made to look like a speedometer. Our version of it will consist of two arcs, one that represents the whole range of values we might want to represent, kind of like the speedometer itself, and another smaller arc for the value we are representing in the gauge, which is kind of like your current speed. On the SVG side of things we're going to introduce two key new elements, the path element, and the textPath element. The path element is really the most important element in SVG for the generation of complex graphics. You can use it to generate graphics of any complexity. The textPath element is important for our particular type of graphics. It's the one that allows us to bind or attach text to a path. This is particularly useful if the path doesn't follow a strictly horizontal or vertical path. On the AngularJS front we introduce the Custom Directive, an AngularJS feature that allows us to widgetize our gauge or bar graph, so that it's reusable any number of times on our HTML page, and a key feature of the custom directive is isolate scope, a mechanism that allows the directive to create its own set of properties and values, which are not visible outside of a particular instance of the custom directive, to the containing page or, more importantly, other instances of the same custom directive.