11 May 2012

Simple Javascript Pie Chart using HTML5 Canvas tag


I had a look around today for a handy pie chart that I could quickly drop into a new web app I'm working on and it seems there's a lot of bloated solutions out there. I like to keep things short and sweet so I found this one online and edited it to make it a bit more user friendly. Enjoy!

Please see right hand pane before copying my code >>


//ADD THIS BETWEEN YOUR HEAD TAGS OR TO AN EXTERNAL JS FILE:
var pieProps = new Object()

function pieChart(canvas, radius, percentages, n, colors) {
 var canvas = document.getElementById(canvas)
 var a = pieProps.a = canvas.getContext("2d");
 pieProps.colors = colors
 pieProps.i = 0
 canvas.width = 3.5*radius;
 canvas.height = 2.5*radius;
 x = y = canvas.height/2;
 a.font = "bold 12px Arial";
 var u = 0;
 var v = 0;
 for (i=0;i < percentages.length;i++) {
  v += percentages[i];
  W(i)(x,y,radius,u,v);
  u = v;
  a.fillText(n[i], x+radius+10, y-radius/2+i*18);
 }
}

function W(x,y,r,u,v) {
 var a = pieProps.a
 if(r) {
  a.beginPath();
  a.moveTo(x,y);
  a.arc(x, y , r, (u||0)/50*Math.PI, (v||7)/50*Math.PI, 0);
  a.lineTo(x,y);
  a.fill();
 } else {
  a.fillStyle = '#'+pieProps.colors[pieProps.i++];
 }
 return W;
}

//ADD THIS TO YOUR PAGE SOMEWHERE:
<canvas id="c"> Your browser does not support the canvas element. </canvas>

//EXAMPLE USAGE:
<body onload="pieChart('c', 100, [70,25,15], ['Carbs','Protein','Fat'], ['CCCCCC','FFBF43','FF850D'])">

This code is adapted from http://reubencrane.com/canvas_pie.html

25 comments:

Unknown said...

Nice adaptation, glad I could help!

Unknown said...

Great example. useful information. I am learn for Jquery script on

Unknown said...

Nice coding. http://www.dreamdestinations.in/

Anonymous said...

nice things ..a great example
If anyone want learn more about Cakephp image behavior...This is the nice blog to read...

cakephplogics.blogspot.com

Kuldeep said...

nice things ..a great example
If anyone want learn more about Cakephp image behavior...This is the nice blog to read...

http://cakephplogics.blogspot.com

Unknown said...

Thank you for sharing. Good code. I have found an interesting chart http://www.pptstar.com/diagrams/pie-charts/, but do not know how I can use them. I want to try to make such chart on your example.

Unknown said...

canada goose
coach factory outlet
coach outlet
ray ban sunglasses
fit flops
canada goose jackets
kate spade outlet
cheap oakleys
birkenstock sandals
birkenstocks
20161228caiyan]
\

Anonymous said...

Excellent and very cool idea and the subject at the top of magnificence and I am happy to this post..Interesting post! Thanks for writing it. What's wrong with this kind of post exactly? It follows your previous guideline for post length as well as clarity..Website for school uk

chenlili said...

coach outlet
michael kors outlet
nfl jerseys wholesale
christian louboutin outlet
coach outlet online
canada goose outlet
canada goose outlet store
canada goose outlet
christian louboutin sale
pandora outlet
shenyuhang20180608

Juliana Kho said...


daftar s128
m bluebet33
agen cbet
kiss918 indonesia
download osg777

live chat osg777

محمد على said...



شركة تنظيف خزانات بالرياض
شركة تنظيف كنب بالرياض
شركة تنظيف مكيفات بالرياض
شركة تسليك مجارى بالرياض

Treasurebox said...

Buy Mattress naz online on Treasurebox store items which you will be provide easily on a single click.

kayan web said...


Due to the level of quality provided by our company Al-Safa Company in Al-Ahsa شركة تنظيف بالاحساء of cleaning and cleaning services of air conditioning and sewage and insect control on all household services that we do,شركة تنظيف مكيفات بالاحساء and taking our prices suitable for all segments of society, has become the best and most important company in the field of cleaning. شركة تنظيف خزانات بالاحساء In order to maintain our success and progress, the company strives to continue along the same lines, through continuous development and the constant pursuit of following all that is best for the masters of customers. شركة مكافحة حشرات بالاحساء So, never hesitate our dear customer to contact us if you want daily, weekly or monthly cleaning for your home, your garden or your company, شركة تسليك مجارى بالاحساء or even want any kind of cleaning services, we will promptly meet your request with perfect quality and low cost .
شركة الصفرات لكشف التسربات بالرياض
شركة الصفرات للتنظيف بالرياض
شركة الصفرات لتنظيف الخزانات بالرياض
https://www.al-safaa.com/

kayan web said...

