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….
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. Continue reading “Animated growing pie chart with Rapahel JS”
Alright, now back to the detection code. Just copy/paste this inside your window load / body load or in case of JQuery the $(document).ready() method,
document.write('Your browser does not support SVG!');
So, if your browser does not support SVG, then it will not process further (in case your application cannot live without SVG). But if you have a back up plan and you can live without SVG in your browser, then you can add an else block along with the if so that you can write your backup logic.
Well, the code is very simple. Inside the if condition I create a SVG element using the standard DOM createElement() method. Now this will create a <svg></svg> object. Now next thing I do is to check if the getAttributeNS() method is defined or not. If you browser does not support <svg> then there is no way it will understand getAttributeNS() and that’s the catch.
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,
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.
Continue reading “Controlling SVG Pie Chart with a slider control”
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,
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.
Continue reading “Creating a SVG Pie Chart – HTML5”
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
While I was working on a HTML5 project I found this problem of creating SVG (Scalable Vector Graphics) elements
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");