در اینجا یک مثال ساده از صفحه ای است که نمودار دایره ای را نمایش می دهد:
می‌توانید قطعه زیر را در یک فایل html در رایانه خود کپی کنید و آن را در مرورگر خود باز کنید تا نمودار دایره‌ای نشان داده شده در بالا نمایش داده شود:
<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 corechart 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"></div>
</body>
</html>نمودار میله ای چطور؟
با جایگزین کردن google.visualization.PieChart با google.visualization.BarChart در کد و بارگیری مجدد مرورگر، نمودار دایره ای را به نمودار میله ای تبدیل کنید. ممکن است متوجه شوید که افسانه "Slices" کوتاه شده است. برای رفع این مشکل، width از 400 به 500 تغییر دهید، فایل را ذخیره کنید و مرورگر خود را دوباره بارگیری کنید.