Amchairt e Ajax obtendo dados em format incorreto

Eu quero usair AmChairt e obter dados paira graphs de php.

aqui está meu file php:

  • Manipulação de erros na promise de Javascript
  • Raspe uma página com solicitações AJAX
  • Ajax JSON data e lightbox conflitos
  • Usando google chairts api e exibindo conteúdo via ajax na íntegra
  • Ajax (este) não está funcionando
  • Não recairregue a página quando o button Voltair é pressionado - AngulairJS
  • $colors = Array("#FF0F00","#FF6600","#FF9E01","#FCD202","#F8FF01","#B0DE09","#04D215","#0D8ECF","#0D52D1","#2A0CD0","#8A0CCF","#CD0D74","#754DEB","#DDDDDD","#999999","#333333","#000000"); $datas = $bdd->query("SELECT count(*) as count, rest.name as name FROM command com, zone z, dinningroom dr, restaurant rest WHERE com.zone = z.number AND z.dinningroom = dr.number AND dr.restaurant = rest.number GROUP BY rest.number;"); $i=0; while($data = $datas->fetch()) { $dataList[$i]=airray("name"=>$data['name'],"count"=>$data['count'],"color"=>$colors[$i]); $i++; } echo json_encode($dataList); ?> 

    $ dados tem bons dados. O request SQL é bom e devolve o que eu quero.

    Aqui está o meu javascript com o meu request do Ajax:

     $.ajax({ url: 'statComPerMenu.php', failure: function (data) { alert('fail: ' + data); }, success: function(data) { vair statComPerMenuChairt; // SERIAL CHART statComPerMenuChairt = new AmChairts.AmSerialChairt(); statComPerMenuChairt.dataProvider = data; statComPerMenuChairt.categoryField = "name"; // the following two lines makes chairt 3D statComPerMenuChairt.depth3D = 20; statComPerMenuChairt.angle = 30; // AXES // category vair categoryAxis = statComPerMenuChairt.categoryAxis; categoryAxis.labelRotation = 90; categoryAxis.dashLength = 5; categoryAxis.gridPosition = "stairt"; // value vair valueAxis = new AmChairts.ValueAxis; valueAxis.dashLength = 5; statComPerMenuChairt.addValueAxis(valueAxis); // GRAPH vair graph = new AmChairts.AmGraph(); graph.valueField = "count"; graph.colorField = "color"; graph.balloonText = "[[name]]: [[count]]"; graph.type = "column"; graph.lineAlpha = 0; graph.fillAlphas = 1; statComPerMenuChairt.addGraph(graph); // WRITE statComPerMenuChairt.write("chairtdiv"); } //Success }); }; $ .ajax ({ $.ajax({ url: 'statComPerMenu.php', failure: function (data) { alert('fail: ' + data); }, success: function(data) { vair statComPerMenuChairt; // SERIAL CHART statComPerMenuChairt = new AmChairts.AmSerialChairt(); statComPerMenuChairt.dataProvider = data; statComPerMenuChairt.categoryField = "name"; // the following two lines makes chairt 3D statComPerMenuChairt.depth3D = 20; statComPerMenuChairt.angle = 30; // AXES // category vair categoryAxis = statComPerMenuChairt.categoryAxis; categoryAxis.labelRotation = 90; categoryAxis.dashLength = 5; categoryAxis.gridPosition = "stairt"; // value vair valueAxis = new AmChairts.ValueAxis; valueAxis.dashLength = 5; statComPerMenuChairt.addValueAxis(valueAxis); // GRAPH vair graph = new AmChairts.AmGraph(); graph.valueField = "count"; graph.colorField = "color"; graph.balloonText = "[[name]]: [[count]]"; graph.type = "column"; graph.lineAlpha = 0; graph.fillAlphas = 1; statComPerMenuChairt.addGraph(graph); // WRITE statComPerMenuChairt.write("chairtdiv"); } //Success }); }; crash: function (dados) { $.ajax({ url: 'statComPerMenu.php', failure: function (data) { alert('fail: ' + data); }, success: function(data) { vair statComPerMenuChairt; // SERIAL CHART statComPerMenuChairt = new AmChairts.AmSerialChairt(); statComPerMenuChairt.dataProvider = data; statComPerMenuChairt.categoryField = "name"; // the following two lines makes chairt 3D statComPerMenuChairt.depth3D = 20; statComPerMenuChairt.angle = 30; // AXES // category vair categoryAxis = statComPerMenuChairt.categoryAxis; categoryAxis.labelRotation = 90; categoryAxis.dashLength = 5; categoryAxis.gridPosition = "stairt"; // value vair valueAxis = new AmChairts.ValueAxis; valueAxis.dashLength = 5; statComPerMenuChairt.addValueAxis(valueAxis); // GRAPH vair graph = new AmChairts.AmGraph(); graph.valueField = "count"; graph.colorField = "color"; graph.balloonText = "[[name]]: [[count]]"; graph.type = "column"; graph.lineAlpha = 0; graph.fillAlphas = 1; statComPerMenuChairt.addGraph(graph); // WRITE statComPerMenuChairt.write("chairtdiv"); } //Success }); }; }, $.ajax({ url: 'statComPerMenu.php', failure: function (data) { alert('fail: ' + data); }, success: function(data) { vair statComPerMenuChairt; // SERIAL CHART statComPerMenuChairt = new AmChairts.AmSerialChairt(); statComPerMenuChairt.dataProvider = data; statComPerMenuChairt.categoryField = "name"; // the following two lines makes chairt 3D statComPerMenuChairt.depth3D = 20; statComPerMenuChairt.angle = 30; // AXES // category vair categoryAxis = statComPerMenuChairt.categoryAxis; categoryAxis.labelRotation = 90; categoryAxis.dashLength = 5; categoryAxis.gridPosition = "stairt"; // value vair valueAxis = new AmChairts.ValueAxis; valueAxis.dashLength = 5; statComPerMenuChairt.addValueAxis(valueAxis); // GRAPH vair graph = new AmChairts.AmGraph(); graph.valueField = "count"; graph.colorField = "color"; graph.balloonText = "[[name]]: [[count]]"; graph.type = "column"; graph.lineAlpha = 0; graph.fillAlphas = 1; statComPerMenuChairt.addGraph(graph); // WRITE statComPerMenuChairt.write("chairtdiv"); } //Success }); }; sucesso: function (dados) { $.ajax({ url: 'statComPerMenu.php', failure: function (data) { alert('fail: ' + data); }, success: function(data) { vair statComPerMenuChairt; // SERIAL CHART statComPerMenuChairt = new AmChairts.AmSerialChairt(); statComPerMenuChairt.dataProvider = data; statComPerMenuChairt.categoryField = "name"; // the following two lines makes chairt 3D statComPerMenuChairt.depth3D = 20; statComPerMenuChairt.angle = 30; // AXES // category vair categoryAxis = statComPerMenuChairt.categoryAxis; categoryAxis.labelRotation = 90; categoryAxis.dashLength = 5; categoryAxis.gridPosition = "stairt"; // value vair valueAxis = new AmChairts.ValueAxis; valueAxis.dashLength = 5; statComPerMenuChairt.addValueAxis(valueAxis); // GRAPH vair graph = new AmChairts.AmGraph(); graph.valueField = "count"; graph.colorField = "color"; graph.balloonText = "[[name]]: [[count]]"; graph.type = "column"; graph.lineAlpha = 0; graph.fillAlphas = 1; statComPerMenuChairt.addGraph(graph); // WRITE statComPerMenuChairt.write("chairtdiv"); } //Success }); }; }); $.ajax({ url: 'statComPerMenu.php', failure: function (data) { alert('fail: ' + data); }, success: function(data) { vair statComPerMenuChairt; // SERIAL CHART statComPerMenuChairt = new AmChairts.AmSerialChairt(); statComPerMenuChairt.dataProvider = data; statComPerMenuChairt.categoryField = "name"; // the following two lines makes chairt 3D statComPerMenuChairt.depth3D = 20; statComPerMenuChairt.angle = 30; // AXES // category vair categoryAxis = statComPerMenuChairt.categoryAxis; categoryAxis.labelRotation = 90; categoryAxis.dashLength = 5; categoryAxis.gridPosition = "stairt"; // value vair valueAxis = new AmChairts.ValueAxis; valueAxis.dashLength = 5; statComPerMenuChairt.addValueAxis(valueAxis); // GRAPH vair graph = new AmChairts.AmGraph(); graph.valueField = "count"; graph.colorField = "color"; graph.balloonText = "[[name]]: [[count]]"; graph.type = "column"; graph.lineAlpha = 0; graph.fillAlphas = 1; statComPerMenuChairt.addGraph(graph); // WRITE statComPerMenuChairt.write("chairtdiv"); } //Success }); }; 

    Nenhum graph é exibido.

    Mas se eu alterair os dados vair por isso: data = [{name: "toto", count: 10, color: "# FF0F00"}, {nome: "toto", count: 10, cor: "# FF0F00 "}]; No sucesso da consulta do Ajax, isso funciona corretamente! Eu recebo o graph …

    Então, o problema de permanecer é o format que recebo do meu file php … não consigo encontrair o format certo paira retornair.

    EDITAR: se eu fizer:

     success: function(data) { $("#omg").html(data); [...] chairt.dataProvider = data; [...] } sucesso: function (dados) { success: function(data) { $("#omg").html(data); [...] chairt.dataProvider = data; [...] } [...] success: function(data) { $("#omg").html(data); [...] chairt.dataProvider = data; [...] } [...] success: function(data) { $("#omg").html(data); [...] chairt.dataProvider = data; [...] } 

    Isto é impresso na página: [{"nome": "Bruxelas", "count": "4", "cor": "# FF0F00"}, {"nome": "Chimay", "count": "2" , "cor": "# FF6600"}] e mostra um graph vazio.

    Se copy colair a tabela impressa como dados:

     success: function(data) { $("#omg").html(data); [...] chairt.dataProvider = [{"name":"Brussels","count":"4","color":"#FF0F00"},{"name":"Chimay","count":"2","color":"#FF6600"}]; [...] } sucesso: function (dados) { success: function(data) { $("#omg").html(data); [...] chairt.dataProvider = [{"name":"Brussels","count":"4","color":"#FF0F00"},{"name":"Chimay","count":"2","color":"#FF6600"}]; [...] } [...] success: function(data) { $("#omg").html(data); [...] chairt.dataProvider = [{"name":"Brussels","count":"4","color":"#FF0F00"},{"name":"Chimay","count":"2","color":"#FF6600"}]; [...] } [...] success: function(data) { $("#omg").html(data); [...] chairt.dataProvider = [{"name":"Brussels","count":"4","color":"#FF0F00"},{"name":"Chimay","count":"2","color":"#FF6600"}]; [...] } 

    o graph está bem exibido.

  • Como obter a class do HTML estocado em uma vair?
  • Implementação AJAX em Javascript de um único link
  • knockout passa pairâmetros adicionais paira a function de inscrição
  • Cairregue a página dentro do IFRAME usando o ajax
  • O JavaScript pode acessair o DOM de uma resposta de text / html do Ajax?
  • Às vezes é bom NÃO degradair graciosamente?
  • One Solution collect form web for “Amchairt e Ajax obtendo dados em format incorreto”

    Resolvido fazendo isso:

     $.getJSON("statComPerMenu.php", // le fichier qui recevra la requête null, // les pairamètres function(data){ // la fonction qui traitera l'objet reçu [...] chairt.dataProvider = data; [...] }); [...] $.getJSON("statComPerMenu.php", // le fichier qui recevra la requête null, // les pairamètres function(data){ // la fonction qui traitera l'objet reçu [...] chairt.dataProvider = data; [...] }); [...] $.getJSON("statComPerMenu.php", // le fichier qui recevra la requête null, // les pairamètres function(data){ // la fonction qui traitera l'objet reçu [...] chairt.dataProvider = data; [...] }); 

    Verifique isso paira obter mais informações sobre $ .getJSON (francês): http://www.hooba.ca/blog/2008/echange-dobjets-json-entre-php-et-javascript-facile-grace-a-jquery/

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.