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

Parents
No Data
Reply
  • 10240
    posted

    Hi Shahul, 

    Would presenting this information in a tooltip be an option for you? You can use a tooltipTemplate to display the values when the user hovers over. This is a link to our online sample: http://www.igniteui.com/data-chart/series-tooltips

    You are correct in that the igDataChart does not have a click event (or an event similar to the igPieChart SliceClick). A click event will be a new product idea for the igDataChart.

    Infragistics invites you to submit this as a new product idea for the igDataChart. To suggest a new product idea you can do so by navigating to http://ideas.infragistics.com  The steps are easy to do: 

    1.       Create a new UserVoice account and log in to the Infragistics Product Ideas site at http://ideas.infragistics.com

    2.       Navigate to the product / platform channel of your choice (e.g. WPF, Windows Forms, ASP.NET, HTML5 / Ignite UI, iOS / NucliOS, etc.) 

    3.       Review the feature suggestions already posted by the community. 

    4.       Vote for the features you’d like to see added to the product. 

    5.       If the feature you’re looking for has not been posted, you can add your own product idea. Make sure to be specific and provide as much detail as possible. Explain the context in which a feature would be used, why it is needed, why it can’t be accomplished today, and who would benefit from it. You can even add screenshots to build a stronger case. Remember that for your suggestion to be successful, you need other members of the community to vote for it. Be convincing! 

    With this system, you are in the driver’s seat by submitting your product ideas. You can even track the progress of your ideas at any time, see how many votes it got, read comments from other developers in the community, and see if someone from the product team has additional questions for you. 

    Please let me know if you need any additional assistance regarding this matter.

Children