Laravel jQuery line chart

Question

I have 4 different models, and of course 4 different database tables. I need to make a line chart, that shows, how many new records, of each table have been made on a particular day. The chart must show records of current month, but only show the days, on which at least one record has been created. I currently have such chart made with jQuery, but I don't know, how to make an array, to pass to the chart. The array should look like this (except, that I have 4 types of records, so that would be (a, b, c, d):

data: [
                    { date: '07-31-2015', a: 6, b: 90 },
                    { date: '08-01-2015', a: 0, b: 90 },
                    { date: '08-02-2015', a: 87, b: 90 },
                    { date: '08-03-2015', a: 95, b: 90 },
                    { date: '08-04-2015', a: 86, b: 90 },
                    { date: '08-05-2015', a: 43, b: 90 },
                    { date: '08-06-2015', a: 25, b: 90 },
                    { date: '08-07-2015', a: 0, b: 90 },

        ]

What kind of plugin do you use to make the line chart and how the array should look like? — Killian Saint cricq
– Killian Saint cricq, Commented Aug 28, 2015 at 9:14
I am using morris.js plugin, and the array should look like this, with all days of current month, where at least one record was made: data: [ { date: '07-31-2015', a: 6, b: 90, c:55, d:65 }, { date: '08-01-2015', a: 0, b: 90, c:55, d:65 }, { date: '08-02-2015', a: 87, b: 90, c:55, d:65 }] — Lynce
– Lynce, Commented Aug 28, 2015 at 9:23

Matteo-SoftNet · Accepted Answer · 2015-08-28 12:59:16Z

You could trigger with jQuery, for example, an AJAX GET (or POST...) request ($.get()) to the server (Laravel) that fetches data from the DB, stores it in the desidered array structure and returns it to the client; then you can instantiate and populate the chart directly from the $.get() callback function. In PHP you can build the array as usual, for example within a foreach cycle, than return it to the client at the end of the script.

Something like this:

CLIENT SIDE (JavaScript)

$(function(){
    $.get("myPHPresource",{},function(AJAXdata){
        new Morris.Line({
            [...]
            data: AJAXdata,
            [...]
        });
    });
});

SERVER SIDE (php file pointed by myPHPresource)

<?php
$ret=array();
$data=fetch_DB_data();
foreach($data as $d){
    $current_data=array();
    //the following three lines are hypothetical and depend on how data is returned from your fetch_DB_data() function
    $current_data["date"]=$d["date"];
    $current_data["a"]=$d["a"];
    $current_data["b"]=$d["b"];
    $ret[]=$current_data;
}
exit($ret);
?>

To show only the days with at least one record, you could operate either at the database query level (probably better: using COUNT and GROUP BY where count(records)>0) or at PHP level: inside the foreach you can avoid pushing $current_data to $ret if the record count is <=0.

Collectives™ on Stack Overflow

Laravel jQuery line chart

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