Contact Us
info@fullscale.co
sales@fullscale.co
support@fullscale.co

dangle.js

A set of AngularJS directives that provide common visualizations based on D3

Dangle provides directives that allow you to create visualizations of your data. You can easily bind the result of queries to HTML elements. When the results update, your visualizations will also update. You can build powerful, interactive applications with just a few lines of HTML.

Visualizations are built with SVG so they’re completely re-sizable and work perfectly across any device (desktop or mobile). Because we’re using SVG however, you will need to use a modern browser (any current browser including IE > 8).

Here is a basic demo.

JavaScript Loading

Dangle uses angular’s module API. You can load the entire dangle module but you can also load individual pieces depending on your needs.

<!-- loads the entire dangle module namespace -->
<script src="/common/lib/dangle.min.js"></script>

<!-- Alternatively, you can load specific directives
     by first loading dangle.module.min.js which provides
     an empty module namespace that can then be used
     to load specific directives. -->

<!-- loads only the area and bar directives -->
<script src="/common/lib/dangle.module.min.js"></script>
<script src="/common/lib/dangle.area.min.js"></script>
<script src="/common/lib/dangle.bar.min.js"></script>

Loading the Angular module

Your Angular application has to load the dangle module and optionally, elastic.js which provides an Angular client for elasticsearch.

angular.module('myApp', [
    'elasticjs.service',
    'dangle'
]);

Available Directives

The following sections outlines available directives along with each directive’s configurable attributes and styling information. Also not that a default style sheet is included with the source code.

Date Histogram

Produces an interactive histogram of the results of a query. Each bar is interactive where clicking it calls the given JavaScript function.

Example Usage

<fs-date-histo bind="results.facets.date" on-click="filterByDate" />


Configurable Attributes

bind The data we want to bind to this directive. Required
on-click JavaScript function to execute when clicked. This is typically used to filter the results.
width The initial width of the graph. Graphs are SVG so they will resize automatically. This is mainly to create an initial aspect ratio.
height The initial height of the graph. Graphs are SVG so they will resize automatically. This is mainly to create an initial aspect ratio.
duration If a duration is specified (in milliseconds) then transitions between data updates will be animated.
delay Controls the transtion delay (in millseconds).
label An optional y-axis label (defaults to ‘Frequency’).
field Allows you to specify the field name. Useful if facet name is different from the actual field name.
class An optional CSS class for custom styling properties.
interval Allows user to specify the interval. Possible values are minute, hour, day, week, month, year. Defaults to day

CSS Styling

Custom class can be inserted on each element in the form of .histo.axis.customname path, .histo.rect.customname, etc.

.histo.axis path Controls the style of the axis line.
.histo.axis line controls the style of the axis ticks.
.histo.axis text Controls the styling of the axis text.
.histo.rect Controls the style of the bars.

Donut Chart

Produces an interactive donut chart of the results of a query. Each slice is interactive where clicking it calls the given JavaScript function.

Example Usage

<fs-donut bind="results.facets.browsers" on-click="filterByBrowser" />


Configurable Attributes

bind The data we want to bind to this directive. Required
on-click JavaScript function to execute when clicked. This is typically used to filter the results.
outer-radius The intitial outer radius of the donut. Graphs are SVG so they will resize automatically.
inner-radius The intitial outer radius of the donut. Graphs are SVG so they will resize automatically.
duration If a duration is specified (in milliseconds) then transitions between data updates will be animated.
field allows you to specify the field name. Useful if facet name is different from the actual field name.

Area Chart

Produces an area chart with optional interactive data points. Clicking on the data point then calls the given function.

Example Usage

<fs-area bind="results.facets.date" on-click="filterByDate" />


Configurable Attributes

bind The data we want to bind to this directive. Required
on-click JavaScript function to execute when clicked. This is typically used to filter the results.
width The initial width of the graph. This is mainly to create an initial aspect ratio. Default is 1280.
height The initial height of the graph. This is mainly to create an initial aspect ratio. Default is 300.
duration If a duration is specified (in milliseconds) then transitions between data updates will be animated. Default is 0.
delay Controls the transtion delay (in millseconds). Default is 0.
label An optional y-axis label (defaults to ‘Frequency’).
plot true/false – whether or not to plot the data points. Default is true.
point-radius An optional radius for the data-points
interpolate true/false – whether or not to use interpolation to smooth the curve of the graph. Default is false.
field allows you to specify the field name. Useful if facet name is different from the actual field name.
class An optional CSS class for custom styling properties.

CSS Styling

Custom class can be inserted on each element in the form of .area.axis.customname path, .area.fill.customname, etc.

.area.axis path Controls the style of the axis line.
.area.axis line controls the style of the axis ticks.
.area.axis text Controls the styling of the axis text.
.area.fill Controls the style of the bars.
.area.line Controls the styling of the line over the area fill.
.area.line.points Control the style of the data-points (if plot is set to true)

Bar Chart

Produces an interactive bar chart where clicking on a specific bar calls the given function passing in the term to filter on.

Example Usage

<fs-bar bind="results.facets.state" on-click="filterByState" />


Configurable Attributes

bind The data we want to bind to this directive. Required
on-click JavaScript function to execute when clicked. This is typically used to filter the results.
width The initial width of the graph. This is mainly to create an initial aspect ratio. Default is 300.
height The initial height of the graph. This is mainly to create an initial aspect ratio. Default is 1024.
duration If a duration is specified (in milliseconds) then transitions between data updates will be animated. Default is 0.
align right/left – Sets the alignment of the bars. Default is right aligned.
field allows you to specify the field name. Useful if facet name is different from the actual field name.
class An optional CSS class for custom styling properties.

CSS Styling

Custom class can be inserted on each element in the form of .bar.rect.customname, .bar.text.customname, etc.

.bar.rect Controls the style of the bar.
.bar.text Controls the style of the text.