List of articles Colour designations Choose language

Autoform for chart-with-scrolling from database

Syntax and behaviour

Behaviour of chart-with-scrolling, filled from database

<chart name="A" action="./script.cgi" portion="50" visual="20">
</chart>

coincides with behaviour of table, filled from database - difference is only in way of presentation of information. In particular, relation "master-subordinate" between charts is similar to this for tables,

<chart name="M" action="./scriptM.cgi" portion="50" visual="20" id="id1">
</chart>
<chart name="S" action="./scriptS.cgi" portion="40" visual="10" master="id1">
</chart>

and relation "masterS-subordinate" between charts is also similar to relation for tables.

<chart name="M" action="./scriptM.cgi" portion="50" visual="20" id="id1">
</chart>
<chart name="N" action="./scriptN.cgi" portion="50" visual="20" id="id2">
</chart>
<chart name="P" action="./scriptP.cgi" portion="50" visual="20" id="id3">
</chart>

<chart name="S" action="./scriptS.cgi" portion="40" visual="10" master="id1 id2 id3">
</chart>

Chart can not be build on base of columns, containing boolean data or pictures, thus checkbox and pic can not be so controls. In all other, fields, on which chart is built, can be duplicated in controls similarly, as it is make for table, filled from database.

<chart name="A" action="site.com/dir/script.cgi" portion="50" visual="20">
</chart>
<input    name="A" value="a1" type="text">
<input    name="A" value="a2" type="checkbox">
<input    name="A" value="a3" type="pic">

But enclosed element select is desplayed, only if user press right mouse key on node of broken line or on segment of "pie".

<chart    name="A" action="./script.cgi"  portion="50" visual="20">
  <select name="B" action="./script2.cgi" portion="40" visual="10">a2</select>
</chart>

Displaying of columns

Different charts use different quantity of columns of data, and columns of data have different destination. Relation between destination of seribute and name of seribute is specified in CSS, sign "§" is put before seribute name.

chart {
  presentation: decart;
  x:            §a1;
  y:            §a2;
}

Properties of chart can be equal to not only constant (as in CSS now), but also to values of seribute (it's necessary to specify name of seribute, anticipated by sign "§", as value of property).

chart {
  point-type:   §a4;
  point-color:  §a5;
}

Kinds of chart, distinations, properties

If distination z is specified, then chart is 3D; if distination z is not specified, then chart is 2D. If distination y is not specified, then sequence of natural numbers (beginning from 1) is use instead it, and chart is 2D.

If at least one of distinations f1, f2, f3 is specified (vector field is displayed), than geometrical figures in nodes of chart are arrows, direction and length of arrows are equal to vector [f1, f2, f3]; properties point-type, point-height, point-width (which are used to display scalar field) are ignored.

Distination f, equal (f1² + f2² + f3²)^1/2, can be used only as selector; distination r, equal (x² + y² + z²)^1/2, can be used only as selector.

a [r > 5] {
  point-color: red;
}
a [f > 3] {
  point-color: green;
}

Distinations
kind of chart	distinations
`pie`	f1
`decart`, `polar`	x, y, z, r, f1, f2, f3, f

Properties of charts covers of majority of properties and attributes of element line (but height and width of geometrical figure can be informatical, therefore height and width are specified separately), but chart has own unique properties of group plumb and veneer.

Plumbs are vertical lines from each node of decart chart to axix 'X' (in 2D-case) or plane 'X,Y' (in 3D-case), or from each node of polar chart to center of chart (in 2D- and 3D-cases).

Veneers are planes between plumbs (in 2D- and 3D-cases).

Properties
tag	property	default value	list of possible values
<chart `action`= >	point-type	`null`	`null` (`none`), `disc, circle, square, decimal`, `star, romb, triangle, hex`
	point-color, section-color, plumb-color, veneer-color	`black`	`aqva, black, blue, fuchsia, gold, gray, green, indigo, lime, maroon, navy, olive, orange, purple, red, silver, teal, violet, white, yellow, #FFFFFF`
	section-type, plumb-type	`none`	`none, dotted, dashed, solid, double, groove, ridge`, `triple`
	point-height, point-width, section-width, plumb-width	`thin`	`thin, medium, thick`, float
	point-note, section-note, plumb-note, veneer-note		any text
	section-begin, section-end		any text
	point-title, section-title, plumb-title, veneer-title		any text
	align	`into`	`horside, verside, into`
	spline	`no`	`yes, no`
	grid	`no`	`yes, no`
	grid4cursor	`no`	`yes, no`
	x-logarithmic, y-logarithmic, z-logarithmic		any natural number, more 1
	x-label, y-label, z-label		any text

Creating of several graph on one chart

For example, 'japanese candles' is combination of three 2D decart graph: first has color of plumb, different from background; second has no plumb; and third has color of plumb, equal to color of background. Each graph is assigned by element cbody, chart body (thus there are several such elements inside chart). All distinations and properties, mentioned above, can be specified both for chart, and for cbody.

<chart several="stacked">
  <cbody name="A" action="./script.cgi" portion="50" visual="20">
  <cbody name="B" action="./script.cgi" portion="50" visual="20">
  <cbody name="C" action="./script.cgi" portion="50" visual="20">
</chart>

Whether several graph can cross each other, and if they can, then how they should be placed, is specified by property several of element chart:

value stacked means, that plumb of each next graph is above plumb of previous graph
value side2side means, that plumb of each next graph is a little right than plumb of previous graph
value frontal means, that plumb of each next graph is on plumb of previous graph
value behind means, that plumb of each next graph is under and a little right than plumb of previous graph

Dmitry Turin

List of articles Colour designations Choose language