There are two ways to create charts with Google Charts. One is the way we did it in the recipe Getting started with a pie chart and the second will be covered in this recipe. The goal of the ChartWrapper object is to enable you to cut down the amount of code needed to create a chart.
Its main advantages are less code and more flexibility of data sources. Its disadvantage is less control over the steps of graph creation.
Grab the HTML file from the last recipe (Getting started with pie charts). We will only modify the file path of the external JavaScript file and the rest of the code will remain the same.
After changing the path of the HTML file source to the JavaScript file, it's time to go into the JavaScript file and start over:
- Load Google API (you do not need to mention what you want to load any more) and add a callback:
google.load('visualization', '1.0'), google.setOnLoadCallback(init); - Create the
initfunction:function init(){ ... } - Build a 2D array with the data source:
var dataTable = [ ['Type of Death','Deaths'], ['Diseases of heart', 616828], ['Malignant neoplasms', 565469], ['Chronic lower respiratory diseases', 141090], ['Cerebrovascular diseases', 134148], ['Accidents ', 121902], ['Alzheimer's disease ', 82435], ['Diabetes mellitus', 70553], ['Influenza and pneumonia', 56284], ['Suicide', 36035], ['Septicemia', 35927], ['Chronic liver disease and cirrhosis', 29963], ['Essential hypertension and hypertensive renal disease', 25742], ['Parkinson's disease', 20483], ['Homicide', 17826], ['All other causes', 469062] ]; - Create the
optionsobject:var options = {'title':'Deaths, for the 15 leading causes of death: United States, 2008', 'width':800, 'height':600, "is3D": true}; - Build and render the chart:
var chart = new google.visualization.ChartWrapper({ chartType:'PieChart', dataTable:dataTable, options:options, containerId:'chart' }); chart.draw();
You've completed the creation of this chart type. Refresh your screen and you will see the same chart as in the last example, only using less code.
The nice thing about this example is you don't need to know much more about how it works. The ChartWrapper function itself deals with all the information that you've had to deal with in the last recipe. With that said, it doesn't mean this way is always the better way—if you need more control over the steps, the last example would work better.
As this recipe was very easy, let's add an extra pointer.
It's really easy changing between the types of views of the Google Chart API. All you need to do is switch the type. Let's change our chart to a BarChart:
var chart = new google.visualization.ChartWrapper({
chartType:'BarChart',
dataTable:dataTable,
options:options,
containerId:'chart'
});Refresh your window and you will find a bar chart.
