anchor.diff:  ,field("Warn Session size","sessionSize","100",true,{_appendix:"KB",_bottom:"Warn in debugging, if the current session is above the following (in KB) size."},"text50")
   ,group("Metrics Tab","",2)
   ,field("Metrics","tab_Metrics","Enabled",true,"Select the Metrics tab to show on debugOutput","checkbox","Enabled")
  -,field("Charts","metrics_charts","HeapChart,NonHeapChart,WholeSystem,LuceeProcess",false,"Select the chart to show on metrics Tab. It will show only if the metrics tabs is enabled","checkbox","HeapChart,NonHeapChart,WholeSystem,LuceeProcess")
  +,field("Charts","metrics_charts","HeapChart,NonHeapChart,WholeSystem",false,"Select the chart to show on metrics Tab. It will show only if the metrics tabs is enabled","checkbox","HeapChart,NonHeapChart,WholeSystem")
   ,group("Reference Tab","",2)
   ,field("Reference","tab_Reference","Enabled",true,"Select the Reference tab to show on DebugOutput","checkbox","Enabled")
   );
  
positive.code: 			</cfif>
  		</cfloop>
  		<cfset variables.chartStr = {}>
  		<cfloop list="#arguments.custom.metrics_Charts#" index="i">
  			<cfif i EQ "HeapChart">
  				<cfset variables.chartStr[i] = "heap">
  			<cfelseif i EQ "NonHeapChart">
  				<cfset variables.chartStr[i] = "nonheap">
  			<cfelseif i EQ "WholeSystem">
  				<cfset variables.chartStr[i] = "cpuSystem">
  			<cfelseif i EQ "LuceeProcess">
  				<cfset variables.chartStr[i] = "cpuProcess">
  			</cfif>
  		</cfloop>
  
  		<cfset variables.tbsStr = {}>
  		<cfloop list="#variables.tabsPresent#" index="i">
  
