-
axis( [axis] [, adding])
-
If axis is specified, append it to axis settings and returns the instance itself. If axis is a string, it refers axis's target(x or y) and will be converted to an object. If axis is an array of objects, replaces existing axis settings. If axis is not specified, returns the current axis settings.
If axis exists and adding is false, it removes the existing axis settign which has the same target of axis.
Parameters:
Name |
Type |
Argument |
Default |
Description |
axis |
string
|
object
|
Array.<Object>
|
<optional>
|
|
Properties
Name |
Type |
Argument |
Default |
Description |
target |
string
|
|
x
|
target scale's name |
orient |
string
|
<optional>
|
bottom
|
top|right|bottom|left |
thickness |
number
|
<optional>
|
18
|
|
showDomain |
boolean
|
<optional>
|
true
|
|
showticks |
boolean
|
<optional>
|
true
|
|
compressTicks |
boolean
|
<optional>
|
false
|
if is true, only first or end value of the tick shown. |
showTitle |
boolean
|
<optional>
|
true
|
|
title |
string
|
<optional>
|
|
|
titleOrient |
string
|
<optional>
|
|
top|right|bottom|left |
autoTickFormat |
boolean
|
<optional>
|
|
if is true, not apply dimension and measure's format. |
|
adding |
boolean
|
<optional>
|
true
|
if adding is false, removes existing the axis specified target. |
- Source:
-
Returns:
-
Type
-
axis
|
RectLinear
Example
1
2
3
rectLinear.axis('x')
.axis({target: 'y', orient: 'right', showTicks: false, title: 'Custom Axis Y'})
rectLinear.axis('y', false)
-
axisTitle(targetAndField, title)
-
sets a custom title of an axis. Filters axes, returning the axis that has the same target and field whith targetAndField, then sets or remove it's title. If title is false the selected axis's custom title will be removed. Actually, .axisTitle method manipulates
axisTitles
.
Parameters:
Name |
Type |
Description |
targetAndField |
string
|
object
|
Properties
Name |
Type |
Argument |
Description |
target |
string
|
|
|
field |
string
|
<optional>
|
|
|
title |
string
|
|
- Source:
-
Returns:
-
Type
-
RectLinear
Example
1
2
3
4
rectLinear.axisTitle('x', 'custom Axis X')
rectLinear.axisTitle('y.Sales', 'custom Axis Y')
rectLinear.axisTitle({target:'y', field: 'Sales'}, 'custom Axis X')
rectLinear.axisTitle('x', false);
-
axisTitles( [axisTitles])
-
set axis titles directly.
Parameters:
Name |
Type |
Argument |
Description |
axisTitles |
Array.<Object>
|
<optional>
|
|
axisTitles[].target |
string
|
|
target scale name of the axis(x|y) |
axisTitles[].title |
string
|
|
title to show |
axisTitles[].field |
string
|
<optional>
|
target field name of the axis |
- Source:
-
Returns:
-
Type
-
axisTitles
|
RectLinear
Example
1
rectLinear.axisTitles({target:'x', title: 'custom title X'});
-
color(color)
-
If color is specified, sets color schemes in array and returns the instance itself. The color schemes is used for color marks of the chart and follows
CSS color type. If color is not specified, returns the instance's current color schemes.
Parameters:
Name |
Type |
Default |
Description |
color |
string
|
Array.<string>
|
defaultSchemes
|
color schemes |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
color
|
Core
Example
1
2
3
core.color('red');
core.color(['#fff', 'steelblue', 'rgb(128, 128, 128)']);
core.color();
-
colorDomain( [colorDomain])
-
If colorDomain is specified, match color domain and color schemes manually. If colorDomain is not specified, returns the instance's current colorDomain.
ColorDomain is an array of objects includes a key and a color(optional) property. If a color peroperty is not specified, uses a color in internal
color schemes
in order. Also, if an element of array is string type, it translates into an object with a key property.
Parameters:
Name |
Type |
Argument |
Description |
colorDomain |
Array.<string>
|
Array.<object>
|
<optional>
|
|
colorDomain[].key |
string
|
number
|
|
|
colorDomain[].color |
string
|
<optional>
|
|
- Inherited From:
-
- Source:
-
Example
1
2
3
4
5
6
7
8
9
10
11
bar.data([
{name: 'A', value: 10},
{name: 'B', value: 20},
{name: 'C', value: 30},
{name: 'D', value: 40}
])
.dimensions(['name'])
.measures(['value'])
.color(['red', 'green', 'blue', 'yellow'])
.colorDomain(['B', {key: 'A', color: 'orange'}, {key: 'D'}])
-
container( [container])
-
The Core method `.container` sets a selector of a chart holder element or an element itself as its container. Core finds the holder element and renders a chart on it.
If container is specified, sets a selector or a element and returns the instance itself. If container is not specified, returns the instance's current container.
Parameters:
Name |
Type |
Argument |
Description |
container |
string
|
Element
|
<optional>
|
a selector or an element |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
string
|
Element
|
Core
Example
1
2
3
core.container('#chart-container');
core.container(document.getElementById('chart-container'));
core.container();
-
customDomain( [customDomain])
-
The Core method `.customDomain` sets a user-defined domain of a measrure variable. It's reflection differs based on the char type.
If customDomain is specified, sets a selector or a element and returns the instance itself. If customDomain is not specified, returns the instance's current customDomain.
Parameters:
Name |
Type |
Argument |
Description |
customDomain |
Array.<Number>
|
<optional>
|
a user-defined domain of a measrure variable |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
customDomain
|
Core
Example
1
2
core.customDomain([0, 100]);
core.container();
-
data( [data])
-
If data is specified, sets data and returns the instance itself. The data shoud be an array of objects, and the object includes the properties used as dimensions and measures. If data is not specified, returns the instance's current data.
Parameters:
Name |
Type |
Argument |
Description |
data |
Array.<Object>
|
<optional>
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
data
|
Core
Example
1
2
3
4
5
6
7
8
9
core.data([
{name: 'a', value: 10},
{name: 'a', value: 100},
{name: 'b', value: 20}
])
.dimensions(['name'])
.measures(['value']);
core.data();
-
demute(nodeOrRegion)
-
recovers the selection's opacity from
Core#mute
Parameters:
Name |
Type |
Description |
nodeOrRegion |
d3Selection
|
the selection of nodes and regions in the chart |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
-
demuteLegend( [exceptionFilter])
-
Fiters labels with a key different with exceptionFilter in the chart's legend, demute the selection.
Parameters:
Name |
Type |
Argument |
Description |
exceptionFilter |
string
|
function
|
<optional>
|
If the fiter is a string, select nodes which has different key with the filter. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
Example
1
core.demuteLegend('Sales');
-
demuteNodes( [excemptionFilter])
-
Fiters nodes according to excemptionFilter in the chart and
demutes
the nodes. If excemptionFilter is no specified, demutes all nodes.
Parameters:
Name |
Type |
Argument |
Description |
excemptionFilter |
string
|
function
|
<optional>
|
If the fiter is a string, select nodes which has different key with the filter. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
Example
1
2
core.demuteNodes('Sales');
core.demuteNodes(d => d.key !== 'Sales')
-
dimension(dimension)
-
appends a dimension to
dimensions
array. A dimenension(key) acts as an index that is used to look up measure(value). A synonym for dimension is independent attribute. Jelly-chart has
data
in an array to be grouped into a hierarchical tree structure with dimensions; multi-dimensions can make multiple levels of grouping. The combination of all dimensions would be unique for each item. Each dimension is converted into a mark(region or node) according to its chart type and level.
Parameters:
Name |
Type |
Description |
dimension |
string
|
object
|
Properties
Name |
Type |
Argument |
Default |
Description |
field |
string
|
|
|
refers a key property in objects from the data array . The key property will be invoked for each element in the input array and must return a string identifier to assign the element to its group. |
order |
string
|
<optional>
|
natural
|
chooses comparator types among natural, ascending and descending, sorting nodes in selected order. |
max |
number
|
<optional>
|
100
|
maximum number of nodes |
format |
string
|
function
|
<optional>
|
|
a time formatter for the given string specifier |
formatSub |
string
|
function
|
<optional>
|
|
a sub-time formatter for the given string specifier, which used sub-ticks on it's axis. |
interval |
string
|
<optional>
|
|
If the dimension has Date type values, set an interval which is a conventional unit of time to grouped its value. |
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
Example
1
2
3
core.dimension({field:'Sales', order:'ascending'});
core.dimension({field: 'Sales Date', format: '%y', interval: 'year'})
core.dimension('Profit');
-
dimensions( [dimensions])
-
If dimensions is specified, sets dimensions and returns the instance itself. If dimensions is an object or string, it would be turned into an array with a dimension. If dimensions is not specified, returns the instance's current dimensions.
A dimenension(key) acts as an index that is used to look up measure(value). A synonym for dimension is independent attribute. Jelly-chart has
data
in an array to be grouped into a hierarchical tree structure with dimensions; multi-dimensions can make multiple levels of grouping. The combination of all dimensions would be unique for each item. Each dimension is converted into a region or a node according to its chart type and level.
Parameters:
Name |
Type |
Argument |
Description |
dimensions |
string
|
object
|
Array.<Object>
|
<optional>
|
sets a dimension array which are objects has properties for aggregation(grouping). |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
dimensions
|
Core
Example
1
2
3
4
5
6
7
8
9
10
11
12
bar.data([
{category:'Blue', name: 'A', value: 10},
{category:'Blue', name: 'B', value: 20},
{category:'Blue', name: 'C', value: 30},
{category:'Blue', name: 'D', value: 40},
{category:'Red', name: 'A', value: 20},
{category:'Red', name: 'B', value: 10},
{category:'Red', name: 'C', value: 40},
{category:'Red', name: 'D', value: 10},
])
.dimensions(['category', {field:'name', order:'ascending'}])
-
domain(name)
-
gets a domain of the scale with a specified name
Parameters:
Name |
Type |
Description |
name |
string
|
|
- Inherited From:
-
- Source:
-
-
filterNodes(filter)
-
Fiters nodes in the chart, returning a new selection that contains only the elements for which the specified filter is true.
Parameters:
Name |
Type |
Description |
filter |
string
|
function
|
The filter may be specified either as a selector stringfilter is or a function. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
d3Selection
Example
1
2
3
core.filterNodes(function(d) {
return d.key === key;
})
-
filterRegions(filter)
-
Fiters regions in the chart, returning a new selection that contains only the elements for which the specified filter is true.
Parameters:
Name |
Type |
Description |
filter |
string
|
function
|
The filter may be specified either as a selector stringfilter is or a function. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
d3Selection
Example
1
2
3
core.filterRegions(function(d) {
return d.key === key;
})
-
font( [fontStyle])
-
If fontStyle is specified, sets the font styles to the specified object and returns the instance itself. If fontStyle is not specified, returns the instance's current fontStyle.
Parameters:
Name |
Type |
Argument |
Description |
fontStyle |
object
|
<optional>
|
Properties
Name |
Type |
Default |
Description |
font-family |
string
|
sans-serif
|
|
font-size |
number
|
12
|
|
font-weight |
string
|
lighter
|
|
font-style |
string
|
normal
|
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
fontStyle
|
Core
Example
1
2
core.font({'font-size': 16});
core.font();
-
grid( [grid])
-
If grid is specified, sets grid setting and returns the instance itself. If grid is true, shows grids of axes. If grid is not specified, it returns the current grid setting.
Parameters:
Name |
Type |
Argument |
Default |
Description |
grid |
boolean
|
<optional>
|
false
|
|
- Source:
-
Returns:
-
Type
-
grid
|
RectLinear
-
height( [height])
-
If height is specified, sets height of the container and returns the instance itself. The unit of height is a pixel. If height is not specified, returns the instance's current height.
Parameters:
Name |
Type |
Argument |
Default |
Description |
height |
number
|
<optional>
|
480
|
height of the container |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
height
|
Core
Example
1
2
core.height(600);
core.height();
-
innerSize(needArray)
-
returns an inner size of chart excepting offsets from the container's size
Parameters:
Name |
Type |
Default |
Description |
needArray |
boolean
|
false
|
If needArray is true, retruns the size in array |
- Inherited From:
-
- Source:
-
Returns:
returns {width, height} or [width, height] according to needArray
-
Type
-
object
|
array
-
label( [label])
-
If label is specified as true, sets the chart to show labels on its marks and returns the instance itself. If label is not specified, returns the instance's current height.
Parameters:
Name |
Type |
Argument |
Default |
Description |
label |
boolean
|
<optional>
|
false
|
whether to show labels on marks |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
label
|
Core
Example
1
2
core.label(true);
core.label();
-
legend( [legend])
-
If legend is specified, sets the legend object which includes an orient and a thickness of the legend. If legend is a boolean, it would be tured into an object with a bottom orient and a default thickness. Also, is a string, it would become a orient of an object. If legend is not specified, returns the instance's current legend.
Parameters:
Name |
Type |
Argument |
Description |
legend |
boolean
|
string
|
object
|
<optional>
|
sets a legend type. If is a false, removes the legend.
Properties
Name |
Type |
Argument |
Default |
Description |
orient |
string
|
|
bottom
|
sets a legend orient(top|right|bottom|left) |
align |
string
|
<optional>
|
start
|
sets a legend align(start|middle|end) |
thickness |
number
|
<optional>
|
(54|162)
|
sets a legend thickness. if the orient is top or bottom, the default thickness is 54 pixels. Otherwise, it would be 162 pixels. |
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
legend
|
Core
Example
1
2
3
core.legend(true);
core.legend({orient:'right', thickness: 200});
core.legend();
-
limitKeys(limitNumber)
-
limits the number of nodes length as many as limitNumber.
Parameters:
Name |
Type |
Description |
limitNumber |
number
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
Example
-
limitRows(limitNumber)
-
limits the number of elements length from the data
as many as limitNumber, in order.
Parameters:
Name |
Type |
Description |
limitNumber |
number
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
Example
-
margin( [margin])
-
If margin is specified, sets margin of the container and returns the instance itself. The unit of margin is a pixel. If margin is not specified, returns the instance's current margin.
Parameters:
Name |
Type |
Argument |
Description |
margin |
object
|
<optional>
|
Properties
Name |
Type |
Argument |
Default |
Description |
top |
number
|
<optional>
|
40
|
top |
right |
number
|
<optional>
|
40
|
right |
bottom |
number
|
<optional>
|
40
|
bottom |
left |
number
|
<optional>
|
40
|
left |
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
margin
|
Core
Example
1
2
core.margin({top:100, right: 100});
core.margin();
-
measure(measure)
-
appends a measure to
measures
array. A measure(value) acts as an value that is looked up by dimensions(key). A synonym for measure is dependent attribute. Jelly-chart has
data
in an array to be grouped into a hierarchical tree structure with dimensions. If measures are specified, leaves of the tree will be summarized by them.
Parameters:
Name |
Type |
Description |
measure |
string
|
object
|
Properties
Name |
Type |
Argument |
Default |
Description |
field |
string
|
<optional>
|
|
refers a value property in objects from the data array . The value property will be invoked for leaf elements during aggregation and their values in the property will be summarized by the specified operator as an value. |
op |
string
|
<optional>
|
sum
|
an operator(sum, mean, variance, min, max, median) to summarize leaf elements. |
format |
string
|
<optional>
|
|
a time formatter for the given string specifier |
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
Example
1
2
core.measure({field:'Sales', 'op': 'mean'});
core.measure('Profit');
-
measures( [measures])
-
If measures is specified, sets measures and returns the instance itself. If measures is an object or string, it would be turned into an array with a measure. If measures is not specified, returns the instance's current measures.
A measure(value) acts as an value that is looked up by dimensions(key). A synonym for dimension is independent attribute. Jelly-chart has
data
in an array to be grouped into a hierarchical tree structure with dimensions. If measures are specified, leaves of the tree will be summarized by them.
Parameters:
Name |
Type |
Argument |
Description |
measures |
string
|
object
|
Array.<Object>
|
<optional>
|
sets a measure array which are objects has properties for aggregation(grouping). |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
measures
|
Core
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
bar.data([
{name: 'A', sales: 10},
{name: 'B', sales: 20},
{name: 'C', sales: 30},
{name: 'D', sales: 40},
{name: 'A', sales: 20},
{name: 'B', sales: 10},
{name: 'C', sales: 40},
{name: 'D', sales: 10},
])
.dimensions(['name'])
.measures([{field:'sales', op: 'mean'}])
-
mute(nodeOrRegion [, intensity])
-
Parameters:
Name |
Type |
Argument |
Description |
nodeOrRegion |
d3Selection
|
|
the selection of nodes and regions in the chart |
intensity |
number
|
<optional>
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
-
muteIntensity( [muteIntensity])
-
If muteIntensity is specified, sets muteIntensity of the chart and returns the instance itself. MuteIntensity determines opacity of marks which is muted by
.mute
method. If muteIntensity is not specified, returns the instance's current width.
Parameters:
Name |
Type |
Argument |
Default |
Description |
muteIntensity |
number
|
<optional>
|
0.3
|
opacity of muted marks |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
muteIntensity
|
Core
Example
1
2
core.muteIntensity(0.5);
core.muteIntensity();
-
muteLegend( [exceptionFilter])
-
Fiters labels with a key different with exceptionFilter in the chart's legend, demute the selection.
Parameters:
Name |
Type |
Argument |
Description |
exceptionFilter |
string
|
function
|
<optional>
|
If the fiter is a string, select nodes which has different key with the filter. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
Example
1
core.demuteLegend('Sales');
-
nodes()
-
returns all nodes
- Inherited From:
-
- Source:
-
Returns:
nodes
-
Type
-
d3Selection
-
offset()
-
returns offsets around the content area, that includes the
margin
,
legend
area
- Inherited From:
-
- Overrides:
- Source:
-
Returns:
{top, right, bottom, left} offset in pixels
-
Type
-
object
-
process( [type] [, call] [, option])
-
sets and gets rendering procedures.
Parameters:
Name |
Type |
Argument |
Description |
type |
string
|
<optional>
|
|
call |
function
|
<optional>
|
|
option |
object
|
<optional>
|
Properties
Name |
Type |
Description |
after |
string
|
|
allow |
function
|
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
process
|
Array.<process>
|
Core
-
regions()
-
returns all regions
- Inherited From:
-
- Source:
-
Returns:
regions
-
Type
-
d3Selection
-
render( [keep] [, skip])
-
renders the chart. At the end of settings for a chart, it should be called. If keep is true, it does not reset existing scales.
Parameters:
Name |
Type |
Argument |
Default |
Description |
keep |
boolean
|
<optional>
|
false
|
If is true, not reset existing scales. |
skip |
Array.<String>
|
<optional>
|
[]
|
If skip includes an process, the process will be ignored. |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
-
reset( [keep])
-
reset the chart
Parameters:
Name |
Type |
Argument |
Default |
Description |
keep |
boolean
|
<optional>
|
false
|
If keep is true, not reset existing scales. |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
-
scale( [name])
-
If name is specified, returns a scale with the name in existing scales. If name is not specified, returns an object includes all scales.
Parameters:
Name |
Type |
Argument |
Description |
name |
string
|
<optional>
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
object
|
function
Example
1
2
core.scale('color');
core.scale()
-
-
shows a tooltip on a node which has the same keys.
Parameters:
Name |
Type |
Argument |
Description |
keys |
string
|
<repeatable>
|
Keys from the leaf to parents |
- Inherited From:
-
- Source:
-
- To Do:
-
- not work for a multiTooltip
Returns:
-
Type
-
Core
-
size( [size])
-
If size is specified, sets the size range and it direction and returns the instance itself. Each chart type apply size settings differently. If size is not specified, returns the instance's current transition and use the default size setting.
Parameters:
Name |
Type |
Argument |
Description |
size |
number
|
object
|
Array.<Object>
|
<optional>
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
size
|
Core
Example
1
2
3
4
5
line.size(20)
scatter.size(10)
scatter.size([10, 100])
pie.size([20, 100])
treemap.size({range: [600, 400]})
-
-
If tooltip is specified, decides to show a tooltip in the chart by it value. If is false, prevent showing the tooltip. If tooltip is not specified, returns the instance's current tooltip setting.
Parameters:
Name |
Type |
Argument |
Default |
Description |
tooltip |
boolean
|
object
|
<optional>
|
true
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
tooltip
|
Core
Example
1
2
core.tooltip(true);
core.tooltip({sortByValue:'ascending'});
-
transition( [transition])
-
If transition is specified, sets the transition duration and delay to the specified object and returns the instance itself. If transition is not specified, returns the instance's current transition.
Parameters:
Name |
Type |
Argument |
Description |
transition |
object
|
<optional>
|
Properties
Name |
Type |
Default |
Description |
duration |
number
|
600
|
transition duration in milliseconds |
delay |
number
|
20
|
trnasition delay in millisecends |
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
transition
|
Core
Example
1
2
core.transition({duration: 1000});
core.transition();
-
width( [width])
-
If width is specified, sets width of the container and returns the instance itself. The unit of width is a pixel. If width is not specified, returns the instance's current width.
Parameters:
Name |
Type |
Argument |
Default |
Description |
width |
number
|
<optional>
|
640
|
width of the container |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
width
|
Core
Example
1
2
core.width(600);
core.width();