STATISTICS

canvax chart

The biggest advantage of canvax element is that we can create graphs & charts on fly, by using data fetched from dynamic sources. Here, i've used it to construct a pie chart showing the result of a simple (ajax)poll.

INDEX.PHP
canvax screenshot
<html>
<title>Sign up </title> 
<head><link rel="stylesheet" href="style.css" type="text/css" /></head>
<body>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=" style.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
$(document).ready(function(){

$(document).on("click", "button", function(){
 
 $.ajax({

 type: "POST",

 url: "vote.php",

 data:$("form").serialize(), 

 cache: false, 

 success: function(data){
 $("#poll").load("result.php");
 } });

return false;});
});
</script>
</head>
<body>
<div id="poll">
<h>Which is your favourite cricket team?</h>
<form>
<table>
<tr>
 <td>Australia : </td>
 <td><input type="radio" name="v" value="1"></td>
</tr>
<tr>
 <td>England : </td>
 <td><input type="radio" name="v" value="2"></td> 
</tr>
 <tr>
 <td>India : </td>
 <td><input type="radio" name="v" value="3"></td> 
</tr>
</table><br>
<button>Cast Vote</button>
</form>
</div>
</body> 
</html>
    

RECORD.TXT

It stores the total votes of each option in new lines.

canvax chart notepad


VOTE.PHP
<?php
$vote = $_POST['v'];
$flin = file("record.txt");
$i=0;
foreach($flin as $line)
{
$o[$i]=trim($line);
echo $o[$i]."end";
$i++;
}

switch($vote)
{
 case "1" : $o[0] = $o[0] + 1;
 break;
 
 case "2" : $o[1] = $o[1] + 1;
 break;
 
 case "3" : $o[2] = $o[2] + 1;
 break;
 
 default : break;
 
}
 
$text = "$o[0]\n$o[1]\n$o[2]";
echo $text;
$handle = fopen("record.txt","w");
fwrite($handle,$text);
fclose($handle); 
 ?>

RESULT.PHP
<?php

$flin = file("record.txt");

$o1 = $flin[0];
$o2 = $flin[1];
$o3 = $flin[2];
 
$tot=$o1+$o2+$o3;
 
$js_arr = json_encode($flin);

?>
<!DOCTYPE html>
<html>
<head>
<script>
 
var canvas = document.getElementById("can");
var context = canvas.getContext("2d");
var offset = 0;
var stat = php
echo $js_arr;
 ;

var tot = php echo $tot; 
var col = ["#F9E559","#6CCECB","#8EDC9D"]; 
var op=["Elephant", "Lion", "Zebra"];
var offt=0; 
var bis=0;
 
context.translate(40,40);
 
for (var i = 0; i < stat.length; i++) { 
 context.fillStyle = col[i]; 
 context.beginPath(); 
 context.arc(100, 100, 100, offset, offset + (Math.PI * 2 * (stat[i] / tot)), false);
 context.lineTo(100, 100);
 context.fill();
 context.font="bold 15px Arial"; 
 bis= (Math.PI * (stat[i] / tot))+bis; 
 context.fillStyle = "gray"; 
 context.translate(100,100);
 context.rotate(+bis);
 context.fillText(Math.round((stat[i] / tot)*100)+"%"+" ",105,2);
 context.rotate(-bis);
 context.translate(-100,-100);
 context.fillStyle =col[i];
 context.rect(250, 50+offt, 20, 20);
 context.fill();
 context.fillStyle ="gray";
 context.fillText(op[i],280,65+offt);
 
 offt=offt+30; 
 offset += Math.PI * 2 * (stat[i] / tot);
 bis=(Math.PI * (stat[i] / tot))+bis;
 
}
</script>
</head>
<body>
<canvas id="can" width="400" height="280" style="border:1px solid #d3d3d3;"></canvas>
</body>
</html>
STYLE.CSS
body
{
font-family: Arial;
font-size: 14px;  
}
#poll
{ 
width: 100%;
height: auto; 
text-align: center;
color:#333;  
}
table
{
margin:0 auto;  
color:#333;
}       


Leave a Comment  
Download Code(42)





All rights reserved, the content is copyrighted to the author.

RELATED POST