I retrieved data using an AJAX call and data was received successfully as an array. But couldn't use them to draw a chart. When I tried to find the problem, I saw that when I call to the javascript function from the outside, it will respond and draw the chart but when I call it from the inside of the success part of AJAX, it will call to function but the chart will not draw. Not even through an error. (I used temporary data to check this trouble instead of retrieving data from the AJAX call [Var xData, Var yData].

Here is the sample data.

            var xData = [
            { x: new Date(2020,11,11), y: 35.939 },
            { x: new Date(2020,11,12), y: 40.896 },
            { x: new Date(2020,11,15), y: null }
            ];

            var yData = [
            { x: new Date(2020,11,11), y: 10 },
            { x: new Date(2020,11,12), y: 45.896 },
            { x: new Date(2020,11,13), y: null }
            ];

When I call like this, It will not respond.

function showDailySales() 
            {
                var From = document.getElementById("dailySalesFrom").value;
                var To = document.getElementById("dailySaleTo").value;
                var select = document.getElementById('slctAllNamesForDaily');
                var selectedItemID = select.options[select.selectedIndex].value;

                $.ajax({
                    type: 'post',
                    url: 'controll/ReportController.php', 
                    data: {
                        showDailySales : 1,
                        From : From,
                        To : To,
                        selectedItemID : selectedItemID,
                    },
                    success: function (response) 
                    {
                        if (response) {
                            viewPoint();  // <- This call to function, but not draw the chart
                        }
                    }
                });
            }

When I call like this with above mentioned data, it will draw the chart.

                function drawChart(){                
                var arr = new Array;
                var chartLocationID = "chartContainerSales";
                var chartTopic = "Chart Topic";
                var xAxisTitle = "Date";
                var yAxixTitle = "Qty";

                arr.push(createData(xData, 'Apple'));
                arr.push(createData(yData, 'Orange'));
                
                chartShow(chartTopic, xAxisTitle, yAxixTitle, chartLocationID, arr);
            }

            function createData(getData, Name){
                var j = {
                    type:"line",
                    axisYType: "primary",
                    name: Name,
                    showInLegend: true,
                    markerSize: 0,
                    connectNullData: true,
                    xValueType: "number",
                    lineThickness: 3,
                    dataPoints: getData,                
                };
                return j;
            }

            function chartShow(chartTopic, xAxisTitle, yAxixTitle, chartLocationID, arr){

                var chartLocationID = chartLocationID;    
      
                // alert("Function called");

                window.onload = function() {
                    var chart = new CanvasJS.Chart(chartLocationID, {
                        animationEnabled: true,
                        title: {
                            text: chartTopic
                        },
                        axisX: {
                            title: xAxisTitle,                      
                            valueFormatString: "YYYY-MMM-D",
                            interval:1,
                            intervalType: "day"
                        },
                        axisY: {
                            title: yAxixTitle,
                            // minimum: 0,
                            suffix: "",
                            includeZero: true
                        },
                        legend: {
                            cursor: "pointer",
                            verticalAlign: "bottom",
                            horizontalAlign: "center",
                            dockInsidePlotArea: true,
                        },
                        data:arr 
                    });
                    chart.render();
                }
            }

            drawChart(); // <- This way call to function, and draw the chart

I tried so many ways, but it's not working. How do I fix this?

.

CodePudding user response：

Changed the following code..

      function chartShow(chartTopic, xAxisTitle, yAxixTitle, chartLocationID, arr){
            var chartLocationID = chartLocationID;    
            // alert("Function called");
            window.onload = function() { //something }
      }

To :

      function chartShow(chartTopic, xAxisTitle, yAxixTitle, chartLocationID, arr){
            var chartLocationID = chartLocationID;    
            // alert("Function called");
            show();
            function show() { //something }
      }

According to the first comment. That's worked.