The absence of multiple lines on the x-axis in the linear chart was noticeable

Question

The absence of multiple lines on the x-axis in the linear chart was noticeable

Currently, I am facing an issue with loading a single axis line chart on my Dashboard.vue. The functionality involves users selecting a 'year' and a 'loan_type' from dropdown menus, after which the chart should display a 12-month record of 'annual_payment' and 'scheduled_payment' as linear lines.

Dashboard.vue

<div class="card-header bg-white p-2">
    <div class="row justify-content-md-between">
       ...
    </div>
</div>
<div class="card-body">
  ...
</div>

.
.

<script>
  export default {
    ...
  }
</script>

AjaxDataController.php

.
.

public function annual_payment(Request $request) {
    ...
}

.
.

If anyone could provide insight on where my mistake lies and how to correct it because the chart is not loading any data at the moment, it would be greatly appreciated.

javascript vue.js charts chart.js linechart

Answer 1

Answer №1

Within datasets, there are 2 distinct objects. Each object is equipped with a data property.

The array of

[$payment_amount, $scheduled_amount]

is being assigned to the data property of the first object.

To clarify, it seems like you intend to assign $payment_amount to the first object and $scheduled_amount to the second object.

Consider the following approach

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

Answer 2

Within datasets, there are 2 distinct objects. Each object is equipped with a data property.

The array of

[$payment_amount, $scheduled_amount]

is being assigned to the data property of the first object.

To clarify, it seems like you intend to assign $payment_amount to the first object and $scheduled_amount to the second object.

Consider the following approach

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

Answer 3

Answer №2

AjaxDataController.php

public function calculate_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(api_url, data)
            .then(response => {
              var json_data = response.data;
              this.chart_data.annual_payment.datasets[0].label = selected_year;
              this.chart_data.annual_payment.datasets[0].data = json_data.payment_amount;
              this.chart_data.annual_payment.datasets[1].data = json_data.monthly_amount;
              this.is_loaded.annual_payment = true;
            })
            .catch(error => {
              console.log('error',error);
              this.is_loaded.annual_payment = true;
            });
.
.

Answer 4

AjaxDataController.php

public function calculate_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(api_url, data)
            .then(response => {
              var json_data = response.data;
              this.chart_data.annual_payment.datasets[0].label = selected_year;
              this.chart_data.annual_payment.datasets[0].data = json_data.payment_amount;
              this.chart_data.annual_payment.datasets[1].data = json_data.monthly_amount;
              this.is_loaded.annual_payment = true;
            })
            .catch(error => {
              console.log('error',error);
              this.is_loaded.annual_payment = true;
            });
.
.

The absence of multiple lines on the x-axis in the linear chart was noticeable

Answer №1

Answer №2

Similar questions

Error Message: Unhandled TypeError - Unable to access property 'setState' as it is null in React

Guide on dynamically changing the color of polymer 1.0 paper-button from an array of colors

Ensure that the context is used to effectively clear any existing data from the previous bar chart

Incorporating OpenLayers and TypeScript: Issue with Event.map.forEachFeatureAtPixel, where the argument type is not compatible with the parameter type

Obtaining a response in string format using the $.ajax function

Uncaught TypeError: Cannot create new instances of User - Node.js server not recognizing User as a constructor

Utilizing Regular Expressions in Sails.js Routing

Can one validate a single route parameter on its own?

the process of triggering animation to start automatically when a button is clicked in Web Development

Unable to submit /api/sentiment

Seeking assistance with downloading a collection of images as a zipped file using AngularJS

Using Vue to transfer data from one component to another by passing props to an element

Designing a file upload progress bar with the help of jquery and ajax

How can I ensure that the form submit event is delayed until the onChange event is completed when using jQuery?

Is the javascript function I created not recognized as "a function"?

What causes these queries to function separately but fail when combined?

Contrasts in the immutability strategies of Vuex and Redux

Angular 8 delivers an observable as a result following a series of asynchronous requests

Getting a value from a Child component to a Parent component in Nuxt.js - a step-by-step guide

Managing the position of the caret within a content-editable div