I am tryng to display data using Apex Chart, the chart is working fine dynamically if its only DATE type. When I use date range search (switching to DATETIME dynamically) to query database the AREA chart does not show chart but only shows figures when you hover on the chart, on the other hand if i change type to BAR it works fine.
What could be wrong? What am I missing?
Please see the image here attached
here is the PHP code
$months = array();
$value1 = array();
// $value2 = array(); ...etc
for( $m = 1; $m <= 12; $m++ ) {
try{
// Check if TO DATE AND FROM DATE fields are not empty
if(!empty($from_date) || !empty($to_date)) {
$selectdate1 = strtotime($from_date);
$selectdate2 = strtotime($to_date);
for ($nowDate = $selectdate1; $nowDate <= $selectdate2;
$nowDate += (86400)) {
$actArrayDate = date('Y-m-d', $nowDate);
$stmt = $conn->prepare("SELECT SUM(value) as value1 etc FROM table WHERE (date(month) IN (:timdate)) AND country LIKE :country AND status = :status");
$stmt->execute(['timdate'=>$actArrayDate, 'country'=>$country, 'country'=>'%'.$country.'%', 'status'=>1]);
}
} //end check dates
else{
// Check if both country and continent fields are not empty
$stmt = $conn->prepare("SELECT SUM(value) as value1 etc FROM table WHERE MONTH(month)=:month AND YEAR(month)=:year AND country LIKE :country AND status = :status");
$stmt->execute(['month'=>$m, 'year'=>$year, 'country'=>'%'.$country.'%', 'status'=>1]);
}
$valueRow = $stmt->fetch(PDO::FETCH_ASSOC);
$value1 = $valueRow['value1'];
// .....value2 etc....
array_push($value1, number_format( sprintf( '%.2f', $value1), 2, '.', '' ));
// ..........valu2 .....etc
} // end try
catch(PDOException $e){
$_SESSION['error'] ='Something went wrong with the data'.$e->getMessage();
}
$num = str_pad( $m, 2, 0, STR_PAD_LEFT );
$month = date('M', mktime(0, 0, 0, $m, 1));
array_push($months, $month);
}
$value1 = json_encode($value1);
// $value2 = json_encode($value2);...etc
// if (isset($_GET['from_date']) || isset($_GET['to_date'])) {
if(!empty($from_date) || !empty($to_date)) { //Check if dates are not empty
$selectedFromDate = $_GET['from_date'];
$selectedToDate = $_GET['to_date'];
$dateArray = array();
$fromDate1 = strtotime($selectedFromDate);
$toDate2 = strtotime($selectedToDate);
for ($currentDate = $fromDate1; $currentDate <= $toDate2;
$currentDate += (86400)) {
$dateDetails = date('Y-m-d', $currentDate);
$dateArray[] = $dateDetails;
}
// Display the dates in array format
$months = json_encode($dateArray);
$apexType = "datetime";
$columWidth ='columnWidth: 300';
}
// }
else{
$months = json_encode($months);
$apexType = "date";
$columWidth ='';
}
And here is the apex js code
var options = {
series: [ { name: "Value1 Label", data: <?php echo $value1; ?> }
// { name: "Value2 Label", data: <?php echo $value2; ?>......etc },
],
chart: {
height: 350,
stacked: true,
type: 'area'
},
dataLabels: {
enabled: false
},
colors: ['#color1', //color2...etc
],
stroke: { curve: "smooth", lineCap: "round", width: 0 },
fill: { type: "solid" },
xaxis: {
type: "<?php echo $apexType ?>",
categories: <?php echo $months; ?>,
labels: { style: { colors: colors.mutedColor, cssClass: "text-muted", fontFamily: base.defaultFontFamily } },
},
yaxis: {
labels: { style: { colors: colors.mutedColor, cssClass: "text-muted", fontFamily: base.defaultFontFamily } },
},
legend: { position: "bottom", horizontalAlign: 'center', fontFamily: base.defaultFontFamily, fontWeight: 400,
labels: { colors: colors.mutedColor },
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
var chart = new ApexCharts(document.querySelector("#areaChart"), options);
chart.render();
