Chart Creation
Design the form
1. Open the editor (e.g. Notepad++).
2. Type the following code in the editor.
4. Save the file as “form.php” in the “chart” folder.
5. Start the WAMP server. Open the browser and enter the following URL:
Create a table in MySQL datatabe
8. In the database, create a table “cricket” with three columns(pid int(11) AUTO_INCREMENT, player varchar(40), wickets int(5)).
Download canvas.min.js
9. Download the javascript file “canvas.min.js” from the following URL: https://www.cdnpkg.com/canvasjs/file/canvas.min.js/?id=26465
C:\wamp\www\chart\
11.Copy and paste the javascript file within the folder “js”.
12.Specify the script file in <head> as:
<script src=”/chart/js/canvasjs.min.js”> </script>
Note: Instead of downloading javascript file, If we are in online then we can also add the HTML snippet with in the <head> as:
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.4.1/canvas.min.js”></script>
Create the Chart
13. Type the following code in the editor to create the chart.
<?php
mysql_connect(“localhost”,”root”,””);
mysql_select_db(“chartdb”);
$d=mysql_query(“select * from cricket”);
$dp=array();
while($r=mysql_fetch_array($d))
{
$p=array(“label”=>$r[1],”y”=>$r[2]);
array_push($dp,$p);
}
?>
<!DOCTYPE HTML>
<html>
<head>
<style>
a
{
position:absolute;
top:150px;
left:10px;
text-decoration:none;
font-weight:bold;
color:green;
}
#c
{
position:absolute;
top:20px;
left:300px;
width:1000px;
height:600px;
}
</style>
<script src=”/chart/js/canvasjs.min.js”></script>
<script type=”text/javascript”>
window.onload=function()
{
var ch=new CanvasJS.Chart(“c”,
{
theme:”light1″,//light2,dark1,dark2
animationEnabled:true,
showInLegend: true,
title:{text:”Players and Wickets”,fontColor: “#008B8B”,fontSize: 32},
axisX:{title:”Players”,titleFontColor: “green”,labelAngle: -30},
axisY:{title:”Wickets”,titleFontColor: “green”},
data:[{type:”column”,//bar,spline,area,pie,doughnut,line
dataPoints:<?php echo json_encode($dp,JSON_NUMERIC_CHECK); ?>
}]
});
ch.render();
}
</script>
</head>
<body>
<a href=”/chart/form.php”>Click here to enter the data</a>
<div id=”c”></div>
</body>
</html>
Run the Program
17. Now, click the link “Click here to display the chart”.
