Chartjs-Multiple line on x-axis in a linear chart did not show

by

1👍

✅

In datasets you have 2 objects. Both objects have data property.

You’re assigning the array of [$payment_amount, $scheduled_amount] to the first object’s data property.

I think what you want to do is assign $payment_amount to the first object and $scheduled_amount to the second object.

Something like this

 var json = response.data;
 this.chart_data.annual_payment.datasets[0].label = year;
 this.chart_data.annual_payment.datasets[0].data = json[0];
 this.chart_data.annual_payment.datasets[1].data = json[1];
 this.is_loaded.annual_payment = true;

0👍

AjaxDataController.php

public function annual_payment(Request $request) {
    $data = [];
    $data1 = [];
    $data2 = [];
    $selected_loan_type = $request->loan_type;
    $selected_year = $request->year;

    for($i=0; $i<12; $i++) {
        $dt = \Carbon\Carbon::createFromFormat('Y-n', $selected_year.'-'.($i+1))->format('Y-m');
        $payment_amount = \App\Payment::where('loan_type_id', $selected_loan_type)
            ->where('paid_at', 'like', $dt.'%')->sum('amount');
        $scheduled_amount = \App\Payment::where('loan_type_id', $selected_loan_type)
            ->sum('scheduled_amount');
        $data1[$i] = $payment_amount;
        $data2[$i] = $scheduled_amount;
    }  
    $data = [
        'payment_amount' => $data1,
        'monthly_amount' => $data2
    ];
    return $data;
}

Dashboard.vue

.
.
            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.payment_amount;
              this.chart_data.annual_payment.datasets[1].data = json.monthly_amount;
              this.is_loaded.annual_payment = true;
            })
            .catch(err => {
              console.log('err',err);
              this.is_loaded.annual_payment = true;
            });
.
.

Leave a comment