0

I have an ajax function running a php script that returns the JSON values below

[{"status":"Cleared","qty":"2"},{"status":"Issued","qty":"3"},{"status":"Rejected","qty":"1"},{"status":"Requested","qty":"2"}]

I need to take the status and qty values use them on an echarts bar chart with the status as the x axis and the qty as the Y axis. When the below is run no graph is shown and no errors are shown in the console either.

My javascript is below

$(document).ready(function(){

$.ajax({
    url: 'php_files/permit_php_files/permit_chart_process.php',
    method: "GET",
    data: {
        access_id: sessionStorage.getItem('access_id'),
        client_id: sessionStorage.getItem('client_id')
    },
    success: function (data) {

        console.log(data);

        require.config({
            paths: {
                echarts: 'js/plugins/visualization/echarts'
            }
        });

        require(
            [
                'echarts',
                'echarts/theme/limitless',
                'echarts/chart/bar',
                'echarts/chart/line'
            ],


            // Charts setup
            function (ec, limitless) {

                var permit_chart = ec.init(document.getElementById('permit_chart'), limitless);


                permit_chart_options = {

                    // Setup grid
                    grid: {
                        x: 40,
                        x2: 40,
                        y: 35,
                        y2: 25
                    },

                    // Add tooltip
                    tooltip: {
                        trigger: 'axis'
                    },

                    // Add legend
                    legend: {
                        data: ['Status']
                    },

                    // Enable drag recalculate
                    calculable: true,

                    // Horizontal axis
                    xAxis: [{
                        type: 'category',
                        data: JSON.stringify(data.status)
                    }],

                    // Vertical axis
                    yAxis: [{
                        type: 'value'
                    }],

                    // Add series
                    series: [
                        {
                            name: 'Status',
                            type: 'bar',
                            data: JSON.stringify(data.qty),
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        textStyle: {
                                            fontWeight: 500
                                        }
                                    }
                                }
                            }
                        }
                    ]
                };


                permit_chart.setOption(permit_chart_options);


                window.onresize = function () {
                    setTimeout(function () {
                        permit_chart.resize();
                    }, 200);
                }
            }
        );
    }
});
});
Drewy
  • 61
  • 2
  • 9
  • Possible duplicate of [Safely turning a JSON string into an object](https://stackoverflow.com/questions/45015/safely-turning-a-json-string-into-an-object) – Herohtar Apr 06 '18 at 20:20
  • 1
    It seems like `data` is an `array`. So you have to loop through it. But you are accessing it as Object. – Sajjad Hossain Apr 06 '18 at 20:29

0 Answers0