График флота: график не отражает изменений в данных

Question

Я строию интерактивную диаграмму, используя JQuery и flot библиотеки.

В следующем примере пользователь может изменять значения в полях ввода, но диаграмма не отражает изменений.

HTML

<br/> 
<br/> 
<div id="placeholder" style="width:400px;height:300px;"></div> 
<input id="UpdatePointx" type="text"> 
<input id="UpdatePointy" type="text"> 
<input id="SetValue" value="Set Values" type="button"> 

Javascript

var Point = { 
    label: "TEW", 
    points: { 
    show: true 
    }, 
    data: [ 
    [10, 5] 
    ] 
}; 
var Lines = { 
    label: "Line", 
    points: { 
    show: true 
    }, 
    data: [ 
    [0, 0], 
    [1, 1], 
    [2, 2], 
    [3, 3], 
    [4, 4], 
    [5, 5], 
    [6, 6], 
    [7, 7], 
    [8, 8], 
    [9, 9] 
    ] 
}; 

$("[id='SetValue']").click(function() { 
    alert("Set values in the input boxes"); 
    var mypt1 = Point.data[0][0]; 
    var mypt2 = Point.data[0][1]; 
    $('#UpdatePointx').val(mypt1.toString()); 
    $('#UpdatePointy').val(mypt2.toString()); 
}); 


$("[id='UpdatePointx']").change(function() { 
    alert("UpdatePointx"); 
    var pointx = $('#UpdatePointx').val(); 
    Point.data[0][0] = pointx; 
    alert(Point.data[0][0].toString()); 
    //$.plot; 
    plot.setData(Point); 
    plot.setupGrid(); 
    plot.draw(); 
}); 

$("[id='UpdatePointy']").change(function() { 
    alert("UpdatePointy"); 
    var pointy = $('#UpdatePointy').val(); 
    Point.data[0][1] = pointy; 
    alert(Point.data[0][1].toString()); 
    //$.plot; 
    plot.setData(Point); 
    plot.setupGrid(); 
    plot.draw(); 
}); 

$(function() { 

    var options = { 
    series: { 
     legend: { 
     show: true 
     }, 
     lines: { 
     show: true 
     }, 
    } 
    }; 

    var plot = $.plot($("#placeholder"), [Point, Lines], options); 
}); 

jsfiddle

Answer 1

1) Ваша plot переменная определена внутри функции JQuery domReady и не доступны в функции change(). Вы можете сделать это глобальную переменное вместо:

plot = $.plot($("#placeholder"), [Point, Lines], options); 

2) При использовании plot.setData() в change() функциях, которые вы должны дать массив рядов данных так же, как в первом $.plot() вызова:

plot.setData([Point, Lines]); 

Обновлено fiddle: http://jsfiddle.net/6Lw1vkhe/49/