CODEWITHSUNDEEP
phpjqueryajaxhighcharts
Ahmad
Ahmad

Reputation: 359

Generate HighChart between two dates using Ajax

I am trying to fetch data between two dates using Ajax and displaying the graph using HighCharts. Below is what i have tried so far;

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link href="../webroot/css/cake.generic.css" type="text/css" rel="stylesheet">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                //default

                $('#dynamic_data').change(function() {
                    var startdate = document.getElementById('startdate').value;
                    var enddate = document.getElementById('enddate').value;

                });

                var options = {
                    chart: {
                        renderTo: 'container',
                        type: 'column'
                    },
                    title: {
                        text: 'Highcharts Chart PHP with MySQL Example',
                        x: -20 //center
                    },
                    subtitle: {
                        text: 'Sumber : Jabatan XYZ',
                        x: -20
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: {
                        title: {
                            text: 'Jumlah Pelawat'
                        },
                        plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                        pointFormat: '<span style="color:{point.color}">{point.name}</span>:<b>{point.y}</b> of total<br/>'
                    },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '{point.y}'
                            }
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -40,
                        y: 100,
                        floating: true,
                        borderWidth: 1,
                        shadow: true
                    },
                    series: []
                };
                function getAjaxData(id) {
                    $.getJSON("data/data-basic-colm-ajax.php", function(json) {
                        options.xAxis.categories = json[0]['data']; //xAxis: {categories: []}
                        options.series[0] = json[1];                        
                        chart = new Highcharts.Chart(options);
                    });
                }

            });
        </script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>

    </head>
    <body>
        <a class="link_header" href="/highcharts/">&lt;&lt; Back to index</a>
        <div class="menu_top" >

        <div id="dynamic_data">

                <input type="date" id="startdate">
                <input type="date" id="enddate">
           </div>
        </div>
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
    </body>
</html>

Here is my data-basic-colm-ajax.php file,

<?php

require '../../conn/connection.php';

$startdate = $_GET['startdate'];
$enddate = $_GET['enddate'];


$result = mysql_query('SELECT DISTINCT(membername), COUNT(membername)
AS member 
FROM responses
WHERE timerecorded>=" . $startdate . " AND AND timerecorded<=" . $enddate . " GROUP BY membername;');

$bln = array();
$bln['name'] = 'Bulan';
$rows['name'] = 'Jumlah Pelawat';
while ($r = mysql_fetch_array($result)) {
    $bln['data'][] = $r['membername'];
    $rows['data'][] = $r['member'];
}
$rslt = array();
array_push($rslt, $bln);
array_push($rslt, $rows);
print json_encode($rslt, JSON_NUMERIC_CHECK);

mysql_close($con);

Since i am new to Ajax so any help will be appreciated.

Upvotes: 2

Views: 909

Answers (1)

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

I'm not sure why you want change event on div, try change into this :

<div id="dynamic_data">
   <input type="date" id="startdate">
   <input type="date" id="enddate">
   // add button
   <input type="button" id="myBtn">
</div>

JS

// this function called after button was clicked
$('#myBtn').click(function(){
   var startdate = $('#startdate').val(),
      enddate   = $('#enddate').val();
     getAjaxData(startdate, enddate);
});

// i'm assume the queries from database already worked out
// simply use this below code to send parameter during request
function getAjaxData(startdate, enddate) {
  $.getJSON( "data/data-basic-colm-ajax.php", { startdate: startdate, enddate: enddate }, function(json) {
     options.xAxis.categories = json[0]['data']; //xAxis: {categories: []}
     options.series[0] = json[1];                        
     chart = new Highcharts.Chart(options);
  });
}

If you wanna display the chart at first load page, then call getAjaxData(startdate, enddate) with default value for date.

Upvotes: 1

Related Questions