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


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

require_once '../includes/database.php';
require_once '../includes/customer.php';
$customers=  Customer::find_by_sql("SELECT cust_name,monthly_income FROM customer");
foreach ($customers as $customer) {

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


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



---->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=""></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>'+ +'</b>: '+ this.percentage +' %'; } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', formatter: function() { return '<b>'+ +'</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=""></script> <script src=""></script> </head> <body> <div id="container" class="page_speed_693847652"></div> </body> </html>



$(function () {

            getValues: function(url) {
                var result = null;
                    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

            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


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

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.