0.17.0A data generator for MapD3 charts
object:
The dataGenerator instance.
mapd3.DataGenerator()
.setConfig({
keyType: "time",
range: [0, 100],
pointCount: 200,
groupCount: 2,
lineCount: 4
})
.generateTestDataset()
Configure the data manager
(object)
A config object.
| Name | Description |
|---|---|
config.keyType string
(default "number")
|
The x axis type: number, string, time |
config.range Array<number>
(default [0,100])
|
The value range |
config.pointCount number
(default 200)
|
The number of points |
config.groupCount number
(default 2)
|
The number of groups, 2 for adding a y2 axis |
config.lineCount number
(default 4)
|
The number of lines |
config.stringMinMaxLength Array<number>
(default [4,8])
|
Length of generated strings |
config.randomStepSize number
(default 50)
|
Random pixel range to step vertically between each generated points |
config.nullRatio number
(default null)
|
Percentage of generated values that are null |
object:
The dataGenerator instance.
mapd3.DataGenerator()
.setConfig({
keyType,
range: [0, 100],
pointCount: 200,
groupCount: 2,
lineCount: 4
})
Generate some test data
object:
A data object
mapd3.DataGenerator()
.setConfig({
keyType: "time",
range: [0, 100],
pointCount: 200,
groupCount: 2,
lineCount: 4
})
.generateTestDataset()
{
"series": [{
"label": "Label 0",
"id": 0,
"group": 0,
"values": [{
"value": 16.85,
"key": "2017-11-07T05:00:00.000Z"
}, {
"value": 17.94,
"key": "2017-11-08T05:00:00.000Z"
}, {
"value": 19.03,
"key": "2017-11-09T05:00:00.000Z"
}, {
"value": 18.97,
"key": "2017-11-10T05:00:00.000Z"
}]
}, {
"label": "Label 1",
"id": 1,
"group": 1,
"values": [{
"value": 13.31,
"key": "2017-11-07T05:00:00.000Z"
}, {
"value": 13.15,
"key": "2017-11-08T05:00:00.000Z"
}, {
"value": 15.76,
"key": "2017-11-09T05:00:00.000Z"
}, {
"value": 17.74,
"key": "2017-11-10T05:00:00.000Z"
}]
}]
}
A base chart for line/area/stacked area/bar/stacked bar charts.
(object)
The DOM element or selector for the container
object:
The chart instance.
mapd3.Chart(document.querySelector('.chart'))
.setConfig({
width: 800,
height: 400,
keyType: "time",
chartType: "line"
})
.setData(data)
Configure the chart
(object)
A config object.
| Name | Description |
|---|---|
config.width number
(default 800)
|
Outer chart width, including margins |
config.height number
(default 500)
|
Outer chart height, including margins |
config.margin object
(default margin:{top:48,right:32,bottom:48,left:32})
|
Margin object |
config.keyType string
(default "time")
|
Data type of x values: time, number, string |
config.chartType string
(default "line")
|
The type of marks: line, area, stackedArea, bar, stacked bar |
config.extractType string
(default null)
|
The type of date to convert to from a number corresponding to a date part: isodow, month, quarter, hour, minute |
config.ease function
(default d3.easeLinear)
|
Axis transition easing |
config.useScrolling boolean
(default false)
|
If using horizontal scrolling when the bar width gets under a threshold |
config.isAnimated boolean
(default false)
|
If using animated opening |
config.animationDuration number
(default 1500)
|
Animated opening duration
|
config.colorSchema Array<string>?
|
List of {key, value} colors to use on marks |
config.defaultColor string
(default "skyblue")
|
Color for marks that doesn't match anything on the colorSchema |
config.xDomain (Array<number> |
(default "auto")
|
Set X axis domain or "auto" for using data extent |
config.yDomain (Array<number> |
(default "auto")
|
Set Y axis domain or "auto" for using data extent |
config.yDomain (Array<number> |
(default "auto")
|
Set 2nd Y axis domain or "auto" for using data extent |
config.sortBy string
(default alphaAscending)
|
Sorting of columns in stack bar: totalAscending, totalDescending, alphaAscending, alphaDescending |
config.fillData boolean
(default false)
|
If replacing nulls with zeroes
|
config.tickPadding number
(default 5)
|
Padding between tick and tick label |
config.tickSizes number
(default 5)
|
Tick length |
config.xTickSkip string
(default "auto")
|
Indication for number of X ticks or "auto" |
config.yTicks string
(default "auto")
|
Indication for number of Y ticks or "auto" |
config.y2Ticks string
(default "auto")
|
Indication for number of Y2 ticks or "auto" |
config.xAxisFormat (string | function)
(default "auto")
|
Format string for the X axis, "auto" or a formatting function |
config.yAxisFormat string
(default ".2f")
|
Format string for the Y axis, "auto" or a formatting function |
config.y2AxisFormat string
(default ".2f")
|
Format string for the Y2 axis, "auto" or a formatting function |
config.grid string
(default "horizontal")
|
Background grid: horizontal, vertical, full |
config.axisTransitionDuration number
(default 0)
|
Animated transition duration |
config.labelsAreRotated boolean
(default false)
|
If x axis ticks should be rotated |
config.maxYLabelCharCount boolean
(default null)
|
How many x axis tick text characters before truncating and adding an ellipsis |
config.maxXLabelCharCount boolean
(default null)
|
How many y axis tick text characters before truncating and adding an ellipsis
|
config.hoverDotRadius string
(default 4)
|
Radius of hover dots
|
config.tooltipFormat string
(default ".2f")
|
Format string for the tooltip values, "auto" or a formatting function |
config.tooltipTitleFormat string
(default null)
|
Format string for the tooltip title, "auto" or a formatting function |
config.tooltipTitle string
(default "")
|
Tooltip title |
config.mouseChaseDuration number
(default 0)
|
Duration of lag between cursor and tooltip |
config.tooltipEase function
(default d3.easeQuadInOut)
|
Easing function for the tooltip following |
config.tooltipIsEnabled boolean
(default "true")
|
If tooltip is enabled
|
config.dateFormat string
(default "%b %d, %Y")
|
Default format for brush range and tooltip dates |
config.inputDateFormat string
(default "%m-%d-%Y")
|
Default format for domain input date |
config.numberFormat number
(default ".2f")
|
Default format for brush range, domain input and axis numbers |
config.legendXPosition (number | string)
(default "auto")
|
Legend x position or "auto" to dock right |
config.legendYPosition (number | string)
(default "auto")
|
Legend y position or "auto" to dock top |
config.legendTitle string
(default "")
|
Legend title |
config.legendIsEnabled boolean
(default true)
|
Enable legend
|
config.binningResolution string
(default "1mo")
|
Selected resolution |
config.binningIsAuto boolean
(default true)
|
If "Auto" is selected |
config.binningIsEnabled boolean
(default true)
|
Enable binning
|
config.xLock boolean
(default false)
|
If x axis domain is locked |
config.yLock boolean
(default false)
|
If y axis domain is locked |
config.y2Lock boolean
(default false)
|
If y2 axis domain is locked |
config.xDomainEditorIsEnabled boolean
(default true)
|
Enable x domain editing |
config.yDomainEditorIsEnabled boolean
(default true)
|
Enable y domain editing |
config.y2DomainEditorIsEnabled boolean
(default true)
|
Enable y2 domain editing
|
config.brushRangeMin (object<Date> | number)
(default null)
|
Brush min range to display and to set brush |
config.brushRangeMax (object<Date> | number)
(default null)
|
Brush max range to display and to set brush |
config.brushRangeIsEnabled boolean
(default true)
|
Enable brush range editor
|
config.brushIsEnabled boolean
(default true)
|
Enable brush |
config.xLabel string
(default "")
|
X axis label |
config.yLabel string
(default "")
|
Y axis label |
config.y2Label string
(default "")
|
Y2 axis label
|
config.dotsToShow string
(default "none")
|
Which dots to show on line chart, all, isolated, none |
config.lineFx string
(default null)
|
Effect on the line to make it stand out, shadow, underline |
config.lineDotRadius string
(default 4)
|
Radius of line dots, if enabled
|
config.barSpacingPercent number
(default "none")
|
Bar charts gutter width as a % of the bar width |
config.selectedKeys Array<string>
(default [])
|
Dimming all bars except for those listed in this array. Empty = none dimmed
|
config.stackOffset string
(default "stackOffsetNone")
|
Type of offset for stacked chart, coming from d3 stackOffset https://github.com/d3/d3-shape#stack-offsets also available as constants (mapd3.Constants.stackOffset): NONE, PERCENT, STREAMGRAPH, CENTERED, POSITIVE_NEGATIVE |
(any)
object:
The chart instance.
mapd3.Chart(document.querySelector('.chart'))
.setConfig({
width: 100
})
Set data and render
object:
The chart instance.
mapd3.Chart(document.querySelector('.chart'))
.setData(data)
Get access to all exposed events
(function)
: brushStart, brushMove, brushEnd
(function)
: change
(function)
: domainChange, domainLockToggle
(function)
: rangeChange
(function)
: axisLabelChange
(function)
: hover
(function)
: mouseOverPanel, mouseOutPanel, mouseMovePanel