Upgraded chart scripts and added enhanced class so that options may be set.

e107_admin/includes/infopanel.php

@@ -686,7 +686,8 @@ class adminstyle_infopanel
 								'strokeColor'  		=>  "rgba(220,220,220,1)",
 								'pointColor '  		=>  "rgba(220,220,220,1)",
 								'pointStrokeColor'  =>  "#fff",
-								'data'				=> array(65,59,90,81,56,55,40)	
+								'data'				=> array(65,59,90,81,56,55,40),
+								'title'				=> "Visits"
 				
 			);
 			
@@ -695,7 +696,8 @@ class adminstyle_infopanel
 								'strokeColor'  		=>  "rgba(151,187,205,1)",
 								'pointColor '  		=>  "rgba(151,187,205,1)",
 								'pointStrokeColor'  =>  "#fff",
-								'data'				=> array(28,48,40,19,96,27,100)		
+								'data'				=> array(28,48,40,19,96,27,100),
+								'title'				=> "Unique Visits"		
 			);	
 			
 			return $data;
@@ -849,6 +851,10 @@ class adminstyle_infopanel
 		
 		$cht = e107::getChart();
 		$cht->setType('line');
+		$cht->setOptions(array(
+			'annotateDisplay' => true,
+			'annotateFontSize' => 8
+		));
 		$cht->setData($data,'canvas');
 		$text = $cht->render('canvas');
 	

e107_handlers/chart_class.php

