Draw a highcharts using php array

-
Here I would like to share my knowledge about the printing highchart in off-line in your specific server and draw the highchart according to the data which is inside the array.

My raw array is

"result":[["2018-01-25","NOVEL",103406],["2018-01-25","CRIMINAL",10371846],["2018-01-24","CRIMINAL",3145733],["2018-01-23","CRIMINAL",9437187],["2018-01-22","NOVEL",7768],["2018-01-22","CRIMINAL",12731204],["2018-01-21","NOVEL",9004],["2018-01-21","CRIMINAL",8106865],["2018-01-20","NOVEL",15488],["2018-01-20","CRIMINAL",5011413],["2018-01-19","CRIMINAL",6291461],["2018-01-18","NOVEL",16764],["2018-01-18","CRIMINAL",15535024],["2018-01-17","CRIMINAL",9437189],["2018-01-16","CRIMINAL",12582926],["2018-01-15","NOVEL",25288],["2018-01-15","CRIMINAL",9874095],["2018-01-14","CRIMINAL",31457298],["2018-01-13","CRIMINAL",6291465],["2018-01-12","CRIMINAL",9437191],["2018-01-11","NOVEL",4569],["2018-01-11","CRIMINAL",10733917],["2018-01-10","NOVEL",16224],["2018-01-10","CRIMINAL",4940663],["2018-01-09","NOVEL",11664],["2018-01-09","CRIMINAL",6785976],["2018-01-08","NOVEL",33809],["2018-01-08","CRIMINAL",11285177],["2018-01-07","CRIMINAL",9437196],["2018-01-06","CRIMINAL",9437191],["2018-01-05","CRIMINAL",12582917],["2018-01-04","NOVEL",9445],["2018-01-04","CRIMINAL",3669048],["2018-01-03","CRIMINAL",9437190],["2018-01-02","NOVEL",6947],["2018-01-02","CRIMINAL",9449241],["2018-01-01","NOVEL",8584],["2018-01-01","CRIMINAL",5420320],["2017-12-31","NOVEL",2354],["2017-12-31","CRIMINAL",4505311],["2017-12-30","NOVEL",48908],["2017-12-30","CRIMINAL",3554826],["2017-12-29","CRIMINAL",6291463],["2017-12-28","CRIMINAL",9437185],["2017-12-27","CRIMINAL",9437186],["2017-12-26","CRIMINAL",12582925]]}

Step01
from this I should store each book detail according to it's DATE,PACKAGE,VALUE into the array
I achieved this using below code

 $myArray = json_decode($result, true);  
 $get=($myArray["result"]); // Fetches the first ID  
 $arrayName=array();  
 for ($row = 0; $row < sizeof($get); $row++) {  
   $arrayName[] = array('date' => $get[$row][0],  
             'package' =>$get[$row][1],  
             'value' => $get[$row][2]);  
 }

