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?

Solution

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

Comments

[C. van Dorsten]

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?

[rjunior]

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

[C. van Dorsten]

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

[John Kotkin]

I have the same issue :( any luck?