CODEWITHSUNDEEP
javascriptchartsamcharts
Laurent
Laurent

Reputation: 160

How to get the number of points in the displayed region of a chart made with amCharts

I made a line chart (XYChart) using amCharts and I was wondering if there was a way to get the number of points (bullets) in the region that I'm zooming in. I need to show that number in a box each time I'm zooming a different region. Thanks for your help Laurent

Upvotes: 0

Views: 208

Answers (1)

Alfred
Alfred

Reputation: 684

In order to do that, I believe this is what you have to do:

  1. Create a zoomended event listener for your chart cursor (this triggers when you are done zooming with your cursor).
  2. Point the start and end values (coordinates) to your axis and retrieve the actual start and end values relative to the axis. This part depends on your axis data type, positionToDate for date axis & positionToCategory for category axis.
  3. Have another function to calculate number of data items between the 2 values (based on your chart data).

I have created a snippet from the official demo with the zoomended event handler example attached to it.

/**
 * ---------------------------------------
 * 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);

var data = [];
var value = 50;
for(var i = 0; i < 300; i++){
  var date = new Date();
  date.setHours(0,0,0,0);
  date.setDate(i);
  value -= Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
  data.push({date:date, value: value});
}

chart.data = data;

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 60;

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

// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.tooltipText = "{value}"

series.tooltip.pointerOrientation = "vertical";

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

//Zoomended cursor events here
chart.cursor.events.on("zoomended", function(ev) {
  const range = ev.target.xRange;
  const axis = ev.target.chart.xAxes.getIndex(0);
  const from = axis.positionToDate(axis.toAxisPosition(range.start));
  const to = axis.positionToDate(axis.toAxisPosition(range.end));

  console.log(from);
  console.log(to);
});
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: 200px;
}
<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>

Upvotes: 1

Related Questions