Utilizing Unix timestamps for x-values while displaying dates as x-labels in an ECharts line chart

I'm struggling with incorporating date-converted unix timestamps as values in my ECharts graph. The x-axis of my chart is meant to display the recording time for each buy or sell price, represented by respective lines. Everything functions properly when I use the raw timestamp (e.g. 1627353870000), but once I try to change the x-axis type to 'time', it transforms into a strange linear graph as shown below.

Data representation using timestamp

Incorrect display with 'time' type set

This snippet represents the key code block I am tackling:

var buy_price = {
    title: {
        text: 'Prices Comparison Chart'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Buy Price', 'Sell Price']
    },
    xAxis: {
        type: 'time', // problematic line (displays correctly without this)
        data: [1627353870000, 1627353810000, 1627353820000, 1627353830000]
    },
    yAxis: [{ min: 1,
             max: 100,
             type: 'value'
    }],
    series: [{
        name: 'Buy Price',
        type: 'line',
        symbol: 'none',
        data: [2, 4, 6, 8]
    },
    { 
        name: 'Sell Price',
        type: 'line',
        symbol: 'none',
        data: [1, 2, 3, 4]
    }]
};

I'm at a loss here; there doesn't seem to be adequate support available online for solving this issue within this library.

Answer №1

If you want to convert the dateValue into a dateString using "Date.parse()", and bind the dates to the prices, your code should resemble the following:

var option;

var data1 = [["2018-08-15T10:04:01.339Z",2],["2018-08-15T10:14:13.914Z",4],["2018-08-15T10:40:03.147Z",6],["2018-08-15T11:50:14.335Z",8]];

var data2 = [["2018-08-15T10:04:01.339Z",1],["2018-08-15T10:14:13.914Z",2],["2018-08-15T10:40:03.147Z",3],["2018-08-15T11:50:14.335Z",4]];

option = {
title: {
    text: 'Prices Comparison Chart'
},
tooltip: {
    trigger: 'axis'
},
legend: {
    data: ['Buy Price', 'Sell Price']
},
xAxis: {
    type:"time",
},
yAxis: {
         type: 'value'
},
series: [{
    name: 'Buy Price',
    type: 'line',
    symbol: 'none',
    data: data1
},
{
    name: 'Sell Price',
    type: 'line',
    symbol: 'none',
    data: data2
}
]
};

option && myChart.setOption(option);

Your graph would appear as shown in this image: Graph preview

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

Verifying the functionality of a m3u8 URL with Javascript

I have been using the following code to check if an m3u8 URL is broken or not. I tried with two different URLs, one that is live and one that is offline. However, my javascript function does not alert me whether the file exists or not. There are no errors ...

The JSX component cannot use 'Router' as a valid element

