06-graph-property-1.html

---
layout: default
graph: true
title: Graph Property
extra_head_tags: |
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
  <link href='http://concord-consortium.github.io/lab-grapher/css/lab-grapher.css' rel='stylesheet' type='text/css'>
  <script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script>
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
  <script src='http://concord-consortium.github.io/lab-grapher/dist/lab-grapher.js' type='text/javascript'></script>
description: |
  Embedding an interactive, observering a property, and graphing it.
---
<iframe id="interactive-iframe" class="inline" width="460px" height="375px"
        frameborder="no" scrolling="no" allowfullscreen="true"
        webkitallowfullscreen="true" mozallowfullscreen="true"
        src="http://lab.concord.org/embeddable.html#interactives/basic-examples/area-versus-applied-pressure.json">
</iframe>
<div id='graph' class="graph"></div>
<script src="http://concord-consortium.github.io/iframe-phone/dist/iframe-phone.js"></script>
<script>
  var interactive;
  (function () {
    var graph,
        dataIndex = 0,
        graphOptions = {
          title:  "Area versus Applied Pressure",
          xlabel:  "Time",
          ylabel: "Pressure Times Area (pN⋅nm)",
          xmin:   0,  xmax:   1000,
          ymin:   0,  ymax:   2500,
          sample: 1,
          realTime: true,
          fontScaleRelativeToParent: true
        };

    // Intitialization
    interactive = new iframePhone.ParentEndpoint($('#interactive-iframe')[0]);
    interactive.addListener('modelLoaded', function(){
      // this might be called a second time if the interactive has multiple models
      if (graph) {
        graph.reset('#graph', graphOptions);
        dataIndex = 0;
      } else {
        interactive.addListener('propertyValue', function(result){
          if(result.name == 'pressureTimesArea') {
            // update graph with result.value
            graph.addPoint([dataIndex++, result.value]);
          }
        });
        graph = LabGrapher('#graph', graphOptions);
      }

      // tell the interactive we want to observe the pressureTimesArea property
      interactive.post('observe', 'pressureTimesArea');
    });
  })();
</script>