CODEWITHSUNDEEP
amcharts
user3151197
user3151197

Reputation: 347

Amchart not initialized with data

Am Chart showing incorrectly, Here is following ajax code, incorrect thumb of chart. I am using ajax to get the response and initialized the amchart (area)

Ajax json response data

{"success":true,"graph_data":[{"date":"2018-06-21","value":121.65},{"date":"2018-06-20","value":121.65},{"date":"2018-06-19","value":121.5},{"date":"2018-06-18","value":121.3},{"date":"2018-06-17","value":120.55},{"date":"2018-06-16","value":119.84},{"date":"2018-06-14","value":119.88}],"min_period":"DD","message":null}

Here code which I am initializing for amchart 

var chart = AmCharts.makeChart( "graph_chart_div", {
    "type": "serial",
    "theme": "light",
    "marginRight": 5,
    "marginLeft": 5,
    "minPeriod":response.min_period,
    "autoMarginOffset": 5,
    "dataDateFormat": "YYYY-MM-DD",
    "valueAxes": [ {
        "id": "v1",
        "axisAlpha": 0,
        "position": "left",
        "ignoreAxisWidth": true
    } ],
    "balloon": {
        "borderThickness": 1,
        "shadowAlpha": 0
    },
    "graphs": [ {
        "id": "g1",
        "balloon": {
            "drop": true,
            "adjustBorderColor": false,
            "color": "#ffffff",
            "type": "smoothedLine"
        },
        "fillAlphas": 0.2,
        "bullet": "round",
        "bulletBorderAlpha": 1,
        "bulletColor": "#FFFFFF",
        "bulletSize": 5,
        "hideBulletsCount": 50,
        "lineThickness": 2,
        "title": "red line",
        "useLineColorForBulletBorder": true,
        "valueField": "value",
        "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
    } ],
    "chartCursor": {
        "valueLineEnabled": true,
        "valueLineBalloonEnabled": true,
        "cursorAlpha": 0,
        "zoomable": false,
        "valueZoomable": true,
        "valueLineAlpha": 0.5
    },
    "valueScrollbar": {
        "autoGridCount": true,
        "color": "#000000",
        "scrollbarHeight": 50
    },
    "categoryField": "date",
    "categoryAxis": {

        "gridPosition": "start",
        "labelRotation": 45,
        "minorGridEnabled": true,
        /* ENSURE 2 LINES BELOW ARE ADDED */
        "autoGridCount": false,
        "gridCount": 12,

        "parseDates": true,
        "dashLength": 1,
        // "minorGridEnabled": true
    },
    "export": {
        "enabled": false
    },
    // "dataProvider": graph_data
    "dataProvider": response.graph_data
} );

This is currently initialized chart

enter image description here

I want to show the following chart for my data

enter image description here

Upvotes: 1

Views: 221

Answers (1)

xorspark
xorspark

Reputation: 16012

Your date data is out of order. AmCharts requires your date-based data to be in date-ascending order when using parseDates.

Important: If this is set to true, the data points needs to come pre-ordered in ascending order. Data with incorrect order might result in visual and functional glitches on the chart.

Once you fix the sort order, your chart will render correctly.

Upvotes: 2

Related Questions