<?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'
  }
]
*/
?>