日期相同的点在X轴上放置在不同的位置（X轴是日期轴）

Question

The problem:

Points which has the same date are placed to the different places at X-axis (X-axis is a date axis).

http://icecream.me/b8388ef9e8d80e3a55dc546cd61187d9

Here are AmCharts settings:

                            AmCharts.makeChart("dashboard-chart", {
                                "type": "serial",
                                "theme": "light",
                                "equalSpacing": true,
                                "dataProvider": chartData,
                                "valueAxes": valueAxes,
                                "graphs": graphs,
                                "categoryField": "captured_datetime",
                                'chartCursor': {
                                    'cursorPosition': 'mouse',
                                    'cursorColor': '#ffa500',
                                    "valueLineBalloonEnabled": true,
                                    "valueLineEnabled": true,
                                },
                                "categoryAxis": {
                                    "gridPosition": "middle",
                                    "labelRotation": 75,
                                    "minorGridEnabled": true

                                },
                                "responsive": {
                                    "enabled": true
                                }
                            });

Incoming data looks like this:

[  
   {  
      "node_id":"1680",
      "node_name":"Internal",
      "nd":"1",
      "sensor_type":"TM",
      "captured_datetime":"2018-02-01 19:31:33",
      "valueTM1680":"91.1"
   },
   {  
      "node_id":"1680",
      "node_name":"Internal",
      "nd":"1",
      "sensor_type":"HU",
      "captured_datetime":"2018-02-01 19:31:33",
      "valueHU1680":"72.6"
   },
   {  
      "node_id":"1680",
      "node_name":"Internal",
      "nd":"1",
      "sensor_type":"TM",
      "captured_datetime":"2018-02-01 19:33:13",
      "valueTM1680":"91.1"
   },
   {  
      "node_id":"1680",
      "node_name":"Internal",
      "nd":"1",
      "sensor_type":"HU",
      "captured_datetime":"2018-02-01 19:33:13",
      "valueHU1680":"72.6"
   }
]

Graph example:

graphs.push({
                                            "balloonText": "Sensor name: [[node_name]] <br> Sensor id: [[nd]] <br> Sensor value:[[value]]<br> Sensor type: [[sensor_type]]<br>  Collecting date: [[captured_datetime]] <br>",
                                            "bullet": "round",
                                            "lineColor": "#000000",
                                            "bulletSize": 3,
                                            "fillAlphas": types[i].indexOf("TM") >= 0 ? 1 : 0,
                                            "type": types[i].indexOf("TM") >= 0 ? "column" : "smoothedLine",
                                            "labelPosition": "right",
                                            "valueField": "value" + types[i],
                                            "fixedColumnWidth": 10
                                        })

Tried to use parseDates with following parameters ( but it didn`t help ):

 "minPeriod":"ss",
"parseDates":true

Added following settings to a chart (which didn`t helped either):

"dataDateFormat": "YYYY-MM-DD HH:NN:SS", "equalSpacing": true,

Answer 1

You still have to group your data as I mentioned in my last answer . The issue you're seeing there is what I meant by other odd behavior. If you can't group your data in your backend, then do it in JavaScript. You also need to make sure that your dates are sorted in ascending order:

// data remap:
var datetime_hash = {};
var types = {};
data.forEach(function(item, idx) {
    if (!datetime_hash.hasOwnProperty(item.captured_datetime)) {
        datetime_hash[item.captured_datetime] = {};
    }
    var suffix = item.sensor_type + item.node_id;
    types[suffix] = 1;
    datetime_hash[item.captured_datetime]["sensor_type" + suffix] = item.sensor_type;
    datetime_hash[item.captured_datetime]["node_name"] = item.node_name;
    datetime_hash[item.captured_datetime]["node_id"] = item.node_id;
    datetime_hash[item.captured_datetime]["nd"] = item.nd;
    datetime_hash[item.captured_datetime]["value" + suffix] = item["value" + suffix];
    datetime_hash[item.captured_datetime]["captured_datetime"] = item.captured_datetime;
})
//sort/remap hash data into an array
var chartData = Object.keys(datetime_hash).sort(function(lhs, rhs) {
  //ensure the dates are sorted in ascending order
  var lhsDate = AmCharts.stringToDate(lhs, "YYYY-MM-DD JJ:NN:SS");
  var rhsDate = AmCharts.stringToDate(rhs, "YYYY-MM-DD JJ:NN:SS");
  return lhsDate - rhsDate;
}).map(function(datetime) {
  return datetime_hash[datetime];
});

