LudoJS

ludo.chart.DataSource

ludo.chart.

new ludo.chart.DataSource(config)

Data source for charts

The chart data source expects an array of objects, example:


[
{ id: 1, label:'John', value:100 },
{ id: 2, label:'Jane', value:245 },
{ id: 3, label:'Martin', value:37 },
{ id: 4, label:'Mary', value:99 },
{ id: 5, label:'Johnny', value:127 },
{ id: 6, label:'Catherine', value:55 },
{ id: 7, label:'Tommy', value:18 }
]

Some charts(example bar charts) accepts nested data, example:

[
{
"country": "United Kingdom",
"children": [
{ "name":"0-14", "people" : 5000 }, { "name":"15-64", "people" : 20000 }, { "name":"65-", "people" : 4000 }
]
},
{
"country": "Germany",
"children": [
{ "name":"0-14", "people" : 6000 }, { "name":"15-64", "people" : 29000 }, { "name":"65-", "people" : 4000 }
]
}
]

The chart data source will add some special properties and functions to the records.
Example: "Jane" in the data above will be something like:

{
id:'1', name: 'Jane', value, 245,
__color: '#4719D2'
__colorOver: '#5629E1'
__count : 7,
__fraction:0.35976505139500736,
__sum : 681
__index: 1,
__percent: 36,
__angle : 0.92264101427013,
__radians : 2.2604704849618193,
__uid : "chart-node-iw7znu0v"
__min : 18
__minAgr : 18
__max : 245
__maxAggr : 245
__parent: undefined
__indexStartVal: undefined
__indexFraction: undefined
__indexSum: undefined

 getChildren:function()
 getParent():function()

}

where __color is the records assigned color and __colorOver is it's color when highlighted.
You can set this properties manually in your data. When not set, LudoJS will use colors from a color scheme.
You can also set __stroke and __strokeOver for stroke colors.
__count is the total number or records in the array.
__sum is sum(values) in the array.
__fraction is record.value / record.__sum
__index is the index of Jane in the array(John has index 0, Jane index 1, Martin index 2 and so on).
__percent is the rounded value of __fraction 100
__angle is mostly for internal use and represents this records start angle in radians when all records fill a circle.
__radians is how many radians of a circle this record fills. A circle has Math.PI 2 radians. __angle and radians
are only set when values are numeric.
__min is the minimum value found in the data set
__max is the max value found in the data set.
__maxAggr is useful for nested data sets. It is set to max(child values) in the data set. For non-nested sets, it will
have the same value as __max. Example: for

[
{
"country": "United Kingdom",
"children": [
{ "name":"0-14", "people" : 5000 }, { "name":"15-64", "people" : 20000 }, { "name":"65-", "people" : 4000 }
]
},
{
"country": "Germany",
"children": [
{ "name":"0-14", "people" : 6000 }, { "name":"15-64", "people" : 29000 }, { "name":"65-", "people" : 4000 }
]
}
]

__maxAggr will be 39000(Sum children of Germany), while __max will be 29000.

__parent will for child items contain a reference to parent id which can be retrieved using dataSource.byId(id)

__indexStartVal stores the sum of previous records with the same index as this one. In the example with countries above,
, the value for { "name":"0-14", "people" : 6000 } will be 5000, since the first child of United Kingdom has value 5000.
This value is used when rendering stacked area charts.

__indexFraction stores the size of this record divided by the sum of all records with the same index.

getParent() returns a reference to parent record if set, it will return undefined otherwise.
getChildren() returns reference to child data array, example the children array of Germany in the example above

Parameters:
Name Type Description
config Object
Properties
Name Type Description
data Array

Pie chart data.
url String

Get chart data from this url. config.data will not be set when you use an url.
valueOf function

Function which returns value of a node. Two arguments are sent to this method: 1) the record,
2) The View asking for the value. Example

valueOf:function(record, caller){
return record.value;
}
textOf function

Function which returns text of a node. The record and caller are sent to this function.
You can return different texts based on the type attribute of the caller. example:

textOf:function(record, caller){
if(caller.type == 'chart.Tooltip'){ // return text for the tooltip
return record.label + ': '+ record.value + ' (' + record.__percent + '%)';
}
// Default text
return record.label;
}
valueKey String

