Charts and graphs

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

Questions or comments?

Purpose

Dynamically generates charts and graphs from table data.

This feature dynamically generates charts from table data. The table data used to generate the graphic need to have a structure as defined in the techniques for tables. The graphic generated can be easily customized by using the CSS Option set to the tables elements.

The charts plugin is a interface between data table and a drawing charts engine. Currently, for extensibility and to ease support, Flot is the charts drawing engine used.

Use when

Working example

English:

French:

How to implement

  1. Organize your charts data into a table.

    Tips: You can use the techniques for designing tables

  2. Add a class="wb-charts" element to the table. 
    <table class="wb-charts">
  3. Customize quickly your chart by adding predefined preset, via CSS class name, to the table. 
    <table class="wb-charts wb-charts-bar">
    or to series header[{htmlmin-lb}]
    <tr>
	<th class="wb-charts-bar">
	[...]
<tr>
	<th class="wb-charts-line">
	[...]

Customize your chart

Beyond your customization

Prioritization of the configuration

  1. Javascript JSON object passed through global variable
  2. CSS Preset, will be executed sequentially
  3. HTML5 data attribute

Preset configuration options

The following is the build in preset available configuration options is specific to wet-charts plugins.

Preset Inherit What it does
defaults Sets minimal defaults options for the charts. It contains the instruction to activate the Flot Canvas plugin, the defaults colors array for charting, the defaults function to parse the data content of a table cells.
wb-charts-line Do nothing, here for conviniance and to add more clarity on the charts generated from the data table.
wb-charts-area Customization of a Flot line charts. It's fill the area under the line.
wb-charts-bar Configuration defaults options to create a bars charts. This preset, when detected, will activate the orderbar Flot plugin and set the associated configuration requirement.
wb-charts-pie Default options and activation of the Flot pie chart plugin. It set a default label formater function for the pie chart labels.
wb-charts-donut wb-charts-pie Build on pie charts preset. It set default options that will transform the pie chart into a donut charts. Also set the pie label formater to use only one decimal precision
wb-charts-stacked wb-charts-bar Only for series. Avoid to be cought and have no impact on how the orderbar plugin will be configured.
wb-charts-thousandcomma Replace the function to parse the data content of a table cells in order to support thousand comma separator numbers
wb-charts-thousanddot Replace the function to parse the data content of a table cells in order to support thousand dot separator numbers

Configuration options

For any configuration options related to Flot, please look at the Flot Reference documentation or/and the pie charts options.

The following configuration options is specific to wet-charts plugins.

Option Description How to configure Values
reversettblparsing Define how the data table should be traversed. The default traversal direction is the same as the direction defined in HTML spec. The HTML spec direction is row base. Hold boolean value. data-wb-charts='{ "reversettblparsing": true }'
false (default):
The data of the table will be parsed in the row direction
true:
The data of the table will be parsed in the column direction
labelposition Specify the row or the column to use to set label on the charts. A vector is a row or column where the direction have no importance. Hold numeric value. data-wb-charts='{ "labelposition": 1 }'
false (default):
false means the deepest vector will be used for labelling
1:
First vector is used to set labels on the chart
2:
Second vector is used to set labels on the chart
Numerical Value:
The numeric value represent the number of vector in the header group that will be use to set labels on the chart
referencevalue Specify the row or the column to use as the value of reference to set the steps (x-axis ticks) on the charts. A vector is a row or column where the direction have no importance. Hold numeric value. data-wb-charts='{ "referencevalue": 1 }'
false (default):
false means the deepest vector will be used for calculate the reference
1:
First vector is used to set the value of reference steps on the chart
2:
Second vector is used to set the value of reference steps on the chart
Numerical Value:
The numeric value represent the number of vector in the header group that will be use to set the value of reference stepson the chart
decimal For pie charts, it set the number of decimal precision to include for the percentage label. Hold numeric value data-wb-charts='{ "decimal": 1 }'
0 (default):
The percentage label will include no decimal
1:
One decimal of the percentage label will included.
Numerical Value:
Number of decimal to be included in the percentage pie label.
nolegend Ability to destroy the flot generated legend. Hold boolean value. data-wb-charts='{ "nolegend": true }'
false (default):
Flot create his legend as it do by default
true:
The legend will be destroyed. It may allow you also to have pie label on each pie quarter.
legendinline Ability to move the flot generated legend after the table to meet WCAG 2.0 Level AA purpose. Hold boolean value. data-wb-charts='{ "legendinline": true }'
false (default):
The DOM produced by flot will be manipulated to move the legend from inside the charts to next to it
true:
No DOM manipulation. This may allow you more control for using the flot labeling options.
noencapsulation Wrap or not the table in a details/summary elements. Hold boolean value. data-wb-charts='{ "noencapsulation": true }'
false:
The table will be wrapped in a details/summary elements. Default when table have caption.
true:
The table will be leaved as is. Default when table have no caption.
height Set the height of a charts. Hold numeric value mesured in pixel. data-wb-charts='{ "height": 350 }'
$elm.height() (default):
The height, in pixel, of the table, if unknow it would use a value of 200 pixels.
Numerical Value:
Number of pixel that represent the charts height.
width Set the width of a charts. It may useful for pie charts but are useless for other charts because the Flot Canvas plugin will allow the charts to fit the full width of the table container. Hold numeric value mesured in pixel. data-wb-charts='{ "width": 350 }'
$elm.width() (default):
The width, in pixel, of the table, if unknow it would use a value of 200 pixels.
Numerical Value:
Number of pixel that represent the charts width.

Events

Document the public events that can be used by implementers or developers.

Event Trigger What it does
wb-init.wb-charts Triggered manually (e.g., $elm.trigger( "wb-init.wb-charts" );). Used to manually initialize the Charts plugin. Note: The Charts plugin will be initialized automatically unless the required markup is added after the page has already loaded.
wb-ready.wb-charts (v4.0.5+) Triggered automatically after a chart initializes. Used to identify which chart was initialized (target of the event) 
$( document ).on( "wb-ready.wb-charts", ".wb-charts", function( event ) {
});
$elm.on( "wb-ready.wb-charts", function( event ) {
});
wb-updated.wb-charts (v4.0.5+) Triggered automatically each time the chart is updated. Used to identify which chart was updated (target of the event) 
$( document ).on( "wb-updated.wb-charts", ".wb-charts", function( event ) {
});
$elm.on( "wb-updated.wb-charts", function( event ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});
passiveparse.wb-tableparser When the charts need the table parser to parse the table. When this event is triggered, that means Flot library is loaded. As that said, you can take advantage of this event to load your own Flot plugin. It will parse the data table and attach the information to a data attribute named tblparser on every elements that related to the table.
parsecomplete.wb-tableparser When the table parser has completed his parsing job. It's means that the tblparser data attribute is now ready to be use. So it is after this event that the data will be prepared for Flot. Then the charts will be created.

Source code

Date modified: