Scalable Dynamic Graphs & Charts Using AngularJS and SVG
Use AngularJS and SVG to produce animated, configurable pie charts, gauges, and bar graphs.
What you'll learn
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.
Table of contents
- Why Use AngularJS and SVG For Business Graphics? 4m
- Using the SVG Element in an HTML Page 3m
- Creating Rectangular Shapes in SVG 3m
- Introducing the AngularJS Application and Controller 4m
- Using AngularJS $scope 5m
- Using AngularJS ng-repeat with $scope Variables 4m
- Creating Lines in SVG and Introducing AngularJS $watch 4m
- Binding SVG Attributes to $scope Variables 4m
- Using AngularJS $watch to Maintain SVG Line Positioning 3m
- Using SVG Group(g) Element to Implement AngularJS ng-repeat 3m
- Reaching out to HTML5 for Help with Text Width Calculations 4m
- Making the Bar Graph Configurable with Help from AngularJS 4m
- Completing the Basic Bar Graph 5m
- Using AngularJS and SVG to Create a Gauge Widget 2m
- Calculating Arc Coordinates - Part 1 3m
- Calculating Arc Coordinates - Part 2 4m
- Creating SVG <path> Element to Draw Arc 5m
- Drawing the Gauge <path> Elements 3m
- Drawing Text with SVG <text> and <textPath> Elements 4m
- Drawing Gradients Along a Text Path 5m
- Rotating SVG <text> Element with Transform Attribute 2m
- AngularJS Directive for Gauge Widget - Overview 5m
- AngularJS Directive for Gauge Widget - Property Definitions 4m
- Installing Web Server to Support Use of Directive Template Url 3m
- Converting the Bar Graph to a Directive 5m
- Using SVG <path> Element to Create Pie Chart Widget 4m
- Calculating Pie Slice Coordinates in AngularJS 4m
- Generating Entire Pie Chart with AngularJS and SVG 5m
- Generating Notation for the Pie Chart 5m
- Generating and Positioning Labels for the Pie Chart 3m
- Converting the Pie Chart to a Directive 4m
- Adapting Widget for the Dashboard 3m
About the author
Tim Gulstine is president of Convergent Software Studio, a software development boutique outside Chicago, IL. Tim's recent work has focused largely on application development using Microsoft's Web API, AngularJS, and other technologies that foster a testable, loosely-coupled software architecture. Tim enjoys distance running and great Indian food, in that order.