mirror of
https://github.com/e107inc/e107.git
synced 2025-04-14 09:32:17 +02:00
Upgraded chart scripts and added enhanced class so that options may be set.
This commit is contained in:
Cameron
parent
1e4c6eb11a
commit
150b27e1c7
@ -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');
|
||||
|
||||
|
||||
@ -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>';
|
||||
|
||||
5365
e107_web/js/chart/ChartNew.js
Normal file
5365
e107_web/js/chart/ChartNew.js
Normal file
File diff suppressed because it is too large
Load Diff
148
e107_web/js/chart/mathFunctions.js
Normal file
148
e107_web/js/chart/mathFunctions.js
Normal file
@ -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);
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user