PHP MySQL Highcharts – Compare Data using Column Chart

In this tutorial, we will go over the demonstration of php mysql highcharts example. you can understand a concept of highcharts php dynamic data. highcharts provides various types of beautiful chart components. It is helpful to present data in an interactive graphical representation. There are pie charts, bar charts, column charts, line charts, and many more formats.

It is a client-side chart component based on Javascript and can be easily implemented in our web projects.

In this post, we are learn how to implement simple dynamic column highcharts using php mysql database. I will give you full example of column highcharts. In this example you have to just follow three step as like bellow:

First, let’s initialize the X-axis and Y-axis and other default options. After setting the required options, we assign the array of subjects as a chart legend. Then, we push the census data to the Highcharts series option to draw the bar chart.

HTML to Render Chart

The following HTML has Subject checkboxes for the user to compare census data. The chart will be rendered onto a target DIV when clicking the compare button. This target DIV reference is set to the renderTo option.

<div class="chart-filter">
<div class="chart-item-title">
<input type="checkbox" name="subject" value="Physics" checked /> Physics
<input type="checkbox" name="subject" value="Chemistry" class="chart-item-option" checked /> Chemistry
<input type="checkbox" name="subject" value="Mathematics" class="chart-item-option" /> Mathematics
</div>
<input type="button" id="compare" value="Compare" class="btn-input" />
</div>
<div id="chart"></div>

Draw Column Chart using Highcharts

The following code sets some default options to draw the chart. Those are the chart type, title, height and width, X-axis and Y-axis, and more. We initialize the series option without any data.

var options = {
    chart: {
        renderTo: 'chart',
        type: 'column',
        height: 500,
        width: 530
    },
    title: {
        text: 'Subject Marks'
    },
    xAxis: {
        categories: ['2022', '2023', '2024'],
        title: {
            text: 'Year'
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Subject Marks',
            align: 'middle'
        }
    },
    plotOptions: {
        column: {
            dataLabels: {
                enabled: true
            }
        }
    },
    series: [{}, {}, {}]
};

After initializing the series option, we must set data to these options. In the following code, we set the subject and their census rate to the series option’s name and data. Also, we set vivid colors for the columns.

// On click event handler to compare data
$("#compare").on("click", function() {
    var subjects = ["Physics", "Chemistry", "Mathematics"];
    var data = [
        [70, 60, 45],
        [60, 72, 56],
        [68, 79, 60]
    ];
    var color = ["#10c0d2", "#FFE4B5", "#32CD32"];
    var selected_subjects, j;

    // Clear previous data and reset series data
    for (i = 0; i < data.length; i++) {
        options.series[i].name = "";
        options.series[i].data = "";
        options.series[i].color = "";
    }

    // Intializeseries data based on selected subjects
    var i = 0;
    $("input[name='subjects']:checked").each(function() {
        selected_subject = $(this).val();
        j = jQuery.inArray(selected_subject, subjects)
        if (j >= 0) {
            options.series[i].name = subjects[j];
            options.series[i].data = data[j];
            options.series[i].color = color[j];
            i++;
        }

    });

    // Draw chart with options
    var chart = new Highcharts.Chart(options);

    // Display legend only for visible data.
    var item;
    for (k = i; k <= data.length; k++) {
        item = chart.series[k];
        if (item) {
            item.options.showInLegend = false;
            item.legendItem = null;
            chart.legend.destroyItem(item);
            chart.legend.render();
        }
    }

});

Full code :

<style>
body{width:550px;}
.chart-filter{    border-bottom: #CCC 1px solid;padding: 20px;}
.btn-input {background: #333;color: #FFF;border: 0;padding: 8px 20px;border-radius: 4px;}
.chart-item-title {padding:25px 0px;}
.chart-item-option {margin-left: 20px;}
</style>
<div class="chart-filter">
<div class="chart-item-title">
<input type="checkbox" name="subjects" value="Physics" checked /> Physics
<input type="checkbox" name="subjects" value="Chemistry" class="chart-item-option" checked /> Chemistry
<input type="checkbox" name="subjects" value="Mathematics" class="chart-item-option" /> Mathematics
</div>
<input type="button" id="compare" value="Compare" class="btn-input" />
</div>
<div id="chart"></div>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
$(function() {
    $(document).ready(function() {
        //Default Options
        var options = {
            chart: {
                renderTo: 'chart',
                type: 'column',
                height: 500,
                width: 530
            },
            title: {
                text: 'Subject Marks'
            },
            xAxis: {
                categories: ['2022', '2023', '2024'],
                title: {
                    text: 'Year'
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Subject Marks',
                    align: 'middle'
                }
            },
            plotOptions: {
                column: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: [{}, {}, {}]
        };


        // On click event handler to compare data
        $("#compare").on("click", function() {
            var subjects = ["Physics", "Chemistry", "Mathematics"];
            var data = [
                [70, 60, 45],
                [60, 72, 56],
                [68, 79, 60]
            ];
            var color = ["#10c0d2", "#FFE4B5", "#32CD32"];
            var selected_subjects, j;

            // Clear previous data and reset series data
            for (i = 0; i < data.length; i++) {
                options.series[i].name = "";
                options.series[i].data = "";
                options.series[i].color = "";
            }

            // Intializeseries data based on selected subjects
            var i = 0;
            $("input[name='subjects']:checked").each(function() {
                selected_subject = $(this).val();
                j = jQuery.inArray(selected_subject, subjects)
                if (j >= 0) {
                    options.series[i].name = subjects[j];
                    options.series[i].data = data[j];
                    options.series[i].color = color[j];
                    i++;
                }

            });

            // Draw chart with options
            var chart = new Highcharts.Chart(options);

            // Display legend only for visible data.
            var item;
            for (k = i; k <= data.length; k++) {
                item = chart.series[k];
                if (item) {
                    item.options.showInLegend = false;
                    item.legendItem = null;
                    chart.legend.destroyItem(item);
                    chart.legend.render();
                }
            }

        });

    });
});
</script>

Good luck and I hope this article can be useful. See you in the next article…

If you enjoyed this tutorial and learned something from it, please consider sharing it with our friends and followers! Also like to my facebook page to get more awesome tutorial each week!