Widget tricks

Custom made widgets to display certain data and other cool tips to make your portal pop.

ods-map: Refine & Zoom

Showcase how the map can be used as a selector through the refine-on-click option. It also provides an example to show/hide map layers depending on the zoom

ods-maps
map
geo
filter
display

ods-select

ods-select allows the selection of one or more items from a list of options. This resource present different combinations with ods-facet-results or ods-analysis to feed the selection list.

display
navigation
list

Age Pyramid with custom HTML/CSS

Create an age pyramid to present the repartition of the population in your area, with custom HTML and CSS. 3 parameters must be declared in the code: agefield : the id of the age field in your dataset genderfield : the id of the gender field in your dataset valuefield : the id of the value field in your dataset Then, you can customize the colors of the bars in the CSS file, with the 2 variables:

display
chart
ods-adv-analysis
ods-aggregation
ods-subaggregation

Age Pyramid with Vega-Lite

Create an age pyramid to present the repartition of the population in your area, with Vega-Lite. Vega-Lite is a high-level grammar of interactive graphics. It provides a concise, declarative JSON syntax to create an expressive range of visualizations for data analysis and presentation. ods-vega-lite-chart widget, in combinaison with ods-adv-analysis to get the data, allows adding Vega-Lite charts into your pages. To learn more about Vega-Lite charts in ODS pages, read the Vega-Lite presentation.

display
chart
ods-adv-analysis

ods-adv-analysis

Various examples to showcase ods-adv-analysis. This widget exposes the results of an aggregation through the API V2.

aggregation

ods-chart: CSS Hacks

Various CSS tricks to override you ods-chart visualisations.

display
chart

ods-results

Examples to showcase ods-results widget: a simple widget to list records from a dataset, as a list or set of cards.

display
list

Heatmaps with CSS Grid

Custom heatmaps and bubblemaps made by hand with CSS Grid layout and HTML

display
ods-analysis
aggregation

Heatmaps with Vega-Lite

Vega-Lite heatmaps and bubblemaps in combination with ods-adv-analysis

display
ods-analysis
aggregation

ods-chart: Custom CSS Library

A custom CSS library dedicated to ods-chart, it helps users to customize their charts easily by simply adding CSS classes to ods-chart tag.

display
chart

Animations

Animate your data-visualisation (KPIs, Gauge) with ods-timer.

display
chart
aggregation

Static maps, a quick introduction

How to create fast analytics maps based on SVG static files and data aggregation.

geo
aggregation
display

Chart samples

An overview of ods-chart capabilities by type of chart

chart
aggregation

Custom catalog card

Override default catalog cards to highlight key metadata for your business

list
display
navigation

Custom Tooltips

These are resources to create custom tooltips for your maps. You can use them directly in the map editor (in which case you will omit the context) or in your pages.

map

Dates

Date tricks with ods-timerange and angular filters. Different ways to handle dates with ods date picker

date
filter

Drill-down refine in charts

Use chart to refine your page, and go deeper in your analysis step by step

navigation
chart
filter

Filters as an HTML Select

Display your facets and filters in a list with simple HTML selects

display
navigation
list
filter

ods-aggregation

Various examples to showcase ods-aggregation. This widget exposes the results of an aggregation (sum, average, minimum, maximum etc...) function.

aggregation
ods-aggregation

ods-analysis, quick intro

Various examples to showcase ods-analysis. This widget exposes the results of an analysis, ie. multiple aggregations over an X axis.

ods-analysis
aggregation
chart
display