Help Needed : Creating dynamic charts with php and calling ajax on other page !


princeoo7

On a Journey called Life :P
Adept
Jun 10, 2010
1,144
43
61
Mumbai
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 :p

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 :arghh:

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">&nbsp;ABSENT &nbsp;&nbsp;';}
                            else{
                                echo '<span style="background: green">&nbsp;PRESENT&nbsp;';
                            }
                        ?>
                    </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>&nbsp;&nbsp;&nbsp;<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 :angelic:
 
Last edited:

challapradyumna

Well-Known Member
Adept
Aug 11, 2011
1,286
24
58
28
Bangalore
This may be late but you need to make the code in the question more specific. Highlight where you are facing the problem. As far as i can understand you are trying to load an entire file from JS and display it . Instead you need to just get the required data from the process file in JSON/XML and then just fill the data parts that needed to be updated in the daily reports and reload the graph. Move the entire JS into the reports file and just make the process file just output a JSON based on the query . Hope it helps.