Data grouping 50K points

This demo shows how dynamic data item grouping - a feature built-in into amCharts 4 - can help coping with large data sets. In a nutshell it ensures that no more than a fixed number of data items is displayed at any given time. The chart itself automatically adjusts data granularity, grouping data items into bigger periods. When users zooms in, the granularity increases. This means that you can have a "bird's eye" view of the data when zoomed out without overwhelming number of items, and access detailed values for specific periods. And, best of all, you're in control when specifying how aggregate values are calculated. It can be one of the absolute values like open, high, low, or close, or auto-calculated ones, like average or sum. [amb href="https://www.amcharts.com/docs/v4/concepts/axes/date-axis/#Dynamic_data_item_grouping"]Read more about data item grouping[/amb]

by amcharts

HTML

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
  max-width: 100%;
}

JavaScript

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;

var data = [];
var visits = [ 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10 ];
for (var i = 1; i < 1825; i++) {
  var di = { date: new Date(2018, 0, i) };
  for(var x = 0; x < 20; x++) {
    visits[x] += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
    di["value" + x] = visits[x];
  }
  data.push(di)
}

chart.data = data;
console.log(chart.data)

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.groupData = true;
dateAxis.groupCount = 250;
dateAxis.groupIntervals.setAll([
  { timeUnit: 'day', count: 1 },
  { timeUnit: 'week', count: 1 },
  { timeUnit: 'month', count: 1 },
  { timeUnit: 'year', count: 1 }
]);
dateAxis.tooltipDateFormat = 'd. MMMM yyyy';

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

for(var x = 0; x < 20; x++) {
  var series = chart.series.push(new am4charts.LineSeries());

  series.dataFields.dateX = "date";
  series.dataFields.valueY = "value" + x;
  series.dataFields.valueYShow = 'change';
  series.groupFields.valueY = 'close';

  series.tooltipText = "{valueY}";
  series.tooltip.pointerOrientation = "vertical";
  series.tooltip.background.fillOpacity = 0.5;
}

chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;

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