CODEWITHSUNDEEP
jqueryflot
Jean-Marc Flamand
Jean-Marc Flamand

Reputation: 989

Flot chart: graph doesn't reflect changes to data

I am building an interactive chart using JQuery and flot libraries.

In the following example the user can change values in the input boxes but the chart doesn't reflect the changes.

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

Upvotes: 2

Views: 116

Answers (1)

Raidri
Raidri

Reputation: 17550

1) Your plot variable is defined inside the jQuery domReady function and is not accessible in the change() function. You can make it a global variable instead:

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

2) When using plot.setData() in the change() functions you have to give an array of data series just like in the first $.plot() call:

plot.setData([Point, Lines]);

Updated fiddle: http://jsfiddle.net/6Lw1vkhe/49/

Upvotes: 1

Related Questions