Geek Answers Handbook

Amchart and Ajax receive data in the wrong format

I want to use AmChart and get data for diagrams with php.

here is my php file:

$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]=array("name"=>$data['name'],"count"=>$data['count'],"color"=>$colors[$i]); $i++; } echo json_encode($dataList); ?>

$ datas has good data. The SQL query is good and returns what I want.

Here is my javascript with my Ajax request:

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

No chart is displayed.

But if I change the var 'data as follows: data = [{name: "toto", count: 10, color: "# FF0F00"}, {name: "toto", count: 10, color: "# FF0F00"} ]; as a result of success from an Ajax request, this works correctly! I get a chart ...

So, the problem remains in the format that I get from my php file ... I cannot find the correct format for the return.

EDIT: if I do this:

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

this is printed on the page: [{"Name": "Brussels", "count": "4", "color": "# FF0F00"}, {"name": "Chimay", "count": "2", "color": "# FF6600"}] and shows a blank diagram.

if you copy the copied table as data:

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

The chart is well displayed.

+4
source share
1 answer

Having solved this:

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

Check this out for more information on $ .getJSON (French): http://www.hooba.ca/blog/2008/echange-dobjets-json-entre-php-et-javascript-facile-grace-a-jquery/

0
source

More articles:


All Articles