Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
35
Click event for igDataChart
posted

I have implemented the same in Piechart using Slice Event. But I am not able to implement the option in Data Chart. There is no click event available in the data chart. Is there click event available, so that on clicking each bar (in Datachart), I will able to show the result data as pop up.

My code is below:

$("#chart").igDataChart({
width: "100%",
height: "400px",
title: "Population per Country",
subtitle: "A comparison of population in 1995 and 2005",
dataSource: data,

axes: [

{
name: "NameAxis",
type: "categoryX",
title: "Country",
label: "CountryName"
},
{
name: "PopulationAxis",
type: "numericY",
minimumValue: 0,
title: "Millions of People",
}
],
series: [
{
name: "2005Population",
type: "column",
title: "2005 Population",
xAxis: "NameAxis",
yAxis: "PopulationAxis",
valueMemberPath: "Pop2005",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
showTooltip: true,
},
{
name: "categorySeries",
type: "categoryToolTipLayer",
useInterpolation: false,
transitionDuration: 150
}]
});

$("#chart1").igPieChart({
width: "435px",
height: "435px",
dataSource: data, //JSON data defined above
valueMemberPath: "Pop2008",
labelMemberPath: "CountryName",
labelsPosition: "bestFit",
showTooltip: true,
tooltipTemplate: "<div class='ui-chart-tooltip'><div class='bold'>${item.CountryName}</div><div>Population: <label class='bold'>${item.Pop2008}</label></div></div>",
sliceClick: function (evt, ui) {
$('#dataflush').text("CountryName: " + ui.slice.item.CountryName + "; Pop2008: " + ui.slice.item.Pop2008);
var url ='/Reports/GetStateSubCodes?diseaseStateID=' + currentsel + '&diagnosisCodesTypeID=11751';
$.getJSON(url, function (locationsArray) {
$.each(locationsArray, function (i, item) {
$('#dataflush').append('<p>' + item.text + ':' + item.value + '</p>');
});
});


$('#myModal').removeData("modal");
$('#myModal').css('width', '800px');
$('#myModal').css('text-align', 'center');
$('#myModal').modal({ remote: $(this).attr("url") });
}
});

I have implemented the same in Pie Chart