# Elements

Elements can be used for creating composite chart, you can use small elements point, line, interval and draw them on a single plot.

For example:

``````var data = [
{x:1, y:1, name:'firstLine'},
{x:5, y:19, name: 'secondLine'},
{x:14, y:3, name:'firstLine'},
{x:6, y:1, name: 'secondLine'},
];
var lineElement = {
unit: {
type: 'COORDS.RECT',
x:'x',
y:'y',
guide: {
showGridLines: 'xy',
padding: { l:56, b:46, r:8, t:8 },
x: {padding: 8, label: 'x'},
y: {padding: 8, label: 'Y'}
},
unit: [{
type:'ELEMENT.LINE',
x:'x',
y:'y',
color:'name'
},{
type:'ELEMENT.POINT',
x:'x',
y:'y',
color:'x'
}]
}
};

var s = new tauCharts.Plot(
{
data: data,
spec: lineElement
}).renderTo('#line-element');
``````

Example

## Point

Point element draws a point. It has the following parameters:

``````   var line = {
'ELEMENT.POINT':{
x:'dimensionX', //x axis
y:'dimensionY' //y axis
size:'dimensionSize' //point diameter
color:'dimensionForGrouping' //point color
}
}
``````

Point diameter can be set via encoding.

Point color can be set via encoding.

## Line

Line element draws a line, obviously:

``````   var line = {
'ELEMENT.LINE':{
x:'dimensionX',
y:'dimensionY'
color:'dimensionForGrouping'
}
}
``````

Color property groups data into several lines of different colors. For example, if you have data like:

``````  var data = [
{x:1, y:1, name:'firstLine'},
{x:5, y:19, name: 'secondLine'},
{x:14, y:3, name:'firstLine'},
{x:6, y:1, name: 'secondLine'},
];
``````

and you create a chart with parameters:

``````   var lineElement = {
unit: {
type: 'COORDS.RECT',
x:'x',
y:'y',
guide: {
showGridLines: 'xy',
padding: { l:56, b:46, r:8, t:8 },
x: {padding: 8, label: 'x'},
y: {padding: 8, label: 'Y'}
},
unit: [{
type:'ELEMENT.LINE',
x:'x',
y:'y',
color:'name'
}]
}
};

new tauCharts.Plot({
data: data,
spec: lineElement
}).renderTo('#line-element');
``````

the result is two lines:

Example

## Interval

Draws a bar.

``````var intervalElement = {
unit: {
type: 'COORDS.RECT',
x: 'date',
y: 'count',
guide: {
showGridLines: 'xy',
padding: {
l: 56,
b: 46,
r: 8,
t: 8
},
y: {
padding: 8,
label: 'Count of completed entities'
}
},
unit: [{
type: 'ELEMENT.INTERVAL'
}]
}
};

var bar = new tauCharts.Plot({
data: defData,
spec: intervalElement
}).renderTo('#interval-element');
``````

Example

Color property groups data into several bars of different colors. For example, if you have data like:

``````    ar data = [{
"team": "d",
"cycleTime": 2,
"effort": 2,
"count": 15,
"priority": "low"
}, {
"team": "d",
"cycleTime": 3,
"effort": 3,
"count": 9,
"priority": "medium"
}, {
"team": "d",
"cycleTime": 3,
"effort": 3,
"count": 1,
"priority": "medium"
}, {
"team": "d",
"cycleTime": 4,
"effort": 4,
"count": 3,
"priority": "high"
}, {
"team": "l",
"cycleTime": 3,
"effort": 2,
"count": 5,
"priority": "low"
}, {
"team": "l",
"cycleTime": 4,
"effort": 3,
"count": 3,
"priority": "medium"
}, {
"team": "l",
"cycleTime": 5,
"effort": 4,
"count": 4,
"priority": "high"
}, {
"team": "k",
"cycleTime": 3,
"effort": 5,
"count": 5,
"priority": "low"
}, {
"team": "k",
"cycleTime": 4,
"effort": 6,
"count": 8,
"priority": "medium"
}, {
"team": "k",
"cycleTime": 5,
"effort": 8,
"count": 4,
"priority": "high"
}];
``````

and you create a chart with parameters:

``````var intervalElement = {
unit: {
type: 'COORDS.RECT',
x: 'team',
y: 'count',
guide: {
showGridLines: 'xy',
padding: {
l: 56,
b: 46,
r: 8,
t: 8
},
y: {
padding: 8,
label: 'Count of completed entities'
}
},
unit: [{
type: 'ELEMENT.INTERVAL',
color: 'priority'
}]
}
};

var bar = new tauCharts.Plot({
data: data,
spec: intervalElement
}).renderTo('#interval-element');
``````

Example if you wont create horizontal interval you should set flip property to true

``````var intervalElement = {
unit: {
type: 'COORDS.RECT',
x: 'count',
y: 'team',
guide: {
showGridLines: 'xy',
padding: {
l: 56,
b: 46,
r: 8,
t: 8
},
y: {
padding: 8,
label: 'Count of completed entities'
}
},
unit: [{
type: 'ELEMENT.INTERVAL',
color:'priority',
flip:true
}]
}
};

var bar = new tauCharts.Plot({
data: data,
spec: intervalElement
}).renderTo('#interval-element');
``````

Example