@domoinc/scatter-plot
v5.0.0
Published
ScatterPlot - Domo Widget
Downloads
11
Readme
ScatterPlot
Configuration Options
chartName
Type: string
Default: "ScatterPlot"
Name of chart for Reporting.
chartPrimarySeriesColors
Type: colorArray
Default: [["#D9EBFD","#B7DAF5","#90c4e4","#73B0D7","#4E8CBA","#31689B"],["#DDF4BA","#BBE491","#A0D771","#80C25D","#559E38","#387B26"],["#FDECAD","#FCCF84","#FBAD56","#FB8D34","#E45621","#A43724"],["#F3E4FE","#DDC8EF","#C5ACDE","#B391CA","#8F6DC0","#7940A1"],["#FCD7E6","#FBB6DD","#F395CD","#EE76BF","#CF51AC","#A62A92"],["#D8F4DE","#ABE4CA","#8DD5BE","#68BEA8","#46998A","#227872"],["#FDDDDD","#FCBCB7","#FD9A93","#FD7F76","#e45850","#c92e25"]]
The primary colors used to represent series data
colorScale
Type: scale
Default: ""
undefined
dateTimeFormat
Type: string
Default: "YYYY-MM-DD HH:mm"
Format that the date and time are coming in, if using time data on the X scale.
generalWashoutColor
Type: color
Default: "#E4E5E5"
Fill color of any bubble that is not being hovered.
height
Type: number
Default: 250
Units: px
maxR
Type: number
Default: 15
Units: px
Max bubble radius. The max data point will scale to this size.
minR
Type: number
Default: 5
Units: px
Min bubble radius. The min data point will scale to this size.
rValFormatFunction
Type: function
Default: "function (val) {\n\n\t\t var result = helpers.summaryNumberToObject(val);\n\n\t\t return result.prefix + result.magnitude;\n\t\t}"
Function used to format rVal in tooltip.
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
tooltipBackgroundColor
Type: color
Default: "#555555"
Background color of the tooltip
tooltipFontFamily
Type: string
Default: "Open Sans"
tooltipFontSize
Type: number
Default: 12
Units: px
tooltipTextColor
Type: color
Default: "#FFFFFF"
Color of the tooltip text
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
width
Type: number
Default: 250
Units: px
xScaleType
Type: string
Default: "automatic"
Type of xScale
xValFormatFunction
Type: function
Default: "function (val) {\n\n\t\t var result = helpers.summaryNumberToObject(val);\n\n\t\t return result.prefix + result.magnitude;\n\t\t}"
Function used to format xVal in tooltip.
yValFormatFunction
Type: function
Default: "function (val) {\n\n\t\t var result = helpers.summaryNumberToObject(val);\n\n\t\t return result.prefix + result.magnitude;\n\t\t}"
Function used to format yVal in tooltip.
Data Definition
category
Type: string
Default validate:
function (d) {
return this.accessor(d) !== undefined;
}
Default accessor:
function (line) {
return String(line[3]);
}
r
Type: number
Default validate:
function (d) {
return !isNaN(this.accessor(d)) && this.accessor(d) >= 0;
}
Default accessor:
function (line) {
return Number(line[2]);
}
x
Type: number
Default validate:
function (d) {
return _Chart._xValidateFunctions[_xScaleType].call(this, d);
}
Default accessor:
function (line) {
return _Chart._xAccessorFunctions[_xScaleType].call(this, line);
}
y
Type: number
Default validate:
function (d) {
return !isNaN(this.accessor(d)) && this.accessor(d) >= 0;
}
Default accessor:
function (line) {
return Number(line[1]);
}
Events
Dispatch Events
External Events
Example
//Setup some fake data
var dataLinear = [
[10, 2, 3, "North"],
[20, 5, 6, "South"],
[50, 8, 9, "East"],
[60, 14, 15, "West"]
];
var dataTime = [
['2015-01-01', 2, 3, "North"],
['2015-02-01', 5, 6, "South"],
['2015-03-01', 8, 9, "East"],
['2015-04-01', 14, 5, "West"]
];
var dataOrdinal = [
['Jan', 2, 3, "North"],
['Feb', 5, 6, "South"],
['Mar', 8, 9, "East"],
['Apr', 14, 5, "West"]
];
var aHeight = 250;
var aWidth = 250;
//Initialze the widget
var chart = d3.select("#vis")
.append("svg")
.attr({
height: '500px',
width: '500px'
})
.append("g")
.chart("ScatterPlot")
.c({
width: aWidth,
height: aHeight
});
//Render the chart with data
chart.draw(dataOrdinal);