Animated growing pie chart with Rapahel JS

This is my first post after a long gap – almost one year. During this period I got busy with my regular work, family and other commitments. It was really hard to keep writing although I wanted to do that.
One of the tasks that I worked on a few months back was animating a pie chart as if it is growing from 0 to 360 degrees. And this post will share that with you. So let’s get started….
You might already be knowing that Raphael JS is a great JavaScript library to work with SVG in your web projects. So did I to create the pie chart. I am using Raphael and its features to create the pie chart and animate it. Here’s the demo link. Run this in your browser http://jsphkhan.github.io/growing_pie/

growing_pie

Quick Concepts: 
Most important functionality in the growing pie chart code is defining a custom Raphael paper attribute. So here’s the concept. If you have an attribute that you want to represent as a function and add your logic to it, you can create a custom attribute. For details you can see the official reference here. But here’s how I defined a custom sector attribute that represents a pie slice sector.Read More »

Controlling SVG Pie Chart with a slider control

I have already talked about creating a simple HTML5 – SVG pie chart in one of my earlier post. This time, I thought of adding some interactivity to the pie chart and came up with controlling the number of pie slices on the fly with a slider control. This tutorial will describe how to increase or decrease the number of pie slices/sectors in the pie chart by scrolling a slider control. I do not know why I tried this but this example might come to your rescue someday and then do not forget to thank me. Check out the demo,

Demo: http://jbk404.site50.net/html5/svgpie/

In Mozilla Firefox the slider control is not displayed, instead a text input is displayed. It works though, you can enter the value and press Enter to see the changes in the pie chart. Google Chrome and Safari works fine. This is how it looks in Chrome,

There is nothing much to describe here other than the code. You must have seen the demo till now. Let’s dive into the code.

Read More »

Creating a SVG Pie Chart – HTML5

Updates:
Growing pie chart with Raphael JS – https://jbkflex.wordpress.com/2014/04/07/animated-growing-pie-chart-with-rapahel-js/

Back to the actual post:-
In one of my recent projects I had to create a simple pie chart kind of structure in SVG (Scalable Vector Graphics) based on values given in an array. So if the array has five values in it then the pie chart will have five slices, each slice representing a value. Here is how it looks,

Pie Slices in SVG


Calculating angles swiped by each slice

Alright, so we need the angles that are swiped or covered by a each of the pie slices. The values are supplied by an array

var pieData = [113,100,50,28,27];

Each value will cover some angle in the circular space. Let us find the angle covered by the first value in the array i.e 113. One thing to note is that the 5 values (the array) together, will cover the circular space which is a complete 360 degrees. So 113 + 100 + 50 + 28 + 27 = 318 is making a 360 degrees or a circle. So 113 will cover (113 * 360 degrees)/318 which is approximately 128 degrees. So, similarly by looping the array you can calculate the angles swiped by each value and store them in a new array for later use.

The Approach

Now, that we have the angles calculated, the next step is to approach the problem. For my case I have used Raphael library to generate SVG in JavaScript and I would suggest you do the same. Raphael is easy to learn and will not take you a day to do so.

Read More »

HTML5 – SVG Demographic Map Dashboard Example

The previous month I was busy with experimenting a dashboard which had choropleth/thematic maps, charts, interactivity, also dynamic data reading. Here is what I came up with. This one is a HTML5 based dashboard. Looks like a Flex application isn’t it? The map is of United States and the demographic data are just demo data although they are read from XML files. What’s good is that this application can scale, in the sense that the data can be fed to it by services running on remote servers and the map can display that. Also the data distribution has two categories a) Equal Distribution b) Quantiles method. Had to look up the statistic book again for these two. Play with the application and let me know if you like it.

The application is meant for computer browsers that support HTML5 Canvas and Inline SVG. You can best view it in Chrome, FF and Safari.

Click on the link or the image below to see the live http://jsphkhan.github.io/html5_svgmap/.


Note: The script code needs a bit of re-factoring. I am working on it partially due to time constraints. Once you have the code, you can modify it as per your needs.

FOr the source code you can grab it from the Git repo: https://github.com/jsphkhan/jsphkhan.github.io/tree/master/html5_svgmap

Inline SVG support in HTML5 compatibility test

We know that we can write inline SVG or SVG tags directly in HTML5 document, but not all browsers support that. Here is a compatibility table that displays the support of inline SVG in HTML5 in modern desktop and mobile web browsers.

Inline SVG support in HTML5 in browsers

Image courtesy : http://caniuse.com

You can try running this small piece of code in browsers other than the ones that support inline SVG (this should run fine in latest versions of Firefox, IE and Google Chrome).

Read More »

Creating dynamic SVG elements in JavaScript

While I was working on a HTML5 project I found this problem of creating SVG (Scalable Vector Graphics) elements
dynamically in JavaScript. For example creating vector circles inside a for loop and adding them to the page. HTML5
supports inline SVG, so you can directly use <svg>your code</svg> inside <body> to create vector graphics. But I had the task of creating them in the script. So I have put forward a small example and here is how to do it.

To create a vector circle of radius 50,

var svgNS = "http://www.w3.org/2000/svg";

var myCircle = document.createElementNS(svgNS,"circle");
myCircle.setAttributeNS(null,"id","mycircle");
myCircle.setAttributeNS(null,"cx",100);
myCircle.setAttributeNS(null,"cy",100);
myCircle.setAttributeNS(null,"r",50);
myCircle.setAttributeNS(null,"fill","black");
myCircle.setAttributeNS(null,"stroke","none");

Read More »