0

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>

Edited by ria.yaoto

2
Contributors
1
Reply
9
Views
3 Years
Discussion Span
Last Post by urtrivedi
0

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, "','"); ?>'],
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.