Strokes

Line and border strokes are defined in xmCHART by a list of numbers. The first value defines the stroke width, followed by an optional dash pattern. A dash pattern is defined by a sequence of successive on (dash) and off (gap) segments of variable lengths.

strokeWidth dashLength1 gapLength1 dashLength2 gapLength2 ...

Stroke Width

The stroke width can be controlled by the first element of the argument stroke. The argument stroke is part of numerous xmCHART functions. For example:

AddLine(10;​10;​100;​100;​1) /* 1px wide black line (default). */

AddLine(10;​10;​100;​100) /* Same as line above. */

LineStyle(all;​;​2.5;​red) /* 2.5px wide red lines. */

BorderStyle(all;​;​0.5) /* 0.5px wide black borders. */

MajorGridLineWidths(x;​y;​0.25) /* 0.25px wide horizontal grid lines. */

MajorGridLineWidths(y;​x;​0) /* Hide vertical grid lines. */

 
Example
EXAMPLE_01
1

OpenDrawing(220;​180)

2

AddLine(10;​ 10;​210;​ 10;​0) /* Invisible */

3

AddLine(10;​ 30;​210;​ 30;​0.25)

4

AddLine(10;​ 50;​210;​ 50;​0.5)

5

AddLine(10;​ 70;​210;​ 70;​1) /* Default width. */

6

AddLine(10;​ 90;​210;​ 90;​1.5)

7

AddLine(10;​110;​210;​110;​3)

8

AddLine(10;​131;​210;​131;​6)

9

AddLine(10;​155;​210;​155;​12)

10

CloseDrawing()

EXAMPLE_01

Dash Patterns

As an option, a dash pattern can be assigned to a stroke by adding a list of dash lengths and gaps. These elements are separated by any whitespace characters, including space, tab, and new line. For example:

AddLine(10;​10;​100;​100;​1 5 5) /* 1px wide dashed black line. */

LineStyle(all;​;​1 9 4 2 4) /* 1px wide dot-dashed lines. */

LineStyle(1;​poly;​0.5 6 2;​red) /* 0.5px wide dashed red polygonal curve. */

BorderStyle(all;​;​2.5 9 4 2 4) /* 2.5px wide dot-dashed borders. */

MajorGridLineWidths(x;​y;​0.25 2 2) /* 0.25px wide dotted horizontal grid lines. */

 
Example
EXAMPLE_02
1

OpenDrawing(220;​180)

2

AddLine(10;​ 10;​210;​ 10;​0.25 2 2) /* strokeWidth:0.25px dashLength:2px gapLength:2px */

3

AddLine(10;​ 30;​210;​ 30;​0.5 15 8) /* strokeWidth:0.5px dashLength:15px gapLength:8px */

4

AddLine(10;​ 50;​210;​ 50;​1 12 3 1 3)

5

AddLine(10;​ 70;​210;​ 70;​1 12 3 1 3 1 3)

6

AddLine(10;​ 90;​210;​ 90;​1 42 7 1 7 7 7 1 7)

7

AddLine(10;​110;​210;​110;​2 20 6)

8

AddLine(10;​131;​210;​131;​8 0.5 5) /* strokeWidth:8px dashLength:0.5px gapLength:5px */

9

AddLine(10;​155;​210;​155;​12 12 12)

10

CloseDrawing()

EXAMPLE_02

Line Shapes

A series of points can be connected in different ways, for example, by a polygonal line or a smooth curve. xmCHART supports the following line shapes:

Line Segments

By using constant jump (or value 1) a "line" is represented by a series of disconnected horizontal or vertical line segments. Line shape constant jump is only supported in combination with line charts and can be activated by the function LineStyle().

 
Example
EXAMPLE_03
1

OpenDrawing(240;​120)

2

ChartData(2 6 8 5 3)

3

LineChart(symbol)

4

