We have requirement of grid data can represented in chart form, grid can have multiple pages, Chart shows legend for first first page, but next page, legend is blank, tried using "destroy" method on igDataChart & igChartLegend but no luck. Any idea how can I get this working?
Thanks
Hello annasaheb,
Thank you for contacting Infragistics!
We received your support request concerning the legend only displaying once, and this case has been assigned to me. Infragistics is dedicated to helping you solve this issue. Our team and I have done an initial review of your case and I will create a sample to test this case. If you already have a sample that I can use as a starting point that will help to resolve the case faster. I am looking into this matter and will get back to you by the end of the day Monday with more information or questions for you.
Sincerely,Mike P.Developer Support EngineerInfragistics, Inc.www.infragistics.com
Thanks for quick answer, here is sample code that duplicates issue ( little different than mine). I couldn't attach file, but just copied code below.
// HTML Body
<table> <tr><td colspan=2> <input type="button" value="click here first" onclick="createChart()" /> <input type="button" value="Create here second" onclick="createPieChart()" /> <input type="button" value="Create here third" onclick="createPieChart1()" /> <td></td><tr><td> <div id="chart1"></div> </td><td> <div id="legend"></div> </td> </table>
// Javascript
var data1 = [ { "DateString": "1/1/2010", "Open": 1000, "High": 1019.75, "Low": 967.75, "Close": 995 }, { "DateString": "1/1/2010", "Open": 800, "High": 1019.75, "Low": 967.75, "Close": 995 }, { "DateString": "1/2/2010", "Open": 995, "High": 1016.75, "Low": 975, "Close": 1004 }, { "DateString": "1/2/2010", "Open": 925.5, "High": 1000.25, "Low": 912.75, "Close": 999.25 }, { "DateString": "1/3/2010", "Open": 940.25, "High": 1040.25, "Low": 920.75, "Close": 975.25 }, { "DateString": "1/3/2010", "Open": 1020.5, "High": 1060.25, "Low": 999.75, "Close": 1050.25 } ]; var data2 = [ { "DateString": "11/1/2011", "Open": 1000, "High": 1019.75, "Low": 967.75, "Close": 995 }, { "DateString": "11/2/2011", "Open": 800, "High": 1019.75, "Low": 967.75, "Close": 995 }, { "DateString": "11/3/2011", "Open": 995, "High": 1016.75, "Low": 975, "Close": 1004 }, { "DateString": "11/4/2011", "Open": 925.5, "High": 1000.25, "Low": 912.75, "Close": 999.25 }, { "DateString": "11/5/2011", "Open": 940.25, "High": 1040.25, "Low": 920.75, "Close": 975.25 }, { "DateString": "11/6/2011", "Open": 1020.5, "High": 1060.25, "Low": 999.75, "Close": 1050.25 } ];
function createPieChart() { $("#chart1").igDataChart("destroy"); $("#chart1").igPieChart("destroy"); $('#chart1').igPieChart({ dataSource: data1, width: '300px', height: '300px', valueMemberPath: 'Open', labelMemberPath: 'DateString', // explodedSlices: '0 1', radiusFactor: .8, showTooltip: true, tooltipTemplate: '<div class="tooltip">${item.DateString}</div><div>Open: ${item.Open}</div>', legend: { element: 'legend', type: 'item' } });
} function createPieChart1() { $("#chart1").igDataChart("destroy"); $("#chart1").igPieChart("destroy"); $('#chart1').igPieChart({ dataSource: data2, width: '300px', height: '300px', valueMemberPath: 'Open', labelMemberPath: 'DateString', // explodedSlices: '0 1', radiusFactor: .8, showTooltip: true, tooltipTemplate: '<div class="tooltip">${item.DateString}</div><div>Open: ${item.Open}</div>', legend: { element: 'legend', type: 'item' } });
}
function createChart() { $("#chart1").igDataChart("destroy"); $("#chart1").igPieChart("destroy"); $("#chart1").igDataChart({ width: "700px", height: "400px", legend: { element: 'legend'}, axes: [{ name: "xAxis", type: "categoryX", dataSource: data1, label: "Label", labelVisibility: "collapsed" }, { name: "yAxis", type: "numericY", labelVisibility: "visible" }], series: [{ name: "series", dataSource: data1, title: "Price Series", type: "financial", xAxis: "xAxis", yAxis: "yAxis", openMemberPath: "Open", highMemberPath: "High", lowMemberPath: "Low", closeMemberPath: "Close", trendLineBrush: "rgba(68, 172, 214, .8)", trendLineType: "exponentialAverage" }] }); // $("chart1").igDataChart("dataBind"); }
Thank you for the update. I have done some looking into this matter and have created a sample based on the sample code you have provided. With the code you have provided I have been able to see this issue. I am currently looking further into this matter to see what may be causing this issue. This is taking longer than I originally thought, I will continue looking into this matter and will provide you a progress update by the end of the day Thursday.
Thank you for your patience. I have done some further looking into this matter and have found how you can reuse the legend for multiple chats. To do this you will want to call destroy on the legend as well when changing chats. For example:
$("#legend").igChartLegend("destroy");
Please let me know if you have any questions concerning this matter.
Thanks lot, that worked.
Hello,
To display a label as a percentage you would use the formatLabel property:
http://help.infragistics.com/jQuery/2014.2/ui.igPieChart#options:formatLabel
As it describes you would use context.percentValue to see the percentage value that is associated with the slice.
Hi,
Iam using pie chart with MVC in my application. Can you please tell me how to display labels with percentage in Pie Chart like we do with XamPieChart. Here is my code
@(Html
.Infragistics()
.PieChart(Model)
.ID("chart")
.Width("200px")
.Height("300px")
.ValueMemberPath(label => label.Points)
.LabelMemberPath(label => label.Year)
.LabelsPosition(LabelsPosition.BestFit)
.Brushes(new List<string> { "#ffd320", "#ff420e", "#004586", "#579c1b" })
.Legend(legend => legend.ID("legend").LegendType(LegendType.Item))
.DataBind()
.Render()
)
Here I want to display Points in percentage in Pie Chart slices.Points is a double variable.Thanks in advance