Hello Members,
I am on the verge of completing Final Year B.Sc.I.T Project and need to add reporting module in it!
The Project is an College ERP System !
I need to create many pages with can create reports representing data in pie, doughnut, bar etc alot of them
I have tried Highcharts, ChartJS !
I am able to create charts with Highcharts easly but I was not able to workout with ChartJS i.e. passing parameters to it by php
Now the problem is that this file is named as process_report.php in process : "process/process_report.php".
Plus i don't know how to add a loading animation like the one flipkart have. I want to add like that loading animation when my data is been called !
module is : AcademiaModule !
so in AcademiaModule / process / process_report.php !
in "AcademiaModule" there is a page called "dailyreport.php" which pass value to" process_report.php" and calls back the result and i am getting the table but the chart is not getting generated with ajax !
if i navigate to that page in browser the i am getting the chart !
I did some search on google but even after applying the solution i am failing !
The reason is that the javascript and its related file are not getting executed ! I have tried turning off the cache of ajax and other stuff but i am failing
so what should i do ?
ajax code on dailyreport.php :
code for my process_reports.php :
Please Help Me Gurus
I am on the verge of completing Final Year B.Sc.I.T Project and need to add reporting module in it!
The Project is an College ERP System !
I need to create many pages with can create reports representing data in pie, doughnut, bar etc alot of them
I have tried Highcharts, ChartJS !
I am able to create charts with Highcharts easly but I was not able to workout with ChartJS i.e. passing parameters to it by php
Now the problem is that this file is named as process_report.php in process : "process/process_report.php".
Plus i don't know how to add a loading animation like the one flipkart have. I want to add like that loading animation when my data is been called !
module is : AcademiaModule !
so in AcademiaModule / process / process_report.php !
in "AcademiaModule" there is a page called "dailyreport.php" which pass value to" process_report.php" and calls back the result and i am getting the table but the chart is not getting generated with ajax !
if i navigate to that page in browser the i am getting the chart !
I did some search on google but even after applying the solution i am failing !
The reason is that the javascript and its related file are not getting executed ! I have tried turning off the cache of ajax and other stuff but i am failing
so what should i do ?
ajax code on dailyreport.php :
Code:
<script src="../js/ajax.jquery.min.js"></script>
<script>
$.ajaxSetup({
// Disable caching of AJAX responses
cache: false
});
$(document).ready(function(){
$("button").click(function(){
var f = $("#first_name").val();
var r = $("#roll_no").val();
var y = $("#year").val();
var c = $("#course").val();
var l = $("#lecture").val();
var d = $("#date").val();
var d1 = $("#date1").val();
var d2 = $("#date2").val();
var url = "process/process_reports.php";
$.post(
url ,
{
roll_no : r,
course : d,
year : y,
first_name : f,
course : c,
lecture : l,
date : d,
date1 : d1,
date2 : d2
},
function(data,status){
// $('#result').html(data);
$( "#result" ).load( "process/process_reports.php" );
});
});
});
</script>code for my process_reports.php :
Code:
<?php
require_once("../../../includes/initialize.php");
// $roll_no = $_POST['name2check'];
$lecture = '';
$course = trim($_POST['course']);
$year = trim($_POST['year']);
$roll_no = trim($_POST['roll_no']);
$first_name = trim($_POST['first_name']);
$lecture = trim($_POST['lecture']);
$date = trim($_POST['date']);
$date1 = trim($_POST['date1']);
$date2 = trim($_POST['date2']);
$type = '';
$sql = "SELECT A.roll_no, A.first_name, A.middle_name, A.last_name, B.Status, B.Lect_id, B.date FROM students A, attendance B WHERE A.id=B.stud_id AND ";
/*/////////////////////////////////////////////////////////////////*/
/*======= Departement search starts =======*/
if(strlen($course) > 0 ){
$sql.= " A.stud_course ='$course' and ";
}
/*======= Departement search ends =======*/
/*/////////////////////////////////////////////////////////////////*/
/*======= Year search starts =======*/
if(strlen($year) > 0 ){
$sql.= " A.year_applied ='$year' and ";
}
/*======= Year search ends =======*/
/*/////////////////////////////////////////////////////////////////*/
/*======= Date search starts =======*/
if(strlen($date) > 0 ){
$sql.= " B.date ='$date' and ";
}
if(strlen($date1) > 0 && strlen($date2) > 0 ){
$sql.= " B.date >='$date1' and B.date <='$date2' and ";
}
/*======= Date search ends =======*/
/*/////////////////////////////////////////////////////////////////*/
/*======= Lecture search starts =======*/
if(strlen($lecture) > 0 ){
$sql.= " B.Lect_id ='$lecture' and ";
}
/*======= Lecture search ends =======*/
/*/////////////////////////////////////////////////////////////////*/
/*======= Roll No. search starts =======*/
if(strlen($roll_no) > 0 ){
$sql.= " A.roll_no ='$roll_no' and ";
}
/*======= Roll No. search ends =======*/
/*/////////////////////////////////////////////////////////////////*/
/*======= Name search starts =======*/
$first_name=ltrim($first_name);
$first_name=rtrim($first_name);
if(strlen($first_name)>0){
if($type<>"any"){
$sql .=" first_name='$first_name'";
}else{
$kt=split(" ",$first_name);//Breaking the string to array of words
// Now let us generate the sql
while(list($key,$val)=each($kt)){
if($val<>" " and strlen($val) > 0){$sql .= " name like '%$val%' or ";}
}// end of while
$sql=substr($sql,0,(strLen($sql)-3));
// this will remove the last or from the string.
} // end of if else based on type value
$sql.=" and ";
}// end of if area , if search_text value is entered
/*======= Name search ends =======*/
/*/////////////////////////////////////////////////////////////////*/
/*======= Framing & Executing query starts =======*/
$sql =substr($sql,0,(strLen($sql)-4));
echo $sql;
echo "<br><br>";
$Student = mysql_query($sql);
$stud = $Student;
/*======= Framing & Executing query ends =======*/
/*/////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////*/
$sql = "SELECT count(B.status) as 'absent' FROM students A, attendance B WHERE status='0' AND ";
/*/////////////////////////////////////////////////////////////////*/
/*======= Departement search starts =======*/
if(strlen($course) > 0 ){
$sql.= " A.stud_course ='$course' and ";
}
/*======= Departement search ends =======*/
/*/////////////////////////////////////////////////////////////////*/
/*======= Year search starts =======*/
if(strlen($year) > 0 ){
$sql.= " A.year_applied ='$year' and ";
}
/*======= Year search ends =======*/
/*/////////////////////////////////////////////////////////////////*/
/*======= Date search starts =======*/
if(strlen($date) > 0 ){
$sql.= " B.date ='$date' and ";
}
if(strlen($date1) > 0 && strlen($date2) > 0 ){
$sql.= " B.date >='$date1' and B.date <='$date2' and ";
}
/*======= Date search ends =======*/
/*/////////////////////////////////////////////////////////////////*/
/*======= Lecture search starts =======*/
if(strlen($lecture) > 0 ){
$sql.= " B.Lect_id ='$lecture' and ";
}
/*======= Lecture search ends =======*/
/*/////////////////////////////////////////////////////////////////*/
/*======= Roll No. search starts =======*/
if(strlen($roll_no) > 0 ){
$sql.= " A.roll_no ='$roll_no' and ";
}
/*======= Roll No. search ends =======*/
/*/////////////////////////////////////////////////////////////////*/
/*======= Name search starts =======*/
$first_name=ltrim($first_name);
$first_name=rtrim($first_name);
if(strlen($first_name)>0){
if($type<>"any"){
$sql .=" first_name='$first_name'";
}else{
$kt=split(" ",$first_name);//Breaking the string to array of words
// Now let us generate the sql
while(list($key,$val)=each($kt)){
if($val<>" " and strlen($val) > 0){$sql .= " name like '%$val%' or ";}
}// end of while
$sql=substr($sql,0,(strLen($sql)-3));
// this will remove the last or from the string.
} // end of if else based on type value
$sql.=" and ";
}// end of if area , if search_text value is entered
/*======= Name search ends =======*/
/*/////////////////////////////////////////////////////////////////*/
$sql =substr($sql,0,(strLen($sql)-4));
$r = mysql_query($sql);
while ($a=mysql_fetch_assoc($r)) {
$absent = $a['absent'];
$_SESSION['absent']=$absent;
};
/*/////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////*/
$sql = "SELECT count(B.status) as 'present' FROM students A, attendance B WHERE status='1' AND ";
/*/////////////////////////////////////////////////////////////////*/
/*======= Departement search starts =======*/
if(strlen($course) > 0 ){
$sql.= " A.stud_course ='$course' and ";
}
/*======= Departement search ends =======*/
/*/////////////////////////////////////////////////////////////////*/
/*======= Year search starts =======*/
if(strlen($year) > 0 ){
$sql.= " A.year_applied ='$year' and ";
}
/*======= Year search ends =======*/
/*/////////////////////////////////////////////////////////////////*/
/*======= Date search starts =======*/
if(strlen($date) > 0 ){
$sql.= " B.date ='$date' and ";
}
if(strlen($date1) > 0 && strlen($date2) > 0 ){
$sql.= " B.date >='$date1' and B.date <='$date2' and ";
}
/*======= Date search ends =======*/
/*/////////////////////////////////////////////////////////////////*/
/*======= Lecture search starts =======*/
if(strlen($lecture) > 0 ){
$sql.= " B.Lect_id ='$lecture' and ";
}
/*======= Lecture search ends =======*/
/*/////////////////////////////////////////////////////////////////*/
/*======= Roll No. search starts =======*/
if(strlen($roll_no) > 0 ){
$sql.= " A.roll_no ='$roll_no' and ";
}
/*======= Roll No. search ends =======*/
/*/////////////////////////////////////////////////////////////////*/
/*======= Name search starts =======*/
$first_name=ltrim($first_name);
$first_name=rtrim($first_name);
if(strlen($first_name)>0){
if($type<>"any"){
$sql .=" first_name='$first_name'";
}else{
$kt=split(" ",$first_name);//Breaking the string to array of words
// Now let us generate the sql
while(list($key,$val)=each($kt)){
if($val<>" " and strlen($val) > 0){$sql .= " name like '%$val%' or ";}
}// end of while
$sql=substr($sql,0,(strLen($sql)-3));
// this will remove the last or from the string.
} // end of if else based on type value
$sql.=" and ";
}// end of if area , if search_text value is entered
/*======= Name search ends =======*/
/*/////////////////////////////////////////////////////////////////*/
$sql =substr($sql,0,(strLen($sql)-4));
echo $sql;
$b = mysql_query($sql);
while ($p=mysql_fetch_assoc($b)) {
$present = $p['present'];
$_SESSION['present']=$present;
};
/*/////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////*/
$sql = "SELECT * FROM lectures ";
$choices = lectures::find_by_sql($sql);
foreach ($choices as $key ) {
echo "{Lecture : "."\"".$key->lect_name."\" ,"."val: 10},<br/>";
}
// echo "<pre>"; print_r($r); echo "</pre>";
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Doughnut</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="../../js/ChartJS/Demos/styles.css" rel="stylesheet" />
<script src="../../js/ChartJS/Lib/js/jquery-1.10.2.min.js"></script>
<script src="../../js/ChartJS/Lib/js/knockout-3.0.0.js"></script>
<script src="../../js/ChartJS/Lib/js/globalize.min.js"></script>
<script src="../../js/ChartJS/Lib/js/dx.chartjs.js"></script>
</head>
<body>
<h2>
<?php if(strlen($date) > 0 ) {
echo "Attendance for Date : ".$date;
} else if(strlen($date1) > 0 && strlen($date2) > 0 ) {
echo "Attendance form From :".$date1." To : ".$date2;
} else {
echo '';
} ?>
<table class="display-form-sub-2" style="border:0px; padding:10px; margin:2px ">
<tr class="display-form-sub-tr-2">
<td>
Roll Number
</td>
<td>
Full Name
</td>
<td >
Lecture
</td>
<?php if(strlen($date1) > 0 && strlen($date2) > 0 ){
echo ' <td>
Date
</td>';
} else {
};
?>
<td>
Attendance of Student
</td>
</tr>
<?php while ($r=mysql_fetch_assoc($stud)){ ?>
<tr>
<td>
<?php echo $r['roll_no']; ?>
</td>
<td>
<?php echo $r['first_name'].' '.$r['middle_name'].' '.$r['last_name']; ?>
</td>
<td >
<?php echo lectures::getlect($r['Lect_id']); ?>
</td>
<?php if(strlen($date1) > 0 && strlen($date2) > 0 ){
echo ' <td>
'.$r["date"].'
</td>';
} else {
};
?>
<td >
<?php
if ($r['Status'] == '0'){
echo '<span style="background: red"> ABSENT ';}
else{
echo '<span style="background: green"> PRESENT ';
}
?>
</td>
</tr>
<?php }
echo "This is the value of present :".$present."<br />";
echo "This is the value of absent :".$absent;
$attendance = '';
$id ='';
$lecture ='';
$date = '';
$date1 = '';
$date2 = '';
?>
</table>
<script>
$(function ()
{
var dataSource = [
// {region: "Asia", val: 4119626293},
// {region: "Africa", val: 1012956064},
// {region: "Northern America", val: 344124520},
// {region: "Latin America and the Caribbean", val: 590946440},
// {region: "Europe", val: <?php echo"787082222";?>},
// {region: "avd", val: 35104756},
{Lecture : "LECTURE II" ,val: 1023},
{Lecture : "LECTURE III" ,val: 345},
{Lecture : "LECTURE IV" ,val: 435},
{Lecture : "LECTURE V" ,val: 10345},
{Lecture : "LECTURE VI" ,val: 1230},
{Lecture : "LECTURE VII" ,val: 140},
'<?php foreach ($choices as $key ) {
echo "\{Lecture : "."\"".$key->lect_name."\" ,"."val: 10\},<br/>";
}
?>'
];
$("#chartContainer").dxPieChart({
dataSource: dataSource,
title: "The Population of Continents and Regions",
tooltip: {
enabled: true,
format:"millions",
percentPrecision: 2,
customizeText: function() {
return this.valueText + " - " + this.percentText;
}
},
legend: {
horizontalAlignment: "right",
verticalAlignment: "top",
margin: 0
},
series: [{
type: "Doughnut",
argumentField: "Lecture",
label: {
visible: true,
format: "millions",
connector: {
visible: true
}
}
}]
});
}
);
</script>
</div>
</div>
<div class="line"></div>
<div class="title">
<h1>Pie</h1> <h2>Simple</h2>
</div>
<div class="content">
<div class="pane">
<div class="long-title"><h3></h3></div>
<div id="chartContainer" style="width: 100%; height: 440px;"></div>
<div class="credits">Yuvraj Laxman Sonawane With ChartJS</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>amCharts tutorial: Loading external data</title>
</head>
<body>
<!-- prerequisites -->
<link rel="stylesheet" href="http://www.amcharts.com/lib/style.css" type="text/css">
<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<!-- cutom functions -->
<script>
AmCharts.loadJSON = function(url) {
// create the request
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
} else {
// code for IE6, IE5
var request = new ActiveXObject('Microsoft.XMLHTTP');
}
// load it
// the last "false" parameter ensures that our code will wait before the
// data is loaded
request.open('GET', url, false);
request.send();
// parse adn return the output
return eval(request.responseText);
};
</script>
<!-- chart container -->
<div id="chartdiv" style="width: 600px; height: 300px;"></div>
<!-- the chart code -->
<script>
var chart;
// create chart
AmCharts.ready(function() {
// load the data
var chartData = AmCharts.loadJSON('data.php');
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "http://www.amcharts.com/lib/images/";
chart.dataProvider = chartData;
chart.categoryField = "category";
chart.dataDateFormat = "YYYY-MM-DD";
// GRAPHS
var graph1 = new AmCharts.AmGraph();
graph1.valueField = "value1";
graph1.bullet = "round";
graph1.bulletBorderColor = "#FFFFFF";
graph1.bulletBorderThickness = 2;
graph1.lineThickness = 2;
graph1.lineAlpha = 0.5;
chart.addGraph(graph1);
var graph2 = new AmCharts.AmGraph();
graph2.valueField = "value2";
graph2.bullet = "round";
graph2.bulletBorderColor = "#FFFFFF";
graph2.bulletBorderThickness = 2;
graph2.lineThickness = 2;
graph2.lineAlpha = 0.5;
chart.addGraph(graph2);
// CATEGORY AXIS
chart.categoryAxis.parseDates = true;
// WRITE
chart.write("chartdiv");
});
</script>
</body>
</html>Please Help Me Gurus
Last edited:
