creando highchart con i dati JSON ajax

Question

Sto cercando di creare un semplice grafico in una pagina utilizzando i dati mysql recuperati utilizzando uno script mysql

Non capisco come integrare la chiamata AJAX con i dati necessari per la grafico. Non ne so abbastanza dei vari plug-in grafici per semplificare la vita e sto provando attualmente con highchart.

Il mio script php restituisce il seguente JSON:

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

Il mio script grafico è:

$(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, 
    }); 
}); 
}); 

mia funzione per effettuare la chiamata ajax:

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

     } 
    }); 

Ma al momento non viene visualizzato nulla.

Non sono sicuro di come effettuare effettivamente la chiamata ajax e integrarla nella funzione del grafico. Ho deciso di richiamare in base a tentativi e post precedenti per garantire che i dati vengano restituiti prima di creare il grafico: questo bit è corretto?

Io non sono sicuro al 100% i dati JSON è strutturata in modo corretto

io non sono sicuro che, ve applicata la variabile dei dati alla serie corretta

In sostanza - hanno bisogno di un tutorial su questo quindi ho può farlo funzionare e sperimentare

Tutto l'aiuto ha apprezzato

Grazie

Answer 1

Penso che non si può restituire valori dal suc cess call invece dovresti chiamare una funzione. Quindi impostare la funzione che inizializza il grafico, e nella chiamata successo ajax che funzionano con i dati

Con il vostro esempio di codice

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

Nella funzione successo ajax chiamare la funzione visitorData con i dati [1] .data (dato che è come il vostro jSON è formattato)

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

     } 
    }); 

anche, i vostri visitorData funzionano def è dispari.

vistorData = function(data) 

o

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