Get MorrisChart Data dynamically via PHP function

Question

I try to build the data argument for MorrisChart dynamically with an php function that gets the data from a database. In my index.php I try to call the function and load the data via AJAX. I used the code from this answer to implement it into my own code.

Here is the <script> that i put on the bottom of the page index.php before the ` tag:

<script type="text/javascript">
var $dataForChart1;
function reqListener () {
    console.log(this.responseText);
}

var oReq = new XMLHttpRequest(); //New request object
oReq.onload = function() {
    //This is where you handle what to do with the response.
    //The actual data is found on this.responseText
    !function($) {
    "use strict";

    var MorrisCharts = function() {};

    //creates line chart
    MorrisCharts.prototype.createLineChart = function(element, data, xkey, ykeys, labels, lineColors) {
        Morris.Line({
        element: element,
        data: data,
        xkey: xkey,
        ykeys: ykeys,
        labels: labels,
        hideHover: 'auto',
        gridLineColor: '#eef0f2',
        resize: true, //defaulted to true
        lineColors: lineColors
        });
    },
    MorrisCharts.prototype.init = function() {

        //create line chart
        var $data  = this.responseText; //<-- Here we should get the data
        this.createLineChart('morris-line-example', $data, 'y', ['a', 'b'], ['Series A', 'Series B'], ['#3292e0', '#dcdcdc']);


    },
    //init
    $.MorrisCharts = new MorrisCharts, $.MorrisCharts.Constructor = MorrisCharts;
}(window.jQuery),

//initializing 
function ($) {
    "use strict";
    $.MorrisCharts.init();
}(window.jQuery);

};
oReq.open("get", "get-data.php", true);
//                               ^ Don't block the rest of the execution.
//                                 Don't wait until the request finishes to 
//                                 continue.
oReq.send();

</script>

The file get-data.php contains the following code:

<?php 
/* Do some operation here, like talk to the database, the file-session
 * The world beyond, limbo, the city of shimmers, and Canada.
 * 
 * AJAX generally uses strings, but you can output JSON, HTML and XML as well. 
 * It all depends on the Content-type header that you send with your AJAX
 * request. */

include("./assets/php/functions.php");

echo json_encode(getMorrisExampleData()); //In the end, you need to echo the result. 
                      //All data should be json_encode()d.

                      //You can json_encode() any value in PHP, arrays, strings,
                      //even objects.

?>

And here is what the function getMorrisExampleData() looks like:

function getMorrisExampleData(){
$data = "[
        { y: '2009', a: 100, b: 90 },
        { y: '2010', a: 75,  b: 65 },
        { y: '2011', a: 50,  b: 40 },
        { y: '2012', a: 75,  b: 65 },
        { y: '2013', a: 50,  b: 40 },
        { y: '2014', a: 75,  b: 65 },
        { y: '2015', a: 100, b: 90 }
      ]";

return $data;
}

And of course I have a div with the id morris-line-example in my index.php : <div id="morris-line-example" style="height: 300px"></div>

I think that is should work fine with this setup but unfortunately it does not. Am I doing something wrong with the AJAX request?

Answer 1

First problem: replace getMorrisExampleData() with this:

function getMorrisExampleData(){
    $data = array(
        array("y" => 2009, "a" => 100, "b" => 90),
        array("y" => 2010, "a" =>  75, "b" => 65),
        array("y" => 2011, "a" =>  50, "b" => 40),
        array("y" => 2012, "a" =>  75, "b" => 65),
        array("y" => 2013, "a" =>  50, "b" => 40),
        array("y" => 2014, "a" =>  75, "b" => 65),
        array("y" => 2015, "a" => 100, "b" => 90)
    );

    return $data;
}

Why? Because in your code, $data is a string that IS NOT A VALID JSON. Moreover, when you encode it (with json_encode , you turn it into a JSON string (not an array with objects) that can't be used by Morris plugin.

(there might be other problems, bu try this first)