This post will utilize Google Charts to create a Pie Chart (Circle). And tooltips are displayed when hover on each slices.
HTML & JavaScript – Create Pie Chart
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Preview Create Pie Chart With HTML & JavaScript</title> <meta name="robots" content="noindex, nofollow" /> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Tổng Số Tiền Gốc Đầu Tư', 356000000], ['Tổng Tiền Lời', 398944563.98809] ]); var options = { title: 'Giá Trị Tiền Gốc So Với Lời' }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html> |
Demonstration of a Pie Chart
Create Pie Chart With HTML & JavaScript
