CODEWITHSUNDEEP
javascriptjsonajaxhighcharts
pietà
pietà

Reputation: 770

display a linear highchart with data from database

i'm trying to display data from database into a linear highchart. this is the json response from my controller which is retrieved from database:

[{"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 succeeded to display data in the yAxix from data base but i've tested it with static data in the xAxix this is the 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);

}
});

});

now i want the categories to be dynamic and retrieve time and put it on axis . I have tried this code but still not working !

  $.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);

}
});

do somebody have an idea how to do this ? thanks in advance .

Upvotes: 0

Views: 71

Answers (1)

pietà
pietà

Reputation: 770

I've tested this code and it works perfectly ! I don't know why this didn't work for the first time and showed errors and now works ! I post it maybe it could help someOne. if someone knows why it will be better to mention it .

 $.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);

}
});

Upvotes: 1

Related Questions