Ticket #363

inc/js/classes/BxDolChartGrowth.js

@@ -19,22 +19,22 @@ function BxDolChartGrowth (oOptions) {
     this._sKeyGraph = 'bx_chart_growth_graph';
 
     this._sDateFormat = 'yy-mm-dd';
+    this._oChart = null;
 
     var $this = this;
     $(document).ready(function() {
-        google.setOnLoadCallback($this.loadData());
+    	$this.loadData();
     });
 }
 
 BxDolChartGrowth.prototype.loadData = function()
 {
 	var $this = this;
-	
+	var oGraphWrp = $('#' + this._sKeyGraph).parents('div:first');
 
-	$('#' + this._sKeyGraph).html('');
     $('#' + this._sKeyObjects).attr('disabled', true);
 
-    bx_loading(this._sKeyGraph, true);
+    bx_loading(oGraphWrp, true);
 
     $.get(
     	this._sActionsUrl,
@@ -47,10 +47,10 @@ BxDolChartGrowth.prototype.loadData = function()
     	function(oData) {
     		$('#' + $this._sKeyObjects).attr('disabled', false);
 
-            bx_loading($this._sKeyGraph, false);
+            bx_loading(oGraphWrp, false);
 
             if(oData.error != undefined) {
-                $('#' + $this._sKeyGraph).html('<div class="bx-def-padding bx-def-font-large bx-def-font-align-center">' + oData.error + '</div>');
+                alert(oData.error);
                 return;
             } 
 
@@ -64,43 +64,35 @@ BxDolChartGrowth.prototype.loadData = function()
             	$('#' + $this._sKeyDateTo).parents('.bx-form-element-wrapper:first').fadeIn();
             }
 
-            // convert dates
-            if(oData.column_date !== false) {
-                for (var i in oData.data) {    
+            var oChartLabels = new Array();
+            var oChartData = new Array();
+
+            // create chart arrays
+            if(oData.column_date !== false && oData.column_count !== false)
+                for (var i in oData.data) {
                     var sDate = oData.data[i][oData.column_date];
-                    var m = sDate.match(/(\d{4})-(\d{2})-(\d{2})/);
-                    if(!m || !m[1] || !m[2] || !m[3])
+                    var aDate = sDate.match(/(\d{4})-(\d{2})-(\d{2})/);
+                    if(!aDate || !aDate[1] || !aDate[2] || !aDate[3])
                         continue;
 
-                    var oDate = new Date(m[1],m[2]-1,m[3]);
-                    oData.data[i][oData.column_date] = oDate;
+                    oChartLabels[i] = sDate;
+                    oChartData[i] = oData.data[i][oData.column_count];
                 }
-            } 
-
-            // add data
-            var oDataTable = new google.visualization.DataTable();                
-            for (var i = 0 ; i < oData.data[0].length ; ++i) {
-                var sType = 0 == i ? 'string' : 'number';
-                var sLabel = '';
-                if (false !== oData.column_date && i == oData.column_date)
-                    sType = 'datetime'; 
-                else if (false !== oData.column_count && i == oData.column_count)
-                    sLabel = oData.title;
-                oDataTable.addColumn(sType, sLabel);
-            }
-            oDataTable.addRows(oData.data);
-
-            // define options
-            var oOptions = {
-              title: oData.title
-            };
-
-            if (oData.options != undefined)
-                oOptions = jQuery.extend(oOptions, oData.options);
 
-            // draw chart
-            var chart = new google.visualization[oData.type]($('#' + $this._sKeyGraph)[0]);
-            chart.draw(oDataTable, oOptions);
+            if($this._oChart)
+            	$this._oChart.destroy();
+
+	    	$this._oChart = new Chart($('#' + $this._sKeyGraph), {
+	    		type: 'line',
+	    		data: {
+	            	labels: oChartLabels,
+	            	datasets: [{
+	            		label: oData.title,
+	            		data: oChartData
+	            	}]
+	            },
+	    		options: {}
+	    	});
     	},
     	'json'
     );

template/chart_growth.html

@@ -1,15 +1,14 @@
-<div class="bx-chart-growth-controls">__controls__</div>
-
-<div id="bx_chart_growth_graph" class="bx-chart-growth-graph bx-def-border bx-def-margin-top"></div>
-
-<script type="text/javascript" src="__proto__://www.google.com/jsapi"></script>
-<script type="text/javascript">
-    google.load("visualization", "1", {packages:["corechart"]});
-
-	var oBxDolChartGrowth = new BxDolChartGrowth({
-		sObjName: 'oBxDolChartGrowth',
-		sRootUrl: '<bx_url_root />',
-		sDateFrom: '__date_from__',
-		sDateTo: '__date_to__'
-	});
-</script>
+<div class="bx-chart-growth">
+	<div class="bx-chart-growth-controls bx-def-margin-bottom">__controls__</div>
+	<div class="bx-chart-growth-graph bx-def-border">
+		<canvas id="bx_chart_growth_graph" width="100%"></canvas>
+		<script type="text/javascript">
+			var oBxDolChartGrowth = new BxDolChartGrowth({
+				sObjName: 'oBxDolChartGrowth',
+				sRootUrl: '<bx_url_root />',
+				sDateFrom: '__date_from__',
+				sDateTo: '__date_to__'
+			});
+		</script>
+	</div>
+</div>

template/chart_stats.html

@@ -1,19 +1,19 @@
-<div class="bx-chart-stats">
+<div class="bx-chart-stats bx-def-font-align-center">
     <div class="bx-chart-stats-items bx-def-margin-bottom">
         <bx_repeat:items>
-            <div class="bx-cs-item">
+            <div class="bx-cs-item bx-def-padding-sec-leftright">
                 <span class="bx-def-font-h3">__value__</span> __title__
             </div>
         </bx_repeat:items>
     </div>
-
-    <canvas id="bx_chart_stats_graph" class="bx-chart-stats-graph bx-def-border"></canvas>
-    <script type="text/javascript">
-    	var oHolder = $("#bx_chart_stats_graph").get(0).getContext("2d");
-    	var oChart = new Chart(oHolder).PolarArea(__chart_data__, {
-			scaleBackdropColor : "transparent",
-			segmentStrokeColor : "transparent",
-			segmentStrokeWidth : 0,
-		});
-    </script>
+    <div class="bx-chart-stats-graph bx-def-border">
+	    <canvas id="bx_chart_stats_graph" width="100%"></canvas>
+	    <script type="text/javascript">
+	    	var oStatsChart = new Chart($("#bx_chart_stats_graph"), {
+	    		type: 'doughnut',
+	    		data: __chart_data__,
+	    		options: {}
+	    	});
+	    </script>
+    </div>
 </div>

template/css/chart.css

@@ -1,28 +1,37 @@
-/*--- Chart Growth: Controls ---*/
+/*+++ Chart Growth: Controls +++*/
 .bx-chart-growth-controls .bx-form-input-datepicker {
 	width: 100%;
 }
 
-/*--- Chart Growth: Graph ---*/
+/*+++ Chart Growth: Graph +++*/
 .bx-chart-growth-graph {
 	height: 15rem;
 	background-color: #ffffff;
 }
 
 
-/*--- Chart Stats: Info ---*/
-.bx-chart-stats-items {
+/*--- Chart Stats ---*/
+div.bx-chart-stats-items,
+div.bx-chart-stats-graph {
+	display: inline-block;
+	vertical-align: top;
+}
+
+/*+++ Chart Stats: Info +++*/
+div.bx-chart-stats-items {
 	position: relative;
 }
-.bx-chart-stats-items .bx-cs-item {
-	display: inline-block;
+div.bx-chart-stats-items div.bx-cs-item {
+	display: table-cell;
 	vertical-align: top;
 	width: 30%;
+	text-align: left;
+	white-space: nowrap;
 } 
 
-/*--- Chart Stats: Graph ---*/
-.bx-chart-stats-graph {
-	max-width: 100%;
-	height: 15rem;
+/*+++ Chart Stats: Graph +++*/
+div.bx-chart-stats-graph {
+	min-width: 25rem;
+	max-width: 28rem;
     background-color: #ffffff;
 }

template/scripts/BxBaseChartServices.php

@@ -88,7 +88,7 @@ class BxBaseChartServices extends BxDol
         $oForm = new BxTemplFormView($aForm);
 
         $oTemplate = BxDolTemplate::getInstance();
-        $oTemplate->addJs(array('BxDolChartGrowth.js'));
+        $oTemplate->addJs(array('chart.min.js', 'BxDolChartGrowth.js'));
         $oTemplate->addCss(array('chart.css'));
 
         return $oTemplate->parseHtmlByName('chart_growth.html', array(
@@ -99,28 +99,29 @@ class BxBaseChartServices extends BxDol
         ));
     }
 
-    //TODO: Continue from here.
     public function serviceGetChartStats()
     {
+        $mixedResult = BxDolService::call('system', 'check_allowed_view', array(), 'TemplChartServices');
+        if($mixedResult !== CHECK_ACTION_RESULT_ALLOWED)
+            return '';
+
         $aTmplVarsItems = array();
-        $aTmplVarsData = array();
+        $aTmplVarsDataLabels = $aTmplVarsDataSet = array();
 
         $aObjects = BxDolChartQuery::getChartObjects();
         foreach($aObjects as $aObject) {
             $sTitle = _t($aObject['title']);
-            $sValie = BxDolChart::getObjectInstance($aObject['object'])->getDataByStatus();
+            $sValue = BxDolChart::getObjectInstance($aObject['object'])->getDataByStatus();
 
             $aTmplVarsItems[] = array(
                 'title' => $sTitle,
-            	'value' => $sValie,
+            	'value' => $sValue,
             );
 
-            $aTmplVarsData[] = array(
-            	'value' => $sValie,
-	            'color' => '#' . dechex(rand(0x000000, 0xFFFFFF)),
-	            'highlight' => '',
-	            'label' => bx_js_string($sTitle, BX_ESCAPE_STR_APOS),
-            );
+            $aTmplVarsDataLabels[] = $sTitle;
+
+            $aTmplVarsDataSet['data'][] = $sValue;
+            $aTmplVarsDataSet['backgroundColor'][] = '#' . dechex(rand(0x000000, 0xFFFFFF));
         }
 
         $oTemplate = BxDolTemplate::getInstance();
@@ -129,7 +130,10 @@ class BxBaseChartServices extends BxDol
 
         return $oTemplate->parseHtmlByName('chart_stats.html', array(
         	'bx_repeat:items' => $aTmplVarsItems,
-            'chart_data' => json_encode($aTmplVarsData)
+            'chart_data' => json_encode(array(
+                'labels' => $aTmplVarsDataLabels,
+                'datasets' => array($aTmplVarsDataSet)
+            ))
         ));
     }
 }