@php
// $CountArray=['50','15','20','60','30'];
// $TitleArray=['s','c','d','f','g'];
$TitleArray=array();
$CountArray=array();
$DemographyId='';
$DisplayType='';
$DropDownNameId='';
foreach($GetFieldNames as $DemoId=>$FieldsName)
{
	$DemographyId=$DemoId;
	$FieldDetails=$FieldsDisplayType[$DemoId];
	$DisplayType=$FieldDetails['DisplayType'];
	$DropDownNameId=$FieldDetails['DropDownNameId'];
}
foreach($GetResult as $ResultKey=>$ResultValue)
{
	if($DisplayType==2 || $DisplayType==26)
	{
		$DisplayFinalValue=$ResultKey;
		if($DropDownNameId)
		{
			if($GetDropdownLists[$DropDownNameId])
			{
				$ChildDropDown=$GetDropdownLists[$DropDownNameId];
				if(array_key_exists($ResultKey,$ChildDropDown))
				{
					$DisplayFinalValue=$ChildDropDown[$ResultKey];
				}
			}
		}
		$TitleArray[]=$DisplayFinalValue;
	}
	else
	{
		$TitleArray[]=$ResultKey;
	}
	$CountArray[]=$ResultValue;
}
 $titles = json_encode($TitleArray); 
 $data_groups = json_encode($CountArray);
@endphp
    <div class="widget-header">
        <div class="row">
            <div class="col-xl-6 col-md-6 col-sm-12 col-12">
                <h5 class="text-primary"></h5>
            </div>
        </div>
		<div id="donut-chartNew">
        </div>

    <script> 
		var donutChart = {
		chart: {
			height: 350,
			type: 'donut',
			toolbar: {
			  show: true,
			}
		},
		// series: [44, 55, 41, 17],
		// labels: ['kkk', 'bbb', 'eee', 'ppp'],    
		series: ,
		labels: ,    
		responsive: [{
			breakpoint: 480,
			options: {
				chart: {
					width: 200
				},
				legend: {
					position: 'bottom'
				}
			}
		}]
	}

	var donut = new ApexCharts(
		document.querySelector("#donut-chartNew"),
		donutChart
	);

	donut.render();
    </script>
	</div>