CODEWITHSUNDEEP
chartsamchartsamcharts4
Naveed
Naveed

Reputation: 23

min and max value for date axis in amcharts4

I have a line graph with date axis and data being displayed in intervals for 30 or 15 minutes for a day. Since data is dynamic, for some cases data starts around 12 noon or some other time and hence the x-axis does not always starts from the 00:00. Similarly data might end before 12:00 Mid night.

I want to always show the dateAxis to start from 00:00 then some fix step for lets say a label for every one or two hours and end at 12:00 mid night. How can i do this?

I tried DateAxis.min and DateAxis.max. But these are only accepting numeric values. not sure how to set it to appropriate numeric value to represent the start and end of day.

I also tried setting DateAxis.extraMin and DateAxis.extraMax but these are working on percentage and its a but hard to find appropriate values for the dynamic data.

This is how current graph renders

This is how i want to display (notice the empty labels at the start)

Upvotes: 1

Views: 5947

Answers (1)

xorspark
xorspark

Reputation: 16012

The min/max properties in DateAxis objects take millisecond timestamps. You can use the result of getTime() from a JavaScript Date object:

dateAxis.min = (new Date(2019,7,10)).getTime();
dateAxis.max = (new Date(2019,7,10,23)).getTime();

There isn't a way to explicitly set a step, though. You can tweak minGridDistance to influence the step but that's about it. The only workaround you can use is insert guides (Axis Ranges) at each timestamp with the appropriate label and disable the DateAxis' default labels.

    range.date = new Date(2019, 7, 10, 0);
    range.grid.strokeOpacity = .5;
    range.grid.stroke = "#cecece";
    range.label.text = "00:00";

Note that axis won't adjust label visibility in this case, so you may need to set a rotation on the range label as well.

Demo below:

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = generateData();

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.startLocation = 0.5;
dateAxis.endLocation = 0.5;

// Create value axis
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.name = "Sales";
series.strokeWidth = 3;
series.fillOpacity = 0.5;


dateAxis.baseInterval = {
  timeUnit: "minute",
  count: 15
}
dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.labels.template.disabled = true;
dateAxis.min = (new Date(2019, 7, 10, 0)).getTime();
dateAxis.max = (new Date(2019, 7, 10, 23)).getTime();

generateRanges(dateAxis);

function generateRanges(axis) {
  var firstDate = new Date(2019, 7, 10, 0);
  for (var i = 0; i < 24; ++i) {
    var range = axis.axisRanges.create();
    var nextDate = new Date(firstDate);
    nextDate.setHours(i);
    range.date = nextDate;
    range.grid.strokeOpacity = .5;
    range.grid.stroke = "#cecece";
    range.label.text = ("0" + nextDate.getHours()).substr(-2) + ":" + ("0" + nextDate.getMinutes()).substr(-2);
    range.label.rotation = 90;
  }
}

function generateData() {
  var data = [];
  var firstDate = new Date(2019, 7, 10, 10);
  for (var i = 0; i < 32; ++i) {
    var nextDate = new Date(firstDate);
    nextDate.setMinutes(i * 15);
    data.push({
      date: nextDate,
      value: Math.floor(Math.random() * 15 + 5)
    })
  }
  return data;
}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width: 100%; height: 98vh;"></div>

Upvotes: 4

Related Questions