0

I have a simple area chart and I would like to show the right date with hours and minutes. I have a const for converting unix timestamp :

const formatDate = inputDate => {
    const date1 = new Date(inputDate * 1000);

    let day = date1.getDate();
    let month = date1.getMonth() + 1;
    const year = date1.getFullYear();
    if (day < 10) {
      day = '0' + dd;
    }
    if (month < 10) {
      month = '0' + month;
    }
    const formattedDate = day + '/' + month + '/' + year;
    return formattedDate;
}

Here is my full code :

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.dataSource.url = "https://api.myjson.com/bins/8se3o";

const formatDate = inputDate => {
    const date1 = new Date(inputDate * 1000);

    let day = date1.getDate();
    let month = date1.getMonth() + 1;
    const year = date1.getFullYear();
    if (day < 10) {
      day = '0' + dd;
    }
    if (month < 10) {
      month = '0' + month;
    }
    const formattedDate = day + '/' + month + '/' + year;
    return formattedDate;
}

chart.data = chart.data.map(element => {
  element.time = formatDate(element.time)
  return element;
});




var dateAxis = chart.xAxes.push(new am4charts.DateAxis());

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

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "time";
series.name = "outDiff";
series.dataFields.valueY = "outDiff";
series.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
series.tooltipText = "[#000]{valueY.value}[/]";
series.tooltip.background.fill = am4core.color("#FFF");
series.tooltip.getStrokeFromObject = true;
series.tooltip.background.strokeWidth = 3;
series.tooltip.getFillFromObject = false;
series.fillOpacity = 0.6;
series.strokeWidth = 2;
series.stacked = true;

var series2 = chart.series.push(new am4charts.LineSeries());
series2.name = "inDiff";
series2.dataFields.dateX = "time";
series2.dataFields.valueY = "inDiff";
series2.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
series2.tooltipText = "[#000]{valueY.value}[/]";
series2.tooltip.background.fill = am4core.color("#FFF");
series2.tooltip.getFillFromObject = false;
series2.tooltip.getStrokeFromObject = true;
series2.tooltip.background.strokeWidth = 3;
series2.sequencedInterpolation = true;
series2.fillOpacity = 0.6;
series2.stacked = true;
series2.strokeWidth = 2;

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


chart.legend = new am4charts.Legend();
chart.legend.position = "top";
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;
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

All data from time key are from todays date (19/04/2019)

1
  • 1
    You can use moment.js for time related stuff. Is there an error? or it just doesn't work?
    – weegee
    Apr 19, 2019 at 14:03

1 Answer 1

4

There are couple of things wrong with your code.

First, amCharts expects dates to be sorted in ascending order. Your data is currently out of order, causing the chart to look weird.

Second, you don't need to format your data in string format. You can still use your timestamp (provided that you multiply by 1000 seconds) and use the chart's dateFormatter to parse it through the "x" code in inputDateFormatter, as documented here.

Since you're using dataSource, you can use the parseended event to manipulate your data before it is assigned to the chart like so:

chart.dataSource.events.on("parseended", function(ev) {
  // parsed data is assigned to data source's `data` property
  var data = ev.target.data;
  data.sort(function(lhs, rhs) {
    return lhs.time - rhs.time;
  });
  data.forEach(function(item) {
    item.time *= 1000;
  });
});

chart.dateFormatter.inputDateFormat = "x";

To change the dates, you have to modify your date axis' dateFormats and periodChangeDateFormats list objects and set the appropriate date format for the period(s) you want to reformat. Since your data is in minutes, you'll want to call setKey on the minutes period and adjust accordingly as documented here, for example:

dateAxis.dateFormats.setKey("minute", "MMM dd\nHH:mm");
dateAxis.periodChangeDateFormats.setKey("minute", "MMM dd\nHH:mm");

Fully updated code below:

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.dataSource.url = "https://api.myjson.com/bins/8se3o";
chart.dataSource.events.on("parseended", function(ev) {
  // parsed data is assigned to data source's `data` property
  var data = ev.target.data;
  data.sort(function(lhs, rhs) {
    return lhs.time - rhs.time;
  });
  data.forEach(function(item) {
    item.time *= 1000;
  });
});

chart.dateFormatter.inputDateFormat = "x";


var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dateFormats.setKey("minute", "MMM dd\nHH:mm");
dateAxis.periodChangeDateFormats.setKey("minute", "MMM dd\nHH:mm");

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

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "time";
series.name = "outDiff";
series.dataFields.valueY = "outDiff";
series.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
series.tooltipText = "[#000]{valueY.value}[/]";
series.tooltip.background.fill = am4core.color("#FFF");
series.tooltip.getStrokeFromObject = true;
series.tooltip.background.strokeWidth = 3;
series.tooltip.getFillFromObject = false;
series.fillOpacity = 0.6;
series.strokeWidth = 2;
series.stacked = true;

var series2 = chart.series.push(new am4charts.LineSeries());
series2.name = "inDiff";
series2.dataFields.dateX = "time";
series2.dataFields.valueY = "inDiff";
series2.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
series2.tooltipText = "[#000]{valueY.value}[/]";
series2.tooltip.background.fill = am4core.color("#FFF");
series2.tooltip.getFillFromObject = false;
series2.tooltip.getStrokeFromObject = true;
series2.tooltip.background.strokeWidth = 3;
series2.sequencedInterpolation = true;
series2.fillOpacity = 0.6;
series2.stacked = true;
series2.strokeWidth = 2;

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


chart.legend = new am4charts.Legend();
chart.legend.position = "top";
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;
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

2
  • I don't know what cause the issu but if you hover on a point you will see, the lowest value is rendered higher on the chart. For example the first point 568964 is drawned highter than 574646
    – executable
    Apr 23, 2019 at 11:27
  • 2
    That's because you're stacking the graphs, which adds the line on top of the other one. This is how stacking graphs works. If you don't want this, set stacked to false.
    – xorspark
    Apr 23, 2019 at 12:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.