Error Message The error message states that 'Router' cannot be used as a JSX component because its return type 'void' is not a valid JSX element. TS2786 import App from './App'; 5 | > 6 | ReactDOM.render(<Router ...

Having trouble retrieving multiple selected values from the paper listbox in Polymer 3

I'm attempting to retrieve multiple selected values in a paper-listbox element in Polymer. <paper-dropdown-menu label="{{_getLabel('Activity Type')}}" id="fromMenu" on-paper-dropdown-close="fromAccountChanged" searchable="true"> ...

Discovering the specific value within an array of various objects through Angular

Within a list of objects, I am specifically looking to extract the name "sample 4" from the second set of objects with an ID of 2. How can this value be retrieved using JavaScript or Angular? {Id: 1, name: sample 1, code: "type", order: 1} {Id: 1, name: ...

What is the optimal approach for moving the dashboard to a separate subdomain in a static Next.js-generated landing page?

Our current setup includes several static pages generated by Next.js using the command next build && next export These pages are hosted on AWS S3. I am wondering if we should create a new app for building a dashboard with Firebase authentication ...

The Express app.post endpoint is not acknowledging incoming POST requests from Postman

I am facing an issue where my POST request using Postman to my express app is timing out. Here is the request: https://i.sstatic.net/UfL07.png And here is the app: import express from 'express' import bodyParser from 'body-parser' i ...

Using Javascript function with ASP.NET MVC ActionLink

I need help with loading a partial view in a modal popup when clicking on action links. Links: @model IEnumerable<string> <ul> @foreach (var item in Model) { <li> @Html.ActionLink(item, "MyAction", null, new ...

A guide on immediately invoking a method when a class is initialized in JavaScript

I'm having some trouble with a class I created to handle user information. When I try to add an init() function to the class so that it runs as soon as the class is initialized, I keep getting a SyntaxError. I've tried following the advice from ...

The redirect link to Facebook Messenger is functional on desktop browsers but experiences difficulties on mobile browsers

Currently, I am facing an issue with redirecting from a webpage to an m.me/?ref= Facebook link that points to a Facebook Page. The redirection works smoothly on the Desktop Browser and opens the Facebook Messenger as expected. However, when attempting the ...

Run the jQuery script once it has been successfully loaded using jQuery's .load method

On the Index.html page, there is a select box labeled #choose_content_to_load and a div named #get_loaded_content <select id="choose_content_to_load"> <option>Some content from the page content.html and div #content</option> </select ...

Tips for maintaining the InteractionCollector's presence even after a Discord.js bot reboot

One of the tasks my AI assistant handles is processing proposals submitted through Google Forms and transferring them to a designated channel where individuals can cast their votes by selecting either Yes or No using the corresponding MessageButton. Once ...

Mongoose Does Not Allow for Duplicate Data Submissions

I'm currently working on a project to develop a basic blog application. Everything works smoothly when submitting content to the database for the first time, but if you try to submit again, Node crashes unexpectedly. I've been struggling to pinpo ...

"Learn the process of transferring data from one controller to another in your application

After adding categoryCtrl and ProductCtrl, the code line: console.log(category); is functioning correctly. I am looking for a way to bind this data to the product controller using a for loop or any other method. .controller('CategoryCtrl', funct ...

In Vue, it is not accurate to measure overflow

I am working on creating an overflow effect with tagging that fades out at the beginning to provide a subtle hint to users that there is more content. Here is what it currently looks like: https://i.stack.imgur.com/fXGBR.png To achieve this, I added a fa ...

Encountering an issue with resolving a local variable during the execution of a test with Protractor

I'm currently learning about async calls in protractor as a newbie to the tool. I am struggling to figure out how to handle a boolean variable that I set to true if any test case fails and the execution goes to the catch block for a promise. Below is ...

Get Subject Alternative Name from X.509 in a Node.js environment

Having trouble retrieving the SAN from a DoD Smart Card, as the subject alternative name is returning othername:<unsupported>. I have not been able to find many examples on how to parse this information. I would have thought that X509 li in node woul ...

When embedding HTML inside an Angular 2 component, it does not render properly

Currently, I am utilizing a service to dynamically alter the content within my header based on the specific page being visited. However, I have encountered an issue where any HTML code placed within my component does not render in the browser as expected ( ...

What is the best way to transfer a variable from PHP to JavaScript as the actual variable itself, rather than as a string?

I am transferring data from PHP to JavaScript using AJAX. I apply json_encode before sending the data. Here is an example: $data = [ [ "path" => "/TestMenu1", "component" => 'test1', "children" => [[ ...

Merge together JQuery variables

I want to assign a unique number to each JavaScript variable and jQuery element in my code. Take a look at the snippet below: $("#insert1").click(function(){ var collegeId1=$("#collegeId1").val(); $.post('insert.php', {collegeId: colle ...

Having trouble loading JSON api data in React?

Recently, I've delved into the world of React and was assigned a task to fetch data from a JSON API and showcase it on the screen. Initially, everything went smoothly while practicing with this URL - https://jsonplaceholder.typicode.com/users. Howeve ...