CODEWITHSUNDEEP
javascriptphphtmlmysqlchart.js
mach2
mach2

Reputation: 460

chart.js not getting linked with online database and php

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

Upvotes: 2

Views: 386

Answers (1)

domagoj
domagoj

Reputation: 946

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.

Upvotes: 2

Related Questions