CODEWITHSUNDEEP
echartsapache-echarts
C-RAD
C-RAD

Reputation: 1027

How can I slide X axis on update?

I have an Apache echart I am trying to use to graph time series data. I'm using a websocket to push updates with:

chart.setOption({ dataset: [{ id: 'dataset_raw', source: updatedData }]})

It graphs the data fine, and once the max amount of data is on the chart (1000 datapoints), the lines slide of the left of the chart as expected.

My problem is the axisLabels on the x axis behave oddly.

First, since there is initially no data on the chart, one timestamp appears at the origin, and more and more timestamps are added and begin sliding to the left.

Then eventually all the labels are removed and one is added to the right, and begins sliding left.

Finally, all the labels stand still, but their values are incremented to reflect the updates.

I know the labels are re-drawn with every update, but the behavior I would like is for the labels to not be incremented, but always slide to the left, like in this example: https://echarts.apache.org/examples/en/editor.html?c=dynamic-data2

My xAxis option looks like this

  "xAxis": {
    "type": "time",
    "nameLocation": "end",
    "name": "Now",
    "axisLabel": {
      "rotate": 90,
      "fontSize": 12,
      "interval": 20
    },
    "axisTick": {
      "show": false
    },
    "splitLine": {
      "show": false
    }
  },

Upvotes: 0

Views: 27

Answers (0)

Related Questions