@@ -6,8 +6,7 @@
  * Released under the terms and conditions of the
  * GNU General Public License (http://www.gnu.org/licenses/gpl.txt)
  *
- * Chart Class for e107. see http://www.chartjs.org for details. 
+ * Chart Class for e107. @see https://github.com/FVANCOP/ChartNew.js for details. 
- *
  */
  
  /**
@@ -37,26 +36,137 @@
 							'data'				=> array(28,48,40,19,96,27,100)		
 		);
 
+  		$options = array('bezierCurve' => false);
+  				'
 		
 		$cht = e107::getChart();
 		$cht->setType('line');
+  		$cht->setOptions($options);
 		$cht->setData($data,'canvas');
 		echo $cht->render('canvas');
   */
  
- 
+/*
+ *   var allopts = {
+	//Boolean - If we show the scale above the chart data	  -> Default value Changed
+  scaleOverlay : true,
+	//Boolean - If we want to override with a hard coded scale
+	scaleOverride : false,
+	//** Required if scaleOverride is true **
+	//Number - The number of steps in a hard coded scale
+	scaleSteps : null,
+	//Number - The value jump in the hard coded scale
+	scaleStepWidth : null,
+	//Number - The scale starting value
+	scaleStartValue : null,
+	//String - Colour of the scale line	
+	scaleLineColor : "rgba(0,0,0,.1)",
+	//Number - Pixel width of the scale line	
+	scaleLineWidth : 1,
+	//Boolean - Whether to show labels on the scale	
+	scaleShowLabels : true,
+	//Interpolated JS string - can access value
+	scaleLabel : "<%=value%>",
+	//String - Scale label font declaration for the scale label
+	scaleFontFamily : "'Arial'",
+	//Number - Scale label font size in pixels	
+	scaleFontSize : 12,
+	//String - Scale label font weight style	
+	scaleFontStyle : "normal",
+	//String - Scale label font colour	
+	scaleFontColor : "#666",	
+	///Boolean - Whether grid lines are shown across the chart
+	scaleShowGridLines : true,
+	//String - Colour of the grid lines
+	scaleGridLineColor : "rgba(0,0,0,.05)",
+	//Number - Width of the grid lines
+	scaleGridLineWidth : 1,	
+	//Boolean - Whether the line is curved between points -> Default value Changed 
+	bezierCurve : false,
+	//Boolean - Whether to show a dot for each point -> Default value Changed
+	pointDot : false,
+	//Number - Radius of each point dot in pixels
+	pointDotRadius : 3,
+	//Number - Pixel width of point dot stroke
+	pointDotStrokeWidth : 1,
+	//Boolean - Whether to show a stroke for datasets
+	datasetStroke : true,
+	//Number - Pixel width of dataset stroke
+	datasetStrokeWidth : 2,
+	//Boolean - Whether to fill the dataset with a colour
+	datasetFill : true,
+	//Boolean - Whether to animate the chart             -> Default value changed
+	animation : false,
+	//Number - Number of animation steps
+	animationSteps : 60,
+	//String - Animation easing effect
+	animationEasing : "easeOutQuart",
+	//Function - Fires when the animation is complete
+	onAnimationComplete : null,
+  canvasBorders : true,
+  canvasBordersWidth : 30,
+  canvasBordersColor : "black",
+  yAxisLeft : true,
+  yAxisRight : true,
+  yAxisLabel : "Y axis",
+  yAxisFontFamily : "'Arial'",
+	yAxisFontSize : 50,
+	yAxisFontStyle : "normal",
+	yAxisFontColor : "#666",
+  xAxisLabel : "",
+	xAxisFontFamily : "'Arial'",
+	xAxisFontSize : 16,
+	xAxisFontStyle : "normal",
+	xAxisFontColor : "#666",
+  yAxisUnit : "UNIT",
+	yAxisUnitFontFamily : "'Arial'",
+	yAxisUnitFontSize : 12,
+	yAxisUnitFontStyle : "normal",
+	yAxisUnitFontColor : "#666",
+  graphTitle : "",
+	graphTitleFontFamily : "'Arial'",
+	graphTitleFontSize : 24,
+	graphTitleFontStyle : "bold",
+	graphTitleFontColor : "#666",
+  graphSubTitle : "",
+	graphSubTitleFontFamily : "'Arial'",
+	graphSubTitleFontSize : 18,
+	graphSubTitleFontStyle : "normal",
+	graphSubTitleFontColor : "#666",
+  footNote : "Footnote",
+	footNoteFontFamily : "'Arial'",
+	footNoteFontSize : 50,
+	footNoteFontStyle : "bold",
+	footNoteFontColor : "#666",
+  legend : true,
+	legendFontFamily : "'Arial'",
+	legendFontSize : 18,
+	legendFontStyle : "normal",
+	legendFontColor : "#666",
+  legendBlockSize : 30,
+  legendBorders : true,
+  legendBordersWidth : 30,
+  legendBordersColor : "#666",
+  //  ADDED PARAMETERS 
+  graphMin : "DEFAULT",
+  graphMax : "DEFAULT"
+ */ 
 
 class e_chart
 {
 	protected $id;
 	protected $data = null;
 	protected $type = 'line';
+	protected $options = array('scaleFontSize' => 14, 'annotateDisplay' => true, 'bezierCurve' => true, 'inGraphDataShow'=>false);
 	
 	
 	function __construct()
 	{
-		e107::js('core','chart/Chart.min.js','jquery');	
+	//	e107::js('core','chart/Chart.min.js','jquery');	
-		e107::css('inline','canvas.e-graph {  width: 100% !important;  max-width: 800px;  height: auto !important; 	}');	
+		e107::js('core','chart/ChartNew.js','jquery');	
+		
+	
+		// e107::css('inline','canvas.e-graph {  width: 100% !important;  max-width: 800px;  height: auto !important; 	}');	
 	}		
 	
 	
@@ -65,6 +175,11 @@ class e_chart
 		return json_encode($this->data);
 	}
 	
+	private function getOptions()
+	{
+		return json_encode($this->options);	
+	}
+	
 	/**
 	 * Set the type of graph
 	 * @param string $type - line | bar | pie | radar | doughnut | polar 
@@ -87,6 +202,13 @@ class e_chart
 		$this->data = $data;
 		return $this;		
 	}
+
+
+	public function setOptions($data,$id)
+	{
+		$this->options = $data;
+		return $this;		
+	}
 	
 	/**
 	 * Render Graph
@@ -95,7 +217,7 @@ class e_chart
 	 * @param integer $height
 	 * @return null
 	 */
-	public function render($id, $width=800,$height=300)
+	public function render($id, $width='100%',$height=300)
 	{
 		
 		if($this->data == null)
@@ -105,13 +227,15 @@ class e_chart
 		
 		
 		$js = "var ChartData = ".$this->getData()."\n";
+		$js .=  'var ChartOptions = '.$this->getOptions(); 
+		$js .= ";\n";
 		
 		switch ($this->type) 
 		{
 
 			case 'bar':
 				
-				$js .= 'var myLine = new Chart(document.getElementById("'.$id.'").getContext("2d")).Bar(ChartData);';
+				$js .= 'var myLine = new Chart(document.getElementById("'.$id.'").getContext("2d")).Bar(ChartData, ChartOptions);';
 			break;
 
 			case 'radar':
@@ -123,7 +247,7 @@ class e_chart
 			break;
 
 			case 'doughnut':
-				$js .= 'var myDoughnut = new Chart(document.getElementById("'.$id.'").getContext("2d")).Doughnut(ChartData);';	
+				$js .= 'var myDoughnut = new Chart(document.getElementById("'.$id.'").getContext("2d")).Doughnut(ChartData, ChartOptions);';	
 			break;
 			
 			case 'pie':
@@ -133,12 +257,9 @@ class e_chart
 			default:
 			case 'line':
 				
-				
-				//TODO Chart Options. 
 				$js .= '
-				//	var lineChartData = '.$this->getData().'
+
-				//	var ChartOptions = "{ scaleFontSize : 18 }" 
+					var myLine = new Chart(document.getElementById("'.$id.'").getContext("2d")).Line(ChartData, ChartOptions);
-					var myLine = new Chart(document.getElementById("'.$id.'").getContext("2d")).Line(ChartData);
 									
 				';
 				
@@ -147,6 +268,28 @@ class e_chart
 			
 	
 
+		
+		// Auto-resize the canvas. //TODO Get it working with multiple instances. 
+		e107::js('footer-inline', "
+			var c = $('#".$id."');
+		    var ct = c.get(0).getContext('2d');
+		    var container = $(c).parent();
+		
+		    //Run function when browser resizes
+		    $(window).resize( respondCanvas );
+		
+		    function respondCanvas(){ 
+		        c.attr('width', $(container).width() ); //max width
+		        c.attr('height', $(container).height() ); //max height
+		
+		        //Call a function to redraw other content (texts, images etc)
+		    }
+		
+		    //Initial call 
+		    respondCanvas();
+   		 ");
+		
+
 		e107::js('footer-inline',$js);
 
 		return '<canvas class="e-graph" id="'.$id.'" height="'.$height.'" width="'.$width.'" >HTML5 Canvas not supported.</canvas>';

e107_web/js/chart/mathFunctions.js

@@ -0,0 +1,148 @@
+function mean(params) {
+	var datasetNr = params.datasetNr;
+	var data = params.data;
+	var mean = 0;
+	var nr = 0;
+	for (var j = 0; j < data.datasets[datasetNr].data.length; j++) {
+		// important to check because missing values are possible
+		if (!(typeof(data.datasets[datasetNr].data[j])=='undefined')){
+			mean += 1*data.datasets[datasetNr].data[j];
+			nr++;
+		}
+	}
+	mean /= nr;
+	return mean;
+}
+
+function varianz(params) {
+	var data = params.data;
+	var datasetNr = params.datasetNr;
+	var meanVal = mean(params);
+	var varianz = 0;
+	var nr = 0;
+	for (var j = 0; j < data.datasets[datasetNr].data.length; j++) {
+		// important to check because missing values are possible
+		if (!(typeof(data.datasets[datasetNr].data[j])=='undefined')) {
+			varianz += Math.pow(1*data.datasets[datasetNr].data[j]-meanVal,2);
+			nr++;
+		}
+	}
+	return varianz/nr;
+}
+
+function stddev(params) {
+	return Math.sqrt(varianz(params));
+}
+
+function cv(params) {
+	return stddev(params)/mean(params);
+}
+
+
+
+function drawMath(ctx,config,data,msr,vars) {
+	var xAxisPosY = vars.xAxisPosY;
+	var yAxisPosX = vars.yAxisPosX;
+	var valueHop  = vars.valueHop;
+	var scaleHop  = vars.scaleHop;
+	var zeroY     = vars.zeroY;
+	var calculatedScale = vars.calculatedScale;
+	var calculateOffset = vars.calculateOffset;
+	var barWidth = vars.barWidth;
+	var barBool = !(typeof barWidth == "undefined") ? true : false;
+
+	// check each dataset if a mathDraw function exists
+	for (var i = 0; i < data.datasets.length; i++) {
+		// get mathFctName (stddev|mean|...)
+		var deviationFct = data.datasets[i].drawMathDeviation;
+		if (deviationFct) {
+			drawMathDeviation(i,deviationFct);
+		}
+		var lineFct = data.datasets[i].drawMathLine;
+		if (lineFct) {
+			drawMathLine(i,lineFct);
+		}
+	}
+
+	/**
+	 * Draw a deviation vertical line (if needed with top and bottom horizontal lines)
+	 * @param i {integer} dataset number
+	 * @param deviationFct {string} math function name
+	 */
+	function drawMathDeviation(i,deviationFct) {
+		var deviation = 0;
+		// check if the math function exists
+		if (typeof eval(deviationFct) == "function") {
+			var parameter = {data:data,datasetNr: i};
+			deviation = window[deviationFct](parameter);
+		 }
+		if (isNumber(deviation)) {
+			ctx.strokeStyle= data.datasets[i].deviationStrokeColor ? data.datasets[i].deviationStrokeColor : config.defaultStrokeColor;
+			ctx.lineWidth = config.datasetStrokeWidth;
+			ctx.beginPath();
+			for (var j = 0; j < data.datasets[i].data.length; j++) {
+				// important to check because missing values are possible
+				if (!(typeof(data.datasets[i].data[j])=='undefined')) {
+					var deviationWidth = data.datasets[i].deviationWidth;
+					// draw the top and the bottom of the vertical line if a deviationWidth exists
+					if (deviationWidth) {
+						ctx.moveTo(xPos(j,i,barWidth,barBool)-deviationWidth,yPos(i,j,-deviation,true));
+						ctx.lineTo(xPos(j,i,barWidth,barBool)+deviationWidth,yPos(i,j,-deviation,true));
+						ctx.moveTo(xPos(j,i,barWidth,barBool)-deviationWidth,yPos(i,j,deviation,true));
+						ctx.lineTo(xPos(j,i,barWidth,barBool)+deviationWidth,yPos(i,j,deviation,true));
+					}
+					// draw the vertical line
+					ctx.moveTo(xPos(j,i,barWidth,barBool),yPos(i,j,-deviation,true));
+					ctx.lineTo(xPos(j,i,barWidth,barBool),yPos(i,j,deviation,true));
+				}
+			}
+			ctx.stroke();
+			ctx.closePath();
+		}
+	}
+
+	/**
+	 * Draw a horizontal line
+	 * @param i {integer} numer of dataset
+	 * @param lineFct {string} name of the mathfunctions => compute height
+	 */
+	function drawMathLine(i,lineFct) {
+		var line = 0;
+		// check if the math function exists
+		if (typeof eval(lineFct) == "function") {
+			var parameter = {data:data,datasetNr: i};
+			line = window[lineFct](parameter);
+		 }
+		if (!(typeof(line)=='undefined')) {
+			ctx.strokeStyle= data.datasets[i].mathLineStrokeColor ? data.datasets[i].mathLineStrokeColor : config.defaultStrokeColor;
+			ctx.lineWidth = config.datasetStrokeWidth;
+			ctx.beginPath();
+			ctx.moveTo(yAxisPosX,yPos(i,0,line,false));
+			ctx.lineTo(yAxisPosX + msr.availableWidth,yPos(i,data.datasets[i].data.length-1,line,false));
+			ctx.stroke();
+			ctx.closePath();
+		}
+	}
+
+	/**
+	 * Get a y position depending on the current values
+	 * @param dataset {integer} number of dataset
+	 * @param iteration {integer} number of value inside dataset.data
+	 * @param add {float} add a value to the current value if value is true
+	 * @param value {bool} true => value+add, false=>add
+	 * @returns {float} position (px)
+	 */
+	function yPos(dataSet, iteration, add,value) {
+		value = value ? 1*data.datasets[dataSet].data[iteration] : 0;
+		return xAxisPosY - calculateOffset(config, value+add, calculatedScale, scaleHop);
+	};
+	function xPos(iteration,dataSet,barWidth,bar) {
+		if (bar) {
+			return yAxisPosX + config.barValueSpacing + valueHop * iteration + barWidth * dataSet
+			       + config.barDatasetSpacing * dataSet + config.barStrokeWidth * dataSet+barWidth/2;
+		} else {
+		   return yAxisPosX + (valueHop * iteration);
+		}
+
+	};
+}