title: how can i format flot chart Data
body: <p>i am stuck on how to input a real-time int value from my data source and put into a flot chart !. my current problem is that i cant seems to figure how to change the x and y axis. The data or idea of how it would work is that i would have a source that provide a value every second all i need to do is to plot on to the graph. </p>
  
  <p><a href="http://i.stack.imgur.com/lgqYI.png" rel="nofollow">Here's is the link to the image of the graph look like</a></p>
  
  <p>Here is my code my problem is that how to change getRandomData() method into my data that feeds only one value every second. </p>
  
  <p>example i have a data <code>var energy = 10;</code> So the chart suppose to stay 10 until a new value appear </p>
  
  <p>Thanks sorry for any bad english</p>
  
  <pre><code>    $(function() {
  
          /*
           * Flot Interactive Chart
           * -----------------------
           */
          // We use an inline data source in the example, usually data would
          // be fetched from a server
          var data = [], totalPoints = 100;
          function getRandomData() {
  
              if (data.length &gt; 0)
                  data = data.slice(1);
  
              // Do a random walk
              while (data.length &lt; totalPoints) {
  
                  var prev = data.length &gt; 0 ? data[data.length - 1] : 50,
                          y = prev + Math.random() * 10 - 5;
  
                  data.push(y);
              }
  
              // Zip the generated y values with the x values
              var res = [];
              for (var i = 0; i &lt; data.length; ++i) {
                  res.push([i, data[i]]);
              }
              console.log(res);
              return res;
          }
  
          var interactive_plot = $.plot("#interactive", [getRandomData()], {
              grid: {
                  borderColor: "#f3f3f3",
                  borderWidth: 1,
                  tickColor: "#f3f3f3"
              },
              series: {
                  shadowSize: 0, // Drawing is faster without shadows
                  color: "#3c8dbc"
              },
              lines: {
                  fill: true, //Converts the line chart to area chart
                  color: "#3c8dbc"
              },
              yaxis: {
                  show: true
              },
              xaxis: {
                  show: false
              }
          });
  
          var updateInterval = 500; //Fetch data ever x milliseconds
          var realtime = "on"; //If == to on then fetch data every x seconds. else stop fetching
          function update() {
  
              interactive_plot.setData([getRandomData()]);
  
              // Since the axes don't change, we don't need to call plot.setupGrid()
              interactive_plot.draw();
              if (realtime === "on")
                  setTimeout(update, updateInterval);
          }
  
          //INITIALIZE REALTIME DATA FETCHING
          if (realtime === "on") {
              update();
          }
          //REALTIME TOGGLE
          $("#realtime .btn").click(function() {
              if ($(this).data("toggle") === "on") {
                  realtime = "on";
              }
              else {
                  realtime = "off";
              }
              update();
          });
  </code></pre>