Area

An InteractiveDataDisplay plot which dispays a colored band between two scalar grid functions. The space between lines y1[i](x[i]) and y2[i](x[i]) is filled with a solid color; the boundaries are not stroked.

API

HTML

In HTML, an area plot is indicated by the attribute data-idd-plot="area".

<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="area" data-idd-plot="area" data-idd-style="fill: green">
  x  y1  y2   
  0  0   2 
  3  6   8 
  7  8  12
  </div>
</div>

JavaScript

In JavaScript, use InteractiveDataDisplay.Plot.area(name, data) or InteractiveDataDisplay.Area.draw(data).

The Plot.area function returns Area which allows to update values using Area.draw function. Still it is possible to call Plot.area many times with same name, so that the first call creates the polyline plot and subsequent calls update the existing plot. The name allows to identify the plot in code and also it is displayed in a tooltip and a legend.

The following example adds "area" plot to the chart; x, y1 and y2 are numeric arrays determining position of band.

chart.area("area", { x: [0,3,7], y1: [0,6,8], y2: [2,8,12], fill: "green" });

See the sample page Dynamic Area.

ChartViewer

When building ChartViewer, use Plot.band(plotInfo):

ChartViewer.show(chartDiv, {
    "area": Plot.area({ x: [0,3,7], y1: [0,6,8], y2: [2,8,12], fill: "green"})
});

See ChartViewer for more details.

Properties

Mandatory properties:

• y1 is an array of numbers.
• y2 is an array of numbers.

Optional properties:

• x is an array of numbers.
• fill is a string color parsed as CSS color [value] (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value); default value is 'rgba(0,0,0,0.2)'.