Search code examples
amchartsamcharts4

AmCharts: Data grouping for very large data sets

I am using amcharts line chart.

I have data for last 24 hours and its recorded for every seconds.

I am trying to group data in amcharts but it displays only 2 data points on chart. 1 data point is from yesterday and 1 from today.

Here is my code: 

  var multiLineChart = am4core.create(
        "multilineChartdiv",
        am4charts.XYChart
      );
      multiLineChart.paddingRight = 20;

      multiLineChart.data = historicalData;

      var dateAxis1 = multiLineChart.xAxes.push(new am4charts.DateAxis());
      dateAxis1.renderer.grid.template.location = 0;
      dateAxis1.minZoomCount = 1;
      dateAxis1.renderer.minGridDistance = 60;
      // dateAxis1.baseInterval = {
      //   timeUnit: "minute",
      //   count: 5,
      // };

      // this makes the data to be grouped
     dateAxis1.groupData = true;
      dateAxis1.groupCount = 500;

      var valueAxis = multiLineChart.yAxes.push(new am4charts.ValueAxis());

      var series1 = multiLineChart.series.push(new am4charts.LineSeries());
      series1.dataFields.dateX = "date";
      series1.dataFields.valueY = "heartRate";
      series1.tooltipText = "{valueY}";
      series1.tooltip.pointerOrientation = "vertical";
      series1.tooltip.background.fillOpacity = 0.5;

      multiLineChart.cursor = new am4charts.XYCursor();
      multiLineChart.cursor.xAxis = dateAxis1;

      var scrollbarX = new am4core.Scrollbar();
      scrollbarX.marginBottom = 20;
      multiLineChart.scrollbarX = scrollbarX;

enter image description here

I need to show data points for at least every 5 or 10 minutes.

Solution

  • If your timestamp is a string, make sure the inputDateFormat is set to match your date format as documented here as the default format is yyyy-MM-dd, truncating everything else to look like daily data, similar to your screenshot:

    chart.dateFormatter.inputDateFormat = 'yyyy-MM-dd HH:mm:ss' //adjust as needed

    Since your data is in seconds, it is also recommended to set the baseInterval accordingly to also ensure that your data is rendered correctly.

          dateAxis1.baseInterval = {
         timeUnit: "second",
         count: 1,
      };