Can not get dataZoom to show up

[krisklosterman]

I've tried all sorts of dataZoom properties but I can not get the section selector to show up at all.

My graph is a line graph and has a full days worth of data being displayed. When putting this inside the options object, it does not work.

"dataZoom": [
      {
        "show": true,
        "realtime": true,
        "start": 65,
        "end": 100
      }
    ],

I've tried multiple combinations of slider / inside types and nothing.

Does dataZoom work with a dataset graph? Has anyone else got dataZoom to work with a dataset?

[krisklosterman]

any ideas
@xieziyu

[xieziyu]

@krisklosterman Sorry for the late response, I think you need to ask echarts team about this question.

[krisklosterman]

echarts team does not have an dataset attribute that is angular bound?

[xieziyu]

Just forget about dataset, you can directly set data in options just like the echarts official demo.

[krisklosterman]

I am using [dataset] to bind an angular variable to the chart. I update that variable and it shows up in the chart.

<div echarts [options]="graphOptions" [dataset]="blxAPI.graph_stats" class="echart"></div>

in the code I update blxAPI.graph_stats as new data comes in with an array of

{ name: DateValueHere, value: [DateValueHere, FloatHere]}

the options variable I use

this.graphOptions = {
      title: {
        text: 'Graph Stats Chart Test'
      },
    legend: {
      data:['Graph Stats']
    },
    "grid": {
      "bottom": 80
    },
    "toolbox": {
      feature: {
          dataZoom: {
              yAxisIndex: 'none'
          }
      }
    },
    "dataZoom": [
      {
        "show": true,
        "realtime": true,
        "start": 65,
        "end": 100
      }
    ],
      xAxis: {
          type : 'time',
      },
      yAxis: {
          type : 'value'
      },
      series : [
        {
          name: 'Graph Stats',
          type: 'line'
        }
      ]
    };

  }

[xieziyu]

[dataset] is actually putting your data into series for you.
So try to not use dataset and update your graphOptions whenever blxAPI.graph_stats changes just like below:

// call updateStats where you update blxAPI.graph_stats
updateStats() {
  this.graphOptions = {
    title: {
      text: 'Graph Stats Chart Test'
    },
    legend: {
      data: ['Graph Stats']
    },
    "grid": {
      "bottom": 80
    },
    "toolbox": {
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        }
      }
    },
    "dataZoom": [
      {
        "show": true,
        "realtime": true,
        "start": 65,
        "end": 100
      }
    ],
    xAxis: {
      type: 'time',
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Graph Stats',
        type: 'line',
        // here is your data
        data: blxAPI.graph_stats
      }
    ]
  };
}

If you still have the same issue, please ask echarts team for help.

[krisklosterman]

ok thanks

[krisklosterman]

I've copied static examples out of the echarts website and datazoom does not work.

If anyone actualy has datazoom working with NGX-ECHARTS, please let me know, but I think is broke or not functional.

[sauliuni]

well i used e.g.
dataZoom: [ { type: 'inside', start: 50, end: 100 }, { show: true, type: 'slider', y: '90%', start: 50, end: 100 } ],

on my data, and it worked