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?

Flashing

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? – Clumsy

I did. These samples were built using them. Either I misunderstood something, missed something or this is a bug.. – Flashing

If you think it's a bug, I suggest you file a support ticket or search their forum for answers. – Clumsy

I have the same issue :( any luck? – Cockcrow

Answer 1

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'
        }
    }]

Blind

Answer 2

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>

Equinoctial

Answer 3

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

Roee