DOM Plot

An InteractiveDataDisplay plot which contains one or more div elements, defined declaratively in HTML or added imperatively.

API

HTML

In HTML, DOM plot is indicated by the attribute data-idd-plot="dom".

<script type="text/javascript">
    $(document).ready(function () {
        var chart = InteractiveDataDisplay.asPlot($("#chart"));
    });
</script>

<div id="chart" data-idd-plot="chart" style="width: 800px; height: 600px;">    
  <div id="dom" data-idd-plot="dom">
    <div data-idd-position="0 0" data-idd-scale="none" style="width:150px; text-align:left;">
      The first DOM element     
    </div>
    <div data-idd-position="1.5 -1" data-idd-origin="0.5 0" data-idd-scale="none" style="width:150px; text-align:center;">
      The second DOM element     
    </div>
    <div data-idd-position="3 0" data-idd-origin="1 0" data-idd-scale="none" style="width:150px; text-align:right;">
      The third DOM element     
    </div>
  </div>
</div>

See the sample page DOM elements in a plot.