title: Using 'time' type on X axis of ECharts for timeseries graphing
body: <p>I'm using ECharts 4.0.4 (<a href="http://echarts.baidu.com/" rel="nofollow noreferrer">http://echarts.baidu.com/</a>) to graph some sensor data with timestamps on the X axis.</p>
  <p>Have tried with legacy series data and datasets (new on v4), but 'time' axis type won't work properly. With 'category' it works fine:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="main" style="width: 500px;height:400px;"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>With 'time' it doesn't:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="main" style="width: 500px;height:400px;"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I even tried using dimensions (which features the type for each series):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="main" style="width: 500px;height:400px;"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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.</p>
  <p>The time axis example on ECharts demo page uses a diferent data format for a datapoint (for a single series):</p>
  <pre><code>point = {
    name: 'Sun Jul 23 2000 00:00:00 GMT-0300 (-03)',
    value: [
      '2000/7/23',   // X data (timestamp)
      100            // Y data
    ]
  }
  </code></pre>
  <p>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?</p>