Highcharts not updating data on ajax response data

Question

I have created highchart spline chart with ajax call on the button the response data not creating chart but when I put those response data in it works !!!!

it works with static data but not with exact same as ajax response , I have tried to redraw it as well but didn't work, response data is shown as comment in code

//    categories: [1574411460000,1574418104000,1574421704000,]
 // series: [{data: [30,30,50,100]},{data: [50,50,80,100]},{data: [200,200,500,600]},]



   $(document).ready(function () {
        var chart = $('#container').highcharts();

        $("#gobtn").click(function () {

            var tenant_id = $('#tenantId').val();
            var trunk_id = $('#trunkId').val();
            completedCallGraph(tenant_id, trunk_id);
        });

        function completedCallGraph(tenant_id = '', trunk_id = '') {
            $.ajax({
                url: "completedcallgraph?tenant_id=" + tenant_id + "&trunk_id=" + trunk_id,
                success: function (result) {

                    var resultObj = JSON.parse(result);

                    console.log(resultObj.inserted_at);
                    console.log(resultObj.callDetails);

                    var inserted_at = resultObj.inserted_at;
                    var callDetails = resultObj.callDetails;


                  $('#container').highcharts({
                        chart: {
                            type: 'line',
                            zoomType: 'xy',
                            panning: true,
                            panKey: 'shift'
                        },

                        title: {
                            text: 'CallPath Utilization'
                        },

                        subtitle: {
                            text: 'Click and drag to zoom in. Hold down shift key to pan.'
                        },
                        xAxis: [{
                            type: 'datetime',
                           categories: inserted_at
                          //    categories: [1574411460000,1574418104000,1574421704000,]

                            ,
                            labels: {
                                formatter: function () {
                                    return Highcharts.dateFormat('%d/%m/%Y-%H:%M', this.value);
                                }
                            },
                        }],
                        series: callDetails
                       // series: [{data: [30,30,50,100]},{data: [50,50,80,100]},{data: [200,200,500,600]},]

                  });
                }
            });
        }
    });

Answer 1

As for me would be better to use some separated Highchart drawing function like:

function drawHighchar(selector, cates, sers){

Highcharts.chart(selector, {
                        chart: {
                            type: 'line',
                            zoomType: 'xy',
                            panning: true,
                            panKey: 'shift'
                        },

                        title: {
                            text: 'CallPath Utilization'
                        },

                        subtitle: {
                            text: 'Click and drag to zoom in. Hold down shift key to pan.'
                        },
                        xAxis: [{
                            type: 'datetime',
                           categories: cates,
                            labels: {
                                formatter: function () {
                                    return Highcharts.dateFormat('%d/%m/%Y-%H:%M', this.value);
                                }
                            },
                        }],
                        series: sers
                        });
} 

Here selector takes an id of DOM element where chart would be placed after, cates array of categories and sers array of objects with data.

I've used your datasets and other one:

let ser1 = [{data: [30,30,50,100]},{data: [50,50,80,100]},{data: [200,200,500,600]},],
    ser2 = [{data: [11,22,33,44]},{data: [33,44,22,11]},{data: [111,333,500,600]},],
    cats1 = [1574411460000,1574418104000,1574421704000,],
    sel = 'container'; 

During first loading it would present ser1 and after clicking some button the second data ser2:

drawHighchar(sel, cats, ser1);

$('#cli').click(()=>{ 
 drawHighchar(sel, cats, ser2);  
});

Here you should use resultObj.inserted_at as cats and resultObj.callDetails as ser arguments.

let ser1 = [{data: [30,30,50,100]},{data: [50,50,80,100]},{data: [200,200,500,600]},],
    ser2 = [{data: [11,22,33,44]},{data: [33,44,22,11]},{data: [111,333,500,600]},],
    cats = [1574411460000,1574418104000,1574421704000,],
    sel = 'container';
 
drawHighchar(sel, cats, ser1);

$('#cli').click(()=>{ 
 drawHighchar(sel, cats, ser2);  
});

