Step-by-step guide on populating an array with variables in Vue.Js for creating a bar chart

Question

Step-by-step guide on populating an array with variables in Vue.Js for creating a bar chart

I am attempting to dynamically add values from variables to an array in order to create a bar chart using Vue.js

My initial attempt involved adding values like this: series[0]=ServiceArea1;.

This is my current progress:

barChart: {
    data: {
        series [0] : ServiceArea1Total,
        series [1] : ServiceArea2Total,                    
        series [2] : ServiceArea3Total,
        series [3] : ServiceArea4Total,
        series [4] : ServiceArea5Total,
        labels: ['Western', 'Northern', 'Eastern', 'Southern', 'Central'],
        series: [ ]                
    }
}

When I input the values as follows:

series: [[542, 443, 320, 780, 553],]

The output displays correctly. However, since I need to fetch values from a database, I cannot hardcode them.

Below is the relevant HTML code:

<div class="row">
    <div class="col-md-6">
        <chart-card :chart-data="barChart.data"
                    :chart-options="barChart.options"
                    :chart-responsive-options="barChart.responsiveOptions"
                    chart-type="Bar">
            <template slot="header">
                <h4 class="card-title">Statewide Service Area Kids</h4>
                <p class="card-category">Click on a service area to view more information</p>
            </template>
            <template slot="footer">
                <div class="legend">
                    <i class="fa fa-circle text-info"></i> Service Area

                </div>
                <hr>
                <div class="stats">
                    <i class="fa fa-check"></i> Data information certified
                </div>
            </template>
        </chart-card>
    </div>

javascript vue.js

Answer 1

Answer №1

The organization of the data returned from the database dictates the process. Essentially, you would iterate through an array or object retrieved from the database and use Array.push to add each element. For example: series.push(x)

For more guidance, consider this resource:

How can elements be added to an array within a Vue.js data object? The .push() method doesn't seem to trigger reactivity in Vue

Answer 2

The organization of the data returned from the database dictates the process. Essentially, you would iterate through an array or object retrieved from the database and use Array.push to add each element. For example: series.push(x)

For more guidance, consider this resource:

How can elements be added to an array within a Vue.js data object? The .push() method doesn't seem to trigger reactivity in Vue

Answer 3

Answer №2

If you have a model structured as follows:

let barChart = {
  services: [
    ServiceArea1Total,
    ServiceArea2Total,                    
    ServiceArea3Total,
    ServiceArea4Total,
    ServiceArea5Total,
  ],
  labels: ['Western', 'Northern', 'Eastern', 'Southern', 'Central'],
  series: []
}

Your services are stored in barChart.services, labels in

barChart.labels</code (not used here), and total series in <code>barChart.series

. To retrieve data from your services and save it in

barChart.series</code, you would need to do the following:</p>

<pre><code>barChart.services.forEach( function( service ){
    barChart.series.push( service() );
});

This code will execute all functions within services and insert the data into the series array for each one.

Have I misunderstood your intentions?

Answer 4

If you have a model structured as follows:

let barChart = {
  services: [
    ServiceArea1Total,
    ServiceArea2Total,                    
    ServiceArea3Total,
    ServiceArea4Total,
    ServiceArea5Total,
  ],
  labels: ['Western', 'Northern', 'Eastern', 'Southern', 'Central'],
  series: []
}

Your services are stored in barChart.services, labels in

barChart.labels</code (not used here), and total series in <code>barChart.series

. To retrieve data from your services and save it in

barChart.series</code, you would need to do the following:</p>

<pre><code>barChart.services.forEach( function( service ){
    barChart.series.push( service() );
});

This code will execute all functions within services and insert the data into the series array for each one.

Have I misunderstood your intentions?

Step-by-step guide on populating an array with variables in Vue.Js for creating a bar chart

Answer №1

Answer №2

Similar questions

issue with leaflet vue3 component showing incorrect marker popup when clicked

Using JQuery to delete data from a cookie

Update the label for the weekday on Material UI picker

Experiencing troubles when trying to execute npm run serve with vue/cli

I am interested in creating a table that can toggle between show/hide mode with a plus/minus feature

Is there a better alternative to using nested async callbacks?

The static files for the icon CSS (404 Error) from Flaticon and Font-mfizz are failing to load properly

Looking for a new slider option to replace the traditional Conveyor belt slideshow?

Anticipate the middleware function to either invoke the next function or return a HTTP 400 status code

Order Typescript by Segment / Category

What is the best way to show a nested div element within a v-for loop in Vue.js?

Attempting to engage with the like button on a Facebook page through Python's Selenium seems to be problematic

"Send the response in ExpressJS before making a request to loop through the

Limit access to route in ExpressJS only to internal redirects

Retrieving, storing, and implementing the classes of child elements directly from an array using jQuery

Using Traefik for HTTPS redirection with Docker Compose, the Vue+Nginx application is encountering a 404

What is the best way to add HTML tags both before and after a specified keyword within a string using JavaScript?

Retrieving Django view information using AJAX

Incorporate an HTTP Header into a Wicket Ajax Request

The directive attribute in AngularJS fails to connect to the directive scope