pie charts legend toggle problem

[NajmeParticipant]

Hello,
I have three pie charts above my page and it shows different statics of data for each one it catches the data from server and create the piechart,
I have an issue with legends even these are three unrelated charts but each time I toggle one piechart legend it effects other legends as well, I recognize that somehow they are sharing same _itemsToggleState array, so each time toggle one off/on others are as well off/on.
could you please help me about it?
this is one of my piechart drawing code:

function GetPieChartDataData1(letfPadding, titlerightpadding, offsetx, toplegend) {
// var isUpdate = $(chartContainer).data().jqxChart !== void (0);
try {
var chartContainerelement1 = “#chartContainer1”;
var chartDiv1 = “#firstPiechart”;
var pieChartfunctionName1 = “GetStatusPieChartsData”;

$(chartContainerelement1).remove();
var chartname1 = chartContainerelement1.substring(1, chartContainerelement1.length);
$(chartDiv1).append(“<div id='” + chartname1 + “‘></div>”);
var sourcePieChartStatus1 = {};
sourcePieChartStatus1 =
{
datatype: “json”,
datafields: [
{ name: ‘category’ },
{ name: ‘statusKey’ },
{ name: ‘percent’ }
],
data: { totalNumberOfRecords: totalNumberOfRecords },
url: currentDomain + ‘Home/’ + pieChartfunctionName1
};

var dataAdapterpiechart1;
dataAdapterpiechart1 = new $.jqx.dataAdapter(sourcePieChartStatus1, {
async: true, autoBind: true,
loadComplete: function () {
console.log(“load completed”);
},
beforeLoadComplete: function (records) {

//pie chart
var chartSource1 = {};
chartSource1 = {
localdata: records,
datatype: ‘array’
}

dataAdapterpieSource1 = new $.jqx.dataAdapter(chartSource1);
var colorsArray = new Array();

colorsArray1 = [‘#ffff00’, ‘#ccff00’, ‘#ff0000’, ‘#00ffff’, ‘#aaaaaa’];
var colorschema1 = ‘scheme03’;
$.jqx._jqxChart.prototype.colorSchemes.push({ name: colorschema1, colors: colorsArray1 });
// prepare jqxChart settings
var settings1 = {};
var serriesGrp1 = [];
settings1 = {
title: globalResourceString.StopStatus,
description: “”,
source: dataAdapterpieSource1,
showBorderLine: false,
legendLayout: { left: letfPadding, top: toplegend, width: 400, height: 290, flow: ‘vertical’ },
padding: { left: 5, top: 0, right: 5, bottom: 0 },
titlePadding: { left: 5, top: 5, right: titlerightpadding, bottom: 5 },
colorScheme: colorschema1,
seriesGroups: [{}]
};
settings1.seriesGroups = seriesGroup1(offsetx, dataAdapterpieSource1);

//remove previouse chart to not conflict with new one before redraw new one
$(chartContainerelement1).children().remove();
//console.log(chartContainerelement1);
// setup the chart
var myChart1 = $(chartContainerelement1).jqxChart(settings1);
$(chartContainerelement1).on(‘toggle’, function (event) {
if (event.args)
console.log(event.args);
});

$(chartContainerelement1).unbind(‘click’).on(‘click’, function (event) {
if (event.args)
chartEventHandler(event, chartContainerelement1, $(chartContainerelement1).jqxChart(‘getInstance’));
});

}
});
} catch (e) {
console.log(e);
}
}

function seriesGroup1(offsetx) {
var seriesGroup1 = [];

seriesGroup1 = [
{
type: ‘pie’,
showLabels: false,
useGradient: false,
legendFormatFunction: function (value, index) {
var legendResult1 = value + ‘: ‘ + dataAdapterpieSource1.records[index].percent;
return legendResult1;
},
toolTipFormatFunction: toolTipCustomFormat1,
series:
[
{
offsetX: offsetx,
dataField: ‘percent’,
displayText: ‘category’,
labelRadius: -10,
initialAngle: 100,
radius: 75,
centerOffset: 0,
formatSettings: { decimalPlaces: 0 }
}
]
}

];

return seriesGroup1;
}

var toolTipCustomFormat1 = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
var valueCorected1 = dataAdapterpieSource1.records[itemIndex].category + “:” + value;
return valueCorected1;
};

Regards,
Najme

[HristoParticipant]

Hello Najme,

I would suggest you try without adding a custom color schemes and we will check is this resolve the issue.
Could you provide an example in jseditor or in jsfiddle, that I could use for testing purposes?
You should be sure each one Chart has own DataAdapter.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[NajmeParticipant]

Hello Hristo,
Thank you for answering me, I tried to reproduce it in the jsfiddle but somehow wasn’t possible, it worked fine there even I copy paste there everything,
except for that in my version, I have to get data from the server, unfortunately even I removed everything and make it simple piecharts but still each toggles effects other piecharts legends as well, please if you can help me would be great.?
here you have jsfiddle link I made:
http://jsfiddle.net/tanhabad/QpqF8/92/
although here also there is an issue, I want every time piecharts created also refresh the list of legends as well, here I have same data but when in real version I have dynamic data it toggles wrong legend square after reloading data it uses some indexing.

Best Regards,
Najme

[NajmeParticipant]

Hello Again,
I removed my old fashion jqx-all file using and imported all necessary jqx files and work like a charm.

Best Regards,
Najme

[HristoParticipant]

Hello Najme,

Thank you for the response.
I assume that this case has been resolved?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts