⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

Chart-library in codeigniter



Assem Abdul-Mahmood
  • profile picture
  • Member

Posted 29 July 2013 - 23:08 PM

I searched in the forum looking for any topic related to any chart library with codeigniter but i found no result.

Can anyone tell me what's the best,easy library should I use for my project in codeigniter ?

I tried to use HighChart library, I download it from

https://github.com/ronan-gloo/codeigniter-highcharts-library  but the examples that I found not working, and the user guide .html page not working  too ,  I have no idea  how to use it.

please anyone have an experience about  any chart library  in codeigniter, kindly show me how he use it.

thanks in advance for help   


davidoster
  • profile picture
  • Member

Posted 30 July 2013 - 02:24 AM

Hello [member=assem abdul-mahmood].

Have you tried looking here: https://github.com/EllisLab/CodeIgniter/wiki/Charting ?

This might be older but maybe more reliable.

 

UPDATE: This might help you.


Assem Abdul-Mahmood
  • profile picture
  • Member

Posted 31 July 2013 - 04:12 AM



Hello [member=assem abdul-mahmood].

Have you tried looking here: https://github.com/EllisLab/CodeIgniter/wiki/Charting ?

This might be older but maybe more reliable.

 

UPDATE: This might help you.

 

 

Thank you so much Mr.David for your help.
As you said this library is too old and I was looking for a library be more fashionable such as high-chart or fusion-chart ..etc.
 by the way I came across Google-charts and they are fashionable and so simple to use no need for libraries setup or something like that, but I need a little push to complete my chart. here is my code
 
