How to send my MySQL data with PHP code to morris-data.js?

I got a problem how to make morris chart with data from MySQL database. I have made a php code with output like how JSON template can accepted to morris-data.js.

Here’s my php code name cobaJson.php:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="http//cdnjs.cloudflare.com//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http//cdnjs.cloudflare.com//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http//cdnjs.cloudflare.com//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

<?php
include_once("koneksi.php");

$query = "SELECT * FROM data_graph ORDER BY x ASC";
$result = mysql_query( $query );

while ( $row = mysql_fetch_assoc( $result ) ) 
{  
    $prefix = '';
    echo "[<br />";
    while ( $row = mysql_fetch_assoc( $result ) ) 
    {
        echo $prefix . " {<br />";
        echo '  x: ' . $row['x'] . ',' . "<br />";
        echo '  y: ' . $row['y'] . ',' . "<br />";
        echo '  z: ' . $row['z'] . ',' . "<br />";
        echo '  a: ' . $row['a'] . '' . "<br />";
        echo " }";
        $prefix = ",<br />";
    }
    echo "<br />]";
}
?>

And here’s the output :

[ { x: 2012, y: 11, z: 6, a: 9 }, { x: 2014, y: 3, z: 3, a: 1 }, { x:
2015, y: 4, z: 7, a: 9 } ]

And I try to send this php code to my morris-data.js :

    $(function() {
var json = (function () {
        var json = null;
        $.ajax({
            'async': false,
            'global': false,
            'url': 'cobaJson.php',
            'dataType': "json",
            'success': function (data) {
                json = data;
            }
        });
        return json;
    })
    ();


    Morris.Bar({
        element: 'morris-bar-chart',
        data: json,
        xkey: 'x',
        ykeys: ['y', 'z', 'a'],
        labels: ['Series A', 'Series B', 'Series B'],
        hideHover: 'auto',
        resize: true
    });

});

But it still not work, anyone can you help me?


Source: php

1 Comment

  1. Edwin

    You have Closed the function in a Unexpected Way.

    $(function() {
    var json = (function () {
            var json = null;
            $.ajax({
                'async': false,
                'global': false,
                'url': 'cobaJson.php',
                'dataType': "json",
                'success': function (data) {
                    json = data;
                }
            });
            return json;
        })
        ();

    Change your last two lines into:

    });

    Hope It will Help You.

    Reply

Leave a Reply