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"); }