شركة تنظيف بالمدينة المنورة Is one of the best companies currently located in Al Madinah Al Munawwarah, Saudi Arabia. Since the company started its activities more than twenty years ago, it has endeavored to develop all its services and made sure to provide the best service at the highest level of quality in cleaning and disinfection at the lowest prices possible. The company believes that the company's employment is a mirror that reflects the efficiency of the company that boasts of it. The worker must be confident and credible to provide the customer with everything he can provide. JAL cleaning and sterilization found in شركة تنظيف منازل بالمدينة المنورة .
شركة نقل اثاث بالمدينة المنورة Providing customers with transportation services of furniture and furniture and storage of furniture using the latest methods and methods and modern techniques and trained workers and freight cars specially equipped to transport furniture and clothes to anywhere inside or outside Medina, customers often need a city to transfer furniture to move furniture from their offices or homes Or their companies to new places but are afraid of their loss of damage or loss, but our company guarantees its customers to complete the transfer process safely and safely without being exposed to any piece of fracture or loss as the company provides a service to lift and download furniture using a hydraulic winch The only available within شركة نقل عفش بالمدينة المنورة .
شركة تنظيف بينبع The company's services include all kinds of services needed by customers such as house cleaning services, apartments, cleaning services for ground and upper water tanks, cleaning of palaces and cleaning services for hotels, residential complexes, mosques, parks, facilities and others. Types of Services The main governmental and private bodies cooperated with the cleaning company in Yanbu. Our company has provided them with the most complete image that has impressed them and increased their confidence in the skill and efficiency of our company and its employees. P safe and effective when providing various cleaning services such detergents, but inside there is no شركة تنظيف منازل بينبع .
شركة نقل اثاث بينبع Is one of the largest furniture transport companies in the city of Yanbu, which is known for providing services at the highest level and the company always offers offers and discounts and wonderful offers on the cost of services and this is what surprises customers and make them always put them the only choice for them, we have a professional team of carpenters who oversee the distinguished operations Dismantling and installing furniture and repair and maintenance of any fractures, as the company has workers polishing furniture and wooden furniture with effective polishes to remove the dirt from the layers of paint and make the furniture bright shiny like new, after the completion of cleaning the workers of evil Of furniture with materials encapsulates the strength and durability to protect the furniture from the external shocks or natural factors such materials are available only from within شركة نقل عفش بينبع
Visit our website
https://fajr-sate3.com/

kayan web said...


The task of moving a catcher needs to rely on شركة نقل عفش بالمدينة المنورة It is specialized and has a long history in this field, helping it to carry out the task of transporting the baggage without causing any problems. Among the precautions taken by the company during transport of the luggage are the following: High-quality packaging materials to ensure that no problems are encountered during transport, the luggage is loaded into the car very carefully so as not to be subject to any problems during transportation. The luggage is re-connected to the place where it is transported and the packaging that is placed on the pallet is removed. During transportation. , All the transferred items are written to make sure that there is no defect in the piece, therefore you will ensure the transfer of the baggage without being exposed to any problems during transportation, شركة نقل اثاث بالمدينة المنورة .
Is characterized by شركة تنظيف بالمدينة المنورة With the experience and efficiency in the task of cleaning, as it uses the best equipment and the latest in addition to many aspects that focus on them to ensure that the cleaning is done to the fullest, and the most important things that you find in the fast service company and nowhere else find the following: It depends on the best detergents that can eliminate stains and smears, follow a certain system in the cleaning task; for this reason it ensures that it reaches the best results, depends on the latest methods such as steam cleaning method which proved its efficiency in the cleaning work, During which to eliminate all germs and The bacteria that are present in the place and maintain the health of the present, possess the best specialized perfumes that you can only find شركة نظافة بالمدينة المنورة.
that شركة تخزين اثاث بالمدينة المنورة It can store any quantity of furniture even if it is huge. This is because the company owns large warehouses divided into many sections. It packs and puts furniture in cars and is transported to the stores equipped with the highest level and has the latest means of monitoring. شركة تخزين عفش بالمدينة المنورة You will get satisfactory results without having to pay a lot of money in return
Be aware شركة تنظيف بينبع Cleaning works require the latest equipment for cleaning and the best detergents. This is what it provides to its customers. Therefore, it ensures the results. The company can clean any place, Will t D have شركة نظافة بينبع Discounts and offers can not be found elsewhere
The task of moving furniture from one place to another can not be done by anything, but it must rely on a specialized company such as شركة نقل اثاث بينبع ، As it will provide you with assurance that the furniture transfer works will be done well and will not be exposed any piece of the pieces to any problems during the transfer of furniture. In addition, it will carry out a comprehensive inspection of all parts before and before the transfer. The best packaging tools are used in this task. you only have to communicate with شركة نقل عفش بينبع .
Visit our website
https://www.zeenclean.com/

kayan web said...