the key in the data for value, default: 'value'
getText function

Function returning text. Argument to this function: The View asking for the text, example, a ludo.chart.Text
max function

Function returning max value for the chart. This is optional. If not set, it will return the maximum value found in the data array.
For bar charts, you might want to use this to return a higher value, example: max:function(){ return this.maxVal + 20 }.
min function

Function returning min value for the chart. Default: minimum(0, data arrays minimum value)
value. function

Function returning a value for display. Arguments. 1) value, 2) caller. Example for a label, you might want to return 10 instead of value 10 000 000.
increments. function

Function returning increments for lines, labels etc. This function may return an array of values(example: for a chart with values form 0-100, this function
may return [0,10,20,30,40,50,60,70,80,90,100]. This function may also return a numeric value, example: 10 instead of the array. Three arguments are sent to this function: 1) the data arrays
minimum value, 2) the data arrays maximum value and 3) The caller, i.e. the SVG view asking for the increments.
valueForDisplay function

Optional function returning value to display in a view. Arguments: 1) value, 2) caller. Let's say you have a
data source with values in millions, example: Population in countries. For the chart.ChartValues view, you might want to display number of millians, i.e.
10 instead of 10000000. This can be done with a valueForDisplay function:

valueForDisplay:function(value, caller){
if(caller.type == 'chart.ChartValues')return Math.round(value / 1000000) + " mill";
return value;
}
strokeOf function

Optional function returning stroke color for chart item, Arguments: 1) chart record, 2) caller
strokeOverOf function

Optional function returning mouse over stroke color for chart item, Arguments: 1) chart record, 2) caller
childKey String

Key for child arrays, default: "children"
shouldInheritColor function

Optional function returning true if color should be inherited from parent record. Input: record, 2: caller
shapeOf function

Optional function returning shape of a record. This is used when rendering dots for the line chart. Default shape is "circle". Can also be
"rect", "triangle" or path to an image.
minBrightness Number

Optional minimum brightness(0-100) when setting colors.
maxBrightness Number

Optional maximum brightness(0-100) when setting colors.
minSaturation Number

Optional minimum saturation/color intensity(0-100) when setting colors.
maxSaturation Number

Optional maximum saturation/color intensity(0-100) when setting colors.
indexStartValueOf function

Optional function returning sum value of all previous records
with same index. By default, it returns record.__indexStartVal. Example for { "name":"0-14", "people" : 6000 }
above it will return 5000, since this is index 0 and the child of United Kingdom with same index has value 5000.
This function is used in the area chart demo where
the chart is configured to render percentage values.
Source:
Example
var dataSource = new ludo.chart.DataSource({
        data:[
            { id: 1, label:'John', value:100 },
            { id: 2, label:'Jane', value:245 },
            { id: 3, label:'Martin', value:37 },
            { id: 4, label:'Mary', value:99 },
            { id: 5, label:'Johnny', value:127 },
            { id: 6, label:'Catherine', value:55 },
            { id: 7, label:'Tommy', value:18 }
        ],

        textOf:function(record, caller){
            if(caller.type == 'chart.Tooltip'){ // Text for the tooltip
                return record.label + ': '+ record.value  + ' (' + record.__percent + '%)';
            }
            // Default text
            return record.label;
        },

        valueOf:function(record, caller){
            return record.value;
        }
    });

Members

maxVal

Max value in data array

Properties:
Name Type Description
maxVal Number
Source:

maxValAggr

Aggregated max value in the data array. Sum value of child data.

Properties:
Name Type Description
maxValAggr Number
Source:
Example
[
{
     "country": "United Kingdom",
     "children": [
         { "name":"0-14", "people" : 5000 }, { "name":"15-64", "people" : 20000 }, { "name":"65-", "people" : 4000 }
     ]
},
{
     "country": "Germany",
     "children": [
         { "name":"0-14", "people" : 6000 }, { "name":"15-64", "people" : 29000 }, { "name":"65-", "people" : 4000 }
     ]
}
]
// maxValAggr will here be 39000 (Sum children of "Germany").

minVal

Min value in data array

Properties:
Name Type Description
minVal Number
Source: