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
please check out seriesLeftMouseButtonDown and seriesLeftMouseButtonUp events, they should provide you everything you need.
-Graham
http://help.infragistics.com/jQuery/2014.1/ui.igDataChart
Sorry, that's seriesMouseLeftButtonDown/Up