Member Avatar for dapcigar

Hello all,

Am trying to display records from mysql using HIghchart but for some reasons, it is not bringing out any output, please help me look into my codes.

:::::::::::::::::::::::::::::::::::::data1.php ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

<?php
include('mysql_connect.php');
$dept = $_POST['department'];
//include('mysql_connect.php');
$stat = 'paid';


$result =  mysql_query ("select category, amount, actual from budget where department = '$dept' GROUP BY category  ") or die(mysql_error());

$category = array();
$category['name'] = 'category';

$series1 = array();
$series1['name'] = 'actual';

$series2 = array();
$series2['name'] = 'amount';

//$series3 = array();
//$series3['name'] = 'Highcharts';



    $category['data1'][] = $r['category'];
    $series1['data1'][] = $r['actual'];
    $series2['data1'][] = $r['amount'];
  //  $series3['data'][] = $r['highcharts'];   
}

$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series2);
//array_push($result,$series3);


print json_encode($result, JSON_NUMERIC_CHECK);
header("Location: view_dept.php");
mysql_close($con);

?>

:::::::::::::::::::::::::::::::::::::::: view_dept.php :::::::::::::::::::::::::::::::::

<script type="text/javascript" src=""></script>
        <script type="text/javascript">
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'column',
                    marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: 'Chart for Department',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'Amount'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: []
            }

            $.getJSON("data1.php", function(json) {
                options.xAxis.categories = json[0]['data1'];
                options.series[0] = json[1];
                options.series[1] = json[2];
                //options.series[2] = json[3];
                chart = new Highcharts.Chart(options);
            });
        });
        </script>
        <script src=""></script>
        <script src=""></script>

</head>

<body>

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

</body>

thanks in advance

  • 2 Contributors
  • 1 Reply
  • 296 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by naui95

Dani AI

Generated

Quick diagnosis (what's actually stopping the chart)

  • The PHP that should emit JSON never returns clean JSON: there's a redirect and variable/name mix-ups, so the AJAX call gets HTML (or nothing) instead of the expected arrays. The code also uses an undefined fetch variable and overwrites the DB result with an array. Finally, mysql_* is deprecated and unescaped POST input is an injection risk. Fix these and Highcharts will render.

Concrete server-side pattern to use (safe, returns tidy JSON)

<?php
// adapt connection to your environment
$dept = $_POST['department'] ?? '';

$mysqli = new mysqli('DB_HOST','DB_USER','DB_PASS','DB_NAME');
if ($mysqli->connect_error) { http_response_code(500); echo json_encode(['error'=>'db']); exit; }

$stmt = $mysqli->prepare(
  "SELECT category, SUM(amount) AS amount, SUM(actual) AS actual
   FROM budget WHERE department = ? GROUP BY category"
);
$stmt->bind_param('s', $dept);
$stmt->execute();
$res = $stmt->get_result();

$cats = $actual = $amount = [];
while ($row = $res->fetch_assoc()) {
  $cats[] = $row['category'];
  $actual[] = (float)$row['actual'];
  $amount[] = (float)$row['amount'];
}

header('Content-Type: application/json; charset=utf-8');
echo json_encode(['categories'=>$cats,'series'=>[
  ['name'=>'Actual','data'=>$actual],
  ['name'=>'Amount','data'=>$amount]
]]);
exit;

Client-side (consume JSON and draw)

$.getJSON('data1.php', function(resp){
  console.log(resp); // always check this first
  Highcharts.chart('container', {
    chart:{ type:'column' },
    xAxis:{ categories: resp.categories },
    yAxis:{ title:{ text: 'Amount' } },
    series: resp.series
  });
});

Quick troubleshooting checklist

  • Remove any header("Location...") redirects — return JSON only.
  • Use the browser Network tab: inspect response body and Content-Type.
  • Enable PHP error reporting while debugging, but disable on production.
  • Ensure jQuery is loaded before this script and Highcharts before calling Highcharts.chart.
  • Consider 's Google Charts suggestion if you prefer; both are fine — fix the JSON first and either library will plot it.

If you want, post the actual network response (copy/paste) and someone can point out the exact stray output breaking the JSON.

Be a part of the DaniWeb community

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