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>