leveraging array elements in the data and label properties of a chart.js chart

I would like to assign the values of an array to the data and label fields within a chart.js dataset.

Below is the code executed upon successfully fetching JSON data using an AJAX call. The fetched JSON data is then stored in an array.

Data = jQuery.parseJSON(result);
var count = Data.length;
var counter = 0;
while(count > 0) {
    LabelResult[counter] =[Data[counter].TIME];
    counter++;
    count --;
}

Now, I am looking to utilize these label values for the labels field.

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [LabelResult],
        datasets: [{
            label: '# of Votes',
            data: [DataResult],
            borderWidth: 1
        }]
    }    
});

However, there appears to be an issue as the data is not being rendered on the chart.

Answer №1

LabelResult is a group of labels, replace

labels: [LabelResult]

with

labels: LabelResult

Additionally:

data: [DataResult]

should be changed to

data: DataResult

For example:

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: LabelResult,
        datasets: [{
            label: '# of Votes',
            data: DataResult,
            borderWidth: 1
        }]
    }    
});

Answer №2

Perhaps consider eliminating some brackets for improved readability.

while(count > 0){
     LabelResult[counter] = Data[counter].TIME; // brackets removed here
      counter++;
      count --;
}    

Also, adjust the following code by removing unnecessary brackets:

data: {
    labels: LabelResult, // brackets removed here
    datasets: [{
        label: '# of Votes',
        data: DataResult, // brackets removed here
        borderWidth: 1
    }]
},  

Give it a try and see if it improves the functionality.

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

Having trouble connecting to a PHP file on a web server using AJAX?

So, I'm attempting to access a PHP file on a webserver (1freehosting.com) from my localhost machine (wamp) using AJAX code embedded in an HTML file. I've tried various iterations without success as shown below: xmlhttp.open("GET","bcbustransit.u ...

Configuring Node.js HTTPS to function alongside HAPROXY

My goal is to establish communication between my nodejs app and HAPROXY using HTTPS. The plan is for nodejs to send a message to haproxy via https, and haproxy will then route the message accordingly. Initially, I had success with the request.js library, ...

What is the reason for sending a GET request to the current page?

I created a form with fields for Name and Email Address, along with a submit button. My goal is to use AJAX to submit the form data. <form id="registration-form"> <fieldset class="form-group"> <label for="name">N ...

How to utilize AJAX to input data into a MySQL database using PHP in a multi-step form

Hi there, I'm currently working on a project that involves inserting data into a MySQL database using PHP and AJAX with multiple forms on a single page. The insertion process is functioning correctly, but I'm facing an issue where the data from ...

Troubleshooting permission problems with Yarn and node_modules in a Docker environment

I have a Docker container containing a Symfony 6 web application and various other services like php-fpm, node, and python. Additionally, I have separate containers for MySQL and Nginx, all running on Alpine 3.15. My current issue arises when I execute do ...

What is the method for retrieving a value from an array reference containing hash references?

Currently I am exploring the features of the Samba::Smbstatus module in Perl. According to the documentation, values are retrieved in an array reference of hash references. Can anyone guide me on how to access these values? I have attempted several method ...

When using jQuery's .each method, only the final JavaScript object element is added to the divs

I have a unique set of dynamically-created divs, each containing a Title. When a div is clicked, a modal opens (which is cleared upon click), and the Title is displayed again in the modal. My goal is to add the category descriptions into these modals, but ...

Using ajax with Django to optimize queries involving select_related() and many to many fields

Seeking help with a view that needs to handle both ajax and regular HTTP requests. Here's a simplified version of what I have: def tag_search(request, tag): items = Item.objects.filter(tags__tagname__exact=tag) if request.is_ajax(): ...

Is it possible to select options in AngularJS based on certain criteria?

I created an AngularJS select menu that is currently functioning correctly: <select name="s1" id="s1" multiple="multiple" data-native-menu="false" data-role="none" ng-model="userlistSelect" ng-options="u.userId as u.fi ...

Attempting to unveil concealed download URLs

Trying to extract download links from a website, but the format is as follows: <form action="" method="post" name="addondownload" id="addondownload" > <input type="hidden" name="addonid" id="addonid" value="2109" /> <input class="re ...

Using jQuery and Ajax to dynamically populate a select input with items upon page initialization

I am facing an issue with 2 <select> inputs: <select id="country"> <option value="" selected>Choose</option> <option value="usa">USA</option> <option value="uk">UK</option> </select> <select ...

Greetings Universe in angular.js

Having trouble creating a Hello World page in angular.js. When I try to display {{helloMessage}}, it shows up instead of Hello World. I'm not sure where the issue lies. Within the folder are two files: angular.min.js and HelloWorld.html. In HelloWorl ...

The for loop in JavaScript fails to verify the contents of an array and instead shows a message in a designated

The message for leap year is not appearing in the designated element Uncertain why the message isn't showing after the for loop const year = [2020, 2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028, 2029, 2030, 2031, 2032]; for (var i = 0; i < ye ...

Ways to remove an item from an array

I need some help with dropping a student from a course. Here is the code I have so far: public void removeStudent() { String id; System.out.println("Enter student ID: "); id = Keyboard.readString(); for (int i = 0; i <= students.length - 1; i++) ...

What is the best way to transform an array of objects into MenuItems for a Material-UI Select component?

I am facing an issue with mapping the values of field choices to create options for an MUI Select field from an array called fieldChoices. Here is how I populate the fieldChoices array: fieldChoices = { choices: filtered_status.map(function (item) { ...

What is the best way to trigger a child function from the parent component in React?

In my React application, there are three components: two child components and one parent component. I need to pass data (projectId) from ChildOne to ChildTwo through the Parent component and trigger a function once the data is received. Essentially, I am s ...

Running a Chrome content script once an AJAX request has been triggered by the <body> element

I am facing a challenge with running the content script before the DOM is fully loaded. To give context, there is an AJAX request within a tag which gets triggered on $(document).ready(). Once this request is completed, my extension code kicks in. To tra ...

Having trouble updating Vuejs array with new values

Currently, I am facing an issue with the template code for my survey builder. I am successfully receiving responses from the server, but the addAnotherQuestion value is not updating as expected. Despite trying various approaches, I have been unable to reso ...

Combining two arrays of strings in VBA to find the common elements

This particular question may seem reminiscent of another query, but it is distinct in its own right. Intersection of two arrays of ranges Currently immersed in a VBA project that involves filtering a table, I've encountered two filters represented by ...

ajax security is used to block unauthorized access to URLs through web browsers

I am currently working on a project that involves default.asp connecting with 3 different *.asp files through ajax. I am wondering what would happen if someone attempts to directly access these *.asp pages without going through default.asp first by enter ...