Adding options to Charts.js

PHP
1

HI guys , Can someone assist , my chart is rendering but when 2 columns has the same value it only renders certain columns, Ive seen the solution on various platforms but i cant get it to work, if anyone can tell me how to add this code i would appreciate it

//TRYING TO IMPLEMENT

options: {
    title: {
        display: true,
        text: 'Title Text'
    },
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

//CURRENT CODE

 <script>
               
                $(document).ready(function() {
                    $.ajax({
                        url: "http://localhost/loginandout/admindatacharts.php",
                        method: "GET",
                        success: function(data) {
                            console.log(data);

                            var types = [];
                            var dtypes = [];
                            var ids = [];
                            var total = [];
                            for (var i in data) {

                                types.push(data[i].type);
                                dtypes.push(data[i].dtype);
                                ids.push(data[i].id);
                                total.push(data[i].total)
                            }

                            var chartdata = {

                                labels: types,

                                datasets: [{
                                    label: 'Defects Logged',
                                    backgroundColor: [
                                        'red',
                                        'yellow',
                                        'blue',
                                        'green',
                                        'orange',
                                        'teal',
                                    ],
                                    
                                    borderColor: 'rgba(200, 200, 200, 0.75)',
                                    hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                                    hoverBorderColor: 'rgba(200, 200, 200, 1)',
                                    data: total
                                    
                                }]
                                
                      };
                            
                         var ctx = $("#mycanvas");
                            var barGraph = new Chart(ctx, {
                                type: 'bar',
                                data: chartdata
                                
                            });
                            
                        },
                        
                        
                        error: function(data) {
                            console.log(data);
                        }
                        
      
                    });
                
                });
                
                
            </script>
2

Does the data come back correctly from admindatacharts.php?

If it does not, please post the code to that so we can see why it does not. If it does, it might be best asking the question in the JavaScript section of the forum.

Can you expand on that, for example is it always only showing one column of that value, or if there are three columns with the same value, might it show two of them?

3

HI

It is 4 colomns. Column 1 (Building) C2 (Carpentry) C3 (ELectrical) C4(Mechanical)

Total number of items logged is 29. currently (C1) has 10 items (SHOWING) Column 2 and 3 has 6 items not showing. Column 4 has 7 items and is showing.

As soon as i increase column 2 it shows but when i increase column 3 it does not show as soon as any column value is equal those columns does not show.

I am sure the data returns correctly as my table gives the right amount of defects but something up with rendering the physical color

4

What I meant was, have you printed it to the console to check that it contains what you expect it to contain, or call the PHP code directly and see that it actually has the correct data.

When you say “gives the right amount of defects”, is that based on something you’ve calculated in the JS based on the returned data, or is it something that was also returned from PHP?

5

[off-topic]
I had difficulty with HighCharts and found Google Charts were better documented and easier to add parameters, etc
[/off-topic]

6

But can you use Google Charts offline ??

7

It is data returned from PHP and Mysql Database

<?php
header('Content-Type: application/json');
include ("dbconnection.php");
$sql = sprintf("SELECT type,dtype,id,count(*) as total FROM defects group by type ");
$result = mysqli_query($link6,$sql);
$data = array();

foreach ($result as $row){
    $data[] =$row;
    $total[] = $result;
   
}


print json_encode($data);

?>
8

OK, well I can’t see anything wrong with that code at first glance. You can delete this line though

    $total[] = $result;

as you don’t do anything with it and it doesn’t really make sense, storing the results object in an array element for each row returned.

If you call that PHP code directly in your browser, does it display the numbers you are expecting it to?

9

From memory there is a single and very large JavaScript file that requires making available locally.

Did you try and save the source code of an example?

10

This is what the Code gives if i run it directly , as i mentioned i get the charts but goes faulty when any of those values are equal (the totals)

[{"type":"Building","dtype":"Leaking Tap","id":"1","total":"10"},{"type":"Carpentry","dtype":"Broken Cupboard","id":"5","total":"7"},{"type":"Electrical","dtype":"Plug Top Damaged","id":"3","total":"7"},{"type":"Mechanical","dtype":"No Air Flow","id":"4","total":"7"}]
11

As I said above, I’m not very well-read in JS, but does it matter that the totals are quoted and therefore, presumably, strings? Is there something you need to do to convert them to numbers?

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.