/ui/utils/histogram

The histogram utility module exports the histogram object with a create method to generate a histogram dataview.

// Definition of a histogram dataview within layer

"dataviews": {
  "Histogram": {
    "dataview": "histogram",
    "viewport": true,
    "options": {
      "title": "My Histogram Title",
      "caption": "My histogram caption",
      "height": 200,
      "tooltip": true,
      "ylabel": "this is vertical label",
      "xlabel": "this is horizontal label"
    },
    "queryparams": {
      "field": "population",
      "table": "network_location",
      "buckets": 6, // optional, defaults to 7
      "decimals": 1 // optional, default to 0
    }
  }
}
Source

Methods

(inner) create(params)

Initial creation of histogram. The function requests data based on defined query settings and creates histogram visual element.

Parameters:
NameTypeDescription
paramsObject

Histogram configuration object.

Properties
NameTypeAttributesDefaultDescription
params.targetHTMLElement

Target element for the histogram node.

params.viewportBoolean

Applies filtering by map current viewport, disabled by default.

params.mapChangeBoolean

Applies filtering by map current viewport on each map change end event, disabled by default. Used for layer based histograms.

params.queryString<optional>
'histogram'

Histogram query requires table and field passed in queryparams object. The default query supports other 2 parameters: buckets which defaults to 7 and represents count of histogram buckets aparts from 2 edge buckets therefore a default histogram has a total of 9 buckets. The other parameter is decimals defaulting to zero.

params.queryparamsObject<optional>

Parameter for histogram query request.

params.optionsObject<optional>

Stores chart optional settings.

params.formatterParamsObject<optional>

Configuration object for number formatting.

options.tooltipBoolean<optional>

Defaults to false. If enabled each bucket will have a tooltip with bucket properties.

options.widthNumber<optional>

Width in pixels for histogram container.

options.heightNumber<optional>

Height in pixels for histogram container.

options.titleString<optional>

Title to display above.

options.captionString<optional>

Caption to display below.

options.ylabelString<optional>

Label for vertical axis.

options.xlabelString<optional>

Label for horizontal axis.

options.columnGapString<optional>

Gap between bars in pixels. Defaults to 10px. Use this property to alter bar thickness and spacing.

Source

(inner) createHistogramBuckets(params)

The method generates an array of bucket elements from the data buckets. The elements are rendered into the histogram node.

Parameters:
NameTypeDescription
paramsObject

Histogram configuration object.

Source

(inner) setData(data)

The dataview setData method is called by the dataview update method. The data must be provided as an array of bucket object.

{
    "count": 68,
    "bucket": 0,
    "bucket_min": "0",
    "bucket_max": "143"
},
{
    "count": 1166,
    "bucket": 1,
    "bucket_min": "143",
    "bucket_max": "286"
},
{
    "count": 1571,
    "bucket": 2,
    "bucket_min": "286",
    "bucket_max": "429"
}
Parameters:
NameTypeDescription
dataArray

The histogram data.

Source