negative.code: 					}
  				}
  			</script>
  			<cfif enableTab("metrics") && structCount(variables.chartStr) NEQ 0>
  
  				<script>
  					labels={'heap':"Heap",'nonheap':"Non-Heap",'cpuSystem':"Whole System"};
  					function requestData(){
  						jQuery.ajax({
  							type: "POST",
  							url: "/lucee-server/admin/debug/chartProcess.cfc?method=sysMetric",
  							success: function(result){
  								$.each(#serializeJSON( variables.chartStr )#,function(index,chrt){
  									if(index == "WholeSystem") {
  										cpuSystemSeries1 = cpuSystemChartOption.series[0].data; //*charts*.series[0].data
  										cpuSystemSeries1.push(result["cpuSystem"]); // push the value into series[0].data
  										cpuSystemSeries2 = cpuSystemChartOption.series[1].data; //*charts*.series[0].data
  										cpuSystemSeries2.push(result["cpuProcess"]); // push the value into series[0].data
  										cpuSystemChartOption.series[0].data = cpuSystemSeries1;
  										cpuSystemChartOption.series[1].data = cpuSystemSeries2;
  										if(cpuSystemChartOption.series[0].data.length > 60){
  											cpuSystemChartOption.series[0].data.shift(); //shift the array
  										}
  										if(cpuSystemChartOption.series[1].data.length > 60){
  											cpuSystemChartOption.series[1].data.shift(); //shift the array
  										}
  										cpuSystemChartOption.xAxis[0].data.push(new Date().toLocaleTimeString()); // current time
  										if(cpuSystemChartOption.xAxis[0].data.length > 60){
  										cpuSystemChartOption.xAxis[0].data.shift(); //shift the Time value
  										}
  										window[chrt].setOption(cpuSystemChartOption); // passed the data into the chats
  			 							return true;
  									}
  									window["series_"+chrt] = window[chrt+"Chart"].series[0].data; //*charts*.series[0].data
  									window["series_"+chrt].push(result[chrt]); // push the value into series[0].data
  									window[chrt+"Chart"].series[0].data = window["series_"+chrt];
  									if(window[chrt+"Chart"].series[0].data.length > 60){
  									window[chrt+"Chart"].series[0].data.shift(); //shift the array
  									}
  									window[chrt+"Chart"].xAxis[0].data.push(new Date().toLocaleTimeString()); // current time
  									if(window[chrt+"Chart"].xAxis[0].data.length > 60){
  									window[chrt+"Chart"].xAxis[0].data.shift(); //shift the Time value
  									}
  									window[chrt].setOption(window[chrt+"Chart"]); // passed the data into the chats
  								});
  								setTimeout(requestData, 1000);
  							}
  						})
  					}
  					var dDate=[new Date().toLocaleTimeString()]; // current time
  
  					// intialize charts
  
  					$.each(#serializeJSON( variables.chartStr )#, function(i, data){
  						if(i == "WholeSystem") {
  							cpuSystem = echarts.init(document.getElementById('cpuSystem'),'macarons'); // intialize echarts
  							cpuSystemChartOption = {
  								backgroundColor: ["##EFEDE5"],
  								tooltip : {'trigger':'axis',
  									formatter : function (params) {
  										var series2 = "";
  										if(params.length == 2) {
  											series2 =  params[1][0] + ": "+ params[1][2] + "%" + '<br>' +params[0][1];
  										}
  										return 'Series' + "<br>" + params[0][0] + ": " + params[0][2] + "%" + '<br>'  + series2;
  									}
  								},
  								legend: {
  									data:['System CPU', 'Lucee CPU']
  								},
  
  								color: ["##3399CC", "##BF4F36"],
  								grid : {
  									width: '82%',
  									height: '65%',
  									x:'30px',
  									y:'25px'
  								},
  								xAxis : [{
  									'type':'category',
  									'boundaryGap' : false,
  									'data':[0]
  								}],
  								yAxis : [{
  									'type':'value',
  									'min':'0',
  									'max':'100',
  									'splitNumber': 2
  								}],
  								series : [
  									{
  									'name': 'System CPU',
  									'type':'line',
  									smooth:true,
  									itemStyle: {normal: {areaStyle: {type: 'default'}}},
  									'data': [0]
  									},
  									{
  									'name': 'Lucee CPU',
  									'type':'line',
  									smooth:true,
  									itemStyle: {normal: {areaStyle: {type: 'default'}}},
  									'data': [0]
  									}
  
  								]
  							};
  							cpuSystem.setOption(cpuSystemChartOption); // passed the data into the chats
  				 			return true;
  						}
  						// console.log(i);
  						window[data] = echarts.init(document.getElementById(data),'macarons'); // intialize echarts
  						window[data+"Chart"] = {
  							backgroundColor: ["##EFEDE5"],
  							tooltip : {'trigger':'axis',
  								formatter : function (params) {
  									return 'Series' + "<br>" + params[0][0] + ": " + params[0][2] + "%" + '<br>' +params[0][1] ;
  								}
  							},
  
  							color: ["##3399CC", "##BF4F36"],
  							grid : {
  								width: '82%',
  								height: '65%',
  								x:'30px',
  								y:'25px'
  							},
  							xAxis : [{
  								'type':'category',
  								'boundaryGap' : false,
  								'data':[0]
  							}],
  							yAxis : [{
  								'type':'value',
  								'min':'0',
  								'max':'100',
  								'splitNumber': 2
  							}],
  							series : [
  								{
  								'name': labels[data] +' Memory',
  								'type':'line',
  								smooth:true,
  								itemStyle: {normal: {areaStyle: {type: 'default'}}},
  								'data': [0]
  								}
  							]
  						}; // data
  						window[data].setOption(window[data+"Chart"]); // passed the data into the chats
  					});
  					
  					 // data
  					// console.log(cpuSystemChartOption);
  			        requestData();
  				</script>
  			</cfif>
  			<cfif enableTab("Reference")>
  				<script>
  