How to format axis real time amcharts hh:mm?

Question

I use amchart, I want to create a real time chart, and set minDate, maxDate for x axis, and format it to hh:mm. I tried use minimumDate, maximumDate, "minPeriod" : "hh", but it fail.

My code: demo1.

I want to use amchart to build a real time chart like: demo2 (use flot chart).

The labels xaxis is static not run, and to accumulate data. Help me, please! Thank you!

Answer 1

When updating the time, you need to set a new date instance or a separate value. Updating the startDate variable updates all the data points that share that date object as AmCharts doesn't clone the date objects in your dataProvider. A quick fix is to use the millisecond timestamp result from the setMinutes call, for example:

var newDate = startDate.setMinutes(startDate.getMinutes() + 10);
var visits = randomIntFromInterval(50, 100);

chartData.push({
  date: newDate,
  visits: visits
});

AmCharts will internally convert the millisecond values to a new Date object. This should be applied to your generate and update methods.

minPeriod should be set to the minimum period between your datapoints. As you're adding data in 10 minute increments, this should be "mm", not "hh".

By default, the categoryAxis does not support setting a minimumDate and maximumDate, however, you can use AmCharts' datePadding plugin to add this functionality. This plugin will allow you to set a minimumDate and maximumDate property in your categoryAxis when you add the following script tag after your AmCharts includes:

<script src="//www.amcharts.com/lib/3/plugins/tools/datePadding/datePadding.min.js"></script>

In order to maintain your date range after updating the chart, you have to call the plugin's AmCharts.datePaddingProcess method to re-update the range before redrawing the chart.

Here's what your updateChart method will look like after using the datePadding plugin:

function updateChart() {
  var newDate = startDate.setMinutes(startDate.getMinutes() + 10);
  var visits = randomIntFromInterval(50, 100);
  chart.dataProvider.push({
    date:newDate,
    visits:visits
  });
  AmCharts.datePaddingProcess(chart, true);
  chart.validateData();
}

And here's what your categoryAxis will look like:

  "categoryAxis": {
    "parseDates": true,
    "gridAlpha": 0.15,
    "axisColor": "#DADADA",
    "minPeriod" : "mm",
    "minimumDate": min,
    "maximumDate": max
  },

Updated fiddle