Dynamic Highcharts in Codeigniter 3

In this section, we are going to use Codeigniter 3 so that we can get dynamic highcharts. We will use the MySQL app to understand the implementation of highcharts. We will use highchart js to create 3d chart, pie chart, bar chart, map chart, line chart, area chart, etc, in the application of Codeigniter 3. In our Codeigniter project, we will use highcharts js so that we can use the database to create a dynamic column chart. For any admin panel, the basic requirement is a chart. If we are developing a project for a client, they always require that their admin dashboard contains the charts so that they can easily do the compassion between our new subscription, sales, new users, etc. Using the chart, we are able to quickly and easily compare between each month, each year, etc, by using the graph.

In our below example, we are going to create a column chart. We create it for viewers, and after that, we will click on the entered website. Using this column chart, we are able to compare the numbers of visitors in months, and we can also get the information of the number of clicks on that month. So for this, we will create the “demo_viewer” and “demo_click” tables. Using this table, we will get dynamic as an output. The output gets from the database, and it will display for us as a chart. The steps to get highcharts of a website are described as follows:

Step 1:

In this step, we are going to Create Database table. For this, we will create “h_sole” as a new database. If we want to rename it, we can do it. After that, we will describe the comparison between column charts of clicks and viewers. When we want to apply it, we need to create two tables. One table will be created for the viewer as “demo_viewer”, and the second table will be created for click as “demo_click”. Both tables will be created by using the MySQL queries, which is described as follows:

Create demo_viewer table:

  CREATE TABLE IF NOT EXISTS `demo_viewer` (    `id` int(11) NOT NULL AUTO_INCREMENT,    `numberofview` int(11) NOT NULL,    `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,    PRIMARY KEY (`id`)  ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;  

Create demo_click table:

  CREATE TABLE IF NOT EXISTS `demo_click` (    `id` int(11) NOT NULL AUTO_INCREMENT,    `numberofclick` int(12) NOT NULL,    `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,    PRIMARY KEY (`id`)  ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;  

Step 2:

In this step, we are going to Make Database Configuration. For this, we will add some details of the database, such as name of the database, username, password, etc, which is described as follows:

application/config/database.php:

  <?php  defined(‘BASEPATH’) OR exit(‘No direct script access allowed’);  $active_group = ‘default’;  $query_builder = TRUE;  $db[‘default’] = array(  ‘dsn’=> ”,  ‘hostname’ => ‘localhost’,  ‘username’ => ‘root’,  ‘password’ => ‘root’,  ‘database’ => ‘h_sole’,  ‘dbdriver’ => ‘mysqli’,  ‘dbprefix’ => ”,  ‘pconnect’ => FALSE,  ‘db_debug’ => (ENVIRONMENT !== ‘production’),  ‘cache_on’ => FALSE,  ‘cachedir’ => ”,  ‘char_set’ => ‘utf8’,  ‘dbcollat’ => ‘utf8_general_ci’,  ‘swap_pre’ => ”,  ‘encrypt’ => FALSE,  ‘compress’ => FALSE,  ‘stricton’ => FALSE,  ‘failover’ => array(),  ‘save_queries’ => TRUE  );  

Step 3:

In the third step, we are going to Add Route. For the chart and render view, we will add one route. For this, we will open our file named routes.php and then we will put the following code:

application/config/routes.php:

  $route[‘default_controller’] = ‘welcome’;  $route[‘404_override’] = ”;  $route[‘translate_uri_dashes’] = FALSE;  $route[‘my-chart’] = “ChartController”;  

Step 4:

In this step, we are going to Create Controller. For this, a method will be created named “index” with ChartController. In order to fetch all database data, we will write the following code. We will use this controller’s folder so that we can create a new method. The code to do this is as follows:

application/controllers/ChartController.php:

  defined(‘BASEPATH’) OR exit(‘No direct script access allowed’);       class ChartController extends CI_Controller {      /**       * This method is used to get all the data.       *       * @It will return Response      */      public function __construct() {         parent::__construct();         $this->load->database();      }           /**       * This method is used to get all the data.       *       * @It will return Response      */      public function index()      {          $query = $this->db->query(“SELECT SUM(numberofclick) as count FROM demo_click               GROUP BY YEAR(created_at) ORDER BY created_at”);           $data[‘click’] = json_encode(array_column($query->result(), ‘count’),JSON_NUMERIC_CHECK);               $query = $this->db->query(“SELECT SUM(numberofview) as count FROM demo_viewer               GROUP BY YEAR(created_at) ORDER BY created_at”);           $data[‘viewer’] = json_encode(array_column($query->result(), ‘count’),JSON_NUMERIC_CHECK);               $this->load->view(‘my_chart’, $data);      }  }  

Step 5:

In this step, we are going to Create View file. For this, we will use our view folder to create “my_chart.php” as a new view file. After that, we will use that file to add the following code:

application/views/my_chart.php:

  <!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_click = <?php echo $click; ?>;      var data_viewer = <?php echo $viewer; ?>;          $(‘#container’).highcharts({          chart: {              type: ‘column’          },          title: {              text: ‘Yearly Website Ratio’          },          xAxis: {              categories: [‘2016′,’2017′,’2018’, ‘2019’]          },          yAxis: {              title: {                  text: ‘Rate’              }          },          series: [{              name: ‘Click’,              data: data_click          }, {              name: ‘View’,              data: data_viewer          }]      });  });      </script>      <div class=”container”>  <br/>  <h2 class=”text-center”> Highcharts in Codeigniter MYSQL JSON </h2>      <div class=”row”>          <div class=”col-md-10 col-md-offset-1″>              <div class=”panel panel-default”>                  <div class=”panel-heading”>Dashboard –  tutoraspire.com</div>                  <div class=”panel-body”>                      <div id=”container”></div>                  </div>              </div>          </div>      </div>  </div>      </body>  </html>  

Now our above code is ready to run. After running this, the following output will be generated:

Next Topic#

Dynamic Highcharts in CodeIgniter 3

Dynamic Highcharts in Codeigniter 3

Add to cart button in Bootstrap

Can I get a virus from Facebook or MySpace

You may also like