Data Visualization
(
3160717 )
Practical and Source Codes
<!DOCTYPE HTML>
<html>
<head>
<title>Google API Donut chart</title>
<meta charset="utf-8">
<meta name="author" content="SidPro" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Using Google Charts API Basics draw charts like a Donut chart" />
<meta name="keywords" content="Google,API,Chart,Donut Chart,Donut" />
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/loader.js"></script>
</head>
<body>
<h2>Using Google Charts API Basics draw charts like a Donut chart</h2>
<div id="chart" style="width: 900px; height: 500px"></div>
</body>
<script type="text/javascript">
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Products', 'Sales'],
['Bathingsoap', 114010],
['Shampoo', 25410],
['Moisturizer', 18515],
['Facecream', 34480],
['Facewash', 18515],
['Toothpaste', 69910]
]);
var options = {
title: 'Yearly sales of Products',
titleTextStyle: { color: 'white', bold: true, fontSize: 20, italic: false },
//colors:['#102b2c','#503491','#3c3f17','#551e3a','#2b240f','#724628'],
pieHole: 0.5,
tooltip: { textStyle: { color: '#871b47' }, showColorCode: true },
backgroundColor: '#2a2a2a',
legend: { position: 'right', textStyle: { color: 'white', fontSize: 16 } }
};
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</html>
Go Back
No comments:
Post a Comment