my out put is

 Array  
 (  
   [0] => Array  
     (  
       [date] => 2018-01-25  
       [package] => NOVEL  
       [value] => 103406  
     )  
   [1] => Array  
     (  
       [date] => 2018-01-25  
       [package] => CRIMINAL  
       [value] => 10371846  
     )  
   [2] => Array  
     (  
       [date] => 2018-01-24  
       [package] => CRIMINAL  
       [value] => 3145733  
     )  
   [3] => Array  
     (  
       [date] => 2018-01-23  
       [package] => CRIMINAL  
       [value] => 9437187  
     )  
   [4] => Array  
     (  
       [date] => 2018-01-22  
       [package] => NOVEL  
       [value] => 7768  
     )  
   [5] => Array  
     (  
       [date] => 2018-01-22  
       [package] => CRIMINAL  
       [value] => 12731204  
     )  
   [6] => Array  
     (  
       [date] => 2018-01-21  
       [package] => NOVEL  
       [value] => 9004  
     )  
   [7] => Array  
     (  
       [date] => 2018-01-21  
       [package] => CRIMINAL  
       [value] => 8106865  
     )  
   [8] => Array  
     (  
       [date] => 2018-01-20  
       [package] => NOVEL  
       [value] => 15488  
     )  
   [9] => Array  
     (  
       [date] => 2018-01-20  
       [package] => CRIMINAL  
       [value] => 5011413  
     )  
   [10] => Array  
     (  
       [date] => 2018-01-19  
       [package] => CRIMINAL  
       [value] => 6291461  
     )  
   [11] => Array  
     (  
       [date] => 2018-01-18  
       [package] => NOVEL  
       [value] => 16764  
     )  
   [12] => Array  
     (  
       [date] => 2018-01-18  
       [package] => CRIMINAL  
       [value] => 15535024  
     )  
   [13] => Array  
     (  
       [date] => 2018-01-17  
       [package] => CRIMINAL  
       [value] => 9437189  
     )  
   [14] => Array  
     (  
       [date] => 2018-01-16  
       [package] => CRIMINAL  
       [value] => 12582926  
     )  
   [15] => Array  
     (  
       [date] => 2018-01-15  
       [package] => NOVEL  
       [value] => 25288  
     )  
   [16] => Array  
     (  
       [date] => 2018-01-15  
       [package] => CRIMINAL  
       [value] => 9874095  
     )  
   [17] => Array  
     (  
       [date] => 2018-01-14  
       [package] => CRIMINAL  
       [value] => 31457298  
     )  
   [18] => Array  
     (  
       [date] => 2018-01-13  
       [package] => CRIMINAL  
       [value] => 6291465  
     )  
   [19] => Array  
     (  
       [date] => 2018-01-12  
       [package] => CRIMINAL  
       [value] => 9437191  
     )  
   [20] => Array  
     (  
       [date] => 2018-01-11  
       [package] => NOVEL  
       [value] => 4569  
     )  
   [21] => Array  
     (  
       [date] => 2018-01-11  
       [package] => CRIMINAL  
       [value] => 10733917  
     )  
   [22] => Array  
     (  
       [date] => 2018-01-10  
       [package] => NOVEL  
       [value] => 16224  
     )  
   [23] => Array  
     (  
       [date] => 2018-01-10  
       [package] => CRIMINAL  
       [value] => 4940663  
     )  
   [24] => Array  
     (  
       [date] => 2018-01-09  
       [package] => NOVEL  
       [value] => 11664  
     )  
   [25] => Array  
     (  
       [date] => 2018-01-09  
       [package] => CRIMINAL  
       [value] => 6785976  
     )  
   [26] => Array  
     (  
       [date] => 2018-01-08  
       [package] => NOVEL  
       [value] => 33809  
     )  
   [27] => Array  
     (  
       [date] => 2018-01-08  
       [package] => CRIMINAL  
       [value] => 11285177  
     )  
   [28] => Array  
     (  
       [date] => 2018-01-07  
       [package] => CRIMINAL  
       [value] => 9437196  
     )  
   [29] => Array  
     (  
       [date] => 2018-01-06  
       [package] => CRIMINAL  
       [value] => 9437191  
     )  
   [30] => Array  
     (  
       [date] => 2018-01-05  
       [package] => CRIMINAL  
       [value] => 12582917  
     )  
   [31] => Array  
     (  
       [date] => 2018-01-04  
       [package] => NOVEL  
       [value] => 9445  
     )  
   [32] => Array  
     (  
       [date] => 2018-01-04  
       [package] => CRIMINAL  
       [value] => 3669048  
     )  
   [33] => Array  
     (  
       [date] => 2018-01-03  
       [package] => CRIMINAL  
       [value] => 9437190  
     )  
   [34] => Array  
     (  
       [date] => 2018-01-02  
       [package] => NOVEL  
       [value] => 6947  
     )  
   [35] => Array  
     (  
       [date] => 2018-01-02  
       [package] => CRIMINAL  
       [value] => 9449241  
     )  
   [36] => Array  
     (  
       [date] => 2018-01-01  
       [package] => NOVEL  
       [value] => 8584  
     )  
   [37] => Array  
     (  
       [date] => 2018-01-01  
       [package] => CRIMINAL  
       [value] => 5420320  
     )  
   [38] => Array  
     (  
       [date] => 2017-12-31  
       [package] => NOVEL  
       [value] => 2354  
     )  
   [39] => Array  
     (  
       [date] => 2017-12-31  
       [package] => CRIMINAL  
       [value] => 4505311  
     )  
   [40] => Array  
     (  
       [date] => 2017-12-30  
       [package] => NOVEL  
       [value] => 48908  
     )  
   [41] => Array  
     (  
       [date] => 2017-12-30  
       [package] => CRIMINAL  
       [value] => 3554826  
     )  
   [42] => Array  
     (  
       [date] => 2017-12-29  
       [package] => CRIMINAL  
       [value] => 6291463  
     )  
   [43] => Array  
     (  
       [date] => 2017-12-28  
       [package] => CRIMINAL  
       [value] => 9437185  
     )  
   [44] => Array  
     (  
       [date] => 2017-12-27  
       [package] => CRIMINAL  
       [value] => 9437186  
     )  
   [45] => Array  
     (  
       [date] => 2017-12-26  
       [package] => CRIMINAL  
       [value] => 12582925  
     )  
 )

