Chart.curve

Syntax

PP.Ui.Chart.curve(ctx: CanvasRenderingContext2D, points: Array of Number, userPath: Array of Number, lineStyle: Object, closed: Boolean, tension: Number, segments: Number, onlyCalc: Boolean): Array of Number;

Parameters

ctx. Rendering context.

points. Array of curve data series points: [x0,y0,x1,y1, ... ].

userPath. Array of format path points: [x0,y0,x1,y1, ... ].

lineStyle. Displaying of a line with specified color and width (LineColor: String, LineWidth: Number).

closed. Line closedness.

tension. Line bending coefficient. Optional parameter, the default value is 0.5.

segments. The number of segments, which a section between neighbor points consists of (line smoothing). Optional parameter, the default value is 20.

onlyCalc. The checkbox that disables drawing and displaying of points, by which a curve is plotted. Optional parameter, the default value is False.

Description

The curve method draws a curve according to the specified parameters.

Example

To execute the example:

Create an HTML page.
In the <head> tag add links to the JS and CSS files:

PP.js.
PP.GraphicsBase.js.
PP.Charts_Canvas.js.
PP.css.
resources.ru.js.

Plot a curve in the console:

var cnvs = document.createElement('canvas');
// Set canvas width and height
cnvs.style.width = '500px';
cnvs.style.height = '300px';
var ctx = cnvs.getContext('2d');
document.body.appendChild(cnvs);
// Set point array
var p = [75,50,100,75,100,25];
// Set curve parameters
PP.Ui.Chart.curve(ctx, p,[], {LineColor:'rgba(255,0,0,1)', LineWidth:2}, false, 0.5, 20, false);

After executing the example a curve is displayed with the specified parameters.