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">
// 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.