Step02

Then I group the data which is into the array using this code

 $tmp = array();  
 foreach($arrayName as $arg){  
   $tmp[$arg['package']][] = $arg['value'];  
 }  
 $output = array();  
 foreach($tmp as $type => $labels){  
   $output[] = array(  
     'package' => $type,  
     'value' => $labels,  
   );  
 }

my output is
 Array  
 (  
   [0] => Array  
     (  
       [package] => NOVEL  
       [value] => Array  
         (  
           [0] => 52690  
           [1] => 24700  
           [2] => 43972  
           [3] => 506417  
           [4] => 488125  
           [5] => 935918  
           [6] => 1322816  
           [7] => 1189040  
           [8] => 2805279  
           [9] => 2764825  
           [10] => 1688294  
           [11] => 1228812  
           [12] => 2232345  
           [13] => 3356143  
           [14] => 1193213  
           [15] => 167589  
           [16] => 1373104  
           [17] => 691411  
           [18] => 1398647  
           [19] => 5  
         )  
     )  
   [1] => Array  
     (  
       [package] => CRIMINAL  
       [value] => Array  
         (  
           [0] => 953370  
           [1] => 151168  
           [2] => 37605  
           [3] => 428769  
           [4] => 755222  
           [5] => 1146719  
           [6] => 494289  
           [7] => 889002  
           [8] => 307200  
           [9] => 127972  
           [10] => 2764815  
           [11] => 1426224  
           [12] => 262669  
           [13] => 648757  
           [14] => 1485  
           [15] => 1202  
           [16] => 998  
           [17] => 1  
         )  
     )  
 )

Step03

then I found the maximum and minimum number for each packages by using this code.

 foreach ($output as $subarr) {  
  $package = $subarr['package'];  
  $min = min($subarr['value']);  
  $max = max($subarr['value']);  
   echo " package : ";  
  echo $package;  
  echo " min : ";  
 echo $min;  
 echo " max : ";  
 echo $max;  
 }

then my output is 
  package : NOVEL min : 2354 max : 103406   
  package : CRIMINAL min : 3145733 max : 31457298

NEXT STEP IS DRAW THE HIGHCHARTS

Step01

