var iframePhone,
    $interactiveIframe = $('#interactive-iframe'),
    graph;
    graphSamplePeriod = 0.05;

function setupGrapher(callback) {
  var graphOptions = {
      title:  "Area versus Applied Pressure",
      xlabel:  "Model Time (ps)",
      ylabel: "Pressure Times Area (pN⋅nm)",
      xmax:   100,
      xmin:   0,
      ymax:   2000,
      ymin:   0,
      xTickCount: 4,
      yTickCount: 5,
      xFormatter: ".3r",
      yFormatter: ".2r",
      sample: graphSamplePeriod,
      realTime: true,
      fontScaleRelativeToParent: true
    };

  // private functions
  function addEventHook(name, func, props) {
    var privateName = name + '.graph';
    if (iframePhone) {
      iframePhone.addDispatchListener(privateName,func, props);
    }
  }

  function removeEventHook(name) {
    var privateName = name + '.graph';
    if (iframePhone) {
      iframePhone.removeDispatchListener(privateName);
    }
  }

  function addIframeEventListeners() {
    addEventHook("tick", function(props) {
      updateGraph(props);
    }, ['pressure', 'pressureTimesArea', 'area']);

    addEventHook('play', function(props) {
      if (graph.numberOfPoints() && props.tickCounter < graph.numberOfPoints()) {
        resetGraphData(props.tickCounter);
        graph.reset('#graph', graphOptions);
      }
    }, ['tickCounter']);

    addEventHook('reset', function(props) {
      renderGraph();
    }, ['displayTimePerTick']);

    addEventHook('stepForward', function(props) {
      if (props.newStep) {
        updateGraph();
      } else {
        graph.updateOrRescale(props.tickCounter);
      }
    }, ['tickCounter', 'newStep']);

    addEventHook('stepBack', function(props) {
      graph.updateOrRescale(props.tickCounter);
    }, ['tickCounter']);
  }

  function removeEventListeners() {
    // remove listeners
    removeEventHook("tick");
    removeEventHook('play');
    removeEventHook('reset');
    removeEventHook('stepForward');
    removeEventHook('stepBack');
  }

  function updateGraph(props) {
    graph.addPoints(updateGraphData(props));
  }

  function renderGraph() {
    resetGraphData();
    graphOptions.dataset = graphData;
    removeEventListeners();
    if (graph) {
      graph.reset('#graph', graphOptions);
    } else {
      graph = Lab.grapher.Graph('#graph', graphOptions);
    }
    addIframeEventListeners();
  }

  // Add another sample of data to the graphData array of arrays.
  function updateGraphData(props) {
    var p = props.pressure;
        f = props.pressureTimesArea,
        a = props.area;
    graphData[0].push(f);
    return [f];
  }

  // Reset the graphData arrays to a specific length by passing in an index value,
  // or empty the graphData arrays and initialize the first sample.
  function resetGraphData(index) {
    var i,
        len;
    if (index && graphData[0].length > index) {
      for (i = 0, len = graphData.length; i < len; i++) {
        graphData[i].length = index;
      }
      return index;
    } else {
      graphData = [[0]];
      return 0;
    }
  }

  // Intitialization
  graphSamplePeriod = 1;
  if (iframePhone) {
    iframePhone.addListener('propertyValue', function(displayTimePerTick) {
      graphSamplePeriod = displayTimePerTick;
      graphOptions.sample = graphSamplePeriod;
      renderGraph();
    });
    iframePhone.post({
      'type': 'get',
      'propertyName': 'displayTimePerTick'
    });
  }
}

iframePhone = setupIframeListenerFor($interactiveIframe[0], function() {
  setupGrapher();
});

@@ -72,16 +72,55 @@
  graph;%0A
+    graphData = %5B%5D,%0A    dataIndex = 0,%0A
     grap
@@ -341,16 +341,17 @@
 x:   100
+0
 ,%0A      
@@ -376,17 +376,17 @@
 max:   2
-0
+5
 00,%0A    
@@ -2071,17 +2071,16 @@
 addPoint
-s
 (updateG
@@ -2097,16 +2097,16 @@
 rops));%0A
+
   %7D%0A%0A  f
@@ -2578,16 +2578,50 @@
 ops.area
+,%0A        point = %5BdataIndex++, f%5D
 ;%0A    gr
@@ -2636,17 +2636,21 @@
 0%5D.push(
-f
+point
 );%0A    r
@@ -2659,11 +2659,13 @@
 urn 
-%5Bf%5D
+point
 ;%0A  
@@ -3024,24 +3024,49 @@
 ex;%0A      %7D%0A
+      dataIndex = index;%0A
       return
@@ -3078,32 +3078,32 @@
 x;%0A    %7D else %7B%0A
-
       graphData 
@@ -3111,16 +3111,37 @@
  %5B%5B0%5D%5D;%0A
+      dataIndex = 0;%0A
       re

update grapher for version Lab 0.5.3 changes