How to use highchart in php with example

How to use highchart in php with example

Highchart provides feature to draw different type of charts in our web application. Here, in this example i will let you know that how to use highchart in php application.  

In this example, we will create chart using php and mysql. Actually highchart provides javascript library to create charts. We will only need to implement that library in our application.

We will need some data to generate chart, so here we will use mysql database and database query to fetch data from database.  

So basucally here we will leran to implement simple dynamic column chart using highcharts library in php and ofcourse will use mysql database.

For for that, first thing we will need to create a database and tables where we will put some data. So for full example let’s follow the steps as given below.

Step 1: Create Database

Here for example, i will create a database named shopping and under this database we will need to create some tables, here i will create only two table one is to stroe customers information and another to store orders.

So run the following query in your query window.

Create customers table

CREATE TABLE IF NOT EXISTS `customers` (

  `id` int(11) NOT NULL AUTO_INCREMENT,

  `name` varchar(30) NOT NULL,

  `email` varchar(30) NOT NULL,

  `phone` varchar(15) NOT NULL,

  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,

  PRIMARY KEY (`id`)

) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

Create orders table

CREATE TABLE IF NOT EXISTS `orders` (

  `id` int(11) NOT NULL AUTO_INCREMENT,

  `customer_id` int(11) NOT NULL,
  
  `product_name` var(60) NOT NULL,

  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,

  PRIMARY KEY (`id`)

) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Now you will to put some data into these two tables. You can put any data accoring to the column and your need. After putting data we can be able to show the chart according the the data.

Step 2: Create database configuration

Now we will need to create configuration file. So let’s create a new db configuration file db_config.php and put the following code into this file.

db_config.php

<?php
  $dbHost = "localhost";
  $dbDatabase = "shopping";
  $dbUser = "root";
        $dbPassword = ""; 


  $mysqli = mysqli_connect($dbHost, $dbUser, $dbPasswrod, $dbDatabase);
?>

Step 3: Create chart view File

Now, in this third file we will create a index.php file where we will display chart of customer and product. So creaate index.php file and update with the code as given below.

index.php

<?php


  require('db_config.php');


  /* Getting demo_viewer table data */
  $sql = "SELECT count(id) as count FROM orders GROUP BY Year(created_at) ORDER BY created_at";
  $orders = mysqli_query($mysqli,$sql);
  $orders = mysqli_fetch_all($orders,MYSQLI_ASSOC);
  $orders = json_encode(array_column($orders, 'count'),JSON_NUMERIC_CHECK);


  /* Getting demo_click table data */
  $sql = "SELECT count(id) as count FROM customers 
      GROUP BY Year(created_at) ORDER BY created_at";
  $customer = mysqli_query($mysqli,$sql);
  $customer = mysqli_fetch_all($customer,MYSQLI_ASSOC);
  $customer = json_encode(array_column($customer, 'count'),JSON_NUMERIC_CHECK);


?>


<!DOCTYPE html>
<html>
<head>
  <title>HighChart</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>


<script type="text/javascript">


$(function () { 


    var data_customer = <?php echo $customer; ?>;
    var data_order = <?php echo $orders; ?>;


    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Customers and orders data'
        },
        xAxis: {
            categories: ['2017','2018','2019', '2020']
        },
        yAxis: {
            title: {
                text: 'Number (Count)'
            }
        },
        series: [{
            name: 'Customer',
            data: data_customer
        }, {
            name: 'Order',
            data: data_orders
        }]
    });
});


</script>


<div class="container">
  <br/>
  <h2 class="text-center">Highcharts php mysql json example</h2>
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard</div>
                <div class="panel-body">
                    <div id="container"></div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>

After doing the above steps we have successfully implemented high chart in your application and now you have learned how to use highchart in php with example. 

You can also learn to send emails using gmail smtp with example by clicking on the link given below.

PHP script to send emails using gmail smtp with example