SymbolStyle(1;​circle;​5;​2;​#fafbfe;​solid;​steelBlue)

5

LineStyle(1;​jump;​0.5;​steelBlue)

6

Scaling(y;​linear;​0;​10)

7

AxisMajorTicks(all;​8;​;​;​;​out)

8

GridLocation(all;​0) /* Hide grid. */

9

CloseDrawing()

EXAMPLE_03

Stair-step Lines

By using line shape constant step (or value 2) stair-step lines and borders are drawn. Stair-step lines are available for the following functions:

BorderStyle() /* For area charts. */

LineStyle() /* For line charts. */

MovingAverageLineStyle()

 
Example
EXAMPLE_04
1

OpenDrawing(240;​120)

2

ChartData(2 6 8 5 3)

3

LineChart(symbol)

4

SymbolStyle(1;​circle;​5;​2;​#fafbfe;​solid;​steelBlue)

5

LineStyle(1;​step;​0.5;​steelBlue)

6

Scaling(y;​linear;​0;​10)

7

AxisMajorTicks(all;​8;​;​;​;​out)

8

GridLocation(all;​0) /* Hide grid. */

9

CloseDrawing()

EXAMPLE_04

Polygonal Lines

The default line shape constant poly (or value 3) is available for the following functions:

 
Example
EXAMPLE_05
1

OpenDrawing(240;​120)

2

ChartData(2 6 8 5 3)

3

LineChart(symbol)

4

SymbolStyle(1;​circle;​5;​2;​#fafbfe;​solid;​steelBlue)

5

LineStyle(1;​poly;​0.5;​steelBlue)

6

Scaling(y;​linear;​0;​10)

7

AxisMajorTicks(all;​8;​;​;​;​out)

8

GridLocation(all;​0) /* Hide grid. */

9

CloseDrawing()

EXAMPLE_05

Smooth Lines

xmCHART comes with two different line smoothing methods. The smoothing algorithm used for line shape constant smooth (or value 4) produces a more accurate result if the data consists of values of a smooth function. On the other hand, the algorithm used for line shape constant pchip (or value 5) has no overshoots and less oscillation if the data are not smooth (pchip stands for "Piecewise Cubic Hermite Interpolating Polynomial"). In math terminology, smooth returns a spline with curvature continuity, i.e. continuous derivatives of first and second order, pchip has tangent continuity, i.e. only the first-order derivative is continuous.

Optionally, a so-called tension factor can be added to the smooth and pchip constant number. The tension factor in the interval (0,2) can be interpreted as the "length" of the tangent. The default tension is 1, a tension of 0 yields to a polygonal shape. For example:

LineStyle(1;​4 1) /* Same as LineStyle(1;smooth) */

LineStyle(1;​4 0) /* Same as LineStyle(1;poly) */

LineStyle(1;​4 0.8)

LineStyle(1;​5 1) /* Same as LineStyle(1;pchip) */

LineStyle(1;​5 0) /* Same as LineStyle(1;poly) */

LineStyle(1;​5 1.2)

The line shape constants smooth and pchip are available for the following functions:

AddSmoothPolygon()

AddSmoothPolyline()

BorderStyle() /* For area charts, polar and radar charts. */

LineStyle() /* For line charts. */

MovingAverageLineStyle()

 
Examples
EXAMPLE_06
1

OpenDrawing(480;​120)

2

/* Left graph. */

3

OpenChart(35;​15;​190;​75;​on)

4

ChartData(2 6 8 5 3)

5

LineChart(symbol)

6

SymbolStyle(1;​circle;​5;​2;​#fafbfe;​solid;​steelBlue)

7

LineStyle(1;​smooth;​0.5;​steelBlue)

8

Scaling(y;​linear;​0;​10)

9

AxisMajorTicks(all;​8;​;​;​;​out)

10

GridLocation(all;​0) /* Hide grid. */

11

AddText(130;​52.5;​"smooth";​Verdana;​10;​plain;​steelblue;​center;​center)

12

CloseChart()

13

/* Right graph. */

14

OpenChart(275;​15;​190;​75;​on)

15

ChartData(2 6 8 5 3)

16

LineChart(symbol)

17

SymbolStyle(1;​circle;​5;​2;​#fafbfe;​solid;​steelBlue)

18

LineStyle(1;​pchip;​0.5;​steelBlue)

19

Scaling(y;​linear;​0;​10)

20

AxisMajorTicks(all;​8;​;​;​;​out)

21

GridLocation(all;​0) /* Hide grid. */

22

AddText(370;​52.5;​"pchip";​Verdana;​10;​plain;​steelblue;​center;​center)

23

CloseChart()

24

CloseDrawing()

EXAMPLE_06
EXAMPLE_07
1

OpenDrawing(450;​210)

2

/* Left graph. */

3

OpenView(10;​5;​210;​200)

4

OpenChart(30;​15;​165;​165;​on)

5

ChartData(0.0 0.25 0.75 1.0 ;​ 1.0 1.0 2.0 2.0 ;​

6

0.0 0.25 0.75 1.0 ;​ 1.0 1.0 2.0 2.0 )

7

LineChart2D(symbol+shadow)

8

ShadowStyle(1;​1 1 1)

9

ShadowStyle(2;​0)

10

LineStyle(1;​5 1.5;​0.5;​magenta) /* pchip (5) with tension factor 1.5 */

11

LineStyle(2;​smooth;​0.5;​steelBlue)

12

SymbolStyle(1;​circle;​4;​1.4;​#fafbfe;​solid;​magenta)

13

SymbolStyle(2;​none)

14

Scaling(x;​linear;​0;​1;​4)

15

Scaling(y;​linear;​0.5;​2.5;​4)

16

AxisLine(all;​0) /* Hide axis lines. */

17

AxisMajorTicks(all;​0) /* Hide tick marks. */

18

AxisMajorTickLabelTexts(x;​"|u|")

19

AxisMajorTickLabelOptions(x;​out;​0;​3)

20

AxisMajorTickLabelOptions(y;​out;​-3;​0)

21

MajorGridLineWidths(all;​all;​0.25)

22

LegendTexts("pchip";​"smooth")

23

LegendStyle(Verdana;​10)

24

LegendBackground(255 255 255 200;​;​0)

25

LegendOptions(bottomRight;​on;​0;​4)

26

CloseChart()

27

CloseView()

28

/* Right graph. */

29

OpenView(230;​5;​210;​200)

30

OpenChart(30;​15;​165;​165;​on)

31

ChartData( 1.2 2 5.6 4.6 3 2.8 0.6 ;​

32

1.2 2 5.6 4.6 3 2.8 0.6 )

33

LineChart(symbol+shadow)

34

ShadowStyle(1;​1 1 1)

35

ShadowStyle(2;​0)

36

LineStyle(1;​pchip;​0.5;​magenta)

37

LineStyle(2;​smooth;​0.5;​steelBlue)

38

SymbolStyle(1;​circle;​4;​1.4;​#fafbfe;​solid;​magenta)

39

SymbolStyle(2;​none)

40

Scaling(y;​linear;​0;​6;​6)

41

AxisLine(all;​0) /* Hide axis lines. */

42

AxisMajorTicks(all;​0) /* Hide tick marks. */

43

AxisMajorTickLabelOptions(x;​out;​0;​3)

44

AxisMajorTickLabelOptions(y;​out;​-3;​0)

45

MajorGridLineWidths(all;​all;​0.25)

46

LegendTexts("pchip";​"smooth")

47

LegendStyle(Verdana;​10)

48

LegendBackground(255 255 255 200;​;​0)

49

LegendOptions(bottomCenter;​on;​0;​4)

50

CloseChart()

51

CloseView()

52

CloseDrawing()

EXAMPLE_07
Scroll to Top
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×