How to create a highchart using mysql data (PHP)?

692

Yes I know that this question has been asked so many times in stackoverflow in different ways. But I really cannot understand how to display mysql data in a highchart. To be honest I have been working on this for few days and could not figure it out. I am really glad if somebody could help me to sort this out

Here is my php & mysql code

data.php
<?php
require_once '../includes/database.php';
require_once '../includes/customer.php';
$customers=  Customer::find_by_sql("SELECT cust_name,monthly_income FROM customer");
$rows=array();
foreach ($customers as $customer) {
    $row[0]=$customer->cust_name;
    $row[1]=$customer->monthly_income;
    array_push($rows,$row);
}




print json_encode($rows, JSON_NUMERIC_CHECK);
?>

This will output a this kind of data series [["Madhava",55000],["Praveen",50000],["Nuwan",120000],["Thilan ",100000]]

Now I want to display this data in a bar chart which should be in following format

Monthly Income
^
|
|
|
|

Now I am going to display them in a chart I have copied below code from other website and really do not know how to change that code to make it work according to my requirement

 {-code-3}

What are the changes that I should make in highcharts.php to make this work?

462

Answer

---->Customer Name Figure - Expected output of the bar chart|||highcharts.php <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Pie Chart</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var options = { chart: { renderTo: 'container', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: 'Customer Name Vs Income' }, tooltip: { formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; } } } }, series: [{ type: 'pie', name: 'Browser share', data: [] }] } $.getJSON("data.php", function(json) { options.series[0].data = json; chart = new Highcharts.Chart(options); }); }); </script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> </head> <body> <div id="container" class="page_speed_693847652"></div> </body> </html>

950

Answer

Solution:

$(function () {


        jQuery.extend({
            getValues: function(url) {
                var result = null;
                $.ajax({
                    url: url,
                    type: 'get',
                    dataType: 'json',
                    async: false,
                    success: function(data) {
                        result = data;
                    }
                });
               return result;
            }
        });

        var myServerData = $.getValues("data.php"); //direct this to your PHP script and make sure that right JSON is returned

        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Chart Title Here'
            },
            subtitle: {
                text: 'Place subtitle here'
            },
            xAxis: {
                type: 'category',
                labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Monthly income (USD or whatever...)'
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                pointFormat: 'Monthly income: <b>{point.y:.1f} USD</b>',
            },
            series: [{
                name: 'Monthly Income',
                data: myServerData,
                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'
                    }
                }
            }]
        });
    });

People are also looking for solutions to the problem: php - mod_rewrite in .htaccess leads double path

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question