diff --git a/e107_handlers/chart_class.php b/e107_handlers/chart_class.php index 3d4407576..0f8f6ff01 100644 --- a/e107_handlers/chart_class.php +++ b/e107_handlers/chart_class.php @@ -152,23 +152,51 @@ graphMax : "DEFAULT" */ + + +/** + * Using with Google Charts: + * $cht = e107::getChart(); + $cht->setProvider('google'); + $cht->setType('line'); + $cht->setOptions('demo'); + $cht->setData('demo','canvas'); + $text = $cht->render('canvas'); + */ class e_chart { protected $id; protected $data = null; protected $type = 'line'; protected $options = array('scaleFontSize' => 14, 'annotateDisplay' => true, 'bezierCurve' => true, 'inGraphDataShow'=>false); + protected $provider = null; function __construct() { // e107::js('core','chart/Chart.min.js','jquery'); - e107::js('core','chart/ChartNew.js','jquery'); + + + + // e107::css('inline','canvas.e-graph { width: 100% !important; max-width: 800px; height: auto !important; }'); } + public function setProvider($type = null) + { + if(!empty($type)) + { + $this->provider = $type; + } + } + + public function getProvider() + { + return $this->provider; + } + private function getData() { @@ -199,14 +227,83 @@ class e_chart public function setData($data,$id) { $this->id = $id; - $this->data = $data; + if($data == 'demo') + { + $this->data = $this->getDemoData(); + } + else + { + $this->data = $data; + } + return $this; } + + private function getDemoData() + { + $data = array(); + + if($this->provider == 'google') + { + + $data = array( + array('Year', 'Sales', 'Expenses'), + array('2013', 1000, 400), + array('2014', 1170, 460), + array('2015', 660, 1120), + array('2016', 1030, 540) + ); + + return $data; + } + + + + $data['labels'] = array("January","February","March","April","May","June","July"); + + $data['datasets'][] = array( + 'fillColor' => "rgba(220,220,220,0.5)", + 'strokeColor' => "rgba(220,220,220,1)", + 'pointColor ' => "rgba(220,220,220,1)", + 'pointStrokeColor' => "#fff", + 'data' => array(65,59,90,81,56,55,40), + 'title' => "Visits" + + ); + + $data['datasets'][] = array( + 'fillColor' => "rgba(151,187,205,0.5)", + 'strokeColor' => "rgba(151,187,205,1)", + 'pointColor ' => "rgba(151,187,205,1)", + 'pointStrokeColor' => "#fff", + 'data' => array(28,48,40,19,96,27,100), + 'title' => "Unique Visits" + ); + + return $data; + + + } public function setOptions($data,$id) { - $this->options = $data; + + if($this->provider == 'google' && $data == 'demo') + { + $this->options = array( + 'title' => 'Company Performance', + 'hAxis' => array('title'=>'Year', 'titleTextStyle'=>array('color'=>'#333')), + 'vAxis' => array('minValue'=>0) + ); + + } + else + { + $this->options = $data; + } + + return $this; } @@ -220,12 +317,49 @@ class e_chart public function render($id, $width='100%',$height=300) { + if($this->data == null) { return "
No chart data provided
"; } + if($this->provider == 'google') + { + $this->options['width'] = $width; + $this->options['height']= $height; + + $fName = 'draw'.ucfirst($id); + + $js = " google.load('visualization', '1', {packages:['corechart']}); + google.setOnLoadCallback(".$fName."); + function ".$fName."() { + var data = google.visualization.arrayToDataTable(".$this->getData()."); + + var options = ".$this->getOptions()." ; + + var chart = new google.visualization.AreaChart(document.getElementById('".$id."')); + chart.draw(data, options); + } + + $(window).resize(function(){ + ".$fName."(); + + }); + + "; + + e107::js('footer','https://www.google.com/jsapi'); + e107::js('footer-inline', $js); + + return "
"; + + + } + + + e107::js('core','chart/ChartNew.js','jquery'); + $js = "var ChartData = ".$this->getData()."\n"; $js .= 'var ChartOptions = '.$this->getOptions(); $js .= ";\n"; @@ -292,7 +426,7 @@ class e_chart e107::js('footer-inline',$js); - return 'HTML5 Canvas not supported.'; + return 'HTML5 Canvas not supported.'; }