jQuery-Plugin with D3.js: Responsive Daterange Selector UI-Component
Minimal html configuration
<div id="graph"></div>
jQuery initialization and customization
This plugin requires jQuery (>= 1.8.x) and D3.js (>= v5.4.0).
Initialize and destroy:
Change dataset and update:
CSS: #graph text { fill: #ccc; } #graph tik { fill: #ccc; } #graph .domain, #graph line { stroke: #ccc; } #graph .bars .bar { fill: #bdb7b7; } #graph .bars .bar.highlight { fill: #d81b60 !important; } #graph .bars .axis--x path { display: none; } #graph .bars .bar.selected { fill: #fff; } #graph .handles .selector { fill: #fff; stroke: #777; stroke-width: 0.5px; } #graph .handles .selector.active { fill: #ccc !important; } #graph .handles .range { fill: #fff; stroke: none; } #graph .handles .selector .handlehovertext { fill: #fff; stroke: none; font-size: 11px; font-family: Helvetica, Arial; } #graph div.tooltip { position: absolute; text-align: center; width: 40px; height: 24px; padding-top: 5px; font: 12px sans-serif; background: #ccc; border: 0px; border-radius: 2px; pointer-events: none; color: #333; } #graph div.tooltip:after { box-sizing: border-box; display: inline; width: 100%; line-height: 1; color: #ccc; content: "\25BC"; position: absolute; text-align: center; margin: -3px 0 0 0; top: 100%; left: 0; } Script: $("#graph").daterangeselect({ data: [], height: 320, rangeBarOpacity: 0.4, handleScaleFactor: 1.6, dataLengthTrigger: 30, onRangeUpdate: function (obj) { $('#range').html('Range: '+ obj[0] + ' – '+ obj[1]); }, hoverText: function (obj) { return obj.key_as_string; } });
Parameters
Parameter | Type | Default | Description |
---|---|---|---|
data
|
array | [] | data array: [{"key_as_string": "2003", doc_count: 123, "key": 1041375600000}] object properties: |
container
|
string | #graph | ID or class of HTML container element (div) |
height
|
int | 320 | total height of SVG container |
rangeBarOpacity
|
float | 0.4 | opacity of range bar indicator (> 0, <= 1) |
handleScaleFactor
|
float | 1.6 | scale factor of slider handles (>= 1, <= 1.7) |
dataLengthTrigger
|
int | 30 | show tick values on x-axis for each bar or every 10th element data lengt =< value: show on each bar data lengt > value: show on every 10th element |
Events
Parameter | Description |
---|---|
onRangeUpdate
|
call back function for slider range selection event returns Array |
hoverText
|
call back function for custom hoover text format expects string as return value (can be in html format) object keys: |
Methods
Parameter | Description |
---|---|
update
|
update graph method name "update" expects second parameter "data" var data = []; $("#graph").daterangeselect("update", data); |
Download
Plugin minified versionView project on Github: Github Repository