inside my Model
 function get_activity()
          {
    $query = $this->db->query("SELECT count(Child_No) AS Numbers, basic_info_cfs.cfs_name AS Names
                               FROM trans_cfs
                      INNER JOIN basic_info_cfs ON trans_cfs.cfs_no = basic_info_cfs.cfs_no
                                 GROUP BY (Names)");
             if($query->num_rows()>0) {
                 return $query->result();
              }
             else {
                  return NULL;}
          }
and inside my controller :
 
      $this->load->model("Chart_Modle");
      $data['activity_chart']=$this->Chart_Modle->get_activity();
      $this->load->view('chartexample',$data);
 
finally inside my chartexample View I have
 
<html>
    <?php  
  foreach ($activity_chart as $object) {
    $url = "[ '$object->Names ', $object->Numbers]"."</br>";    
      
    }
        ?>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
 
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
 
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
 
      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
 
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Rep');
        data.addColumn('number', 'Assigned Leads');
        data.addRows([
        // ['Mushrooms', 1],
         //['Onions', 1],
        // ['Olives', 1],
        // ['Zucchini', 1],
         //['Pepperoni', 1]
          <?php echo $url; ?> ;
        ]);
 
        // Set chart options
        var options = {'title':'How Many children in each Frindly Space',
                       'width':600,
                       'height':500};
 
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
 
  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>
 
 
as you see this view template i copied it from Google Examples like here  
 
 
So I believe if I could customize  data.addRows([]), instead of default array I put my array, it will work.
I tried to replace it by my url object array but nothing work.
Please if you have an idea how to solve it, kindly tell me about it.  
 
thanks in advance.
 

 










 


Assem
  • profile picture
  • Member

Posted 01 August 2013 - 18:59 PM

I found a tutorial so similar to what I am trying to do. you can see it here ( http://bohemiawebsites.com/Google-Pie-Chart-Using-PHP.html )

 

the idea is how to create an array that fit exactly the same way as it is presented in the JavaScript file of chart view for example

data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
So,
I started to create my dynamic array from my Model as follow
function get_activity()
    	  {
    	  	$query = $this->db->query("SELECT count(Child_No) AS Numbers, basic_info_cfs.cfs_name AS Names 
    	  	                                FROM trans_cfs
                                       INNER JOIN basic_info_cfs ON trans_cfs.cfs_no = basic_info_cfs.cfs_no
                                            GROUP BY (Names)");
    	  	if($query->num_rows()>0) {
			     return $query->result();
			  }
		     else {
			      return NULL;
		       }
		
    	  }

 

 
 
from my controller
 function activity_chart()
	 {
	 	$this->load->model("Chart_Modle");
		$data['activity_chart']=$this->Chart_Modle->get_activity();
	 	$this->load->view('Chart_View.php',$data);
	 }

then inside my Chart_View.php


<html>
<?php  
  foreach ($activity_chart as $object) {
    $url[] = "['".$object->Names."', ".$object->Numbers."]"; // in this line I tried to simulate
chart format.

  }
  //echo implode(",", $url);
?>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
  var data = google.visualization.arrayToDataTable([
       <?php echo implode(",", $url); ?>
        ]);

        // Set chart options
        var options = {'title':'How Many children in each Friendly Space',
                       'width':600,
                       'height':500};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

 

everything looks fine except the first element of the array, it didn't represented in the graph as you will see in the attached pic. ,and I don't know why ?

 

anyone figure it out, kindly tell me   


davidoster
  • profile picture
  • Member

Posted 01 August 2013 - 22:58 PM

Thanks for sharing this [member=assem].

I will review it and I will let you know.


Amit Shah
  • profile picture
  • Member

Posted 02 August 2013 - 06:13 AM

Hi there,

 

This might help you fellas,

 

http://www.simplycodeigniter.com/2012/02/using-highcharts-js-with-codeigniter-part-1/

This is a complete 4 video set tutorial as how to use highcharts with codeigniter. Hope this will help you guys achieve desired solution.


Assem Abdul-Mahmood
  • profile picture
  • Member

Posted 02 August 2013 - 10:57 AM

you are welcome Mr David, and i will be waiting for your response.

 

Mr Amit Shah, honestly,  I have come across such thing, but i haven't seen him using Model to bring dynamic data from  database so i thought those videos will not help me then i stopped   watching them. now i will go through them again to see if it's possible to modify anything to make them  more dynamic.

 

 

from my point of view, Google API is so simple and so nice.     


bigtt76
  • profile picture
  • Member

Posted 03 August 2013 - 11:58 AM

Nice one guys.

 

Please I need your help on this similar project. I tried using Flot suggested earlier and it worked perfectly pulling data from the database. However now I would like to use filters in form of dropdowns with pre-loaded data from the database (based on earlier submissions) to draw up a line graph using FLOT when the user has selected the various filter options and clicks on the 'Go' button.

 

I appreciate any idea in this direction. Thank you.


Assem Abdul-Mahmood
  • profile picture
  • Member

Posted 03 August 2013 - 23:10 PM

I figure it out why the first element of my array didn't represented in the graph? that's because I used  arrayToDataTable() inside my draw chart function to populating my DataTable such as

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

and the first row represent as table header. so my  first element act as table header for that

I used another way to avoid such thing.

There are four ways to create and populate a DataTable (go through this link ( https://developers.google.com/chart/interactive/docs/datatables_dataviews#emptytable) for more information )

 

I used datatable(),data.addColumn and data.addRows , So my view become something like

<html>
	<?php  
  foreach ($cfs_pie_chart as $object) {
    $url[] = "['".$object->Names."', ".$object->Numbers."]";		
     }
	?>

  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      
       function drawChart() {
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
        <?php echo implode(",", $url);?>
        ]);
        var options = {
          title: 'child friendly space ',
          is3D:'true',
          backgroundColor:'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
    <?php $this->load->view('includs/header')?>
   <div id="main"> 
   	<div id="chart_div" 
    style="width:600px; height:400px; padding:50px;box-shadow: 10px 10px 10px 10px rgba(1,1,1,0.1); margin: 0px auto;
	text-align: center;
	position: relative;
	padding: 25px; top :20px;">
    </div>
    </div>
    <?php $this->load->view('includs/footer')?>

may this will help somebody. 


Assem Abdul-Mahmood
  • profile picture
  • Member

Posted 04 August 2013 - 09:02 AM

now I am trying to make my graph more interactive . I want the user be able to customize his data chart, similar to bigtt76 thoughts .

Here is  my thoughts

1- create two fields which contain date value $SatrtDate and $enddate,enterd by user.
2- JavaScript function called updateChart() which render the Graph again with new DataTable, according to new query between these dates .
3- Button called get_chart
4- update the chart if the get_chart button clicked something like

    $('#get_chart').click (function() {
        updateChart();
    });

Here is My Model function

function get_chid_no( $start , $end )
		  {
		  	$query = $this->db->query("SELECT count( DISTINCT(trans_cfs.Child_No)) AS Boys, 0 AS Girls, basic_info_cfs.cfs_name AS Names
                                               FROM trans_cfs
                                        JOIN child_prof_cfs ON trans_cfs.Child_No = child_prof_cfs.Child_No
                                        INNER JOIN basic_info_cfs ON trans_cfs.cfs_no = basic_info_cfs.cfs_no
                                        WHERE child_prof_cfs.Gender =1
                                        AND activity_date
                                        BETWEEN ' '                                   //here I want to give dates parameters 
                                        AND  ' '
                                        Group by Names
                                      Union 
                                        SELECT 0 AS Boys,count( DISTINCT(trans_cfs.Child_No)) AS Girls, basic_info_cfs.cfs_name AS Names
                                        FROM trans_cfs
                                        JOIN child_prof_cfs ON trans_cfs.Child_No = child_prof_cfs.Child_No
                                        INNER JOIN basic_info_cfs ON trans_cfs.cfs_no = basic_info_cfs.cfs_no
                                        WHERE child_prof_cfs.Gender =0
                                        AND activity_date
                                        BETWEEN '  '                                 //here I want to give dates parameters 
                                        AND  '  '
                                        Group by Names
                                        Order by Names");
                  if($query->num_rows()>0) {
			     return $query->result();
			  }
		     else {
			      return NULL;
		       }                      
		  }

I have no idea how can i use parameters with Query function.

 

my controller something like

function cfsPerchild()
	 {
		$this->load->model("Chart_Modle");
		$data['cfs_bar_chart']=$this->Chart_Modle->get_chid_no();
	    $this->load->view('Bar_Chart_View.php',$data);
	 }

finally my view

<html>
	<?php  
  foreach ($cfs_bar_chart as $object) {
    $url[] = "['".$object->Names."', ".$object->Boys.", ".$object->Girls."]";		
     }
     // echo implode(",", $url);
	?>

  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      
       function drawChart() {
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'CFS');
        data.addColumn('number', 'Boys');
        data.addColumn('number', 'Girls');
        data.addRows([
        <?php echo implode(",", $url);?>
        ]);
        
        var options = {
          title: 'child friendly space',
          vAxis: {title: 'CFS Names',  titleTextStyle: {color: '#C43C35'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
      
    </script>
  </head>
    <?php $this->load->view('includs/header')?>
   <div id="main"> 
   	<div id="chart_div" 
    style="width:800px; height:400px; padding:50px;box-shadow: 10px 10px 10px 10px rgba(1,1,1,0.1); margin: 0px auto;
	text-align: center;
	position: relative;
	padding: 25px; top :20px;">
    </div>
    </div>
    <?php $this->load->view('includs/footer')?>

Please any idea about how to do that , l appreciate it

 


bigtt76
  • profile picture
  • Member

Posted 15 August 2013 - 07:03 AM

Hello Everybody!! Please any help in this regard?


Amit Shah
  • profile picture
  • Member

Posted 17 August 2013 - 06:35 AM

you are welcome Mr David, and i will be waiting for your response.

 

Mr Amit Shah, honestly,  I have come across such thing, but i haven't seen him using Model to bring dynamic data from  database so i thought those videos will not help me then i stopped   watching them. now i will go through them again to see if it's possible to modify anything to make them  more dynamic.

 

 

from my point of view, Google API is so simple and so nice.     

Well i have been using highcharts myself in my projects in Codeigniter and it works veryfine. Only thing you need to understand a bit is how you architect it. I will recommend you control / create the charts more with javascript then the controller. Controller can be used for collecting  /supplying data. But the creation / rendering / refreshing part, if you are able to control it with javascript .. it will be a great / handy tool to go with.

 

An Example will like to share

 

Example part from the view... now this amounts_div is the one which will be populated using javascript.

<div class="box-content">
				<div class="statistic-big">
					<div class="top">
						<div class="left">
							<div class="input-medium">
								<select onchange="getamountChart(this.value);" id="order_amount_period" name="order_amount_period">
									<option value="today"><?php echo lang('today');?></option>
									<option value="week"><?php echo lang('thisweek');?></option>
									<option value="month"><?php echo lang('thismonth');?></option>
									<option value="year"><?php echo lang('thisyear');?></option>
								</select>
							</div>
						</div>
					</div>
					<div class="bottom">
						<div class="flot medium" id="amounts_div"></div>
					</div>
					<div class="bottom">
						<ul class="stats-overview">
							<li>
								<span class="name">
									Total
								</span>
								<span id="amount_dashboard_diagram_total" class="value dashboard_diagram_total"></span>
							</li>
							<li>
								<span class="name">
									Tax
								</span>
								<span id="amount_dashboard_diagram_tax" class="value dashboard_diagram_tax"></span>
							</li>
							<li>
								<span class="name">
									Shipping
								</span>
								<span id="amount_dashboard_diagram_shipping" class="value dashboard_diagram_shipping"></span>
							</li>
							<li>
								<span class="name">
									Quantity
								</span>
								<span id="amount_dashboard_diagram_quantity" class="value dashboard_diagram_quantity"></span>
							</li>
						</ul>
					</div>
				</div>
			</div>

Here it also have example to set the range / drop down selection. On change of the same - rerender the chart

 

Javascript Part

function drawAmountChart() {
		amountsChart = new Highcharts.Chart({
	      chart: {
	          renderTo: 'amounts_div',
	          defaultSeriesType: 'area'
	       },
	       title: {
	          text: 'Total Sales in the period'
	       },
	       subtitle: {
	          text: ''
	       },
	       xAxis: {
	         labels: {
	             style: {
	     	  		font: 'normal 9px Verdana, sans-serif'
	       		}
	       	},
	       	categories: [],
	       },
	       yAxis: {
	     	 gridLineColor: '#197F07',
	     	 gridLineWidth: '2',
	          title: {
	             text: 'Total Sales',
	          }
	       },	       
	       plotOptions: {
	          bar: {
	             dataLabels: {
	                enabled: true,
	 				align: 'right',
	 				x: 130,
	 				y: 5,               
	             }
	          }
	       },
	       legend: {
	          enabled: true
	       },
	       credits: {
	          enabled: false
	       },
	       series: [{
	           name: 'Amount',
	           color: 'red'
	        }]
	    });
	}

Another supporting function (Mind it .. i generated this in codeigniter as i wanted to populate the same with dynamic code part in the script

function getamountChart(range) {
    	amountsChart.showLoading('Please wait while loading the data...');
  		var arrayData = [];

      	if (typeof(range) === "undefined") { range = 'today'; }

		var jsonData = $.ajax({
						  url: "<?php echo base_url('dashboard/chart');?>/"+range,
						  dataType:"json",
						  async: false
						 }).responseText;

		jsonData = JSON.parse(jsonData);
		
		$('#amount_dashboard_diagram_total').html(jsonData.amounttotal);
		$('#amount_dashboard_diagram_tax').html(jsonData.shippingtotal);
		$('#amount_dashboard_diagram_shipping').html(jsonData.taxtotal);
		$('#amount_dashboard_diagram_quantity').html(jsonData.ordertotal);

		if(jsonData.length <= 0) {
			amountsChart.redraw();		
			amountsChart.hideLoading();		
  			return;
  		}
		amountsChart.xAxis[0].categories = [];
  		for(i =1; i <  jsonData.total.length; i++) {
			key = jsonData.total[i][0];
			val = jsonData.total[i][1];
			amountsChart.xAxis[0].categories.push(key);
  			arrayData.push(val * 1);
  		}

  		amountsChart.tooltip.options.formatter = function() {
			if(range == 'today') {
				return 'Sales at <b>'+ this.x +
                '</b> is <b>'+ formatCurrency(this.y) +'</b>';	
			}
			if(range == 'week') {
				return 'Sales on <b>'+ this.x +
                '</b> were <b>'+ formatCurrency(this.y) +'</b>';	
			}
			if(range == 'month') {
				return 'Sales on day <b>'+ this.x +
                '</b> of the month is <b>'+ formatCurrency(this.y) +'</b>';	
			}
			if(range == 'year') {
				return 'Sales in the month of <b>'+ this.x +
                '</b> is <b>'+ formatCurrency(this.y) +'</b>';	
			}
  		}  		
  		
  		amountsChart.series[0].setData(arrayData, false);
  		amountsChart.redraw();		
  		amountsChart.hideLoading();        
      }

then is the matter of just calling it..

<script>
	$(function() {
		drawAmountChart();
		getamountChart();
	});
</script>

works out for me great enough.


davidoster
  • profile picture
  • Member

Posted 17 August 2013 - 17:34 PM

Thanks for sharing this [member=amit shah].

 

 

 


AlexanderColt
  • profile picture
  • Member

Posted 22 June 2015 - 08:20 AM

You can check for some charting library like koolchart or Google free chart.


lakshmi
  • profile picture
  • Member

Posted 06 January 2016 - 06:46 AM

Hello [member=assem abdul-mahmood].

Have you tried looking here: https://github.com/EllisLab/CodeIgniter/wiki/Charting ?

This might be older but maybe more reliable.

 

UPDATE: This might help you.

 

 

Hello [member=assem abdul-mahmood].

Have you tried looking here: https://github.com/EllisLab/CodeIgniter/wiki/Charting ?

This might be older but maybe more reliable.

 

UPDATE: This might help you.

 

 

hi ...i want multiple pie charts in world map same page in coedigniter .

 

this is my view page...how to create..controller...models


 

 

 


lakshmi
  • profile picture
  • Member

Posted 06 January 2016 - 06:47 AM

plz help me any one...i want multi pie charts in codeigniter ...