1

I'm trying to create amcharts by calling ajax api (response in json format), by calling post api i get the required data in console.log but chart is not showing. Pls check code, & suggest me what is missing. I'm using jquery & HTML only, If api is not working, so pls explain me with stuff data.

Can i achieve this by using dataLoader plugin fror amcharts? If yes then pls explain me how it will achieve by using dataLoader. Pls check my code & update me how to draw chart by json response first.

Here is my working code

$(function () {
    $("[id*=btnok]").click(function () {
        var obj = {};
        obj = $.trim($("[id*=nodays]").val());
        console.log(obj)
        $.ajax({
            type: "POST",
            "headers": {
                "content-type": "application/json",
                "cache-control": "no-cache"
            },
            url: "http://10.26.32.4/api/rating-service/rate/ridecount/days/",
            data: JSON.stringify(obj),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                console.log(r)
                AmCharts.makeChart("rides", {
                    "type": "serial",
                    "fixedColumnWidth": '10px',

                    "legend": {
                        "horizontalGap": 10,
                        "maxColumns": 1,
                        "position": "right",
                        "useGraphSettings": true,
                        "markerSize": 10
                    },
                    "valueAxes": [{
                        "gridColor": "#FFFFFF",
                        "gridAlpha": 0.2,
                        "dashLength": 0
        }],
                    "gridAboveGraphs": true,
                    "startDuration": 1,

                    "valueAxes": [{
                        "stackType": "regular",
                        "axisAlpha": 0.3,
                        "gridAlpha": 0,
                        "minimum": 0,
                        "maximum": 50,
                        "gridCount": 1

        }],
                    "graphs": [{
                        "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
                        "fillColors": "#47b012",
                        "lineColor": "#47b012",
                        "fillAlphas": 0.8,
                        "labelText": "[[value]]",
                        "lineAlpha": 0.3,
                        "title": "Completed Rides",
                        "type": "column",
                        "color": "#000000",
                        "valueField": "completedTrip",
                        "fixedColumnWidth": 25
        }, {
                        "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
                        "fillColors": "#fff138",
                        "lineColor": "#fff138",
                        "fillAlphas": 0.8,
                        "labelText": "[[value]]",
                        "lineAlpha": 0.3,
                        "title": "Not Ended",
                        "type": "column",
                        "color": "#000000",
                        "valueField": "activeTrip",
                        "fixedColumnWidth": 25
        }, {
                        "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
                        "fillColors": "#dd111b",
                        "lineColor": "#dd111b",
                        "fillAlphas": 0.8,
                        "labelText": "[[value]]",
                        "lineAlpha": 0.3,
                        "title": "Canceled Rides",
                        "type": "column",
                        "color": "#000000",
                        "valueField": "cancelledTrip",
                        "fixedColumnWidth": 25
        }],
                    "chartCursor": {
                        "categoryBalloonEnabled": false,
                        "cursorAlpha": 0,
                        "zoomable": false
                    },
                    "categoryField": "creationDate",
                    "categoryAxis": {
                        "gridPosition": "start",
                        "gridAlpha": 0,
                        "tickPosition": "start",
                        "tickLength": 20,
                        "labelRotation": 60
                    }
                });


            }
        });
        return false;
    });

});

1 Answer 1

2

The dataLoader only supports GET requests, so it's not an option.

The only thing I see wrong with your code is that you didn't assign your response to the chart's dataProvider. Assuming your response is in the correct format (an array of objects):

    $.ajax({
        type: "POST",
        "headers": {
            "content-type": "application/json",
            "cache-control": "no-cache"
        },
        url: "http://10.26.32.4/api/rating-service/rate/ridecount/days/",
        data: JSON.stringify(obj),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            console.log(r)
            AmCharts.makeChart("rides", {
                "type": "serial",
                "fixedColumnWidth": '10px',
                "dataProvider": r, //if your response is an array of objects, e.g. [{"completedTrip": .., "activeTrip: .., "cancelledTrip": .., "creationDate": ..}, ...]
                "legend": {
                    "horizontalGap": 10,
                    "maxColumns": 1,
                    "position": "right",
                    "useGraphSettings": true,
                    "markerSize": 10
                },
                "valueAxes": [{
                    "gridColor": "#FFFFFF",
                    "gridAlpha": 0.2,
                    "dashLength": 0
    }],
                "gridAboveGraphs": true,
                "startDuration": 1,

                "valueAxes": [{
                    "stackType": "regular",
                    "axisAlpha": 0.3,
                    "gridAlpha": 0,
                    "minimum": 0,
                    "maximum": 50,
                    "gridCount": 1

    }],
                "graphs": [{
                    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
                    "fillColors": "#47b012",
                    "lineColor": "#47b012",
                    "fillAlphas": 0.8,
                    "labelText": "[[value]]",
                    "lineAlpha": 0.3,
                    "title": "Completed Rides",
                    "type": "column",
                    "color": "#000000",
                    "valueField": "completedTrip",
                    "fixedColumnWidth": 25
    }, {
                    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
                    "fillColors": "#fff138",
                    "lineColor": "#fff138",
                    "fillAlphas": 0.8,
                    "labelText": "[[value]]",
                    "lineAlpha": 0.3,
                    "title": "Not Ended",
                    "type": "column",
                    "color": "#000000",
                    "valueField": "activeTrip",
                    "fixedColumnWidth": 25
    }, {
                    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
                    "fillColors": "#dd111b",
                    "lineColor": "#dd111b",
                    "fillAlphas": 0.8,
                    "labelText": "[[value]]",
                    "lineAlpha": 0.3,
                    "title": "Canceled Rides",
                    "type": "column",
                    "color": "#000000",
                    "valueField": "cancelledTrip",
                    "fixedColumnWidth": 25
    }],
                "chartCursor": {
                    "categoryBalloonEnabled": false,
                    "cursorAlpha": 0,
                    "zoomable": false
                },
                "categoryField": "creationDate",
                "categoryAxis": {
                    "gridPosition": "start",
                    "gridAlpha": 0,
                    "tickPosition": "start",
                    "tickLength": 20,
                    "labelRotation": 60
                }
            });
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.