How to insert MySQL value inside JavaScript?

Question

I am making a project for our school, and I need a bar chart. I decided to use Morris Js because it has a good sample in the Bootstrap theme which I downloaded. My problem is that I don't know how to get the MySQL values from the database into my JavaScript.

This is the javascript code for the bar-chart:

    <script type="text/javascript">
    $(function() {
    Morris.Bar({
    element: 'morris-bar-chart',
    data: [{
        device: 'iPhone',
        geekbench: 136
    }, {
        device: 'iPhone 3G',
        geekbench: 137
    }, {
        device: 'iPhone 3GS',
        geekbench: 275
    }, {
        device: 'iPhone 4',
        geekbench: 380
    }, {
        device: 'iPhone 4S',
        geekbench: 655
    }, {
        device: 'iPhone 5',
        geekbench: 1571
    }],
    xkey: 'device',
    ykeys: ['geekbench'],
    labels: ['Geekbench'],
    barRatio: 0.4,
    xLabelAngle: 35,
    hideHover: 'auto',
    resize: true
 });
 });
 </script>

I am new to Morris JS. Please help. Here is what I have tried so far.

<script type="text/javascript">
             // Bar Chart

                             <?php
                            $query = mysql_query("select * from product") or die(mysql_error());
                            while ($row = mysql_fetch_array($query)) {
                                ?>
Morris.Bar({
    element: 'morris-bar-chart',
    data: [{
        device: <?php echo "'" . $row['product_name'] . "'" . ','; ?>
        geekbench: <?php echo "'" . $row['product_stock'] . "'" ; ?>
    }],
    xkey: 'device',
    ykeys: ['geekbench'],
    labels: ['Geekbench'],
    barRatio: 0.4,
    xLabelAngle: 35,
    hideHover: 'auto',
    resize: true
});
});
<?php }; ?>
    </script>

Check this. http://stackoverflow.com/questions/29697351/unable-to-fetch-data-from-database-to-script-tag-while-using-graph — Nana Partykar, Sep 01 '15 at 13:39

score 2 · Answer 1 · edited May 23 '17 at 11:44

Once you retrieve values from your database you need to print them from the PHP to the JavaScript code. The most common way to do this is something like the following:

<script>
var valueFromDatabase = <?php echo $value; ?> ;

Remember that PHP is run on the server side before the HTML page is served so what you are doing, inserting JavaScript inside a PHP for-loop won't work. In fact, I don't think what you have above should run at all because the PHP syntax doesn't make sense.

If you want to print out every value from a PHP database retrieval, you're probably better off using an array in both languages. Then you can print the array out using PHP's json_encode()

var jArray= <?php echo json_encode($phpArray ); ?>;

Also note that you'll need to move the database retrieval results into a PHP array to do so. You haven't done that yet either. You can see an example of doing so in this SO post retrieve data from db and display it in table in php .. see this code whats wrong with it?.

score 0 · Accepted Answer · answered Sep 01 '15 at 14:26

0

<script type="text/javascript">
    Morris.Bar({
        element: 'morris-bar-chart',
        data: [
        <?php
        $query = mysql_query("select * from product");
        while ($row = mysql_fetch_array($query))
        {?>
            {
            device: "<?php echo $row['product_name'];?>",
            geekbench: [<?php echo $row['product_stock'];?>]
            },
        <?}?>
        ],
        xkey: 'device',
        ykeys: ['geekbench'],
        labels: ['Geekbench'],
        barRatio: 0.4,
        xLabelAngle: 35,
        hideHover: 'auto',
        resize: true
    });
</script>

answered Sep 01 '15 at 14:26

Nana Partykar

10,556
10
48
77

Thank you for the effort and reply but when i applied this but this doesnt seem to work it am getting this error: Parse error: syntax error, unexpected end of file in C:\xampp\htdocs\CapstoneFinal\casas\super_admin\pages\charts\product_stocks.php on line 475, what am i missing? – gpbaculio Sep 01 '15 at 14:54
already have function at the top anyway and added }); this at the end seem doesnt work – gpbaculio Sep 01 '15 at 15:01
something is not closed – Nana Partykar Sep 01 '15 at 15:03
see, i've used the same mechanism to show my charts/graph.. http://stackoverflow.com/questions/29697351/unable-to-fetch-data-from-database-to-script-tag-while-using-graph – Nana Partykar Sep 01 '15 at 15:06
Your code worked! Thank you, just added spaces on ends. – gpbaculio Sep 01 '15 at 15:13
Feeling Relaxed Now @iamnewbie. Atleast, i helped someone.. Thanku. – Nana Partykar Sep 01 '15 at 15:13

How to insert MySQL value inside JavaScript?

2 Answers2