Muti-bar column Chart with Legend from Datatable - asp.net

Question

I am trying to plot a mutibar column chart with legend. This is my code. The code is seems to be working but its not adding legend in an appropriate format. I'm adding screenshots of my data table and the output coming from my code. The legend should be showing Different types of priorities but its showing "Legend Text" everywhere.
Output
Datatable
//Plotting Matrix Chart
chartMatrix.Visible = true;
LoadChartData(dtHourvsPriorityMatrix);
chartMatrix.Series["Priority"].ChartType = SeriesChartType.Column;
chartMatrix.Series["Priority"]["DrawingStyle"] = "Emboss";
//chartMatrix.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
chartMatrix.Series["Priority"].IsValueShownAsLabel = true;
// Create a new legend called "Legend".
chartMatrix.Legends.Add(new Legend("Legend"));
// Set Docking of the Legend chart to the Default Chart Area.
chartMatrix.Legends["Legend"].DockedToChartArea = "ChartAreaF";
// Assign the legend to Series=Priority.
chartMatrix.Series["Priority"].Legend = "Legend";
chartMatrix.Series["Priority"].IsVisibleInLegend = true;
LegendCellColumn lcc = new LegendCellColumn("Priority", LegendCellColumnType.Text, "LEGENDTEXT");
lcc.HeaderFont = new System.Drawing.Font("Trebuchet MS", 12F, System.Drawing.FontStyle.Bold);
chartMatrix.Legends["Legend"].CellColumns.Add(lcc);
private void LoadChartData(DataTable initialDataSource)
{
for (int i = 1; i < initialDataSource.Columns.Count; i++)
{
Series series = new Series();
foreach (DataRow dr in initialDataSource.Rows)
{
int y = (int)dr[i];
series.Points.AddXY(dr["Hour"].ToString(), y);
}
chartMatrix.Series.Add(series);
}
}

Answer 1

Try to use canvasjs chart.
Use web service for binding data
<script type="text/javascript">
$(document).ready(function () {
var district = $('#ContentPlaceHolder1_hiddistrict').val();
var assembly = $('#ContentPlaceHolder1_hidassembly').val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "../WebMyVoterService.asmx/GenderWise",
data: '{"districtid":"' + district + '","assembly" :"' + assembly + '" }',
processData: false,
success: OnSuccess,
failure: function (response) {
alert(response);
},
error: function (response) {
alert(response);
}
});
function OnSuccess(response) {
var dpmale = [];
var dpfemale = [];
for (var i = 0; i < response.d.length; i++) {
var obj = response.d[i];
var datamale =
{
y: parseInt(obj.male),
label: obj.boothno,
};
var datafemale =
{
y: parseInt(obj.female),
label: obj.boothno,
};
dpmale.push(datamale);
dpfemale.push(datafemale);
}
var chart = new CanvasJS.Chart("chartContainerbar", {
animationEnabled: true,
axisX: {
interval: 1,
labelFontSize: 10,
lineThickness: 0,
},
axisY2: {
valueFormatString: "0",
lineThickness: 0,
labelFontSize: 10,
},
toolTip: {
shared: true
},
legend: {
verticalAlign: "top",
horizontalAlign: "center",
fontSize: 10,
},
data: [{
type: "stackedBar",
showInLegend: true,
name: "Male",
axisYType: "secondary",
color: "#f8d347",
dataPoints: dpmale
},
{
type: "stackedBar",
showInLegend: true,
name: "Female",
axisYType: "secondary",
color: "#6ccac9",
dataPoints: dpfemale
}
]
});
chart.render();
}
});
</script>
URL : http://canvasjs.com/