Time series data processing

Characteristics of Time Series Data

Time series data is a collection of data points arranged in chronological order, commonly found in fields such as finance, IoT, and meteorology. This type of data exhibits clear temporal dependencies, with correlations between consecutive data points. Timestamps are the core element, often requiring millisecond-level precision. The data typically displays trends, seasonality, and periodicity. Examples include minute-by-minute stock price changes, hourly temperature readings from sensors, and daily website traffic statistics.

// Example time series data structure
const timeSeriesData = [
  { timestamp: '2023-01-01 08:00', value: 32.5 },
  { timestamp: '2023-01-01 08:05', value: 33.1 },
  { timestamp: '2023-01-01 08:10', value: 32.8 },
  // More data points...
];

Time Axis Configuration in ECharts

ECharts handles time series data through the type: 'time' configuration in the xAxis. The time axis automatically generates ticks based on the data range and supports parsing various time formats. Key configuration parameters include:

• axisLabel.formatter: Customizes the time display format
• min/max: Controls the displayed time range
• splitNumber: Affects the density of time ticks
• axisPointer: Displays detailed time information on hover

option = {
  xAxis: {
    type: 'time',
    axisLabel: {
      formatter: '{yyyy}-{MM}-{dd} {HH}:{mm}'
    }
  },
  yAxis: { type: 'value' },
  series: [{
    data: timeSeriesData,
    type: 'line'
  }]
};

Optimization Strategies for Large Data Volumes

When dealing with large-scale time series data, performance optimization is critical:

1. Data Sampling: Downsample the original data

function downsample(data, factor) {
  return data.filter((_, index) => index % factor === 0);
}

2. Incremental Rendering: Dynamically load data using the appendData method

chart.appendData({
  seriesIndex: 0,
  data: newDataChunk
});

3. Enable Large Data Mode: Set large: true and largeThreshold

series: [{
  large: true,
  largeThreshold: 2000,
  // ...
}]

Dynamic Time Range Control

Implement interactive time range selection:

const option = {
  dataZoom: [{
    type: 'slider',
    xAxisIndex: 0,
    filterMode: 'filter'
  }, {
    type: 'inside',
    xAxisIndex: 0
  }],
  // ...
};

// Programmatically control the time range
chart.dispatchAction({
  type: 'dataZoom',
  start: 30, // Percentage
  end: 70
});

Multi-Time Series Comparative Analysis

Display multiple related time series in the same chart:

const cpuData = [...];
const memoryData = [...];
const networkData = [...];

option = {
  dataset: [{
    source: cpuData
  }, {
    source: memoryData
  }, {
    source: networkData
  }],
  series: [
    { datasetIndex: 0, type: 'line', name: 'CPU Usage' },
    { datasetIndex: 1, type: 'line', name: 'Memory Usage' },
    { datasetIndex: 2, type: 'line', name: 'Network Traffic' }
  ]
};

Time Series Anomaly Detection Visualization

Highlight anomalous data points with visual markers:

const markedData = originalData.map(item => {
  const isAnomaly = detectAnomaly(item.value);
  return {
    ...item,
    symbol: isAnomaly ? 'triangle' : 'circle',
    symbolSize: isAnomaly ? 10 : 4,
    itemStyle: {
      color: isAnomaly ? '#ff0000' : '#5470c6'
    }
  };
});

series: [{
  data: markedData,
  markPoint: {
    data: [
      { type: 'max', name: 'Max' },
      { type: 'min', name: 'Min' }
    ]
  }
}]

Time Series Forecast Display

Differentiate historical data from forecast data with distinct styles:

const historyData = [...]; // Data up to the current time
const forecastData = [...]; // Forecast data

series: [
  {
    name: 'Historical Data',
    data: historyData,
    type: 'line',
    lineStyle: { width: 2 }
  },
  {
    name: 'Forecast Data',
    data: forecastData,
    type: 'line',
    lineStyle: {
      type: 'dashed',
      width: 1
    },
    itemStyle: { opacity: 0.6 }
  }
]

Timezone Handling Solutions

Address display issues for cross-timezone time series data:

const utcData = [...]; // UTC time data

// Convert to local time display
option = {
  xAxis: {
    type: 'time',
    axisLabel: {
      formatter: function(value) {
        return new Date(value).toLocaleString();
      }
    }
  },
  series: [{
    data: utcData.map(item => ({
      timestamp: new Date(item.timestamp).getTime(),
      value: item.value
    }))
  }]
};

Event Marking and Annotation

Annotate important events on the time axis:

option = {
  series: [{
    data: timeSeriesData,
    markLine: {
      data: [
        {
          name: 'System Upgrade',
          xAxis: '2023-06-15 02:00',
          label: { formatter: '{b}' }
        },
        {
          name: 'Failure Occurred',
          xAxis: '2023-06-20 14:30'
        }
      ]
    }
  }]
};

Real-Time Data Update Mechanism

Implement real-time refreshing for time series charts:

let currentData = [...];

function updateChart() {
  const newPoint = generateNewDataPoint();
  currentData.push(newPoint);
  
  // Maintain a fixed number of data points
  if (currentData.length > 500) {
    currentData.shift();
  }
  
  chart.setOption({
    series: [{
      data: currentData
    }]
  });
}

setInterval(updateChart, 1000);

Interactive Time Point Details

Enhance interactive display for time points:

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    },
    formatter: function(params) {
      const date = new Date(params[0].value[0]);
      return `
        <div>Time: ${date.toLocaleString()}</div>
        <div>Value: ${params[0].value[1]}</div>
        <div>Change Rate: ${calculateChangeRate(params)}%</div>
      `;
    }
  },
  // ...
};