I convert those output which are package and it's minimum and maximum values into JSON code
to draw graph we need x-axis and y-axis. so that we have to get the data from array so
y-axis is maximum and minimum amount of package
x-axis is package name
derive all the packages from the array and convert those value into JSON code to show as highchart 

  
      $pack=array();  
      foreach ($output as $subarr) {  
        $package = $subarr['package'];  
        for ($i=0; $i <count($package); $i++) {   
          $pack[]=array($package);  
        }  
      }   
      $out0 = array_values($pack);  
      $x0=json_encode($out0);  
      //derive minimum value of each packages  
      $fmin=array();  
      foreach ($output as $subarr) {  
        $min = min($subarr['value']);  
        for ($i=0; $i <count($min); $i++) {   
          $fmin[]=array($min);  
        }  
      }   
      $out1 = array_values($fmin);  
      $x1=json_encode($out1,JSON_PRETTY_PRINT);  
      //derive the maximum value of each ppackages  
      $fmax=array();  
      foreach ($output as $subarr) {  
        $max = max($subarr['value']);  
        for ($i=0; $i <count($max); $i++) {   
          $fmax[]=array($max);  
        }  
      }   
      $out2 = array_values($fmax);  
      $x2=json_encode($out2);  
     ?>

Step02

highchart code is

 <script type="text/javascript">  
      $(function () {   
        var package = <?php echo $x0; ?>;  
        var min = <?php echo $x1; ?>;  
        var max = <?php echo $x2; ?>;  
        $('#container').highcharts({  
          chart: {  
            type: 'column'  
          },  
          title: {  
            text: ''  
          },  
          xAxis: {  
            categories: package   
          },  
          yAxis: {  
            title: {  
              text: 'Package Usage'  
            }  
          },  
          series: [{  
           name: 'minimum',  
           data: min  
          },{name: 'Maximum',  
           data: max  
         }]  
        });  
      });  
     </script> 


Then finally output would be



NOTE:

To run the highcharts in off-line we have to download jQuery.js  and highchart.js and specify the path accuratly.

Comments

Post a Comment

Popular posts from this blog

Easy understanding of MVC design architecture

-
Image
There are lots of principle and methodology in software engineering field. Through this blog I am going to describe MVC design pattern. Real life example : Let's consider you are going to buy a suit for your wedding. You supposed to go your favorite tailor's shop and choose your desired suit's design which is shown by helper boy. Helper boy handed over the chosen design to that tailor( Controller ). Tailor collect the suitable items such as cloths material, needle, thread, button ,zip ( Model collect the information from database ).Then tailor stich the suit and give it to helper boy( VIEW ). Helper boy pack that suit with covered bag and give it to you. The same scenario is happening in MVC design architecture. MVC is an architectural design pattern. It's separate application into three main different components such as Model, View, Controller.  These components are having specific functionalities.  Model Model is simple class. It's contain busin...
Read more

Hotel Online Reservation System

-
Image
I am doing BSc computer science in Department of Computer Science University of Jaffna,, I have started my 2nd year group project.. The Department allocated a mender to guide our project.. Her name is  Dr. (Mrs.) B. Mayurathan.   B.Sc. [Hons] (Jaffna),  Ph.D. (Peradeniya) Senior Lecturer..   First week I met her and fixed a appointment time to discuss our project title.. Next week  I went to meet with my group members with a idea of project title, after that she finalized our project title as  online hotel reservation   for Gnanam Hotel in jaffna.. We decided to make a online room reservation System.. After 3 week we got a approval letter from Department of Computer Science Head  Dr. K. Thabotharan  B.Sc.[Hons](Jaffna), M.Sc.(Akron), Ph.L. (Uppsala), Ph.D. (Colombo) .. we met the manager of the hotel. then he also interesting to do our project.so we got their requirements. and we sort out them functio...
Read more

Object Oriented Programming in C#

-
Image
(Object-Oriented Programming) OOP concept is a must to be a good programmer. This is the important design principle, In coders’ life. OOP is all about how to write a code in an organized code structure. This design principle gives you a good knowledge of coding skills. Rather than going through technical terms, I am going to help you to understand this concept through real-life examples.  Principle OOP concepts are Class Object Abstraction Inheritance Polymorphism Encapsulation Let me explain one by one. Class Class is a blueprint of an object. This is a mandatory concept in OOP. If you consider the real world, a class is like our school bag. We filled it with books, water bottle, geometry box, pencil box, and so on. Class is a collection of objects. Class does not contain specific memory allocation. public class Registration { } Object The object is an entity or model of a class. It may be a chair, table, or a person. Technically an object is an instance o...
Read more