Utilize Vue-chart.js to dynamically render labels and data in a loop

Can you guide me on how to display data using a loop?

Utilize (for; v-for) within: { labels: [] } and datasets: [{ data:[] }] when rendering a chart with Vue-Chart.js

I am seeking assistance for rendering data in the following structure:

data: {
                    labels: [

                        ***FILL IN DATA HERE***

                    ],
                    datasets: [{
                        label: "Assets",
                        backgroundColor: ["#4285F6"],
                        data: [

                            ***FILL IN DATA HERE***

                        ],                 
                    }],
                },

The current format of my data includes an array with various objects inside:

LABELS: 
this.array[0] ? this.array[0].asset.name : '',
this.array[0] ? this.array[1].asset.name : '',
this.array[0] ? this.array[2].asset.name : '',

DATASETS:
this.array[0] ? this.array[0].amount : '',
this.array[0] ? this.array[1].amount : '',
this.array[0] ? this.array[2].amount : '',
javascriptvue.jscharts

Answer №1

Prior to setting up your chart configuration, it is important to first create a new array and then utilize it:

var labelsArray = [];
var amountArray = [];
for (var i = 0; i < this.array.length; i++) {
    labelsArray.push(this.array[i] ? this.array[i].asset.name : '');
    amountArray.push(this.array[i] ? this.array[i].amount : '');
}

Your Vue chart configuration should be structured as follows:

data: {
    labels: labelsArray ,
    datasets: [{
        label: "Assets",
        backgroundColor: ["#4285F6"],
        data: amountArray,                 
    }],
},

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring ways to assign a value to an HTML element utilizing Jquery in combination with ASP.NET MVC 4 complex model information

Within an ASP.NET MVC 4 view, I am utilizing data from a Model to populate various HTML elements. The model is used in the view to showcase values like: <div>@Model.Category.Name</div> etc... However, there is a specific div tag <div id="D ...

javascriptjqueryasp.netasp.net-mvc

What's the best way to modify the style property of a button when it's clicked in

I am working with a react element that I need to hide when a button is clicked. The styles for the element are set in the constructor like this: constructor(props) { super(props); this.state = { display: 'block' }; this. ...

javascripthtmlcssreactjs

Download the ultimate HTML package with a built-in chart.js component directly from your nuxt app

I have a task to create a compact Nuxt application that produces a basic HTML file containing informative sections about the services offered to the clients of my organization. The main purpose is to generate an HTML file that can be easily downloaded and ...

javascripthtmlvue.jsnuxt.jsserver-side-rendering

Guide To Implementing vue-color Into Your NuxtJs Project

Could someone assist me with importing vue-color into my project? I have tried to import and render the component using the following code: <template> <div class="helloWorld"> <Chrome /> </div> </template> & ...

vue.jsnuxt.js

Property location elusive

I've set up VueJS locally in a very basic way and I'm encountering issues while trying to run a simple example that demonstrates outputting raw HTML. I prefer not to provide a link to JS Fiddle as I aim to resolve it on my local setup, since some ...

vue.jsvuejs2

Creating a versatile TailwindCSS grid that can adjust to varying numbers of grid columns

I am currently working with Vue3 and TailwindCSS, attempting to create a grid using a dynamic grid-cols-{n} class. While I am aware that TailwindCSS typically supports up to 12 columns by default, the challenge arises when the number of columns needed is e ...

javascripthtmlcsstailwind-css

Using bluebird library for revoking promises

Recently, I've been diving into the bluebird promises library. To practice using it, I set up a basic express app with just one file and one route - a GET request to /test. The scenario I'm working on involves a promise with an interval that res ...

javascriptnode.jspromisebluebirdcancellation

Is there a way to remove the row after hitting its corresponding button?

Having trouble working with table tags in a cshtml page, particularly when appending tr and td elements using ajax. I'm unsure of how to delete a row when it's clicked on and also how to retrieve the values of inputs within each row. /// <r ...

javascriptajaxasp.net-mvc

The communication between the Next.js and Node.js servers is being obstructed as the request body fails

Could you lend me a hand with this issue? Here is the function being called: function apiCreate(url, product) { console.log('Posting request API...' + JSON.stringify(product) ); fetch(url, { dataType: 'json', method: 'post ...

javascriptnode.jsreactjsapinext.js

Utilizing Javascript to load a vast amount of data onto the browser, followed by initiating an XML

Looking for a solution to send XML requests containing values and content from files obtained by filling out an HTML form. With 5 large files, some exceeding 70 MB, I have implemented JavaScript functions to load file contents and assemble the XML request. ...

javascriptajaxxmlrequestlarge-data

Implementing velocity.js for hover effects - a comprehensive guide

I'm seeking guidance on incorporating velocity.js for hover effects on elements. Currently, I utilize CSS for zooming in and out and animating elements upon user hover, while using velocity.js for initial page load animations. My query is: how shoul ...

javascriptjqueryhoverjquery-hovervelocity.js

"Why is there a need to refresh the page in Vue.js 3 for MathJax to work on initial display, but it doesn't work in step

My goal is to show the same expressions in two steps on a single page, one after the other. I have included links to images here: enter image description here, enter image description here. Along with this, there should be a button that increments a counte ...

javascriptvue.jsmathjax

The onchange function in JavaScript is malfunctioning

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Product page</title> <!-- Fonts -- ...

javascripthtmlcss

Accessing form data within Mongoose schema hooks via JavaScript

I have a form where I've split the content into two separate MongoDB schemas. I want to access variables that are within node.js/express.js directly in mongoose schema hooks, whether through pre or post hooks of the schema. Here are my files: expres ...

javascriptnode.jsexpressmongoose

Ways to mimic an Angular directive with a required field

Recently, I encountered a challenge that involves two directives: directive-a, directive-b. The issue arises because directive-b has a `require: '^directive-a' field, which complicates unit testing. In my unit tests, I used to compile the direc ...

javascriptangularjsunit-testingangular-directive

Ways to conceal the contents of an HTML element

I recently applied a background image to my "a" tag, but now I'm looking to hide only the HTML content within the tag. It's important that the background image and href address remain visible. Any suggestions on how to achieve this? Thank you in ...

javascriptjqueryhide

How can you prevent the browser from prompting to save your email and password when filling out a sign-up form?

I'm currently developing a PHP sign up form, but whenever I click on the sign up button, the browser prompts me to save the email and password. Is there a way to prevent this from happening? ...

javascriptphpjqueryhtml

The wrapping of cells in React Material UI GridList is not functioning properly

While working with Material-UI GridList, I've encountered an issue where the cells don't wrap correctly within the grid. Upon inspecting the CSS, I noticed that it utilizes flex-wrap, which is intended to flex rows. However, I believe there must ...

javascriptreactjsmaterial-uigrid

Guide to fetching data from database based on selection in dropdown list using PHP and MySQL

Is there a way to retrieve information from a database and automatically populate a textarea field based on the option selected from a dropdown list using an onSelect event? You can view a screenshot of my form here. Basically, I want the description ass ...

javascriptphpajax

How can I configure the Google Chrome script debugger to pause on exceptions?

Is there a way to automatically interrupt the program when an exception is encountered? ...

javascriptgoogle-chrome