471 lines
15 KiB
PHP
471 lines
15 KiB
PHP
<?php
|
|
/*=======================================================================
|
|
*
|
|
* ej_all.php
|
|
*
|
|
* Autor: Marc Vollmann
|
|
*
|
|
=======================================================================*/
|
|
|
|
/*
|
|
http://cdn.syncfusion.com/14.2.0.28/js/web/ej.web.all.min.js
|
|
http://js.syncfusion.com/demos/web/scripts/jsontreegriddata.js
|
|
*/
|
|
|
|
|
|
include_once ("../include/mcglobal.inc.php");
|
|
include_once ("../include/auth.inc.php");
|
|
|
|
|
|
getSecHttpVars ("1",array("f_act", "meta_category", "category", "type", "title", "interval_from", "interval_to", "range_min", "range_max", "range_step", "scale_factor_height", "json"));
|
|
|
|
// Die if no data
|
|
if ($json == "") : die(); endif;
|
|
|
|
// Init
|
|
if ($title == "") : $title = getLngt("Diagramm"); endif;
|
|
if ($interval_from == "") : $interval_from = getDateTime("year"); endif;
|
|
if ($interval_to == "") : $interval_to = getDateTime("year"); endif;
|
|
if ($range_min == "") : $range_min = 0; endif;
|
|
if ($range_max == "") : $range_max = 1000000; endif;
|
|
if ($range_step == "") : $range_step = 100000; endif;
|
|
if ($scale_factor_height == "") : $scale_factor_height = 6; endif;
|
|
if ($type == "") : $type = "pie"; endif;
|
|
// echo "interval: " . $interval_from . " - " . $interval_to . "<br>";
|
|
// echo "range: " . $range_min . " - " . $range_max . " [step: " . $range_step . "]" . "<br>";
|
|
// Decode
|
|
$json = urldecode($json);
|
|
// echo $json;
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<link rel="stylesheet" type="text/css" href="../css/phoenix.css">
|
|
<style type="text/css">
|
|
<?php include_once ("../css/navigation.css.php"); ?>
|
|
</style>
|
|
|
|
<?php include_once ("../include/js_framework.inc.php"); ?>
|
|
|
|
<script src="../include/swift.js" type="text/javascript"></script>
|
|
<script src="../include/iban.js" type="text/javascript"></script>
|
|
<script src="../include/checkFormTags.js" type="text/javascript"></script>
|
|
<script src="../include/searchLists.js" type="text/javascript"></script>
|
|
|
|
|
|
<link href="../css/ej/bootstrap.min.css" rel="stylesheet" />
|
|
<link href="../css/ej/ej.web.all.min.css" rel="stylesheet" />
|
|
<link href="../css/ej/default.css" rel="stylesheet" />
|
|
<link href="../css/ej/default-responsive.css" rel="stylesheet" />
|
|
<link href="../css/ej/ej.responsive.css" rel="stylesheet" />
|
|
|
|
<script type="text/javascript" src="../js/ej/jsrender.min.js"></script>
|
|
|
|
<script type="text/javascript" src="../js/ej/ej.web.all.min.js"></script>
|
|
|
|
<script type="text/javascript" src="../js/ej/properties.js"></script>
|
|
<!-- <script type="text/javascript" src="../js/ej/jsontreegriddata.js"></script> -->
|
|
|
|
<script type="text/javascript">
|
|
<!--
|
|
// NAVIGATION
|
|
<?php echo $jsMenuOut; ?>
|
|
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// *************
|
|
// **** Pie ****
|
|
// *************
|
|
|
|
<?php if ($type == "pie" || $type == "1") : ?>
|
|
|
|
$(function () {
|
|
$("#container").ejChart({
|
|
|
|
series: [
|
|
{ points: <?php echo $json; ?>,
|
|
marker:
|
|
{
|
|
dataLabel:
|
|
{
|
|
visible:true,
|
|
shape: 'none',
|
|
connectorLine: { type: 'bezier',color: 'blue' },
|
|
font: {size:'14px'}
|
|
}
|
|
},
|
|
border: {width:2, color:'white'},
|
|
name: 'Expenses',
|
|
type: 'pie',
|
|
enableAnimation: true,
|
|
labelPosition: 'outsideExtended',
|
|
enableSmartLabels: true,
|
|
startAngle: 145
|
|
}
|
|
],
|
|
title:{text: '<?php echo $title; ?>'},
|
|
seriesRendering:"seriesRender",
|
|
isResponsive: true,
|
|
size: { height: "<?php echo ($scale_factor_height * 100) ?>"},
|
|
legend: { visible: false}
|
|
});
|
|
});
|
|
|
|
function seriesRender(sender) {
|
|
if(sender.model.theme=="flatdark" || sender.model.theme=="gradientdark")
|
|
sender.data.series.marker.dataLabel.connectorLine.color="white";
|
|
}
|
|
|
|
<?php endif; ?>
|
|
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// *****************************
|
|
// **** 100% Stacked Column ****
|
|
// *****************************
|
|
|
|
<?php if ($type == "100pct_stacked_column" || $type == "10") : ?>
|
|
|
|
$(function () {
|
|
$("#container").ejChart({
|
|
|
|
// Initializing Primary X Axis
|
|
primaryXAxis: {
|
|
title: { text: '<?php echo getLngt("Jahr") ?>' },
|
|
range: { min: <?php echo ($interval_from - 1); ?>, max: <?php echo ($interval_to + 1); ?>, interval: 1 },
|
|
majorGridLines: { visible: false }
|
|
},
|
|
|
|
// Initializing Primary Y Axis
|
|
primaryYAxis: {
|
|
title: { text: '<?php echo getDateTime("Aufteilung") ?>' }
|
|
},
|
|
|
|
// Initializing Common Properties for all the series
|
|
commonSeriesOptions: {
|
|
type: 'stackingcolumn100',
|
|
EnableAnimation: true,
|
|
tooltip : {
|
|
visible :true ,
|
|
format: " #series.name# <br/>X : #point.x# <br/> Y : #point.y# <br/>Growth Percentage : #point.percentage# % "
|
|
}
|
|
},
|
|
|
|
// Initializing Series
|
|
series: <?php echo $json; ?>,
|
|
isResponsive: true,
|
|
load: "loadTheme",
|
|
title :{text: '<?php echo $title; ?>'},
|
|
size: { height: "<?php echo ($scale_factor_height * 100) ?>"},
|
|
legend: { visible: true }
|
|
});
|
|
});
|
|
|
|
<?php endif; ?>
|
|
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// *************
|
|
// **** Bar ****
|
|
// *************
|
|
|
|
<?php if ($type == "bar" || $type == "2" || $type == "11") : ?>
|
|
|
|
$(function () {
|
|
$("#container").ejChart({
|
|
|
|
// Initializing Primary X Axis
|
|
primaryXAxis: {
|
|
title: { text: '<?php echo getLngt("Jahr") ?>' },
|
|
range: { min: <?php echo ($interval_from - 1); ?>, max: <?php echo ($interval_to + 1); ?>, interval: 1 }
|
|
},
|
|
|
|
// Initializing Primary Y Axis
|
|
primaryYAxis: {
|
|
range: { min: <?php echo $range_min; ?>, max: <?php echo $range_max; ?>, interval: <?php echo $range_step; ?> },
|
|
labelFormat:"{value}",
|
|
title: { text: '<?php echo getLngt("Umsatz") ?>' }
|
|
},
|
|
|
|
// Initializing Common Properties for all the series
|
|
commonSeriesOptions: {
|
|
type: 'bar',
|
|
enableAnimation: true,
|
|
tooltip:{visible:true, format: "#series.name# <br/> #point.x# : #point.y#"},
|
|
marker:
|
|
{
|
|
dataLabel:
|
|
{
|
|
font: { size:'13px',fontFamily:'Segoe UI',fontStyle:'Normal',fontWeight:'regular'},
|
|
textPosition: 'top',
|
|
horizontalTextAlignment:"near",
|
|
visible:true
|
|
},
|
|
}
|
|
},
|
|
|
|
//Initializing Series
|
|
series: <?php echo $json; ?>,
|
|
load:"loadTheme",
|
|
displayTextRendering:"OndataLabel",
|
|
isResponsive: true,
|
|
showTooltip: true,
|
|
title:{text: '<?php echo $title; ?>'},
|
|
size: { height: "<?php echo ($scale_factor_height * 100) ?>" },
|
|
legend: { visible: true, position: 'right', alignment:"near" }
|
|
});
|
|
});
|
|
|
|
function OndataLabel(sender) {
|
|
sender.data.location.x=sender.data.location.x+20;
|
|
}
|
|
|
|
<?php endif; ?>
|
|
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// **********************
|
|
// **** Stacked Area ****
|
|
// **********************
|
|
|
|
<?php if ($type == "stacked_area" || $type == "12") : ?>
|
|
|
|
$(function () {
|
|
$("#container").ejChart({
|
|
|
|
// Initializing Primary X Axis
|
|
primaryXAxis: {
|
|
axisLine:{visible:false},
|
|
majorGridLines:{visible:false},
|
|
majorTickLines: { visible: false },
|
|
range: { min: <?php echo ($interval_from - 1); ?>, max: <?php echo ($interval_to + 1); ?>, interval: 1 },
|
|
title: { text: '<?php echo getLngt("Jahr") ?>' }
|
|
},
|
|
|
|
// Initializing Primary Y Axis
|
|
primaryYAxis: {
|
|
axisLine: { visible: false },
|
|
majorTickLines: { visible: false },
|
|
range: { min: <?php echo $range_min; ?>, max: <?php echo $range_max; ?>, interval: <?php echo $range_step; ?> },
|
|
title: { text: '<?php echo getLngt("Umsatz") ?>' }
|
|
},
|
|
|
|
// Initializing Common Properties for all the series
|
|
commonSeriesOptions: {
|
|
type: 'stackingarea',
|
|
EnableAnimation: true
|
|
},
|
|
|
|
// Initializing Series
|
|
series: <?php echo $json; ?> ,
|
|
load:"loadTheme",
|
|
isResponsive: true,
|
|
title:{text: '<?php echo $title; ?>' },
|
|
size: { height: "<?php echo ($scale_factor_height * 100) ?>" },
|
|
legend: { visible: true }
|
|
});
|
|
});
|
|
|
|
<?php endif; ?>
|
|
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// **************
|
|
// **** Area ****
|
|
// **************
|
|
|
|
<?php if ($type == "area" || $type == "13") : ?>
|
|
|
|
$(function () {
|
|
$("#container").ejChart({
|
|
|
|
// Initializing Primary X Axis
|
|
primaryXAxis: {
|
|
axisLine:{visible:false},
|
|
majorGridLines:{visible:false},
|
|
majorTickLines: { visible: false },
|
|
range: { min: <?php echo ($interval_from - 1); ?>, max: <?php echo ($interval_to + 1); ?>, interval: 1 },
|
|
title: { text: '<?php echo getLngt("Jahr") ?>' }
|
|
},
|
|
|
|
// Initializing Primary Y Axis
|
|
primaryYAxis: {
|
|
axisLine: { visible: false },
|
|
majorTickLines: { visible: false },
|
|
range: { min: <?php echo $range_min; ?>, max: <?php echo $range_max; ?>, interval: <?php echo $range_step; ?> },
|
|
title: { text: '<?php echo getLngt("Umsatz") ?>' }
|
|
},
|
|
|
|
// Initializing Series
|
|
series: <?php echo $json; ?> ,
|
|
load:"loadTheme",
|
|
isResponsive: true,
|
|
title:{text: '<?php echo $title; ?>' },
|
|
size: { height: "<?php echo ($scale_factor_height * 100) ?>" },
|
|
legend: { visible: true }
|
|
});
|
|
});
|
|
|
|
<?php endif; ?>
|
|
|
|
// -----------------------------------------------------------------------------
|
|
/*
|
|
// **** Default Functionalities ****
|
|
$(function () {
|
|
$("#TreeGridContainer").ejTreeGrid({
|
|
dataSource: sampleData,
|
|
childMapping: "subtasks",
|
|
treeColumnIndex: 1,
|
|
allowColumnResize: true,
|
|
isResponsive: true,
|
|
columns: [
|
|
{ field: "taskID", headerText: "Task Id", width: "45" },
|
|
{ field: "taskName", headerText: "Task Name" },
|
|
{ field: "startDate", headerText: "Start Date" },
|
|
{ field: "endDate", headerText: "End Date" },
|
|
{ field: "duration", headerText: "Duration" },
|
|
{ field: "progress", headerText: "Progress" },
|
|
{ field: "priority", headerText: "Priorität" }
|
|
]
|
|
})
|
|
});
|
|
*/
|
|
// -----------------------------------------------------------------------------
|
|
|
|
function finishPage(f_act_value) {
|
|
document.forms[0].f_act.value=f_act_value;
|
|
document.forms[0].submit();
|
|
};
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="content-container-fluid">
|
|
<div class="row">
|
|
<div class="cols-sample-area">
|
|
|
|
<!-- ejChart() [PIE, 100% Stacked Column] -->
|
|
<div id="container"></div>
|
|
|
|
<!-- ejTreeGrid() -->
|
|
<div id="TreeGridContainer" style="height:350px;width:100%;"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
<?php
|
|
/*
|
|
// Pie
|
|
points: [{ x: 'Other Personnal', y: 94658, text: 'Other Personal, 88.47%' },
|
|
{ x: 'Medical care', y: 9090, text: 'Medical care, 8.49%' },
|
|
{ x: 'Housing', y: 2577, text: 'Housing, 2.40%' },
|
|
{ x: 'Transportation', y: 473, text: 'Transportation, 0.44%' },
|
|
{ x: 'Education', y: 120, text: 'Education, 0.11%' },
|
|
{ x: 'Electronics', y: 70, text: 'Electronics, 0.06%' }],
|
|
|
|
$json = array();
|
|
array_push($json,array("x" => "MC","y" => 45,"text" => "MC : 45%"));
|
|
array_push($json,array("x" => "Conan","y" => 33,"text" => "Conan : 33%"));
|
|
array_push($json,array("x" => "Caddy","y" => 22,"text" => "Caddy : 22%"));
|
|
$json = json_encode($json);
|
|
|
|
echo $json . "<br><br>";
|
|
$json = str_replace("\"x\"", "x", $json);
|
|
$json = str_replace("\"y\"", "y", $json);
|
|
$json = str_replace("\"text\"", "text", $json);
|
|
$json = str_replace("\"", "'", $json);
|
|
echo $json . "<br><br>";
|
|
|
|
// 100% Stacked Column
|
|
series: [
|
|
{
|
|
points: [{ x: 2006, y:900 }, { x: 2007, y: 544}, { x: 2008, y: 880}, { x: 2009, y: 675 },
|
|
{ x: 2010, y: 765}, { x: 2011, y:679}, { x: 2012, y: 770}],
|
|
name: "USA",
|
|
},
|
|
{
|
|
points: [{ x: 2006, y:190 }, { x: 2007, y:226}, { x: 2008, y:194}, { x: 2009, y:250},
|
|
{ x: 2010, y: 222}, { x: 2011, y:181}, { x: 2012, y:128}],
|
|
name: "India",
|
|
},
|
|
{
|
|
points: [{ x: 2006, y:250}, { x: 2007, y:145}, { x: 2008, y:190}, { x: 2009, y:220},
|
|
{ x: 2010, y:225}, { x: 2011, y:135}, { x: 2012, y:152}],
|
|
name: "China",
|
|
},
|
|
{
|
|
points: [{ x: 2006, y:150}, { x: 2007, y:120}, { x: 2008, y:115}, { x: 2009, y:125},
|
|
{ x: 2010, y:132}, { x: 2011, y:137}, { x: 2012, y:110}],
|
|
name: "Canada",
|
|
}
|
|
],
|
|
|
|
// Bar
|
|
series: [
|
|
{
|
|
points: [{ x: 2006, y: 7.8 }, { x: 2007, y: 7.2}, { x: 2008, y: 6.8 }, { x: 2009, y: 10.7 },
|
|
{ x: 2010, y: 10.8}, { x: 2011, y: 9.8 }],
|
|
name: 'India'
|
|
},
|
|
{
|
|
points: [{ x: 2006, y: 4.8 }, { x: 2007, y: 4.6 }, { x: 2008, y: 7.2 }, { x: 2009, y: 9.3 },
|
|
{ x: 2010, y: 9.7}, { x: 2011, y: 9 }],
|
|
name: 'US'
|
|
}
|
|
],
|
|
|
|
// Stacked Area
|
|
series:
|
|
[
|
|
{
|
|
points: [{ x: 2002, y: 6 }, { x: 2003, y: 7.5 }, { x: 2004, y: 6 }, { x: 2005, y: 6.5 },
|
|
{ x: 2006, y: 7.4 }, { x: 2007, y: 7.9 }, { x: 2008, y: 7.5 }, { x: 2009, y: 8.5 },
|
|
{ x: 2010, y: 4.8 }, { x: 2011, y: 9.3 }],
|
|
name: 'US',
|
|
border :{color: 'transparent'},
|
|
opacity: 0.5,
|
|
fill: '#C4C24A'
|
|
}
|
|
],
|
|
|
|
// Area
|
|
series: [
|
|
{
|
|
points: [{ x: 1900, y: 4 }, { x: 1920, y: 3.0 },{ x: 1940, y: 3.8 }, { x: 1960, y: 3.4 },
|
|
{ x: 1980, y: 3.2 }, { x: 2000, y: 3.9 }],
|
|
name: 'Product A',
|
|
type: 'Area',
|
|
enableAnimation: true,
|
|
border:{color: 'transparent'},
|
|
opacity: 0.5,
|
|
fill:'#69D2E7'
|
|
},
|
|
{
|
|
points: [{ x: 1900, y: 2.6 }, { x: 1920, y: 2.8 },{ x: 1940, y: 2.6 }, { x: 1960, y: 3 },
|
|
{ x: 1980, y: 3.6 }, { x: 2000, y: 3 }],
|
|
name: 'Product B',
|
|
type: 'Area',
|
|
enableAnimation: true,
|
|
opacity: 0.5,
|
|
border: { color: 'transparent' },
|
|
fill: '#C4C24A'
|
|
},
|
|
{
|
|
points: [{ x: 1900, y: 2.8 }, { x: 1920, y: 2.5 },{ x: 1940, y: 2.8 }, { x: 1960, y: 3.2 },
|
|
{ x: 1980, y: 2.9 }, { x: 2000, y: 2 }],
|
|
name: 'Product C',
|
|
type: 'Area',
|
|
enableAnimation: true,
|
|
opacity: 0.5,
|
|
border:{color: 'transparent'},
|
|
fill: '#6A4B82'
|
|
}
|
|
]
|
|
*/
|
|
?>
|