Легенды не обновляются после применения фильтра в Google Charts. ⇐ Jquery

[Anonymous]

на диаграмме загрузки загружено как


После применения выбора и нажатия кнопки «Сбросить» (X в конце)
Диаграмма выглядит следующим образом


У меня есть три значения в выбираемом

• Север
• Юг
• Восток

При выборе Севера диаграмма правильно фильтрует данные, при нажатии кнопки «Сбросить» легенды не сортируются в исходное положение. Вместо этого Север дважды добавляется в легенду.
Вставляю сюда свой код









State 

CSS-код:
.st_accordion > div.ui-accordion-content {
padding: 6px 6px 6px 6px;
}
.st_selectable {
list-style-type: none;
margin: 0;
padding: 0;
}
.st_selectable li {
background-color: #f6f6f6;
border: 1px solid #c5c5c5;
cursor: pointer;
font-size: 8pt;
margin-top: 2px;
padding: 6px 8px 6px 8px;
}
.st_selectable .ui-selecting {
background-color: #99ccff;
border: 1px solid #809fff;
}
.st_selectable .ui-selected {
background-color: #007fff;
border: 1px solid #003eff;
color: #ffffff;
}
.ui-button-icon-only {
float: right;
height: 18px;
margin: 0px;
min-width: 18px;
width: 18px;
z-index: 1;
}

.ui-widget {
font-size: 8pt;
}

JS-скрипт:





var click = 0;

function filter_st_charts(){
var st_chartview={};
var st_selectedvalues = [];

var r_row;
var r_view = {
columns: [0]
};

$('.st_selectable li.ui-selected').each(function(index, selected) {
st_selectedvalues.push(selected.innerHTML);
});

if(st_selectedvalues.length > 0){

for (var i = 0; i < st_selectedvalues.length; i++) {
r_row = r_columnTable.getFilteredRows([{column: 1, value: st_selectedvalues}])[0];
r_view.columns.push(r_columnTable.getValue(r_row, 0));
}
}
r_view.columns.sort(function (a, b) {
return (a - b);
});

st_chart.setView(r_view);
st_chart.draw();
}

onload_st_filter_values = st_initState.selectedValues;
google.visualization.events.addListener(st_chart,'ready',function() {
var filt_values = onload_st_filter_values;
console.log("Inside ready");
if(click==0){
$.each(filt_values.filter(uniquelists), function(index, value) {
$('.st_selectable').append('' + value + '');
});
}

$('.st_accordion').accordion({
active: false,
create: function () {
$('.st_selectable').selectable({
filter: '*',
stop: filter_st_charts
});
},
collapsible: true,
heightStyle: 'content'
});

$('.button-reset').button();
$('.button-reset').on('click', clearFilter);

click++

})

function clearFilter(sender) {
console.log("Inside Clear Filter");
var accordion;
sender.preventDefault();
sender.stopPropagation();

accordion = $(sender.target).closest('.st_accordion');
accordion.find('.st_selectable li').removeClass('st_selectable .ui-selected');
accordion.accordion('option', 'active', false);
filter_st_charts();
return false;
}



Подробнее здесь: https://stackoverflow.com/questions/791 ... gle-charts