Using 'time' type on X axis of ECharts for timeseries graphing

Question

I'm using ECharts 4.0.4 (http://echarts.baidu.com/) to graph some sensor data with timestamps on the X axis.

Have tried with legacy series data and datasets (new on v4), but 'time' axis type won't work properly. With 'category' it works fine:

var myChart = echarts.init(document.getElementById('main'));
var option = {
  legend: {},
  tooltip: {
    trigger: 'axis',
  },
  dataset: {
    source: {
      timestamp: ['2018-04-10T20:40:33Z', '2018-04-10T20:40:53Z', '2018-04-10T20:41:03Z'],
      sensor1: [1, 2, 4],
      sensor2: [5, 3, 2]
    }
  },
  xAxis: { type: 'category' },
  yAxis: { },
  series: [
    { type: 'line'},
    { type: 'line'}    
  ],
};
myChart.setOption(option);

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts.min.js"></script>

<div id="main" style="width: 500px;height:400px;"></div>

With 'time' it doesn't:

var myChart = echarts.init(document.getElementById('main'));
var option = {
  legend: {},
  tooltip: {
    trigger: 'axis',
  },
  dataset: {
    source: {
      timestamp: ['2018-04-10T20:40:33Z', '2018-04-10T20:40:53Z', '2018-04-10T20:41:03Z'],
      sensor1: [1, 2, 4],
      sensor2: [5, 3, 2]
    }
  },
  xAxis: { type: 'time' },
  yAxis: { },
  series: [
    { type: 'line'},
    { type: 'line'}    
  ],
};
myChart.setOption(option);

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts.min.js"></script>

<div id="main" style="width: 500px;height:400px;"></div>

I even tried using dimensions (which features the type for each series):

var myChart = echarts.init(document.getElementById('main'));
var option = {
  legend: {},
  tooltip: {
    trigger: 'axis',
  },
  dataset: {
    source: [
      ['2018-04-10T20:40:33Z', 1, 5],
      ['2018-04-10T20:40:53Z', 2, 3],
      ['2018-04-10T20:41:03Z', 4, 2]
    ]
  },
  xAxis: { type: 'time' },
  yAxis: { },
  series: {
    type: 'line',
    dimensions: [
      {name: 'timestamp', type: 'time'},
      {name: 'sensor1', type: 'float'},
      {name: 'sensor2', type: 'float'}
    ]
  },
};
myChart.setOption(option);

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts.min.js"></script>

<div id="main" style="width: 500px;height:400px;"></div>

No good, it shows just one series (and with broken tooltips). And by using dimensions, the layout of my data needs to be inverted, which is not good, as getting data from a JSON endpoint would be better in the previous way.

The time axis example on ECharts demo page uses a diferent data format for a datapoint (for a single series):

point = {
  name: 'Sun Jul 23 2000 00:00:00 GMT-0300 (-03)',
  value: [
    '2000/7/23',   // X data (timestamp)
    100            // Y data
  ]
}

Is this the only way to have the time axis working? I'm very confused on how to use this. What's the correct way to use the time axis with multiples series?

I haven’t got a clue about ECharts, but this seems to me a question you should get answered by its documentation. Have you checked the documentation of ECharts yet? — C. van Dorsten, Apr 10 '18 at 22:09
I did. These samples were built using them. Either I misunderstood something, missed something or this is a bug.. — rjunior, Apr 11 '18 at 00:55
If you think it's a bug, I suggest you file a support ticket or search their forum for answers. — C. van Dorsten, Apr 12 '18 at 20:09

score 14 · Answer 1 · edited May 01 '20 at 21:42

The correct data format is this

[
  ['2018-04-10T20:40:33Z', 1, 5],
  ['2018-04-10T20:40:53Z', 2, 3],
  ['2018-04-10T20:41:03Z', 4, 2]
]

dataset:{
  source:data,
  dimensions: ['timestamp', 'sensor1', 'sensor2'],
}

and the the series should be

series: [{
        name: 'sensor1',
        type: 'line',
        encode: {
          x: 'timestamp',
          y: 'sensor1' // refer sensor 1 value 
        }
    },{
        name: 'sensor2',
        type: 'line',
        encode: {
          x: 'timestamp',
          y: 'sensor2'
        }
    }]

score 6 · Answer 2 · answered Jul 20 '21 at 21:27

Thank you valia for the correct answer! As I was also looking for a solution to this problem - I thought it would be cool to have everything together in running example - that's why I added this answer.

var myChart = echarts.init(document.getElementById('main'));

var data =  [
      ['2018-04-10T20:40:33Z', 1, 5],
      ['2018-04-10T20:40:53Z', 2, 3],
      ['2018-04-10T20:41:03Z', 4, 2],
      ['2018-04-10T20:44:03Z', 5, 1],
      ['2018-04-10T20:45:03Z', 6, 0]
];

var option = {
  legend: {},
  tooltip: {
    trigger: 'axis',
  },
  dataset: {
    source:data,
    dimensions: ['timestamp', 'sensor1', 'sensor2'],
  },
  xAxis: { type: 'time' },
  yAxis: { },
  series: [
  {
     name: 'sensor1',
     type: 'line',
     encode: {
       x: 'timestamp',
       y: 'sensor1' // refer sensor 1 value 
     }
  },{
     name: 'sensor2',
     type: 'line',
     encode: {
       x: 'timestamp',
       y: 'sensor2'
  }
}]
};
myChart.setOption(option);

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts.min.js"></script>

<div id="main" style="width: 500px;height:400px;"></div>

score -1 · Answer 3 · answered Nov 10 '18 at 21:20

-1

According to documentation https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line.data. May be you should try to use native Date

answered Nov 10 '18 at 21:20

javaLearner

963
8
5

Using 'time' type on X axis of ECharts for timeseries graphing

3 Answers3