function drawHighchar(selector, cates, sers){

Highcharts.chart(selector, {
                        chart: {
                            type: 'line',
                            zoomType: 'xy',
                            panning: true,
                            panKey: 'shift'
                        },

                        title: {
                            text: 'CallPath Utilization'
                        },

                        subtitle: {
                            text: 'Click and drag to zoom in. Hold down shift key to pan.'
                        },
                        xAxis: [{
                            type: 'datetime',
                           categories: cates,
                            labels: {
                                formatter: function () {
                                    return Highcharts.dateFormat('%d/%m/%Y-%H:%M', this.value);
                                }
                            },
                        }],
                        series: sers
                        }); 

}    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

<input type="button" id="cli" value="button_click"/>

Change your $.ajax as following:

var sel = "container";
$.ajax({
       url: "completedcallgraph?tenant_id=" + tenant_id + "&trunk_id=" + trunk_id,
       method: "GET",
       success: function (result) {
           var resultObj = JSON.parse(result);
           drawHighchar(sel, resultObj.inserted_at, resultObj.callDetails); 
       }
})

If you have a problem till this moment then you can try to use Promise. Your JS code would be next:

  $("#gobtn").click(function () {

       var tenant_id = $('#tenantId').val();
       var trunk_id = $('#trunkId').val();
       var sel = "container";

       var prom1 = new Promise((resolve, reject)=>{ 

       var ar = [];

        $.ajax({
            url: "completedcallgraph?tenant_id=" + tenant_id + "&trunk_id=" + trunk_id,
            method: "GET",
            success: function (result) {

              var resultObj = JSON.parse(result);

              ar.push(resultObj.inserted_at);
              ar.push(resultObj.callDetails);

              resolve(ar);
            }
        })   // ajax end
    })       // promise end

   prom1.then((val)=>drawHighchar(sel,val[0],val[1]))

}); // click end

var ser1 = [{data: [30,30,50,100]},{data: [50,50,80,100]},{data: [200,200,500,600]},],
    ser2 = [{data: [11,22,33,44]},{data: [33,44,22,11]},{data: [111,333,500,600]},],
    cats = [1574411460000,1574418104000,1574421704000,],
    sel = 'container';
 
drawHighchar(sel, cats, ser1);
  
$("#gobtn").click(function () {
 
     //  var tenant_id = $('#tenantId').val();
     //  var trunk_id = $('#trunkId').val(); 

       var prom1 = new Promise((resolve, reject)=>{ 
        
       var ar = [];
     /*
        $.ajax({
            url: "completedcallgraph?tenant_id=" + tenant_id + "&trunk_id=" + trunk_id,
            method: "GET",
            success: function (result) {

              var resultObj = JSON.parse(result);
 
              ar.push(resultObj.inserted_at);
              ar.push(resultObj.callDetails);

              resolve(ar);
            }
        }) */  // ajax end
        
              ar.push(cats);
              ar.push(ser2);
              
              resolve(ar);
    })       // promise end

   prom1.then((val)=>drawHighchar(sel,val[0],val[1]))

}); // click end

function drawHighchar(selector, cates, sers){

Highcharts.chart(selector, {
                        chart: {
                            type: 'line',
                            zoomType: 'xy',
                            panning: true,
                            panKey: 'shift'
                        },

                        title: {
                            text: 'CallPath Utilization'
                        },

                        subtitle: {
                            text: 'Click and drag to zoom in. Hold down shift key to pan.'
                        },
                        xAxis: [{
                            type: 'datetime',
                           categories: cates,
                            labels: {
                                formatter: function () {
                                    return Highcharts.dateFormat('%d/%m/%Y-%H:%M', this.value);
                                }
                            },
                        }],
                        series: sers
                        }); 

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

<input type="button" id="gobtn" value="button_click"/>

These two ways are working well. I guess you have a problem with $.ajax cause of GET method, try to use POST and make everything for retrieving data via POST.