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 |
