With just a simple Google search, we discover that there are plenty of amazing charting libraries around, such as Google Chart Tools (https://developers.google.com/chart/), Highcharts (http://www.highcharts.com/), and gRaphael (http://g.raphaeljs.com/), to name a few. What we might not know is that there are some CSS techniques that allow us to create fully functional charts without using JavaScript libraries. In this chapter, we'll explore some of these techniques, here are the topics:
Creating a bar chart
Implementing a cross-browser, flexible box layout
Handling and displaying
data-*
attributesImplementing advanced gradients
Adding more chart series
Animating the chart
Creating a pie chart