I have a issue with chart.js, php and infomix database?

by

1👍

✅

I ran your code (with some minor fixes) on my Linux box. I can display the bar graph with some simple test data from an Informix database:

html page:

informix@irk:/var/www/html# cat test.html
<!DOCTYPE html>
<html>
    <head>
        <title>ChartJS - BarGraph</title>
        <style type="text/css">
            #chart-container {
                width: 640px;
                height: auto;
            }
        </style>
    </head>
    <body>
        <div id="chart-container">
            <canvas id="mycanvas"></canvas>
        </div>

        <!-- javascript -->
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
        <script src="http://irk/b.js"></script>
    </body>
</html>
informix@irk:/var/www/html#

javascript:

informix@irk:/var/www/html# cat b.js
$(document).ready(function(){
    $.ajax({
        url: "http://irk/data.php",
        method: "GET",

        success: function(data) {

    var obj=JSON.parse(data);
    data=obj;
            var startdatetime = [];
            var loggedInAgents = [];

            for(var i in data) {
                startdatetime.push( data[i].STARTDATETIME);
                loggedInAgents.push(data[i].LOGGEDINAGENTS);
            }

            var chartdata = {
                labels: startdatetime,
                datasets : [
                    {
                        label: 'loggedInAgents',
                        backgroundColor: 'rgba(200, 200, 200, 0.75)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: loggedInAgents 
                    }
                ]
            };

            var ctx = $("#mycanvas");

            var barGraph = new Chart(ctx, {
                type: 'bar',
                data: chartdata
            });
        },
        error: function(data) {
            console.log(data);
        }
    });
});
informix@irk:/var/www/html#

php script getting the data from Informix:

informix@irk:/var/www/html# cat data.php
<?php

$db=new pdo("informix:database=enusutf8;server=irk1210;CLIENT_LOCALE=en_US.UTF8;DB_LOCALE=en_US.UTF8","informix","testpwd") or die("Impossible de se connecter !!!");

$sql0 = sprintf("SELECT * FROM  RtCSQsSummary where CSQName = 'BMCE BANK'"); 

$result = $db->query($sql0);
$data = array();
foreach ($result as $row) {
    $data[] = $row;
}

print json_encode($data);
?>

informix@irk:/var/www/html#

In addition to the uppercase/lowercase mentioned before, the JSON data the JS function gets
has to be parse before it can be used. Otherwise you will get “undefied” values in the ‘for(var i in data)’ loop, no matter what case you used.

Leave a comment