tworzenia highchart z danych JSON ajax

Question

Próbuję utworzyć prosty wykres w stronę używając danych mysql pobrane przy użyciu skryptu mysql

ja nie rozumiem, jak zintegrować wywołanie ajax z danymi wymaganymi dla wykres. Nie wiem wystarczająco dużo o różnych wtyczkach do wykresów, aby ułatwić sobie życie i obecnie próbuję highchart.

Mój skrypt php zwraca następujący json:

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

Mój skrypt wykresu:

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

moja funkcja do wywołania AJAX:

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

     } 
    }); 

Ale w tej chwili nic nie jest wyświetlane.

Nie jestem pewien, jak skutecznie wywołać ajax i zintegrować go z funkcją wykresu. Zdecydowałem się na wywołanie zwrotne na podstawie wcześniejszych prób i postów, aby upewnić się, że dane są zwracane przed utworzeniem wykresu - czy to jest poprawne?

nie jestem w 100% pewien, że dane JSON jest prawidłowo skonstruowany

Nie jestem pewien, I; ve zastosowano zmienną danych do serii prawidłowo

Zasadniczo - trzeba tutorial na ten temat, więc może dostać pracy i eksperymentowania

Wszystkie pomoc ceniona

Dzięki

Answer 1

myślę, że nie może wrócić do wartości z Sach zamiast tego wywołaj zamiast tego funkcję wywołania. Tak skonfigurować funkcję, która inicjuje wykresu, aw ajax rozmowy sukces, że działają z danymi

Z Twojego przykład kodu

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

W swojej ajax funkcji sukcesu nazywają swoją funkcję visitorData z danych [1] .data (ponieważ tak sformatowano twój json)

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

     } 
    }); 

Również twoja funkcja visataData jest nieparzysta.

vistorData = function(data) 

lub

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