How to get the database data into ChartJS using codeigniter

Question

so i started creating this chartjs to be connected in database i have used this because of course ChartJS is a live open source chart..i download the offline jqueryJS and ChartJS and it did work so i knew that there is nothing wrong with my script now when i tried to connect it to the database it wont show some result/chart, status code is 200 OK but there is no data in my properties using the developer tool, here is my code. Please explain why it didn't work. Thank you big help.

i have my uri where monthlyReport views the page and / 2 is my Project_No

http://localhost/****/index.php/Main/monthlyReport/2

offline downloadable script is working on non database query

<script src="<?php echo base_url('assets/jquery/jquery.min.js')?>"></script>
<script src="<?php echo base_url('assets/js/Chart.js')?>"></script>

button and canvas where it will fire the post script and views my chart

<input type="button" id="btnchart" value="Chart">
<canvas id="myChart" width="400" height="218"></canvas>

script to be fired

    <script type="text/javascript">

            var paramMonth = [];
            var paramPercentage = [];

            $('#btnchart').click(function(){ 
                $.post("<?php echo site_url('Main/chartData'); ?>",
                    function(data) {
                var obj = JSON.parse(data);

                $.each(obj,function(i,item) {
                    paramMonth.push(item.Month);
                    paramPercentage.push(item.Completion_Percentage);
                });


                var ctx = $('#myChart');
                    var myChart = new Chart(ctx, {
                        type: 'horizontalBar',

                        data: {
                            labels: paramMonth,
                            datasets: [{
                                label: paramYear,
                                backgroundColor: 'rgb(3, 0, 102)',
                                borderColor: 'rgb(3, 0, 102)',
                                data: paramPercentage,
                            },{
                                label: paramYear,
                                backgroundColor: 'rgb(255, 0, 0)',
                                borderColor: 'rgb(255, 0, 0)',
                                data: paramPercentage,
                            },{
                                type: 'line',
                                label: "Line Graph",
                                data: paramPercentage,
                            }],
                        },

                        // Configuration options go here
                        options: {}
                    });
                });
            });
</script>

controller gets the uri, query the model and converts the data to json

public function chartData()
    {
        $data['p_id'] = $this->uri->segment(3);
        $result = $this->foo_pro->getChartData('p_id');
        echo json_encode($result);
    }

query the monthly reports Month and Completion_Percentage where Project_No = 2

public function getChartData()
{
    $this->db->select('*');
    $this->db->from('monthlyreport');
    $this->db->where('Project_No', $this->uri->segment(3));  
    $query = $this->db->get();
    return $query->result();
}

so this here is my work update.. if no where clause

$this->db->where('Project_No', $this->uri->segment(3));

these what happens when i add where clause. no data will be shown.

@ℊααnd data have already shown but when i use a where clause in model it wont view my chart — Hanthony Tagam
– Hanthony Tagam, Commented Aug 29, 2017 at 20:07

Brian Gottier · Accepted Answer · 2017-08-29 20:54:50Z

2

I use chart.js, and I think I'm doing exactly what you want to do, which is to have ajax fetch the chart data, and then display it. You do have to update the chart a special way, and hopefully my code below will show you what you need to do. I think the key here is right up at the top, in the funcs namespace, the updateMyChart function. Check it out:

(function($){
    // Local namespaced variables and functions
    var namespace = {
        myChart: null,
        updateMyChart: function(data){
            funcs.myChart.data.datasets[0].data = data;
            funcs.myChart.update();
        }
    };
    // End local namespaced variables and functions
    window.funcs = ( window.funcs ) 
        ? $.extend( window.funcs, namespace ) 
        : namespace;
})(this.jQuery);

/* Document ready function */
$(document).ready(function(){

    // Initial config
    var myChartConfig = {
        type: 'bar',
        data: {
            labels: ['Yes', 'No', 'Maybe'],
            datasets: [{
                label: 'Current Count',
                backgroundColor: [
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(75, 192, 192, 0.2)'
                ],
                borderColor: [
                    'rgba(75, 192, 192, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(75, 192, 192, 1)'
                ],
                borderWidth: 1,
                data: [0,0,0]
            }]
        },
        options: {}
    };

    var myChartCanvas = $("#myChart");
    funcs.myChart = new Chart(myChartCanvas, myChartConfig);

    /* Unit selector for interest */
    $('#btnchart').on('click', function(){
        $.ajax({
            type: 'post',
            cache: false,
            url: '/someplace/special',
            data: {},
            dataType: 'json',
            success: function(response){
                if(response.data){
                    // In PHP I just json_encode(['data' => [SOME DATA]]);
                    funcs.updateMyChart(response.data);
                }
            },
            error: function(){
                alert('An error prevented chart awesomeness.');
            }
        });
    });

});

I know I'm using jQuery and you might not be, but the updating doesn't really have anything to do with jQuery anyways.

answered Aug 29, 2017 at 20:54

Brian Gottier

4,6003 gold badges24 silver badges39 bronze badges

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

8 Comments

Hanthony Tagam Over a year ago

awesome. thanks for the help bro. did you use pure PHP syntax on your code? i have used codeigniter and i dont know if is okay with.

Brian Gottier Over a year ago

This is javascript, and you can't write PHP in javascript. See the line is commented out. I've used CodeIgniter for 8 years, and it works great for all of this. "Pure" PHP is fine too.

Hanthony Tagam Over a year ago

ahhh okay what i mean is if your using purely php in querying the database.. rather than codeigniter.

Brian Gottier Over a year ago

No, I use CodeIgniter. CodeIgniter is like a bunch of shortcuts to make your PHP life easier. Plain PHP is too much work.

DanielTheGeek Over a year ago

Shouldn't the Ajax request be getting data rather than posting or am i missing something?

|

Collectives™ on Stack Overflow

How to get the database data into ChartJS using codeigniter

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related