Welcome to the official website of our company to clean apartments, houses, villas and shops in Saudi Arabia This is because we are the best home services company at the moment and by the testimony of our valued customers, the workers who work in the company have a very high experience in the field of cleaning in general, as well as we will give you cleanliness of the highest quality and the lowest prices with the testimony of customers, our goal is to satisfy our customers to the highest degree possible and thanks to God always First of all, thanks to the workers and technicians, we were able to satisfy all the customers who contracted with the company and contacted them, because we specialize in cleaning, sewerage and transport of luggage just contact us and you will notice that your house as if it is completely new from the intensity of cleanliness.
شركة الصفرات للتنظيف بالرياض
شركة الصفرات لتنظيف الخزانات بالرياض
شركة الصفرات لمكافحة الحشرات بالرياض
شركة الصفرات لنقل الاثاث بالرياض
شركة الصفرات لكشف التسربات بالرياض
شركة تنظيف بالمدينة المنورة
شركة تنظيف بينبع
https://www.cleanriyadh.com/

kayan web said...

شركة الصفرات للتنظيف بالرياض
شركة الصفرات لتنظيف الخزانات بالرياض
شركة الصفرات لمكافحة الحشرات بالرياض
شركة الصفرات لنقل الاثاث بالرياض
شركة الصفرات لكشف التسربات بالرياض
https://www.beat-elkhibra.com/

kayan web said...


شركة تنظيف بالمدينة المنورة
شركة نظافة بالمدينة المنورة
https://www.cleaningcompanyusa.com/

kayan web said...


Al-Najah Company is one of the most distinctive things about Al-Ahsa cleaner company. Cleanliness of furniture, and some individuals are responsible for the operation of devices, whether pumping devices or suction, and there is a team responsible for the process of sterilization air conditioners , Our team is considered one of the best teams because of its vast experience over many years in this field, skill and high efficiency, and fast and perfect performance. The nature of the work of the team and what may be seen when carrying out its mission, and we have a team of women to be at the service of our valued customers so as not to worry about the entry of the team of men to come home in the presence of women and housewives.
شركة تنظيف بالاحساء
شركة تنظيف مكيفات بالاحساء
شركة تسليك مجارى بالاحساء
شركة مكافحة حشرات بالاحساء
https://www.a-lnagah.com

Unknown said...

شركة القيصر لخدمات التنظيف المتكاملة تنظيف منازل وفلل ومكافحة حشرات
النخبه الدوليه لخدمات تنظيف المنازل والفلل والقصور
شركة اللؤلؤة الذهبية لمكافحة الحشرات
شركة درع الثقة لخدمات التنظيف والتعقيم
شركة درع الثقة لخدمات التنظيف والتعقيم
شركة الندي لخدمات تنظيف منازل وتنظيف فلل وتنظيف كنب وسجاد وستائر
الصقر الذهبي لتظيف المباني تنظيف فلل-شقق-كنب-سجاد-جلي رخام
شركة الثقة لخدمات التنظيف والتعقيم تنظيف منازل فلل شقق موكيت كنب سجاد
شركه بركه للتنظيف ومكافحه الحشرات
شركة تنظيف في العين

Cricket Mazza 11 Live Line & Fastest IPL Score said...

Download Cricket Mazza 11 for Android Live Line & Fastest IPL Score. Get Live Cricket Scores, Scorecard, Commentary, Match Info and Schedules of All International & Domestic Matches, Series wise Stats, Records, Analysis and Facts, Trending News and Tweets, Recent ICC Player and Team Rankings. Also Download live cricket score apps for ios, including Beach Cricket, Cricket T20 Fever 3D, Download Real Cricket mazza 11 and other top answers suggested and ranked.

aditya said...


I read that Post and got it fine and informative.

techwithgeeks
talesbuzz
whizzherald
alternativestips
bulletintech
shindigweb
romsmania

هند القحاطنى said...





شركة تنظيف شقق بالجبيل
شركة تنظيف فلل بالجبيل
شركة مكافحة حشرات بالجبيل
شركة تنظيف منازل براس تنورة
شركة مكافحة حشرات براس تنورة
شركة تنظيف مكيفات براس تنوره
شركة تنظيف منازل بالنعيريه
شركة مكافحة حشرات بالنعيريه
شركة تنظيف مكيفات بالنعيريه
شركة تنظيف منازل بالخفجى









هند القحاطنى said...


شركة مكافحة حشرات بالخفجى
شركة تنظيف مكيفات بالخفجى
شركة تنظيف كنب وسجاد بالخرج
شركة تنظيف مجالس بالباحه
شركة تنظيف خزنات بالاحساء
شركة تركيب طارد الحمام بالدمام
شركة تنظيف شقق بجازان
شركة تنظيف خزانات بجازان
شركة تسليك مجاري بالخرج
شركة عزل خزانات بالدمام

هند القحاطنى said...


شركة تنظيف فلل بالقطيف
شركة مكافحة حشرات بالقطيف
شركة تنظيف منازل بالخبر
شركة تنظيف خزانات بالخبر
شركة تنظيف شقق بالخبر
شركة تنظيف فلل بالخبر
شركة تنظيف كنب بالخبر
شركة مكافحة حشرات بالخبر
شركة تنظيف منازل بالجبيل
شركة تنظيف خزانات بالجبيل

Post a Comment

Cron Design Studio: Dublin based web design & software development