function draw() {

	var from =document.getElementById("chart_report_from").value;
	var to =document.getElementById("chart_report_to").value;
	
    
	var class_id =$("#chart_class_id").val();
	var group_id=$("#chart_group_id").val();
	var classification_id=$("#chart_classification_id").val();

	var elem = document.getElementById('chart_');
	elem.style.visibility = 'visible';

	$.ajax({
		type : 'GET',
		url : 'create/draw/'+ class_id +"/"+group_id+"/"+classification_id +"/"+from+"/"+to,
		/*data : {
			'_token' : $('meta[name="csrf-token"]').attr('content')
		},
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		  },*/
		
		   
		success : function(data) {

			 
 
	  
		 
			console.log("data.mains_", data.mains_);
			$('#draw_chart_').empty();
			var mains = data.mains_ ;
			//['Spotify', 34],
			var arr=[];

			
			var colors = ["#00a9d7","#318dde","#1cd0bb","#dfdfdf","#ffa400", "#e94649",  "#8bc652", "#005277", "#fc9550",  "#c4c24b",  "#6faab0" , "#FF6373","#36A2EB","#FFCE56"];
			
			var total_sum=0;
			for (var i = 0; i < mains.length; ++i) {
					total_sum = total_sum + parseInt(mains[i].sum);
			}

			for (var i = 0; i < mains.length; ++i) {
				/*var sub_arr = [];
				sub_arr[0] = mains[i].waste.name ;
				sub_arr[1] = mains[i].sum;
				*/
				 
				var val =   Math.round(( parseInt(mains[i].sum) / total_sum )*100);
				 
				var item={
					data: mains[i].sum,
					label: mains[i].waste.name,
					color : colors.length >  mains.length ? colors[i]:''
				  };

				arr[i] = item;

            var name = mains[i].waste.name ;
			var  sum = mains[i].sum; 
			var color = arr[i].color;
			if( mains[i].waste.unit == 'كجم') {

				var style = "width:2px; background-color:"+color+"!important";
				$("table").find('tbody').append("<tr>  <td style='width:100px'>"+name+"</td> <td style='width:50px'> "+ sum +"</td> <td style='width:50px'></td></tr>");
			}else {
				$("table").find('tbody').append("<tr><td style='width:100px'>"+name+"</td> <td style='width:50px'></td> <td style='width:50px'>"+ sum +"</td></tr>");	
			}
			}
	  
			
		console.log(data.supplier_);
		console.log(arr);
		var supplier_name = data.supplier_.name;
		var class_name = data.class_.name;
		var group_name = data.group_.name;
		var classification_name = data.classification_.name;
		var from = data.from;
		var to = data.to;
		var title2 = supplier_name +" | "+class_name + " | "+group_name+" | "+classification_name+" |  الفترة من "+from+" الي  "+to + " | Chart-Report" ;
		document.getElementById("title_1").innerHTML = "تـقـريـر"; 
		document.getElementById("title_2").innerHTML = title2;

		//strt 


		$.plot("#donut-chart", arr, {
			series: {
			  pie: {
				show: true,
				radius: 1,
				innerRadius: 0.5,
				label: {
				  show: true,
				  radius: 2 / 3,
				  formatter: labelFormatter,
				  threshold: 0.01,
				   
				},

				 
					
				 
			  },

			  
			},    
			grid:{
				borderWidth:2, hoverable: true, clickable: true
			},
			legend: {
				show:true,
				position:'ne'   // north east, "ne" or "nw" or "se" or "sw"
			  },

		  });


		//end

	  

  
		function labelFormatter(label, series) {
			return '<div style="font-size:16px; text-align:center; padding:2px; color: #fff; font-weight: 900;">'
				+ Math.round(series.percent) + "%</div>";
		  }
		



 

	  


		},
		error : function(request, status, error) {
			console.log(error);
		}
	});
  
		 
	}

