chart.js not getting linked with online database and php

Question

I want to show data from my database in form of double bar graph in the webpage. For that i made table in database on c-panel server and wrote a php script linking it, and its working fine. But when i link it with my chart.js script it is not displayoing any result. bargraph.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="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/Chart.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</body>

app.js

$(document).ready(function(){
$.ajax({
    url: "http://studyleagueit.com/prashant/data.php",
    method: "GET",
    success: function(data) {
        console.log(data);
        var player = [];
        var score = [];
        var score1 = [];

        for(var i in data) {
            player.push("Player " + data[i].playerid);
            score.push(data[i].score);
            score1.push(data[i].score1);

            }

            var densitydata = {
                label: 'Player Score',
                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: score
            }

            var gravitydata = {
                label: 'Player Score',
                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: score1
            }

            var chartdata = {
                labels: player,
                datasets : [densitydata, gravitydata]
            };

            var ctx = $("#mycanvas");

            var barGraph = new Chart(ctx, {
                type: 'bar',
                data: chartdata
            });
        },
        error: function(data) {
            console.log(data);
        }
    });
});

score 2 · Accepted Answer · answered Mar 26 '18 at 09:13

2

Two possible solutions:

It seems your libraries are not properly loading. Try to pull them through CDN, and see if that works. I've tried to run this fiddle:

http://jsfiddle.net/25oqkhz7/11/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

But I cannot get the data because of the CORS.

This can also be the issue for you, if your local domain is not allowed to access data from that URL in your AJAX request, there's not much you could do with that URL. You could download the data manually and reference it from some local file, but until your development domain is whitelisted, you cannot perform such GET request.

What does your console.log() has to say? Perhaps with more input, we could be more precise.

answered Mar 26 '18 at 09:13

domagoj

906
1
8
20

when i run with my database on local server it works fine, so i dont think its the issue of liabraries. I am kind of a newb in js so idont know where exaxtly to put the console.log() can you be more specific? thank you – mach2 Mar 26 '18 at 09:20
You are already logging some data in your code. Open Developer tools (Chrome: CTRL + SHIFT + i or F12) and check what do you have under Console tab. Of course, do this only when you try to run your bargraph.html – domagoj Mar 26 '18 at 09:21
it says "Failed to load http://studyleagueit.com/prashant/data.php: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access." – mach2 Mar 26 '18 at 09:31
Ok, so this is what I mentioned under the second dot. Your localhost domain is not allowed to access that link from AJAX request. If you want to know more about that, read about [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) You could copy the data from http://studyleagueit.com/prashant/data.php and save it locally in a json file which you can then reference in your AJAX request. See how to do it [here](https://stackoverflow.com/questions/7346563/loading-local-json-file) – domagoj Mar 26 '18 at 09:32
is there no way of doing it online with the server? – mach2 Mar 26 '18 at 09:41
Not unless you have the means to whitelist 'localhost' domain on that URL `studyleagueit.com/prashant/data.php` to allow CORS. Even if you do, if this is some sort of live webpage, you probably don't want to do it this way. – domagoj Mar 26 '18 at 09:43

chart.js not getting linked with online database and php

1 Answers1