Jelly-Chart

Class: Combo

Combo

new Combo()

renders a combo chart, having both a bar and a line chart.
Source:

Extends

Methods

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.
Inherited From:
Source:
Returns:
Type
axis | RectLinear
Example
rectLinear.axis('x') // sets X-axis on the bottom side
 .axis({target: 'y', orient: 'right', showTicks: false, title: 'Custom Axis Y'}) // sets Y-axis on the right side
rectLinear.axis('y', false) // removes existing Y-axis

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
Inherited From:
Source:
Returns:
Type
RectLinear
Example
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
Inherited From:
Source:
Returns:
Type
axisTitles | RectLinear
Example
rectLinear.axisTitles({target:'x', title: 'custom title X'});

barWidth( [barWidth])

If barWidth is specified, sets each bar width(or height on vertical bar) and returns the instance itself. If barWidth is not specified, or barWidth bigger than origin barWidth, just returns the instance's current barWidth setting. Not surpport Stacked Bar Chart.
Parameters:
Name Type Argument Default Description
barWidth boolean | number <optional>
 false false or specific number
Source:
Returns:
Type
barWidth | Bar
Example
bar.orient('horizontal'); // renders the horizontal bar chart

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
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
bar.data([
   {name: 'A', value: 10},
   {name: 'B', value: 20},
   {name: 'C', value: 30},
   {name: 'D', value: 40}
 ]) //sets data
 .dimensions(['name'])
 .measures(['value'])
 .color(['red', 'green', 'blue', 'yellow'])
 .colorDomain(['B', {key: 'A', color: 'orange'}, {key: 'D'}]) 
 // sets bar A: orange / bar B: red / bar C: blue / bar D: green

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
core.container('#chart-container'); //sets a selector of a chart holder element as its container
core.container(document.getElementById('chart-container')); //sets an element as its container
core.container(); //returns the current 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
core.customDomain([0, 100]); //sets a custom domain;
core.container(); //returns the current custom domain;

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
core.data([
   {name: 'a', value: 10},
   {name: 'a', value: 100},
   {name: 'b', value: 20}
 ]) //sets data
 .dimensions(['name'])
 .measures(['value']); 

core.data(); //returns the current 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
core.demuteLegend('Sales'); // recover opacity of muted labels, whose key is not 'Sales', in the legend;

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
core.demuteNodes('Sales'); // nodes whose key is not 'Sales' are demuted
core.demuteNodes(d => d.key !== 'Sales') // nodes whose key is not 'Sales' are demuted

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
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
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},
 ]) //sets data
 .dimensions(['category', {field:'name', order:'ascending'}])
 //generates a grouped bar chart which has 2 regions (Red, Blue) with 4 bars(A,B,C,D) each.

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
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
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
core.font({'font-size': 16}); //sets th font size to 16px, then returns core itself;
core.font(); //returns the current fontStyle object;

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
Inherited From:
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
core.height(600); //sets a custom height;
core.height(); //returns the current 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
core.label(true); //shows labels
core.label(); //returns the current height;

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
core.legend(true); //sets {orient: 'bottom', thickness: 54}
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
core.limitKeys(10);

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
core.limitRows(100);

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
core.margin({top:100, right: 100}); //sets the margin's top and right amount
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
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
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},
 ]) //sets data
 .dimensions(['name'])
 .measures([{field:'sales', op: 'mean'}])
 //generates a mono bar chart with 4 bars(A,B,C,D).
 //each bar's length will be determined mean of 'sales' values from leaf elements.

mute(nodeOrRegion [, intensity])

transparentize the selection's opacity by Core#muteIntensity
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
core.muteIntensity(0.5); //sets a custom width;
core.muteIntensity(); //returns the current width;

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
core.demuteLegend('Sales'); // recover opacity of muted labels, whose key is not 'Sales', in the legend;

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

padding( [padding])

sets the padding to the same padding value. Depending on the chart type and its scale type, padding will be applied differently. If padding is not specified, returns the instance's current padding value.
Parameters:
Name Type Argument Default Description
padding number <optional>
 0
Inherited From:
Source:
Returns:
Type
padding | PaddingMixin
Example
paddingMixin.padding(0.5)
paddingMixin.padding()

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

regionPadding( [regionPadding])

sets the regionPadding to the same padding value. Depending on the chart type and its scale type, it will be applied differently. If regionPadding is not specified, returns the instance's current regionPadding value.
Parameters:
Name Type Argument Default Description
regionPadding number <optional>
 0
Inherited From:
Source:
Returns:
Type
regionPadding | PaddingMixin
Example
paddingMixin.regionPadding(0.5)
paddingMixin.regionPadding()

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
core.scale('color'); //returns the color scale;
core.scale() // returns the scale object

showTooltip(keys)

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
line.size(20) // set point radius of a line chart to 20 pixel
scatter.size(10) // set point radius of a scatter chart to 10 pixel
scatter.size([10, 100]) // set the range of point radius of a scatter chart from 10 to 100 pixel
pie.size([20, 100]) // set the inner radius to 20 and the outer radius to 100 seperately
treemap.size({range: [600, 400]}) // set the width to 600 and the height to 400 pixel of a treemap

sortByValue( [sortByValue])

If is true or a comparator string(natural, ascending, descending), sort nodes according to their values. If sortByValue is not specified, returns the current sortByValue setting.
Parameters:
Name Type Argument Default Description
sortByValue boolean | string <optional>
 false (false|natural|ascending|descending)
Inherited From:
Source:
Returns:
Type
sortByValue | SortMixin
Example
bar.sortByValue('ascending') //sort bars in ascending order.

tooltip( [tooltip])

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
core.tooltip(true); //set to show a tooltip
core.tooltip({sortByValue:'ascending'}); // set to show a tooltip and sort items in order of their measrue values.

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
core.transition({duration: 1000}); //sets the transition duration to 1000 milliseconds, then returns core itself;
core.transition(); //returns the current transition object;

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
core.width(600); //sets a custom width;
core.width(); //returns the current width;