Incorrect sequencing in Chart.js chart with time displayed on the horizontal axis

Hey there, I'm currently working on displaying some data using chart.js in angularjs. However, I seem to be facing an issue with the ordering of my data which is resulting in a strange looking chart like this:

https://i.stack.imgur.com/F6phH.png

Here are the options I'm using:

 vm.options = {
        type:'line',
        fill: false,
        backgroundColor: 'transparent',
        scales: {
          xAxes: [{
            type: 'time',
            position: 'bottom'
          }]
        }
      };

I attempted to organize the dates of my data by sorting it like so:

    vm.data.sort(function(a,b){
      // Turn your strings into dates, and then subtract them
      // to get a value that is either negative, positive, or zero.
      return new Date(b.time) - new Date(a.time);
    });

However, despite this effort, I still end up with the odd chart as shown in the image above. Could someone possibly assist me in identifying where the problem lies?

Answer №1

Even though this post is old, I'm providing an answer in hopes that it will benefit someone!

I encountered a similar issue with my ionic3 app. There was a graph displaying data in the wrong order, despite my dataset being correct (I used a slider to adjust the value). The problem was resolved by utilizing a loading controller from the ionic framework. It's important to allow time for the response to complete and render before final display.

I hope this solution helps you as well.

https://i.stack.imgur.com/5SKud.png

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

Send Summernote code data using Ajax to PHP which will then store it in the database

I have implemented a Summernote editor on a page where users can input content. When a user submits the page, I use jQuery to retrieve the HTML code from the editor and then send it to a PHP script for insertion into a database. The HTML retrieved before s ...

Verifying that a parameter is sent to a function triggering an event in VueJS

One of the components in my codebase is designed to render buttons based on an array of objects as a prop. When these buttons are clicked, an object with specific values is passed to the event handler. Here's an example of how the object looks: { boxe ...

retrieving a date from a different source and displaying it in a date

Is there a way to ensure that the date format in an input of type date always follows the dd/MM/yyyy Brazilian pattern, regardless of the computer or browser specifications? <div class="input-group input-group text-center in ...

The sluggish loading time is a result of the checkboxes slowing down the page

I am currently working on a .aspx webpage that needs to display around 500 records from the database along with a checkbox for each record. The issue I am facing is that the page takes up to 15 seconds to fully render. To investigate this, I added a stopw ...

How can you use AngularJS to sort through an array of integers in a ng-repeat?

I have an ng-repeat loop and I was applying a filter to it using a simple integer in the following manner: View: ng-repeat="t in vm.presencesByPerson | filter: vm.customfilter"> Controller: Here I have a watcher on a dropdown menu, and depending on ...

barchart rendered in SVG without the use of any external libraries

Creating a stacked barchart with SVG and HTML without relying on any third-party library has been quite a challenge. Despite searching extensively online, I have not come across a single resource that demonstrates how to build a stacked bar chart using pla ...

Eliminate the chosen and marked items from a list - Angular 2+/ Ionic 2

Currently, I have a checkbox list on my page. Whenever a user selects the "Save" button, the checked items should be removed from the list and moved to the saved tab that is also displayed. While I have successfully implemented the functionality for removi ...

How can one obtain a distinct identifier retroactively?

One thing that I am working on is changing button images upon clicking, but this isn't the main issue at hand. Each button corresponds to unique information retrieved from the database, and when clicked, the button should change and send the appropria ...

Displaying a collection of items using ReactJS

Hey there! I have an array of objects containing comments for a particular item, and I only want to display the first 10 on the page. Below that list, I'm looking to add a button that allows users to see the next set of 10 comments when clicked. It&a ...

Trouble with nested components not refreshing correctly within VueJs

I've just started working with Vue and I'm currently developing a forum-style application that allows nested comments. Within this structure, there are two main components: PostForum and Comment. The PostForum component consists of an input box f ...

Tips for replicating input boxes in a while loop

HTML : <table> <tr> <td> <input type="text" name="name[]" value=" echo $ail"> <label >Address</label> <input type="text" name="countryname[]" id='countryname_1 ...

send additional form elements to the AJAX suggestion box script

** shifted to this location: Numerous similar AJAX suggestion boxes without IDs I enlisted the help of a developer to create a jQuery AJAX suggestion box script some time ago, and it has been working flawlessly. Now, I am striving to understand it better ...

The error message indicates that the Dbschema, which is a Mongoose Schema, cannot be called

I am attempting to design a basic registration form using MEAN_Stack with mongoose. Here is my models/dbSchema.js var mongoose = require('mongoose'); var Schema = mongoose.Schema; var User = new mongoose.Schema({ FirstName: String, La ...

What is the best way to verify that a JSON key contains only distinct values within a JSON document using JavaScript?

I'm working with a JSON file structure that looks something like this: "fields": { "asset": { "values": [{ "asset": { "id": "Info_text", "type": "text", "value": "ABCD" } ...

Vue js: Stop Sorting array items; only display the resulting array

I recently came across a tutorial on voting for a Mayoral Candidate. The tutorial includes a sort function that determines the winner based on votes. However, I noticed that the sort function also rearranges the candidate list in real time, which is not id ...

Step-by-step guide on integrating a custom JS file into an Angular component

Trying to grasp Angular, I embarked on adding some JavaScript logic to one of my components from a separate JS file. While following advice from a similar query (How to add custom js file to angular component like css file), it seems I missed something cru ...

Tips for updating and triggering useEffect when the router changes in React JS

I have a ChartPage function that is being called three times within three different routers. Inside the ChartPage function, I am using "useEffect" to update some variables based on the selected route. However, for some reason, it only triggers once, and wh ...

Selecting a row in UI-Grid without using a listener through programming

My goal is to default select all rows of a grid, and I was able to achieve this by incorporating a data listener in onRegisterApi as shown in this response: onRegisterApi : function(gridApi) { $scope.gridApi = gridApi; $scope.gridApi.grid ...

Surfing the web with Internet Explorer means music downloads rather than streaming

My music website functions properly, however I am experiencing issues when accessing it through Internet Explorer. The internet download manager is downloading music from the site without any problems in Chrome and Firefox. Is there a way to prevent or b ...

An easy guide to using Vue-Router to manipulate URL query parameters in Vue

I'm currently working on updating query parameters using Vue-router as I change input fields. My goal is to adjust the URL query parameters without navigating to a different page, but only modifying them on the current page. This is how I am approachi ...