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

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::css('inline','canvas.e-graph {  width: 100% !important;  max-width: 800px;  height: auto !important; 	}');	
+	//	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; 	}');	
 	}		
 	
 	
@@ -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);
+
+					var myLine = new Chart(document.getElementById("'.$id.'").getContext("2d")).Line(ChartData, ChartOptions);
 									
 				';
 				
@@ -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>';