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.
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.
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 the image to see the live demo.
(The demo link has slight problems at the moment. I am fixing this right now. But you can view the source code in the browser and download it if needed.)
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.
Issue: I am noticing some issues with the select lists on the top. The Equal Intervals/Quantiles select list some times does not make any changes in the map. I will look into this, but you might want to test it.
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.
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");