I am plotting a graph using two data x axis is date and y axis is amount. I am able to display graph without any issue but I trying to display two things and I described it in my expectation below but I am not sure its achievable or not.
Sample Data
2019-01-01---10
2019-02-01---20
2019-03-01---30
Code
<?Php
$dbhost = '';
$dbname = '';
$dbuser = '';
$dbpass = '';
try{
$dbcon = new PDO("mysql:host={$dbhost};dbname={$dbname}",$dbuser,$dbpass);
$dbcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}catch(PDOException $ex){
die($ex->getMessage());
}
$stmt=$dbcon->prepare("select testdate,balance from test order by testdate");
$stmt->execute();
$json= [];
$json2= [];
while ($row=$stmt->fetch(PDO::FETCH_ASSOC)) {
extract($row);
$json[]= $testdate;
$json2[]= (int)$balance;
}
?>
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>Test</title>
</head>
<body>
<h1>Mortgage Payment</h1>
<div style="width: 1400px; height: 900px;">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script type="text/javascript">
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
axisY: {
title: "Price in USD",
titleFontSize: 24,
prefix: "$"
},
// The data for our dataset
data: {
labels: <?php echo json_encode($json); ?>,
datasets: [{
label: "Amount in Dollars ($) ",
backgroundColor: '#75A58C',
borderColor: 'BLACK',
data: <?php echo json_encode($json2); ?>,
}]
},
// Configuration options go here
options: {}
});
</script>
</body>
</html>
Expectation
I am expecting two results from this graph
1) Display y axis value in the graph only for the current month.
2) Data will be for every month for the next two years. If this data is populated then background color should be different and the remaining months the background color should be different.