Anzeige eines linearen Highchart mit Daten aus der Datenbank

Question

Ich versuche, Daten aus der Datenbank in eine linear highchart anzuzeigen. dies ist die json Antwort von meinem Controller, die aus der Datenbank abgerufen werden:

[{"protocole":"tcp","date":"01/02/20","time":"00:10:20","total":281}, 
{"protocole":"udp","date":"01/02/20","time":"00:10:30","total":201}, 
{"protocole":"tcp","date":"01/02/20","time":"00:10:40","total":100}} 

i gelang Daten im yAxix aus der Datenbank angezeigt werden, aber ich habe es mit statischen Daten in den xAxix dieses getestet ist der Code:

$(document).ready(function() { 

    var options={ 
     chart: { 
       renderTo: 'container', 
       type: 'line' 
      }, 
     title : { 
      text: 'Total Request number' 
     }, 
     subtitle : { 
      text: 'Server num1' 
     }, 
     xAxis : { 
      categories: ['00:10:20','00:10:30','00:10:40'] 
     }, 
     yAxis :{ 
      title: { 
      text: 'Total' 
      }, 
      plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#808080' 
      }] 
     }, 

     tooltip : { 
      valueSuffix: '\xB0C' 
     }, 

     legend : { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      borderWidth: 0 
     }, 

     series : [{}] 

    } 
$.ajax({ 
type: 'GET', 
contentType : 'application/json', 
dataType: 'JSON', 
url: 'jsonsdp', 
data: "", 
success: function(data){ 
    var array=[] ; 
    $.each(data, function(i) { 


     array.push(data[i].total); 

     }) 
     alert(array); 
    options.series[0]= {"name": 'total', 
      "data":array}; 


    var chart = new Highcharts.Chart(options); 

} 
}); 

});  

jetzt will ich die categories dynamische und abrufen time und auf der Achse setzen es sein. Ich habe diesen Code versucht, aber immer noch nicht funktioniert!

$.ajax({ 
type: 'GET', 
contentType : 'application/json', 
dataType: 'JSON', 
url: 'jsonsdp', 
data: "", 
success: function(data){ 
    var array=[] ; 
    var array1=[]; 
    $.each(data, function(i) { 


     array.push(data[i].total); 
     array1.push(data[i].time); 
     }) 
     // alert(array); 
    options.series[0]= {"name": 'total', 
      "data":array}; 
     options.xAxis.categories=array1; 

    var chart = new Highcharts.Chart(options); 

} 
}); 

hat jemand eine idee, wie man das macht? danke im voraus.

Answer 1

Ich habe diesen Code getestet und es funktioniert perfekt! Ich weiß nicht, warum das nicht zum ersten Mal funktioniert hat und Fehler gezeigt hat und jetzt funktioniert! Ich poste es vielleicht könnte es someOne helfen. wenn jemand weiß, warum es besser ist, es zu erwähnen.

$.ajax({ 
type: 'GET', 
contentType : 'application/json', 
dataType: 'JSON', 
url: 'jsonsdp', 
data: "", 
success: function(data){ 
var array=[] ; 
var array1=[]; 
$.each(data, function(i) { 


    array.push(data[i].total); 
    array1.push(data[i].time); 
    }) 
    // alert(array); 
options.series[0]= {"name": 'total', 
     "data":array}; 
    options.xAxis.categories=array1; 

var chart = new Highcharts.Chart(options); 

} 
});