Build Complex HTML Chart with Google Chart

On May 12, 2015, in HTML5, by James Liu

Google chart is a powerful graphic chart library to build HTML or SVG chart dynamically. Several days ago, I got a project to build a 4 dimension chart with Google Chart. The project requires to build a combo dual-Y axis chart with 2 stacked columns and 1 line. In Google char help page, there are some example to explain how to build stacked column chart, line chart, dual-Y axis chart, or combo chart. But there is no example to show you how to build such complicated chart which has dual-Y axis, stacked columns and line at the same time. After several hours research and test, I successfully got it working with Google Chart library. I guess it could be very helpful if I post the source code here.

First, let me show you what kind of data I want to represent on the Google combo chart.

Year Old Product Sales New Product Sales Number of Products
2010 10 5 20
2011 15 3 25
2012 18 4 29
2013 23 10 40
2014 22 5 46
2015 47 13 70

google chart

Download the Source Code (chart.html)


Leave a Reply

Premium WordPress Themes