How to format timestamp unix into date in amcharts4

Question

I'm looking to format 1555596901 into a readable date like 2019/04/19 11h52. Here is the code :

am4core.useTheme(am4themes_animated);

function createChart(htmlElement){
  var chart = am4core.create(htmlElement, am4charts.XYChart);
  chart.dateFormatter.dateFormat = "dd/MM/yyyy";

  chart.data = [
    {
      category: "1555596901",
      value1: 1,
      value2: 5,
      value3: 3,
      value4: 3
    },
    {
      category: "1555611301",
      value1: 10,
      value2: 8,
      value3: 6,
      value4: 4
    }
  ];

  chart.cursor = new am4charts.XYCursor();

  chart.colors.step = 2;

  var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = "category";
  categoryAxis.renderer.grid.template.location = 0;
  categoryAxis.dateFormatter.dateFormat = "dd/MM/yyyy";

  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());  
  valueAxis.min = 0;
  valueAxis.renderer.minWidth = 35;

  var series1 = chart.series.push(new am4charts.ColumnSeries());
  series1.columns.template.width = am4core.percent(80);
  series1.columns.template.tooltipText = "{name}: {valueY.value}";
  series1.name = "Series 1";
  series1.dataFields.categoryX = "category";
  series1.dataFields.valueY = "value1";
  series1.stacked = true;
  series1.dateFormatter.dateFormat = "dd/MM/yyyy";

  var series2 = chart.series.push(new am4charts.ColumnSeries());
  series2.columns.template.width = am4core.percent(80);
  series2.columns.template.tooltipText = "{name}: {valueY.value}";
  series2.name = "Series 2";
  series2.dataFields.categoryX = "category";
  series2.dataFields.valueY = "value2";
  series2.stacked = true;
  series2.dateFormatter.dateFormat = "dd/MM/yyyy";

  var series3 = chart.series.push(new am4charts.ColumnSeries());
  series3.columns.template.width = am4core.percent(80);
  series3.columns.template.tooltipText = "{name}: {valueY.value}";
  series3.name = "Series 3";
  series3.dataFields.categoryX = "category";
  series3.dataFields.valueY = "value3";
  series3.stacked = true;
  series3.dateFormatter.dateFormat = "dd/MM/yyyy";

  var series4 = chart.series.push(new am4charts.ColumnSeries());
  series4.columns.template.width = am4core.percent(80);
  series4.columns.template.tooltipText = "{name}: {valueY.value}";
  series4.name = "Series 4";
  series4.dataFields.categoryX = "category";
  series4.dataFields.valueY = "value4";
  series4.stacked = true;
  series4.dateFormatter.dateFormat = "dd/MM/yyyy";
  
  return chart;
}

let chart1 = createChart("chartdiv");

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: 300px;
}

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

As you can see it doesn't format the timestamp. I saw in the doc I need to use chart.dateFormatter.dateFormat = "dd/MM/yyyy"; for formatting.

wentjun · Accepted Answer · 2019-04-19T12:17:19.680

1

You can format the unix timestamp to JavaScript Date object by doing this.

const date1 = new Date(1555596901 * 1000);
console.log(date1);

Then, you can format it to dd/mm/yyyy by doing this;

    
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;
}

//formatDate(1555596901);
console.log(formatDate(1555596901));

And now, on your original code, you simply need to add the formatDate function stated above, and then map it over your chart.data as shown below.

chart.data = [
    {
      category: "1555596901",
      value1: 1,
      value2: 5,
      value3: 3,
      value4: 3
    },
    {
      category: "1555611301",
      value1: 10,
      value2: 8,
      value3: 6,
      value4: 4
    }
  ];

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.category = formatDate(element.category)
  return element;
});

console.log(chart.data)

edited Apr 19 '19 at 12:17

answered Apr 19 '19 at 12:02

wentjun

27,425
7
54
65

How do I apply it for amcharts4 ? – executable Apr 19 '19 at 12:05
@executable Sorry I forgot to include that part in my post. I will update my answer. Basically, I am mapping that function to the dates. – wentjun Apr 19 '19 at 12:09
Thank you, i'll wait for the full snippet. I'm new to amchart4 – executable Apr 19 '19 at 12:12
@executable alright, I have updated it. This is how you can use that function on your code. – wentjun Apr 19 '19 at 12:18
1

Thank you for the answer. A little question, how can I map for an external ressource `chart.datasource.url` ? – executable Apr 19 '19 at 12:20
Hmm, I don't really understand your question. Do you mean, you want to include `url` onto each object within `chart.data`..? Or is it something else – wentjun Apr 19 '19 at 12:26
I'm getting data from an external ressource like `chart.dataSource.url = "data.php"` – executable Apr 19 '19 at 12:27
Does the changing of date format from timestamp to string affects the chart data also? If so this will affects the performance of chart when the data is more because performance affects when the date is in string format. – Kirataka Apr 19 '20 at 09:06

How to format timestamp unix into date in amcharts4

1 Answers1