Chart.js PHP Database data is not displayed

Question

In my current project, I want to use Chart.js to display certain data from the database. Now I have the problem that I am not given any data, instead I always get the error message "$ is not a function" in Chrome. I already tried some things, unfortunately without success. I also included the latest version of JQuery at the top of my JS scripts.

The values of my MySQL database I get through a PHP script, which this out in JSON. There I get all the data.

My JS script calls:

<script src="vendors/jquery/dist/jquery.min.js"></script>
<script src="vendors/popper.js/dist/umd/popper.min.js"></script>
<script src="vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/admin.js"></script>

<script src="vendors/chart.js/dist/Chart.bundle.min.js"></script>
<script src="assets/js/statistics/show-all-views.js"></script>

My Chart.js Code:

$(document).ready(function() {
    $.ajax({
        url: "http://localhost/fitnesslaeufer_cms/admin/includes/statistics/charts-data/show-all-views.php",
        method: "GET",
        success: function(data) {
            console.log(data);
            var views = [];

            for(var i in data) {
                views.push(data[i].score);
            }

            var ctx = document.getElementById("monthlyViews");
            ctx.height = 50;
            var myChart = new Chart(ctx, {

                type: 'line',
                data: {
                       labels: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
                       datasets: [ 
                           {
                              label: "My First dataset",
                              borderColor: "rgba(0,0,0,.09)",
                              borderWidth: "1",
                              backgroundColor: "rgba(0,0,0,.07)",
                              data: views
                           }
                      ] ........

Have you tried replacing $(document.ready with jQuery(document).ready(function(){.. ? It might also be worth checking your network tab to make sure jQuery is being loaded in the page and not resulting in a 404. — Tiberiuscan
– Tiberiuscan, Commented Sep 27, 2019 at 12:40

Michael Tétreault · Accepted Answer · 2019-09-27 12:46:16Z

1

Use jQuery for your document and make sur to pass $ in the callback.

  jQuery(document).ready(function($) {
      // Your code here
  });

answered Sep 27, 2019 at 12:46

Michael Tétreault

4244 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

Chart.js PHP Database data is not displayed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related