Reply To: Apply dropdown filter in php with database search

[Ganesh]

Thank you so much Manoj Mohan. It worked great with canvasjs_db for column chart :)
But when I tried to change to pie chart with my database data, the data displayed is correct but the legend value for each of my topic is displayed as “false”. Where do I need to change/modify in order to get the correct label?

Much thanks for your help!

<script type="text/javascript">
$(document).ready(function () {
		var dataPoints = [];
		var chart = new CanvasJS.Chart("chartContainer",
		{
			title: {
				text: "Skills Distribution: Select Year From Dropdown",
				verticalAlign: "top"
			},

			data: [{
				type: "pie", //change type to bar, line, area, pie, etc  
				startAngle: 25,
				toolTipContent: "<b>{label}</b>: {y}",
				showInLegend: "true",
				legendText: "{label}",
				indexLabelFontSize: 16,
				indexLabelPlacement: "inside",
				indexLabel: "{y}",
				dataPoints: dataPoints
			}]
		});
		chart.render()
		
		 $.getJSON("getYear.php", function(result){
			$.each(result, function(i, field){
				$(".dropdown").append("<option value='"+field+"'>"+field+"</option>");
			});
		 });
		 
		 
		 $( ".dropdown" ).change(function() {
			chart.options.data[0].dataPoints = [];
			var e = document.getElementById("dd");
			var selectedYear = e.options[e.selectedIndex].value;
			if( !isNaN(Number(selectedYear)) ) {
				chart.options.title.text = "Skills Distribution for Year: " + selectedYear;
				chart.options.title.verticalAlign = "top";
				var data = { "year" : selectedYear }
				$.getJSON("getData.php", data, function(result){
					chart.options.data[0].dataPoints = result;
					chart.render();
				})
			} else {
				chart.options.title.text = "Select Year From Dropdown";
				chart.options.title.verticalAlign = "top";
			}
			chart.render()
		});
});      
</script>

• This reply was modified 3 years, 10 months ago by Ganesh.