ajax json verileri ile highchart oluşturarak

Question

ben için gerekli veri ile ajax arama nasıl entegre anlamıyorum mysql komut

kullanılarak alındığında MySQL verilerini kullanarak bir sayfa basit grafik oluşturmak için çalışıyorum grafik. Hayatımı kolaylaştırmak için çeşitli grafik eklentileri hakkında yeterince bilgi sahibi değilim ve şu anda yüksek şiddeti deneme aşamasındayım.

[{"name":"golfers"},{"data":[5.7879,6.6286,6.1724,5.3125,7.1481,6.1333,4.5769]}] 

Benim grafik script:

Benim php komut dosyası aşağıdaki json döndürür

$(function() { 

visitorData(function(data) { 
    console.info(data); 
    $('#chart1').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Average Visitors' 
     }, 
     xAxis: { 
      categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] 
     }, 
     yAxis: { 
      title: { 
       text: 'Number of visitors' 
      } 
     }, 
     series: data, 
    }); 
}); 
}); 

ajax arama yapmak benim fonksiyonu: Ama şu anda

$.ajax({ 
     url: '/visitdata', 
     type: 'GET', 
     async: true, 
     dataType: "json", 
     success: function (data) { 
      console.warn(data); 
      return data; 

     } 
    }); 

hiçbir şey gösterilmiyor.

Ajax çağrısının nasıl etkili bir şekilde yapılacağını ve grafik işlevine nasıl entegre edileceğinden emin değilim. Grafiği oluşturmadan önce verilerin geri döndüğünden emin olmak için önceki girişimlere ve yayınlara dayanarak bir geri arama yapmaya karar verdim - bu biraz doğru mu? - Bu yüzden bir öğretici ihtiyacı doğru

Temelde serisine uygulanan veri değişkeni ettik;

ben emin değilim json verileri doğru

yapılandırılmıştır% 100 emin değilim Tüm yardım

Teşekkür

Answer 1

sana suc değerleri döndüremez düşünüyorum takdir

çalışma olsun ve deneme yapabilirsiniz yerine çağrı yerine bunun yerine bir işlev çağırmanız gerekir. Yani grafiği başlatır işlevinizi kurmak ve ajax başarı çağrısında sizin ajax başarı fonksiyonunda

function visitorData (data) { 
    $('#chart1').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Average Visitors' 
    }, 
    xAxis: { 
     categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] 
    }, 
    yAxis: { 
     title: { 
      text: 'Number of visitors' 
     } 
    }, 
    series: data, 
    }); 
} 
$(document).ready(function() { 
$.ajax({ 
    url: '/visitdata', 
    type: 'GET', 
    async: true, 
    dataType: "json", 
    success: function (data) { 
     visitorData(data); 
    } 
    }); 
}); 

Answer 2

verilerle visitorData işlevi çağırmak verileri sizin kod örneği ile

ile çalıştıklarından [1] .data da

$.ajax({ 
     url: '/visitdata', 
     type: 'GET', 
     async: true, 
     dataType: "json", 
     success: function (data) { 
      visitorData(data[1].data); 

     } 
    }); 

(bu senin json biçimlendirilmiş nasıl beri), sizin visitorData def garip çalışır.

vistorData = function(data) 

veya

function vistorData(data) 

Answer 3

//parse json response 
var chartSeriesData = []; 
var chartCategory = []; 

$.each(response, function() { 

    if(this.name!="TOTAL" && this.no!="0") { 

    var series_name = this.name; 
    var series_data = this.no; 

    var series = [ 
     series_name, 
     parseFloat(series_data) 
    ]; 
    chartSeriesData.push(series); 
    } 
}); 

//initialize options for highchart 
var options = { 
    chart: { 
    plotBackgroundColor: null, 
    plotBorderWidth: null, 
    plotShadow: false 
    }, 
    title: { 
    text: 'SalesOrder ' 
    }, 
    tooltip: { 
    pointFormat: '{series.name}: <b>{point.y}</b>' 
    }, 
    plotOptions: { 
    pie: { 
     allowPointSelect: true, 
     cursor: 'pointer', 
     center:['60%','60%'], 
     size:150 
     , 
     dataLabels: { 
     enabled: true, 
     color: '#000000', 
     distance: 40, 
     connectorColor: '#000000', 
     format: '<b>{point.name}</b>: {point.y} ' 
     } 
    } 
    }, 
    series: [{ 
    type: 'pie', 
    name: 'Browser share', 
    data:chartSeriesData //load array created from json 
    }] 
} 

//options.series[0].setData(datavaluejson); 
var chart= $('#container').highcharts(options);