Polyline

An InteractiveDataDisplay plot which dispays information as straight line segments connecting a series of data points. If a variable that determines the position on the vertical axis is uncertain, bands corresponding to the quantiles of the uncertain values are displayed instead of line segments.

See a sample of the line plot.

API

HTML

In HTML, a polyline plot is indicated by the attribute data-idd-plot="polyline".

<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="polyline" data-idd-plot="polyline" data-idd-style="stroke: rgb(89,150,255), thickness: 3">
  x y   
  0 0 
  3 6 
  7 8 
  </div>
</div>

JavaScript

In JavaScript, use InteractiveDataDisplay.Plot.polyline(name, data) or InteractiveDataDisplay.Polyline.draw(data).

The Plot.polyline function returns Polyline which allows to update values using Polyline.draw function. Still it is possible to call Plot.polyline 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 "polyline" plot to the chart; x and y are numeric arrays determining position of line.

chart.polyline("line", { x: [0,3,7], y: [0,6,8], stroke: "blue", thickness: 3 });

ChartViewer

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

ChartViewer.show(chartDiv, {
    "line": Plot.line({ x: [0,3,7], y: [0,6,8], stroke: "blue", thickness: 3 })
});

See ChartViewer for more details.

Properties

Mandatory properties:

• y is an array of numbers or a set of quantiles.

Optional properties:

• x is an array of numbers. If x data series are missing then it is considered to be sequential integers.
• thickness defines thickness of the line in pixels; default thickness is 1 pixel.
• stroke is a string color parsed as CSS color [value] (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value); default value is '#4169ed'.
• lineCap is either "butt", "round", "square"; default value is "butt".
• lineJoin is either "bevel", "round", "miter"; default value is "miter".
• treatAs is either "trajectory" and "function"; default value is undefined.

Uncertain Data

You can define the position on the vertical axis as uncertain value. Bands corresponding to the quantiles of the uncertain values are dispalyed instead of line segments. Properties fill68 and fill95 are colors of bands. If fill95 is undefined, the default color is "blue". If fill68 is undefined, the default color is "pink".

Example:

chart.polyline("line", { 
  x: [1, 2, 3, 4, 5], 
  y: {
   median: [0.003, 0.1, 3, 4, 5],
   lower95: [0.001, 0.01, 2, 3, 4],
   upper95: [0.005, 0.2, 4, 5, 6],
   lower68: [0.001, 0.05, 2.5, 3.5, 4.5],
   upper68: [0.004, 0.2, 3.7, 4.8, 5.5] 
  },
  fill68: "green"
});