Home forums Using CanvasJS Issues retrievng data from MySql Reply To: Issues retrievng data from MySql

#7510

andres.chandia
Participant

Sorry for this but I’ve been testing the code and no success, no graphic comes out, here are my files, I think I’ve adapted them well, but maybe I’m doing something wrong…

tipus_recursos.php

<?php
$conn = new mysqli("localhost","dbuser","dbpassword","database");

        // Check connection
        if ($conn->connect_error) {
                die("Connection failed: " . $conn->connect_error);
        } else
        {
                $data_points = array();
                $result = mysqli_query($conn, "SELECT <code>Tipus_1</code> AS 'Tipus', COUNT(*) AS 'Recursos' FROM <code>values</code>");

                while($row = mysqli_fetch_array($result))
                {
                        $point = array("label" => $row['Recursos'] , "y" => $row['Tipus']);
                        array_push($data_points, $point);
                }

                //echo json_encode($data_points, JSON_NUMERIC_CHECK);
                // JSON data using echo statements
                $length = sizeof($data_points);

                echo "[";
                for ( $i = 0; $i <= $length-1; $i++) { 
                        echo "{ \"label\": \"" , $data_points[$i]['label'],"\", \"y\": " , $data_points[$i]['y'], "}";
                        if( $i < $length-1)
                                echo ",";
                }
                echo "]";
        }

?>

tipus_recursos.js

$(document).ready(function () {
        var dataPoints = [];
        $.getJSON("tipus_recursos.php", function (result) {
            var chart = new CanvasJS.Chart("chartContainer2", {
                data: [
                    {
                        type: "pie",
                        dataPoints: result
                        indexLabel: "#percent"
                    }
                ]
            });
            chart.render();
        });
    });

graf_tipus_recursos.php

<head>
       <script src="jquery.js"></script>
        <script src="canvasjs.js"></script>
        <script src="tipus_recursos.js"></script>
</head>
<body>
<h2>Gràfic per tipus de recursos</h2>
<div id="chartContainer2" style="width: 1200px; height: 700px;" ></div>
</body>