CODEWITHSUNDEEP
javascriptjsonamcharts
Tilou
Tilou

Reputation: 59

Data not showing correctly in AMCharts (data retrieved with dataLoader)

I'm loading a json file with data into my amcharts, and i'm displaying date time as my category axes. It seems to do something wrong because it shows that there is data from the year 1899 while the oldest data in the json file is from 2018. I used dateParser to parse it in the right date structure but when i don't parse it, it shows right in the chart but then i can't use time functions on the data. So that is a big problem. Below is the code of my chart:

var chartConfig = {
    "dataLoader": {
        "url": "datafiles/dummyData.json",
        "format": "json",
                "showErrors": true,
        "noStyles": true,
        "async": true
    },
    "type": "serial",
    "theme": "none",
    "marginLeft": 70,
    "dataDateFormat": "D/MM/YYYY J:NN",
    "graphs": [{
        "bullet": "round",
        "bulletBorderAlpha": 1,
        "bulletColor": "#FFFFFF",
        "bulletSize": 5,
        "hideBulletsCount": 50,
        "lineThickness": 2,
        "lineColor": "#000000",
        "title": "red line",
        "useLineColorForBulletBorder": true,
        "valueField": "Historie glucose (mg/dL)"
  }],
    "chartCursor": {
        "categoryBalloonEnabled": false
    },
    "categoryField": "Tijd",
    "categoryAxis": {
        "parseDates" : true,
        "minPeriod" : "hh",
        "dashLength": 1,
        "minorGridEnabled": true,
        "labelsEnabled": true,
        "tickLength": 0
    },
    "valueAxes": [{
        "ignoreAxisWidth": true
  }],
    guides: [{
        //value axis guide
        value: 100,
        toValue: 200,
        fillAlpha: .40,
        fillColor: "#008000"
}, {
        value: 0,
        toValue: 100,
        fillAlpha: 0.40,
        fillColor: "#0000FF"
}, {
        value: 200,
        toValue: 10000,
        fillAlpha: 0.40,
        fillColor: "#FF0000"
}]
};

And here is a sample of my json file:

  {
     "ID":75461
    ,"Tijd":"6/11/2018 5:47"
    ,"Type vastlegging":0
    ,"Historie glucose (mg/dL)":122
    ,"Scan glucose (mg/dL)":null
    ,"Niet-numeriek snelwerkende insuline":""
    ,"Snelwerkende insuline (eenheden)":""
    ,"Niet-numeriek voedsel":""
    ,"Koolhydraten (gram)":""
    ,"Niet-numeriek langwerkende insuline":""
    ,"Langwerkende insuline (eenheden)":""
    ,"Notities":""
    ,"Strip glucose (mg/dL)":""
    ,"Keton (mmol/L)":""
    ,"Maaltijdinsuline (eenheden)":""
    ,"Correctieinsuline (eenheden)":""
    ,"Gebruikerswijziging insuline (eenheden)":""
    ,"Vorige tijd":""
    ,"Bijgewerkte tijd":""
  }

Here is a screenshot of how the data shows in the chart:

Chart with wrong data

Can somebody please help me? i've been looking for several days now. thanks in advance!

Upvotes: 0

Views: 60

Answers (1)

xorspark
xorspark

Reputation: 16012

The issue is likely due to your timestamp format. As mentioned in this article, single letter format codes marked by an asterisk are not supported in dataDateFormat (D and J in particular are not allowed - you want DD and JJ). You'll need to zero-pad your hours and days in your data and adjust your dataDateFormat accordingly.

Upvotes: 1

Related Questions