1

I'm currently working on an Angular project where I have to display some data in a graph. I'm using echarts for that through it's NGXecharts implementation.

My data comes from a backend app which scans a file system every 5 minutes and counts how many new files where added. So I have a scan status saved in db every 5 minutes with

scan date : epoch timestamp, number of new files : number

We can easily imagine that after a year this makes a lot of records and data to be displayed. The graph gets very loaded with all these small samples.

My echart is a simple graph with xAxis type='time' an actual values on y.

What I want to do, but can't figure out how, is to catch the time window (start: date, end: date) whenever a user zooms (In/Out). With this and properly configured thresholds, I would be able to call my backend API to get more or less granularity in my dataset.

For Instance if the graph is very zoomed out showing several years, I would query my api asking for monthly aggregated data. If the window displays a full month, I would query daily aggregated data , etc.

I know that echarts has a dataZoom event that works but gives data values (the values of the y axis) and not the time values (min/max) of the x-axis.

{
    type: 'datazoom',
    // percentage of zoom start position, 0 - 100
    start: number
    // percentage of zoom finish position, 0 - 100
    end: number
    // data value of zoom start position; only exists in zoom event of triggered by toolbar
    startValue?: number
    // data value of zoom finish position; only exists in zoom event of triggered by toolbar
    endValue?: number
}

Is there any way to get the time window on a zoom event? I know that some other librairies like Vis.js/Graph2D does this very well but it's lacking some other important features from echarts that I need.

Thanks a lot for you help.

OlivierC
  • 11
  • 2

1 Answers1

4

I had the same question a few days ago and solved my problem with the steps below:

  1. You need to get the chart instance and also bind to chartDataZoom event
<div
  echarts
  [options]="chartOption"
  (chartInit)="onChartInit($event)"
  (chartDataZoom)="onDataZoom()"
  class="demo-chart">
</div>
  1. Create these two function and access dataZoom start and end values in option object.
onChartInit(event: any): void {
  this.echartsInstance = event;
}

onDataZoom(): void {
  const dataZoom = this.echartsInstance.getOption().dataZoom[0];
  console.log(
    dataZoom.startValue, // You may need to format your output. Mine is a date as number.
    dataZoom.endValue
  );
  // Here you can filter your data and update your chart data.
}

One important thing is how dates are stored in options, they are converted to number type, so you need to convert back to Date and format to show as you expect.

Augusto Icaro
  • 553
  • 5
  • 15
  • Good to know! I'm glad to hep. @OlivierC, please mark my answer as the accepted answer :) – Augusto Icaro Aug 16 '21 at 21:48
  • 1
    Thanks, sir. Btw, you can type the event `onChartInit(event: ECharts)` and the `echartsInstance : ECharts` as well to have some IntelliSense. Unfortunately, you still have to type the options too: `(this.echartsInstance.getOption() as EChartsOption) ` as the `getOption()` only returns `ECBasicOption` witch lacks many attributes, including `dataZoom`. – Patronaut Dec 07 '21 at 11:28