web-dev-qa-db-fra.com

création de highchart avec des données ajax json

J'essaie de créer un graphique simple dans une page à l'aide de données mysql récupérées à l'aide d'un script mysql

Je ne comprends pas comment intégrer l'appel ajax avec les données requises pour le graphique. Je ne connais pas assez les différents plugins de cartographie pour me faciliter la vie et je teste actuellement le highchart.

Mon script php renvoie le json suivant:

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

Mon script de graphique est:

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

ma fonction pour faire l'appel ajax:

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

        }
    });

Mais pour l'instant rien n'est affiché.

Je ne sais pas comment faire efficacement l'appel ajax et l'intégrer dans la fonction de graphique. J'ai décidé d'un rappel basé sur des tentatives et des publications antérieures pour m'assurer que les données sont retournées avant de créer le graphique - ce bit est-il correct?

Je ne suis pas sûr à 100% que les données JSON sont correctement structurées

Je ne suis pas sûr d'avoir appliqué correctement la variable de données à la série

Fondamentalement - besoin d'un tutoriel à ce sujet pour que je puisse le faire fonctionner et expérimenter

Toute l'aide appréciée

Merci

javascriptjqueryajaxjsonhighcharts
9
Ray

Je pense que vous ne pouvez pas renvoyer des valeurs de l'appel de réussite à la place, vous auriez besoin d'appeler une fonction à la place. Configurez donc votre fonction qui initialise votre graphique, et dans l'appel de succès ajax cette fonction avec les données

Avec votre exemple de code

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);
    }
  });
 });
26
ryuutatsuo

Dans votre fonction de réussite ajax, appelez votre fonction visitorData avec data [1] .data (puisque c'est comme ça que votre json est formaté)

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

        }
    });

aussi, la fonction de votre visiteurData est bizarre.

vistorData = function(data)

ou

function vistorData(data)
2
Barbara Laird
//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);
0
Lem