The Highcharts datetime line takes a detour through time when faced with unorganized data

Despite my best efforts to obtain sorted data from various API calls, I find myself with unsorted data that needs to be plotted in a timeseries graph.

{
    xAxis: {
        type: 'datetime'
    },
    series: [{
        data: [
            [Date.UTC(2020, 0, 1), 29.9],
            [Date.UTC(2020, 0, 2), 71.5],
            [Date.UTC(2020, 0, 6), 106.4],
            [Date.UTC(2020, 0, 3), 129.2],
            [Date.UTC(2020, 0, 5), 144.0],
            [Date.UTC(2020, 0, 8), 176.0]
        ]
    }]

}

Using the above options for highcharts causes the line to travel backwards, as shown https://i.sstatic.net/Btk88.png.

Is there a way to make highcharts automatically sort the data and plot the chart correctly? I have attempted to use the dataSorting option without success.

Given that Highcharts offers a dataSorting flag for sorting, it is not unreasonable for me to expect this functionality.

javascripthighcharts

Answer №1

Could the dataSorting feature be causing an issue here?

{
    xAxis: {
        type: 'datetime'
    },
    series: [{
        dataSorting: {
            enabled: true,
            sortKey: 'value'
        },
        data: [
            [Date.UTC(2020, 0, 1), 29.9],
            [Date.UTC(2020, 0, 2), 71.5],
            [Date.UTC(2020, 0, 6), 106.4],
            [Date.UTC(2020, 0, 3), 129.2],
            [Date.UTC(2020, 0, 5), 144.0],
            [Date.UTC(2020, 0, 8), 176.0]
        ]
    }]

}

Answer №2

To ensure proper functionality, Highcharts necessitates data to be sorted in ascending order based on the X-axis values. It is essential to pre-sort the data before using it with Highcharts:

var data = [
    [Date.UTC(2020, 0, 1), 29.9],
    [Date.UTC(2020, 0, 2), 71.5],
    [Date.UTC(2020, 0, 6), 106.4],
    [Date.UTC(2020, 0, 3), 129.2],
    [Date.UTC(2020, 0, 5), 144.0],
    [Date.UTC(2020, 0, 8), 176.0]
];

data.sort((a, b) => a[0] - b[0]);

Highcharts.chart('container', {
    ...,
    series: [{
        data
    }]
});

Explore this feature live: http://jsfiddle.net/BlackLabel/cf8tq6a2/

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

Implementing a feature to automatically set the datepicker value to the selected date upon page initialization

I am working with a datepicker element, identified by id="from_dt", and a button with id="fromToDate". When a date is selected from the datepicker and the button is clicked, the page will load. At that point, I want to transfer the selected date to a textb ...

javascriptjquerydatepickerjquery-ui-datepickerbootstrap-datepicker

guaranteed function to retrieve React elements

Is there a solution for the issue where if-else doesn't work in run build but works in run dev? The only way I've found to make it work is by using a react hook, but I'm unsure which one to use and where to implement it. import { useAdd ...

javascriptreactjsnext.js

Is there a way to incorporate external HTML files into my webpage?

Looking to update an existing project that currently uses iFrames for loading external HTML files, which in this case are actually part of the same project and not from external sites. However, I've heard that using iFrames for this purpose is general ...

javascriptjqueryhtml

What could be causing the delay in this script's execution?

I'm attempting to include a script at the beginning of my XBL file, however even the test below is not functioning. Any insight on why this might be happening? <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/x ...

javascriptxbl

Developing a concealed Repeater element that is retained in the source code for utilization in JavaScript tasks

I am currently working on a setup with two repeaters: one that is displayed when the page first loads, and another that I want to keep hidden until a link called "Add Stuff" is clicked. My goal is to use JavaScript to make this second repeater visible upon ...

javascriptasp.netvisibility

Prevent submission by deactivating the button if a file has not been

I need help implementing a solution to disable a submit button until a file is selected. I found a working example online, but I'm not sure if the issue lies with the script type. Here's the example I'm referring to: disable submit button u ...

javascriptphpjqueryhtml

Exploring the connections in Mongoose JS

