Update chart with new date

[rcweb]

Hello,

I try to update chart when user select new date from calendar.

var startDate = picker.startDate.format(‘YYYY-MM-DD’);
var endDate = picker.endDate.format(‘YYYY-MM-DD’);

i try in php page use GET but not work

if(isset($_GET[‘startDate’])){

$startDate = $_GET[‘startDate ‘];
$endDate = $_GET[‘endDate ‘];
…
}

How can send new date with getJSON from html page to PHP page, and how can it be received?

[Manoj Mohan]

@rcweb,

getJSON function is used to load/get the JSON from the URL not to send the data to PHP page. If you want to pass the date selected from calendar and fetch the data based on it, you need to perform post or get request using $.ajax to an API created in PHP which receives the date and return the data. You can then fetch the data received from the API using $.getJSON and pass it on the chart options to render the chart.

If you are still facing the issue, kindly create sample project reproducing the issue and share it with us over Google-Drive or Onedrive along with sample data so that we can look into your code, run it locally at our end to understand the scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS

[rcweb]

Thank you very much for your reply to my inquiry and your offer of help Mohan.
i try use post to send start and end date user select to php page to get date from database base date user selected:

var startDate = picker.startDate.format(‘YYYY-MM-DD’);
var endDate = picker.endDate.format(‘YYYY-MM-DD’);
// alert(startDate = ${startDate}, endDate = ${endDate});

$.ajax({
url : 'chart.php',
type : 'POST',
data : {startDate:startDate,endDate:endDate},
success : function(data) {
 $.getJSON("chart.php", function (data) {

var chart = new CanvasJS.Chart("chartContainer", {
 data: [
 {
							   
 indexLabel: " {y}",
 indexLabelFontSize: 16,

 dataPoints: data
 }
 ]
 });

  chart.render();
 });
 }
 });

But the chart does not appear.
this php code :

 include("config.php");

if (isset($_POST['startDate'])) {

$startDate = $_POST['startDate'];
$endDate = $_POST['endDate'];
//echo   $startDate;
 
$data_points = array();

    $result = mysqli_query($con, "SELECT sub, main, SUM(amount) AS total FROM data WHERE payment_date BETWEEN '$startDate' AND '$endDate' GROUP BY sub, main order by total desc LIMIT 15");

    while($row = mysqli_fetch_array($result))
    {        
        $point = array("label" => $row['sub'] , "y" => $row['total']);

        array_push($data_points, $point);        
    }

    echo json_encode($data_points, JSON_NUMERIC_CHECK);

}

[Manoj Mohan]

@rcweb,

Parsing data received from the post request & passing it to chart-option before rendering it should work fine in your case. You are trying to perform another request inside the success of AJAX request, which is redundant. Please take a look at the code-snippet below.

$.ajax({
  url : 'chart.php',
  type : 'POST',
  data : {startDate:startDate,endDate:endDate},
  success : function(data) {
    var chart = new CanvasJS.Chart("chartContainer", {
      data: [
        {

          indexLabel: " {y}",
          indexLabelFontSize: 16,

          dataPoints: data
        }
      ]
    });

    chart.render();

  }
});

If you are still facing the issue, kindly create sample project reproducing the issue and share it with us over Google-Drive or Onedrive along with sample data so that we can look into your code, run it locally at our end to understand the scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS