Doesn't show data correctly

Question

I have prepared linear graph and some data here.

As you can see, when you try display details of samples in the middle, graph show detail of another one. As the date format I am using Unix timestamp.

Next problem is rectangle below which should show sample's date, instead of it show day, month, and some number. I require date format like YYYY/MM/DD - mm:ss.

var chart = AmCharts.makeChart( "chartdiv", {
        "type": "serial",
        "theme": "light",
        "marginRight": 80,
        "autoMarginOffset": 20,
        "marginTop": 7,
        "dataDateFormat": "YYYY/MM/DD JJ:NN:QQQ",
        "dataProvider": chartData,
        "valueAxes": [{
            "axisAlpha": 0.2,
            "dashLength": 1,
            "position": "left",
        }],
        "mouseWheelZoomEnabled": true,
        "graphs": [{
            "id": "g1",
            "balloonText": "BallonText",
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "hideBulletsCount": 50,
            "title": "red line",
            "valueField": "yCoordinate",
            "useLineColorForBulletBorder": true,
            "balloon":{
                "drop":true
            }
        }],
        "chartScrollbar": {
            "autoGridCount": true,
            "graph": "g1",
            "scrollbarHeight": 40
        },
        "chartCursor": {
            "limitToGraph":"g1"
        },
        "categoryField": "xCoordinate",
        "categoryAxis": {
            "parseDates": true,
            "axisColor": "#DADADA",
            "dashLength": 1,
            "minorGridEnabled": true
        },
        "export": {
            "enabled": true
        },
    } );

Answer 1

There are a couple of issues.

1) Your date-based data must be sorted in ascending, per the parseDates documentation documentation. Your dates are out of order, which will cause chart behavior issues like what you're seeing.

2) You have to set your category axis minPeriod to match the smallest period between each of your dates in your data. It looks like seconds ("ss") are appropriate.

As for formatting the chart cursor, you can set categoryBalloonDateFormat to the desired format. In this case "YYYY/MM/DD - NN:SS" is what you want. Refer to the formatting dates documentation if you need to use different formats.

Also note that dataDateFormat is not necessary if you're using millisecond timestamps. dataDateFormat is only used to parse your date data if they are strings.

Updated code below:

var chartData = [
  {
    xCoordinate: 1511509736056,
    yCoordinate: 1
  },
  {
    xCoordinate: 1511509955035,
    yCoordinate: 1
  },
  {
    xCoordinate: 1511510013033,
    yCoordinate: 1
  },
  {
    xCoordinate: 1511510152052,
    yCoordinate: 1
  },
  {
    xCoordinate: 1511510436036,
    yCoordinate: 1
  },
  {
    xCoordinate: 1511510664024,
    yCoordinate: 1
  }
];

//sort dates into ascending order
chartData.sort(function(lhs, rhs) {
  return lhs.xCoordinate - rhs.xCoordinate;
});

var chart = AmCharts.makeChart("chartdiv", {
  type: "serial",
  theme: "light",
  marginRight: 80,
  autoMarginOffset: 20,
  marginTop: 7,
  dataProvider: chartData,
  valueAxes: [
    {
      axisAlpha: 0.2,
      dashLength: 1,
      position: "left"
    }
  ],
  mouseWheelZoomEnabled: true,
  graphs: [
    {
      id: "g1",
      balloonText: "BallonText",
      bullet: "round",
      bulletBorderAlpha: 1,
      bulletColor: "#FFFFFF",
      hideBulletsCount: 50,
      title: "red line",
      valueField: "yCoordinate",
      useLineColorForBulletBorder: true,
      balloon: {
        drop: true
      }
    }
  ],
  chartScrollbar: {
    autoGridCount: true,
    graph: "g1",
    scrollbarHeight: 40
  },
  chartCursor: {
    limitToGraph: "g1",
    categoryBalloonDateFormat: "YYYY/MM/DD - NN:SS" //change date format in cursor
  },
  categoryField: "xCoordinate",
  categoryAxis: {
    parseDates: true,
    axisColor: "#DADADA",
    dashLength: 1,
    minPeriod: "ss", //update min period to match the smallest intervals in your data.
    minorGridEnabled: true
  },
  export: {
    enabled: true
  }
});

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
	width: 100%;
	height: 100%;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>