I'm in the process of building an express app with a user model and a post model. Each user can have multiple posts, and each post is associated with a specific user. Below are the models I have implemented: user.js var mongoose = require('mong ...

javascriptnode.jsmongodbexpressmongoose

Adjust the camera in Three.js to move in a straight line towards the right

Seeking assistance with moving the 3D camera in a linear motion. The current code I am using rotates the camera around the object, but I am looking to move the camera alongside the object instead. Desired Outcome: https://i.sstatic.net/RGMxP.png Current ...

javascriptthree.js

What is the reason behind the availability of the C# and ECMAScript ISO standards for free, while C/C++ standards are not

As someone deeply interested in the ISO C and C++ standards, I am intrigued by the fact that programming language standards for ISO/IEC 23270:2006 C# and ISO/IEC 16262:2011 ECMAScript can be accessed publicly on the ISO website. Meanwhile, standards for C ...

javascriptc#c++ciso

Issue encountered while generating REST API through Postman resulting in a 500 error

I am in the process of creating a Node.js API for a web application. The GET request is functioning properly, however, when attempting to execute a POST request, I encounter an error messageError Below is the code snippet: //User Schema const mongoose ...

javascriptnode.jspostman

Don't pay attention to the parent's rotation in THREE.JS

Currently, I am attempting to have a child object mimic its parent's position while maintaining its original rotation. I am concerned about performance, as I am already running 2 workers and have a large number of objects to manage. Is there a way to ...

javascriptmatrixthree.jsposition

Attempting to grasp the concept of Thennables within the VSCode API. Can these TypeScript code examples be considered equivalent?

I'm looking to perform a series of modifications on a document using the VSCode API. The key function in this process is Workspace.applyEdit, which gives back a Thennable. This is my first encounter with it, and the one returned from this function doe ...

javascripttypescriptasynchronouspromisevscode-extensions

Ways to unzip binary information in node.js

Once I have decoded my data from base 64 to binary, my next step is to unzip this information. In my project, I am using node.js instead of PHP, which has a convenient gzdecode() function for decompressing data. However, with node.js, I am unsure of how t ...

javascriptphpnode.jscompressiongzip

What is causing the duplication of leaves when using this DFS implementation?

I created an algorithm to compare if two trees have the same leaves. https://i.sstatic.net/lpO2C.png Both trees display matching leaf numbers in the exact order, resulting in a true outcome. Below is the code that I formulated: function leafSimilar(root ...

javascripttypescriptalgorithmbinary-search-treedepth-first-search

How can you transfer data from a jQuery function to a designated div element?

I'm struggling to transfer data from a function to a specific div, but I can't seem to make it work. I'm in the process of creating a gallery viewer and all I want is to pass the counter variable, which I use to display images, and the total ...

javascriptjqueryhtmlcss

Is there a way to execute a code snippet just once when focusing on a specific field?

<form id="myForm"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="mname">Middle name:</label> ...

javascripthtmltypescript

Could one potentially use jQuery to navigate through JSON output?

My goal is to generate a JSON list that includes CSS classes and their respective URL records. Here's an example: var jsonList = [{ "CSSClass": "testclass1", "VideoUrl": "/Movies/movie.flv" }, { "CSSClass": "testclass2", "VideoUrl": "/Movies/ ...

javascriptjqueryjsonjquery-selectors

Retrieving the content of a component tag in Vue

Recently, I've been experimenting with Vue and I'm interested in achieving the following: <snippet name="Select From Table"> SELECT * FROM database.table </snippet> I want to create a link that, when clicked, triggers a ...

javascriptvue.jsvue-component

The appropriate method for showcasing cards within lists, such as in the platform Trello

I'm in the process of developing a project similar to Trello, but I'm facing some challenges on how to proceed. Initially, I created an 'init' function within my AngularJS Controller to handle HTTP requests: $scope.loadLists(); ...

javascriptangularjsnode.jsmongodbmongoose

Looking to set up a web service that can handle incoming posts, but unsure about the best way to send a response back to jQuery

Good morning, I have a Go code that processes a JSON post request and performs certain actions. However, I am looking to send back either the result or a message to jQuery. package main import ( "fmt" "log" "net/http" "encoding/json" ...

javascriptjqueryjsonajaxgo