Json to Chart.js not working

Question

We got this file from the Internet and somehow we can able to get the output as JSON in the console but the chartdisplay.js is not taking the JSON file.

Can you help me.
Thanks!

HTML

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/chartjs/chart.js"></script>
<script type="text/javascript" src="chartdisplay.js"></script>

<div class="chart-container"> <!-- we have defined width and height for this class -->
    <canvas id="mycanvas"></canvas>
</div>

content.php

<?php
//get connection
$mysqli = new mysqli('localhost','root','','beehive_exp');

if(!$mysqli){
    die("Connection failed: " . $mysqli->error);
    }

$query = sprintf("SELECT userid, facebook, twitter, googleplus FROM followers");

//execute query
$result = $mysqli->query($query);

//loop through the returned data
$data = array();
foreach ($result as $row) {
    $data[] = $row;
    }

//free memory associated with result
$result->close();

//close connection
$mysqli->close();

//now print the data
print json_encode($data);

chartdisplay.js

$(document).ready(function(){
    $.ajax({
        url : "http://192.100.1.100/content.php",
        type : "GET",
        success : function(data){
            console.log(data);

            var userid = [];
            var facebook_follower = [];
            var twitter_follower = [];
            var googleplus_follower = [];

            for(var i in data) {
                userid.push("UserID " + data[i].userid);
                facebook_follower.push(data[i].facebook);
                twitter_follower.push(data[i].twitter);
                googleplus_follower.push(data[i].googleplus);
            }

            var chartdata = {
                labels: userid,
                datasets: [
                    {
                        label: "facebook",
                        fill: false,
                        lineTension: 0.1,
                        backgroundColor: "rgba(59, 89, 152, 0.75)",
                        borderColor: "rgba(59, 89, 152, 1)",
                        pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
                        pointHoverBorderColor: "rgba(59, 89, 152, 1)",
                        data: facebook_follower
                    },
                    {
                        label: "twitter",
                        fill: false,
                        lineTension: 0.1,
                        backgroundColor: "rgba(29, 202, 255, 0.75)",
                        borderColor: "rgba(29, 202, 255, 1)",
                        pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
                        pointHoverBorderColor: "rgba(29, 202, 255, 1)",
                        data: twitter_follower
                    },
                    {
                        label: "googleplus",
                        fill: false,
                        lineTension: 0.1,
                        backgroundColor: "rgba(211, 72, 54, 0.75)",
                        borderColor: "rgba(211, 72, 54, 1)",
                        pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
                        pointHoverBorderColor: "rgba(211, 72, 54, 1)",
                        data: googleplus_follower
                    }
                ]
            };

            var ctx = $("#mycanvas");

            var LineGraph = new Chart(ctx, {
                type: 'line',
                data: chartdata
                });
            },
        error : function(data) {
            }
        });
    });

This is what we get

JSON output

PHP Output

@UmairFarooq I have updated the post with the issue. Please see it. The image is added at the bottom. — Dexter
– Dexter, Commented Aug 31, 2016 at 8:34
What does console.log(data) outputs? Please check your browser's Inspector, Console and Network tab. — skobaljic
– skobaljic, Commented Aug 31, 2016 at 8:40
It will be easy if you post sample of your JSON or the output log of console — Umair Farooq
– Umair Farooq, Commented Aug 31, 2016 at 8:41
I an having difficulty in identifying the problem. Please post the console log of all 4 arrays after their population in for loop. — Umair Farooq
– Umair Farooq, Commented Aug 31, 2016 at 8:53

Umair Farooq · Accepted Answer · 2016-08-31 10:00:32Z

1

We continued in the chat and the problem I found was that the data he was getting from the php file was in JSON string.

So, in first line of success function, I wrote

data = JSON.parse(data);

and the same code worked after and showed the graph as expected.

answered Aug 31, 2016 at 10:00

Umair Farooq

1,7022 gold badges14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dexter Over a year ago

Also the loop was corrected

for(var i = 0; i < data.length; i++) {                 userid.push("UserID " + data[i].userid);                 facebook_follower.push(data[i].facebook);                 twitter_follower.push(data[i].twitter);                 googleplus_follower.push(data[i].googleplus);                 }

Umair Farooq Over a year ago

Please use the old loop. I am sure that wasn't the issue.

Collectives™ on Stack Overflow

Json to Chart.js not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related