Динамическое изменение значений диаграммы в зависимости от значения ползунков

[Volchen0ck]

!!! В песочнице сохранить не могу - выдает error - 500 (Service unavailable (with message)). Поэтому пример в аттаче - sliderDiagram.zip.
Диаграма появится, если сдвинуть все ползунки поочереди (от первого к последнему), когда последний изменит свое значение - появится диаграмма.



Использую http://www.highcharts.com/demo/pie-legend за основу для диаграммы.

В примере - данные для диаграммы - статичны, в моем случае, значения нужно подтянуть из ползунков.

Не использую clip/jquery ui и т.д. для ползунка, т.к. функционал будет работать на IE11 на touch девайсе, из рабочих вариантов остался только input type="range". Он корректно работает на девайсе (и с мышью и с "пальцем"). (Note: Lenovo ThinkPad Helix i7 + IE 11 ).

Для слайдеров, использую такую конструкцию:

<input type="range" id="slider" min="1" max="5" onchange="this.id=this.value" value="1">

Скрипт:

$('#slider2').change(function () {
                 var b = this.value;
                 z2 = b * p;
                 console.log('z2=', z2);

Чтобы работало - функция change для кадлого последующего слайдера, вставлена в предыдущую. ну и соответственно, диаграмма обновляется, когда сдвигаем последний слайдер.

Нужно, чтобы диаграмма обновлялась при изменении значения каждого отдельно взятого слайдера.
Дайте, пожалуйста, пинка в правильном направлении.

[jsnb]

Так а зачем они вложены то в друг друга? Чтобы undefined что ли в диаграмму не попадало? Ну так что мешает задать значения по умолчанию и при каждом изменении слайдера обновлять данные? Там вроде в API методы для обновления данных есть.

[Volchen0ck]

да, чтобы undefined в диаграмму не попадало. в диаграмме используются z1 - z5, которые изменяются, в зависимости, от изменения значения слайдера. Туплю на моменте, как передать значения по отдельности и обновлять данные, чтобы при этом не было undefined.

[jsnb]

да, чтобы undefined в диаграмму не попадало. в диаграмме используются z1 - z5, которые изменяются, в зависимости, от изменения значения слайдера. Туплю на моменте, как передать значения по отдельности и обновлять данные, чтобы при этом не было undefined.

Ну у тебя же когда ползунки стоят в левом положении диаграмма как-то пересчитывается. Вот и задай эти значения для переменных при объявлении. При загрузке же страницы ползунки будут в левом положении, значит value у них будет 1, значит все твои z1-z5 будут равны p. Ну так и напиши var z1 = p, z2 = p и т.д. Если по умолчанию ползунки не в левом положении то смотри чему равно их value и умножаешь. Ну а при каждом change ползунков перестраивашь диаграму с изменившимися данными. Там в API есть setData: http://api.highcharts.com/highcharts#Series.setData
Вроде то что надо.

[Volchen0ck]

глобально присваиваю z1=p, z2= p и т.д. - диаграмма делится на 6 равных частей. Согласно докам, после добавления/изменения вызываю chart.redraw().

$('#slider1').change(function () {
var a = this.value; z1 = a * p;
// $('#container').highcharts().redraw();
chart.redraw()
});
значения не видит, в консоли error - undefined or null reference.

Если можно, "ткните носом".

[jsnb]

Так redraw и так там по умолчанию автоматически делается после изменения данных. От того что переменный поменялись данные автоматически в диаграму не попадут. Я же дал ссылку на метод, который обновляет данные. Вызываете его, передаете новый data массив с новыми значениями переменных и оно само вам красиво всё перерисует. Там же даже по ссылке демка есть как оно работает.
Кстати, вот это вот в слайдерах зачем:

onchange="this.id=this.value"

?
Просто если это убрать, то можно вообще 1 обработчик повесить на все эти слайдеры который будет по id определять какую z ему надо обновить.

[Volchen0ck]

тяжело быть бестолковым! сорри.

$('.slider').click(function() {
                var chart = $('#container').highcharts();
                chart.series[0].setData([z1, z2, z3, z4, z5, z6]);
       });

,

жаль только не обновляются так красиво, как в первый раз, когда страница загружается.

Спасибо большое за помощь!

[jsnb]

[JS]chart.series[0].setData([z1, z2, z3, z4, z5, z6]);

А так текстовые метки на диаграмме не теряются?

жаль только не обновляются так красиво, как в первый раз, когда страница загружается.

Так никто не мешает ее пересоздавать с новыми данными каждый раз. Только перед созданием новой надо уничтожить через destroy() старую, чтобы память освободить. Ну и это по ресурсам более затратно, особенно мобильные платформы могут быть чувствительны.

[Volchen0ck]

Текстовые метки можно вернуть вот так

series: [{
                    name: 'form',
                    data: [['Value1', z1],
                             ['Value2',z2], 
                             ['Value3',z3], 
                             ['Value4',z4],
                             ['Value5', z5],
                             ['Value6', z6]]
                }]

Не могу найти, можно ли использовать картинки, в качестве меток, а не текст. Скорее всего нельзя.