Erstellen highchart mit Ajax json Daten

Question

Ich versuche, ein einfaches Diagramm auf einer Seite mit MySQL-Daten eines MySQL-Skript abgerufen erstellen mit

Ich verstehe nicht, wie der Ajax-Aufruf mit den Daten für die erforderliche Integration Diagramm. Ich weiß nicht genug über die verschiedenen Charting-Plugins, um mein Leben einfacher zu machen, und probiere gerade Highchart aus.

Mein PHP-Skript gibt die folgende json:

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

Mein Diagramm Skript ist:

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

meine Funktion, um den Ajax-Aufruf zu machen:

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

     } 
    }); 

Aber im Moment nichts wird angezeigt.

Ich bin nicht sicher, wie man effektiv den Ajaxaufruf macht und es in die Diagrammfunktion integriert. Ich entschied mich für einen Rückruf basierend auf früheren Versuchen und Posts, um sicherzustellen, dass Daten zurückgegeben werden, bevor das Diagramm erstellt wird - ist dieses Bit korrekt?

Ich bin nicht 100% sicher, dass die Daten korrekt json

strukturiert ist

Ich bin nicht sicher, ich, habe die Datenvariable auf die Reihe korrekt angewendet

Grundsätzlich - brauchen eine Anleitung zu diesem so ich bekommen kann es zu arbeiten und experimentieren

All Hilfe

Dank geschätzt

Answer 1

ich glaube, Sie nicht Werte aus der suc zurückkehren Stattdessen müssen Sie stattdessen eine Funktion aufrufen. So richten Sie Ihre Funktion, die Ihr Diagramm initialisiert, und in dem Ajax-Erfolg Aufruf, die Funktion mit den Daten

Mit Ihrem Codeb.

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

In Ihrer Ajax-Erfolg Funktion rufen Sie Ihre visitorData Funktion mit Daten [1] .data (da so dein JSON formatiert ist)

auch deine visitorData Funktion def ist ungerade.

vistorData = function(data) 

oder

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