Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Javascript Create Pie Chart With HTML & JavaScript

Create Pie Chart With HTML & JavaScript

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>

<!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

Create Pie Chart With HTML & JavaScript

Sep 6, 2014Hoan Huynh

Source Code Demo page

Pros and Cons to choose CakePHP for your next web projectAuto Load YouTube Video As A Popup With JQuery FancyBox
You Might Also Like:
  • Create Stacked Column Chart With HTML & JavaScript
  • Get Image Width Height With JQuery And JavaScript
  • JavaScript Open A New Tab With JQuery
  • Create Count Down Download Page With JavaScript
  • JQuery Create Textbox With Count Down Limit Characters
  • JavaScript Detect Protocol (HTTP/ HTTPS) To Load Or Handle Accordingly
  • Javascript Problem Set focus textbox on Firefox
  • Jquery checkbox checked
  • Auto Rotate Web Page Title With JavaScript
  • JQuery Read Rows And Columns Of HTML Table
Hoan Huynh

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at [email protected]

Link6 years ago JavascriptGoogle Charts, Pie Chart228
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
22,485 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
20,284 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
16,043 views
JQuery Allow only numeric characters or only alphabet characters in textbox
13,519 views
C# Read Json From URL And Parse/Deserialize Json
10,067 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • Online Payday Loans – Learn How To Make the Most of A Alternative Lending Option
  • Strategies For Buying Photo Editor Software
  • Where to Find the Greatest Free Photo Editor on the Web
  • Custom Research Paper – What’s it So Useful?

  • Getting Bad Credit Paydayloans From a Reputable Source
Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (27)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (141)
  • Uncategorized (247)
Recommended
  • Custom Software Development Company
  • Online Useful Tools
  • Premium Themes
  • VPS
2014 © 4 Rapid Development