Generating graphs with hightchart, PHP, MYSQL and Angular JS

Question

Generating graphs with hightchart, PHP, MYSQL and Angular JS

Navigation

#1 by (1 votes)

1

I'm trying to generate graphics dynamically with technologies (PHP, MYSQL, AngularJS).

This is my PHP code:

$sql = "SELECT descricao, estoque from 'alimentos'";

Transaction::open("mysql");
$conn = Transaction::get();         
$result = $conn->query($sql);

if($result){
    while($row = $result->fetch(PDO::FETCH_OBJ)){
        $data[] = array($row->descricao, $row->estoque);                    
    }
            return json_encode($data);              
}

Note: When inspecting for firebug the return of PHP code is:

[["frango","200.000"],["Bacon","15.000"],["Calabresa","100.000"],["Carne Moida","20.000"]]

This is my JS Angular code

'use strict';

angular.module('app').controller('painelController', function($scope, $http, $window, $location){
    //Define metodos para graficos
    $scope.chartAlimentos = function(){
        $http.post(url + 'server/modulos/materia_prima/alimentos.php', {action:'loadChart'}).success(function(response){                                    
            //Gera o grafico na view            
            $('#chart-alimentos').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Estoque atual' 
                },
                tooltip: {
                    pointFormat: '<b>Percentual</b>: {point.percentage:.1f} %'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}: <b>{point.y} Kg</b>',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            },
                            showInLegend: true
                        }
                    }               
                },
                series: [{
                    type: 'pie',
                    data: [ response ]
                }],
                credits: {
                    enabled: false
                }, 
                exporting: {
                    enabled: true
                }
            });         

        });
    }

});

Note: I've seen in some tutorials that people ask to use the following code in the script script:

series: [{
    type: 'pie',
    data: ['<?php echo join(',',$sjon) ?>' ]
}],

But in my case it is not possible due to the separation of client and server codes

And finally the error that occurs is that the chart does not render correctly. I do not understand the error because if I copy and paste the return of the php that I described above works normally

php angularjs

asked by anonymous 29.04.2015 / 03:27

1 answer

Turn 3 CSS classes into one Dynamic property in static class

score 1 · Answer 1

I was able to solve the problem, so I realized I was passing the correct values but a small detail in my PHP code made all the difference, as I was passing string strings to hightchart and it was expecting integer values the function (int) of php to convert an integer to an array, so

        if($result){
            while($row = $result->fetch(PDO::FETCH_OBJ)){
                $data[] = array("{$row->descricao}", (int)$row->estoque);                   
            }
            return json_encode($data);

            //Exemplo saída para grafico hightchart tipo PIE valores strings com aspas duplas, valores inteiros sem aspas
            //ex.: '[["frango",15.000],["Calabresa",70.000],["Bacon",200.000]]';                
        }    insira o código aqui

A big hug to everyone ....