Somebody can help me. I'm new in php and highcharts. I tried to populate my chart using mysql and php, but when I tried to run it, the chart didn't appear, only a blank web page. And there's no error appeared.

Her's my codes (sorry for messy code):

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="../../js/highcharts.js"></script>
        <script src="../../js/modules/exporting.js"></script>

    </head>

            <body>

        <?php
    include "config.php";

    $SQL1 =     "SELECT * FROM pos";

    $result1 = mysql_query($SQL1);
    $data1 = array();
    while ($row = mysql_fetch_array($result1)) {
       $data1[] = $row['name'];
       $data2[] = $row['Qty'];

    }
    ?>

    <script type="text/javascript">
$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column',
                margin: [ 50, 50, 100, 80]
            },
            title: {
                text: 'List of POS'
            },
        credits: {
        enabled: false
        },
            xAxis: {
                categories: [<?php echo join($data1, "','"); ?>],
                labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'No. of Ticket'
                }
            },
            legend: {
                enabled: false,
        layout: 'vertical',
                            backgroundColor: '#FFFFFF',
                            align: 'left',
                            verticalAlign: 'top',
                            x: 50,
                            y: 35,
                            floating: true,
                            shadow: true
            },
            tooltip: {
                pointFormat: '<b>{point.y:.1f} tickets</b>',
            },
         plotOptions: {
                                column: {
                                            pointPadding: 0.2,
                                            borderWidth: 0
                                        }
                            },
            series: [{
                name: 'Qty',
                data: ['<?php echo join($data2, "','"); ?>'],
        dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#FFFFFF',
                    align: 'right',
                    x: 4,
                    y: 10,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 3px black',

                    }
                }
            }]
        });
    });

        </script>

<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>

    </body>
</html>
Re: Populate using mysql and php in highchart 80 80

you try to view source after you load your page, see output of line 43 and 81 of your code, whether it is properly populated or not

 categories: [<?php echo join($data1, "','"); ?>],

   data: ['<?php echo join($data2, "','"); ?>'],
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.