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);
        }
    });
});

domagoj · Accepted Answer · 2018-03-26 09:13:09Z

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, 2018 at 9:13

domagoj

9561 gold badge8 silver badges21 bronze badges

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

6 Comments

mach2 Over a year ago

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

domagoj Over a year ago

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

mach2 Over a year ago

it says "Failed to load studyleagueit.com/prashant/data.php: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost' is therefore not allowed access."

domagoj Over a year ago

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 You could copy the data from 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

mach2 Over a year ago

is there no way of doing it online with the server?

|

Collectives™ on Stack Overflow

chart.js not getting linked with online database and php

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related