The bounty expires in 6 days. Answers to this question are eligible for a reputation bounty.
user16780927 wants to draw more attention to this question.
I have a single axis line chart. The user would choose the year from a dropdown and the loan_type from another dropdown. The chart then should load the 12-months record of annual_payment and scheduled_payment, both as linear lines.
Dashboard.vue
<div class="card-header bg-white p-2">
<div class="row justify-content-md-between">
<div class="col-12 col-md-7 d-md-flex justify-content-md-end">
<div class="input-group custom-select2">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Loan Type:</span>
</div>
<select2
id="selected_loan_type_annual_payment"
name="selected_loan_type_annual_payment"
class="form-control"
v-model="is_inputs.annual_payment.loan_type"
@input="selectLoanType($event)"
>
<option
v-for="(item, index) in types"
:key="item.id"
:selected="item.id==is_inputs.annual_payment.loan_type"
:value="item.id">{{ item.text }}
</option>
</select2>
</div>
</div>
<div class="col-12 col-md-4 d-md-flex justify-content-md-end">
<div class="input-group custom-select2">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Year:</span>
</div>
<select2
id="selected_year_annual_payment"
name="selected_year_annual_payment"
class="form-control"
v-model="is_inputs.annual_payment.year"
@input="selectPaymentYear($event)"
>
<option
v-for="(item, index) in years"
:key="item.id"
:selected="item.id==is_inputs.annual_payment.year"
:value="item.id">{{ item.text }}
</option>
</select2>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row justify-content-center">
<div
class="col-md-12"
v-bind:class="{
load_chart : !is_loaded.annual_payment,
: is_loaded.annual_payment
}"
>
<line-chart
v-if="is_loaded.annual_payment"
:width="100" :height="60"
:chartdata="chart_data.annual_payment"
:options="chart_options.annual_payment">
</line-chart>
</div>
</div>
</div>
.
.
<script>
export default {
data() {
return {
is_inputs: {
annual_payment: {
year: "",
loan_type: "",
}
},
is_loaded: {
annual_payment: true,
},
chart_options: {
annual_payment: {
responsive: true,
maintainAspectRatio: true,
legend: {
display: true,
position: bottom ,
labels: {boxWidth: 0}
},
scales: {
yAxes: [{
ticks: {
min: 0,
reverse: false,
beginAtZero: true
}
}]
}
}
},
chart_data: {
annual_payment: {
labels: [ Jan , Feb , Mar , Apr , May , Jun , Jul , Aug , Sep , Oct , Nov , Dec ],
datasets: [
{
label: [],
backgroundColor: [ #54478c , #2c699a , #048ba8 , #0db39e , #16db93 , #83e377 , #b9e769 , #efea5a , #f1c453 , #f35b04 , #bf0603 , #941b0c ],
data: [],
borderColor: "#0db39e",
pointBorderColor: "#bf0603",
pointBackgroundColor: "#bf0603",
pointHoverBackgroundColor: "#bf0603",
pointHoverBorderColor: "#bf0603",
pointBorderWidth: 6,
pointHoverRadius: 6,
pointHoverBorderWidth: 1,
pointRadius: 3,
fill: false,
borderWidth: 2,
tension: 0.1
},
{
label: [],
backgroundColor: [ #2c699a , #54478c , #0db39e , #048ba8 , #83e377 , #16db93 , #efea5a , #b9e769 , #f35b04 , #f1c453 , #941b0c , #bf0603 ],
data: [],
borderColor: "#0db39F",
pointBorderColor: "#bf0604",
pointBackgroundColor: "#bf0604",
pointHoverBackgroundColor: "#bf0604",
pointHoverBorderColor: "#bf0604",
pointBorderWidth: 6,
pointHoverRadius: 6,
pointHoverBorderWidth: 1,
pointRadius: 3,
fill: false,
borderWidth: 2,
tension: 0.1
}
]
}
},
selectLoanType(e) {
this.is_inputs.annual_payment.loan_type = e;
this.getCreditAnnualPayment();
},
selectPaymentYear(e) {
this.is_inputs.annual_payment.year = e;
this.getCreditAnnualPayment();
},
getCreditAnnualPayment() {
this.is_loaded.annual_payment = false;
var loan_type = this.is_inputs.annual_payment.loan_type;
var year = this.is_inputs.annual_payment.year;
var data = { loan_type : loan_type, year : year};
var url = this.routes.annual_payment;
axios
.post(url, data)
.then(response => {
var json = response.data;
this.chart_data.annual_payment.datasets[0].label = year;
this.chart_data.annual_payment.datasets[0].data = json;
this.is_loaded.annual_payment = true;
})
.catch(err => {
console.log( err ,err);
this.is_loaded.annual_payment = true;
});
}
}
}
}
</script>
AjaxDataController.php
.
.
public function annual_payment(Request $request) {
$data = [];
$selected_loan_type = $request->loan_type;
$selected_year = $request->year;
for($i=0; $i<12; $i++) {
$dt = CarbonCarbon::createFromFormat( Y-n , $selected_year. - .($i+1))->format( Y-m );
$payment_amount = AppPayment::where( loan_type_id , $selected_loan_type)
->where( paid_at , like , $dt. % )->sum( amount );
$scheduled_amount = AppPayment::where( loan_type_id , $selected_loan_type)
->sum( scheduled_amount );
$data[$i] = [$payment_amount, $scheduled_amount];
}
return $data;
}
.
.
It would be a great help if somebody could point out where did I went wrong and how do I make the correction because at the moment the chart would not load any line.