Load more historical data in Line charts on panning left

Question

I am plotting line chart data using ChartsModule from ng2-charts. I have also added a plugin to enable zoom and pan.

The problem is I have a lot of data to show and plot, but on page load, I am loading only last 1-day data and want to give the user an option to see historical data by panning to left.

I am getting onPanComplete event on chart panning and able to update the datasets but not sure how I will know that the user has reached to the left end of the chart so that I will load more data and update the datasets.

Below is my chart component:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.scss']
})

export class ChartComponent implements OnInit {
  lineChartData: any;
  chartDataSets: any;

  constructor() { }
  public lineChartOptions
  ngOnInit() {
    var sampleData = [
      {
        "CreateDate": "2019-08-12 15:30:03",
        "NewBuyValue": "16,791.658178"
      },
      {
        "CreateDate": "2019-08-12 14:30:29",
        "NewBuyValue": "16,760.46713691"
      },
      {
        "CreateDate": "2019-08-12 13:30:31",
        "NewBuyValue": "16,792.80212024"
      },
      {
        "CreateDate": "2019-08-12 12:30:27",
        "NewBuyValue": "16,740.86970638"
      }
    ].map(d => {
      return {
        t: new Date(d.CreateDate),
        y: d.NewBuyValue.replace(',', '')
      }
    })
    this.chartDataSets = [{
      label: 'Buy Price',
      backgroundColor: "#2072ef",
      borderColor: '#2072ef',
      type: 'line',
      pointRadius: 0,
      fill: false,
      lineTension: 0,
      borderWidth: 2,
      data: sampleData
    }]

    this.lineChartOptions = {
      pan: {
        enabled: true,
        mode: 'x',
        onPan: function (e) {
          console.log(`I'm panning!!!`, e);
        },
        onPanComplete: function (e) {
          console.log(`I was panned!!!`, e);
          e.chart.config.data.datasets[0].data.pop()
        }
      },
      zoom: {
        enabled: true,
        mode: 'x',
      },
      hover: {
        mode: 'nearest',
        intersect: true
      },
      responsive: true,
      scales: {
        xAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'Time'
          },
          type: 'time',
          distribution: 'series',
          ticks: {
            source: 'data',
            autoSkip: false
          }
        }],
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'Prices'
          }
        }]
      },
      tooltips: {
        intersect: false,
        mode: 'index',
        callbacks: {
          label: function (tooltipItem, myData) {
            var label = myData.datasets[tooltipItem.datasetIndex].label || '';
            if (label) {
              label += ': ';
            }
            label += parseFloat(tooltipItem.value).toFixed(2);
            return label;
          }
        }
      }
    }
    this.lineChartData = []
  }
}

Also, I would like to know If there is any better way to implement history data load on panning event

Answer 1

I loaded 1 week data and updated time.min for xAxis to the value of the current date start. That's done the trick

this.lineChartOptions.scales.xAxes[0].time.min = chartData.data[0].t - 24 * 3600000