از نمودارهاي خطي ساده تا نقشه هاي درختي سلسله مراتبي پيچيده، گالري نمودارگوگل تعداد زيادي از انواع نمودارهاي آماده را براي استفاده ارائه داده است:
-1يك عنصر<div> با شناسه منحصر بفرد در HTML اضافه نمائيد. اين عنصر فضائي ايست كه بايد نمودار در آن نمايش داده شود.
<div id="myChart" style="max-width:700px; height:400px"></div>
- 2پيوندي براي بارگذاري نمودار اضافه نمائيد.
<script src="https://www.gstatic.com/charts/loader.js"></script >
-3گراف API را لودنموده وتابعي كه ميخواهيد هنگام لود اجرا شود به آن اضافه نمائيد.
<script> google.charts.load('current',{packages:['corechart']}); google.charts.setOnLoadCallback(drawChart); // Your Function function drawChart() { ... } </script >
مثال ـ نمونه نمودار ميله اي
function drawChart() { // Set Data const data = google.visualization.arrayToDataTable([ ['Contry', 'Mhl'], ['Italy', 55], ['France', 49], ['Spain', 44], ['USA', 24], ['Argentina', 15] ]); // Set Options const options = { title: 'World Wide Wine Production' }; // Draw const chart = new google.visualization.BarChart(document.getElementById('myChart')); chart.draw(data, options); }
مثال ـ نمونه نمودار دايره اي(Pie Chart)
const chart = new google.visualization.PieChart(document.getElementById('myChart'));
براي تبديل يك نموداري ميله اي به يك نمودار دايره اي بايد
اين عبارت
براي نمايش نمودار دايره اي در فضاي سه بعدي بايد پارامترIs3D: true شود.
مثال ـ نمودار سه بعديPie
const options = {
title: 'World Wide Wine Production',
is3D: true
};
مثال ـ نمونه گراف خطي .نمودار قيمت ساختمان
function drawChart() { // Set Data const data = google.visualization.arrayToDataTable([ ['Price', 'Size'], [50,7],[60,8],[70,8],[80,9],[90,9],[100,9], [110,10],[120,11],[130,14],[140,14],[150,15] ]); // Set Options const options = { title: 'House Prices vs Size', hAxis: {title: 'Square Meters'}, vAxis: {title: 'Price in Millions'}, legend: 'none' }; // Draw Chart const chart = new google.visualization.LineChart(document.getElementById('myChart')); chart.draw(data, options); }
مثال ـ نمونه نمودار نقطه اي
const chart = new google.visualization.ScatterChart(document.getElementById('myChart'));