1

I'm having a lot of trouble using the date-converted unix timestamps as values for my ECharts graph. My chart's x-axis is supposed to be the time of recording each of the respective buy or sell prices (which are the lines). It works perfectly well when I just use the timestamp in it's raw form (i.e. 1627353870000) but when I try to set the chart's x-axis' type to 'time', it turns into a weird linear graph, pictured below.

Working with timestamp

Not working with type set to 'time'

Here's the main block I'm working with:

var buy_price = {
    title: {
        text: 'Prices Comparison Chart'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Buy Price', 'Sell Price']
    },
    xAxis: {
        type: 'time', // evil line (works like first picture when removed)
        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 really lost here and there doesn't appear to be too much help online for this library.

Olaf Kock
  • 46,930
  • 8
  • 59
  • 90
csjh
  • 154
  • 2
  • 11

1 Answers1

1

You need to change the dateValue to a dateString, with "Date.parse()". And you need to bind the dates to the value of the prices. Your code would look like this:

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);

And you graph like this: Graph look

Paulo Gonçalves
  • 76
  • 6