@php
$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)
	{
		$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);
 // echo "<pre>";
 // print_r($titles);
 // print_r($data_groups);
  // echo "</pre>";
@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="s-line">
        </div>
    <script> 
	var sline = {
	  chart: {
		height: 350,
		type: 'line',
		zoom: {
		  enabled: false
		},
		toolbar: {
		  show: false,
		}
	  },
	  dataLabels: {
		enabled: false
	  },
	  stroke: {
		curve: 'straight'
	  },
	  series: [{
		name: " count",
		data: 	  }],
	  grid: {
		row: {
		  colors: ['#f1f2f3', 'transparent'], // takes an array which will be repeated on columns
		  opacity: 0.5
		},
	  },
	  xaxis: {
		categories: ,
	  }
	}

	var chart = new ApexCharts(
	  document.querySelector("#s-line"),
	  sline
	);

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