// updated graph creation code:
types = Object.keys(types);
var graphs = types.map(function(type) {
    return {
            "balloonText": "Sensor name: [[node_name]] <br> Sensor id: [[nd]] <br> Sensor value:[[value]]<br> Sensor type: [[sensor_type" + type + "]]<br>  Collecting date: [[captured_datetime]] <br>",
            "bullet": "round",
            "lineColor": "#000000",
            "bulletSize": 3,
            "fillAlphas": type.indexOf("TM") >= 0 ? 1 : 0,
            "type": type.indexOf("TM") >= 0 ? "column" : "smoothedLine",
            "labelPosition": "right",
            "valueField": "value" + type,
            "fixedColumnWidth": 10
    }
});

In case you want to parse dates (and you should), you have to set the dataDateFormat at the top level of the makeChart call and equalSpacing , minPeriod , parseDates inside the categoryAxis .

Demo with additional dummy data:

 var data = [{ "valueTM1680": 24.9, "nd": 1, "node_name": "Internal", "sensor_type": "TM", "node_id": 1680, "captured_datetime": "2018-01-01 00:00:00" }, { "nd": 1, "node_name": "Internal", "sensor_type": "HU", "node_id": 1680, "valueHU1680": 39.9, "captured_datetime": "2018-01-01 00:00:00" }, { "valueTM1680": 22.3, "nd": 1, "node_name": "Internal", "sensor_type": "TM", "node_id": 1680, "captured_datetime": "2018-01-01 00:00:05" }, { "nd": 1, "node_name": "Internal", "sensor_type": "HU", "node_id": 1680, "valueHU1680": 37.8, "captured_datetime": "2018-01-01 00:00:05" }, { "valueTM1680": 20.1, "nd": 1, "node_name": "Internal", "sensor_type": "TM", "node_id": 1680, "captured_datetime": "2018-01-01 00:00:24" }, { "nd": 1, "node_name": "Internal", "sensor_type": "HU", "node_id": 1680, "valueHU1680": 36.0, "captured_datetime": "2018-01-01 00:00:24" }, { "valueTM1680": 24.8, "nd": 1, "node_name": "Internal", "sensor_type": "TM", "node_id": 1680, "captured_datetime": "2018-01-01 00:00:43" }, { "nd": 1, "node_name": "Internal", "sensor_type": "HU", "node_id": 1680, "valueHU1680": 38.8, "captured_datetime": "2018-01-01 00:00:43" }, { "valueTM1680": 24.7, "nd": 1, "node_name": "Internal", "sensor_type": "TM", "node_id": 1680, "captured_datetime": "2018-01-01 00:00:57" }, { "nd": 1, "node_name": "Internal", "sensor_type": "HU", "node_id": 1680, "valueHU1680": 38.8, "captured_datetime": "2018-01-01 00:00:57" }, { "valueTM1680": 24.7, "nd": 1, "node_name": "Internal", "sensor_type": "TM", "node_id": 1680, "captured_datetime": "2018-01-01 00:01:07" }, { "nd": 1, "node_name": "Internal", "sensor_type": "HU", "node_id": 1680, "valueHU1680": 37.9, "captured_datetime": "2018-01-01 00:01:07" }, { "valueTM1680": 24.6, "nd": 1, "node_name": "Internal", "sensor_type": "TM", "node_id": 1680, "captured_datetime": "2018-01-01 00:01:21" }, { "nd": 1, "node_name": "Internal", "sensor_type": "HU", "node_id": 1680, "valueHU1680": 37.3, "captured_datetime": "2018-01-01 00:01:21" }, { "valueTM1680": 23.8, "nd": 1, "node_name": "Internal", "sensor_type": "TM", "node_id": 1680, "captured_datetime": "2018-01-01 00:01:34" }, { "nd": 1, "node_name": "Internal", "sensor_type": "HU", "node_id": 1680, "valueHU1680": 36.4, "captured_datetime": "2018-01-01 00:01:34" }, { "valueTM1680": 20.3, "nd": 1, "node_name": "Internal", "sensor_type": "TM", "node_id": 1680, "captured_datetime": "2018-01-01 00:01:47" }, { "nd": 1, "node_name": "Internal", "sensor_type": "HU", "node_id": 1680, "valueHU1680": 37.9, "captured_datetime": "2018-01-01 00:01:47" }, { "valueTM1680": 21.8, "nd": 1, "node_name": "Internal", "sensor_type": "TM", "node_id": 1680, "captured_datetime": "2018-01-01 00:02:01" }, { "nd": 1, "node_name": "Internal", "sensor_type": "HU", "node_id": 1680, "valueHU1680": 37.3, "captured_datetime": "2018-01-01 00:02:01" } ] //remap data var datetime_hash = {}; var types = {}; data.forEach(function(item, idx) { if (!datetime_hash.hasOwnProperty(item.captured_datetime)) { datetime_hash[item.captured_datetime] = {}; } var suffix = item.sensor_type + item.node_id; types[suffix] = 1; datetime_hash[item.captured_datetime]["sensor_type" + suffix] = item.sensor_type; datetime_hash[item.captured_datetime]["node_name"] = item.node_name; datetime_hash[item.captured_datetime]["node_id"] = item.node_id; datetime_hash[item.captured_datetime]["nd"] = item.nd; datetime_hash[item.captured_datetime]["value" + suffix] = item["value" + suffix]; datetime_hash[item.captured_datetime]["captured_datetime"] = item.captured_datetime; }); //sort/remap hash data into an array var chartData = Object.keys(datetime_hash).sort(function(lhs, rhs) { //ensure the dates are sorted in ascending order var lhsDate = AmCharts.stringToDate(lhs, "YYYY-MM-DD JJ:NN:SS"); var rhsDate = AmCharts.stringToDate(rhs, "YYYY-MM-DD JJ:NN:SS"); return lhsDate - rhsDate; }).map(function(datetime) { return datetime_hash[datetime]; }); //create graphs types = Object.keys(types); var graphs = types.map(function(type) { return { "balloonText": "Sensor name: [[node_name]] <br> Sensor id: [[nd]] <br> Sensor value:[[value]]<br> Sensor type: [[sensor_type" + type + "]]<br> Collecting date: [[captured_datetime]] <br>", "bullet": "round", //"lineColor": "#000000", "bulletSize": 3, "fillAlphas": type.indexOf("TM") >= 0 ? 1 : 0, "type": type.indexOf("TM") >= 0 ? "column" : "smoothedLine", "labelPosition": "right", "valueField": "value" + type, "fixedColumnWidth": 10 } }); AmCharts.makeChart("dashboard-chart", { "type": "serial", "theme": "light", //"equalSpacing": true, this is a categoryAxis property. "dataProvider": chartData, //"valueAxes": valueAxes, "graphs": graphs, "categoryField": "captured_datetime", 'chartCursor': { 'cursorPosition': 'mouse', 'cursorColor': '#ffa500', "valueLineBalloonEnabled": true, "valueLineEnabled": true, }, "dataDateFormat": "YYYY-MM-DD JJ:NN:SS", "categoryAxis": { //"gridPosition": "middle", "labelRotation": 75, "minorGridEnabled": true, "parseDates": true, "minPeriod": "ss", //customize axis: "markPeriodChange": false, "dateFormats": [{ "period": "fff", "format": "JJ:NN:SS" }, { "period": "ss", "format": "YYYY-MM-DD\\nJJ:NN:SS" }, { "period": "mm", "format": "JJ:NN" }, { "period": "hh", "format": "JJ:NN" }, { "period": "DD", "format": "MMM DD" }, { "period": "WW", "format": "MMM DD" }, { "period": "MM", "format": "MMM" }, { "period": "YYYY", "format": "YYYY" }] }, "responsive": { "enabled": true } }); 

 html, body { width: 100%; height: 100%; margin: 0; } #dashboard-chart { 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> <div id="dashboard-chart"></div>