JavaScript and jQuery for Data Analysis and Visualization

Chapter 10Building Custom Charts with Raphaël

What's In This Chapter

• The SVG library Raphaël
• gRaphaël, a charting plug-in for Raphaël
• An example of how to extend Raphaël to create a custom donut chart

CODE DOWNLOAD The wrox.com code downloads for this chapter are found at www.wrox.com/go/javascriptandjqueryanalysis on the Download Code tab. The code is in the chapter 10 download and individually named according to the names throughout the chapter.

As developers, we're fortunate to have a variety of excellent charting solutions at our fingertips. Nine times out of ten, these libraries and plug-ins provide all the functionality our apps need.

But what about those times you want something more? In these cases, you have two options: Write something from scratch or extend an existing script. Although reinventing the wheel can be tempting, it's usually best to save time and start with an already-built project.

This chapter first introduces the SVG library Raphaël, which provides an excellent foundation for creating custom graphics. You then explore gRaphaël, a charting plug-in for Raphaël that you can use to create simple visualizations such as pie charts and bar graphs.

Finally, you learn how to extend Raphaël, leveraging its utilities as a starting point for your own custom visuals. You follow a practical example of creating a donut chart plug-in as you pick up concepts you can use to create charts of any type.

Introducing Raphaël

Raphaël is a handy JavaScript library ...