<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
Specify options
Every chart has many customizable options, including title, colors, line thickness, background fill, and so on. Although the Chart Tools team has worked hard on the default chart appearance, you might want to customize your chart, for example to add titling or axis labels.
Specify custom options for your chart by defining a JavaScript object with option_name/option_value properties. Use the option names listed in the chart's documentation. Every chart's documentation lists a set of customizable options. For example, the options available for the Pie Chart include 'legend', 'title', and 'is3D'. All options have a documented default value.
The following object defines the legend position, chart title, chart size, and a 3D option for a Pie Chart:
var options = {
'legend':'left',
'title':'My Big Pie Chart',
'is3D':true,
'width':400,
'height':300
}
Update the options object in the example above with these values to see how they affect the chart.
Specify Chart Size
One very common option to set is the chart height and width. You can specify the chart size in two places: in the HTML of the container <div> element, or in the chart options. If you specify the size in both locations, the chart will generally defer to the size specified in the HTML. If you don't specify a chart size either in the HTML or as an option, the chart might not be rendered properly.
There are advantages to specifying the size in one or the other place:
- Specifying the size in HTML - A chart can take a few seconds to load and render. If you have the chart container already sized in HTML, the page layout won't jump around when the chart is loaded.
- Specifying the size as a chart option - If the chart size is in the JavaScript, you can copy and paste, or serialize, save, and restore the JavaScript and have the chart resized consistently.