Charts and graphs

Overview

Project lead: Pierre Dubois (@duboisp)

Description

WET 2.2 release and earlier. Initially the Charts and graphs component was an integration of the visualize project from Filament Group.

WET 2.3 release. The Charts and graphs component was fully re-written. That version was including the first version of the complex table parser build in directly in the charts. The web drawing backend was changed from "Canvas" to "SVG/VML" with the RaphaelJS library. An implementation of customizing the chart directly with the CSS class assigned to the table markup was used.

WET 3.0 release (current). Almost the same as the previous version. The table parser was re-written and partially removed from the chart and graph. This version include an hybrid version of the previous and the current table parser. That decision was made from technical reason and deadline issue. Unfortunately this version of the chart do not full benefit of the current table parser and partially support complex table as defined per twelve new HTML Technique. This version are including more CSS option class to provide more charts customization.

Purpose

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.

  • Easier to update and maintain than image-based charts and graphs
  • Supports line charts, area charts, bar graphs, stacked graph, pie charts and any combinaison of line charts, area charts, bar graphs and stacked graph
  • Visual appearance can be customized through CSS for the graph container (figure element) and the CSS Option Class can be used to customize the graphic itself
  • Progressive enhancement approach
  • Conforms to WCAG 2.0 AA
  • Uses WAI-ARIA to enhance accessibility
  • Supports Firefox, Opera, Safari, Chrome, and IE 8+

Rationale

As per the WCAG 2.0 Guideline 1.1 a chart need to have their tabular data equivalent. The chart and graph use the equivalent version (here the table element) to generate the graphic. The table data is used to provide a long description to the chart. The table caption and his description is present is used to provide the chart title and description.

If you do not use the chart and graph project to create your chart, please do not forget to include a long description. The WCAG 2.0 Guideline 1.1 is "Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language."

Technique for tables

The following technique is supported by the chart and graph

You need to use the grouping table element thead and tbody. Only the first data row group can be graphed.

Implementation

  1. Validate your HTML table using the HTML Table Validator issued from the Optimal Development Tool project. For your information, by using the table validator you will get your ids/headers automatically set correctly.
  2. Add the class "wet-boew-charts" in the table element.
  3. Customize your charts by using the CSS Option Class (documented bellow)

Note: See the Technique for tables and the Known Issues section.

Working examples

Parameters

The options in the Charts and graphs component need to be prefixed with a namespace. The namespace used and default options can be overwritten by using the JavaScript setting file.

Required namespace

wb-charts Default required namespace for any parameters and options defined here.

<table> element

  • type default: Enumeration ("line", "area", "bar", "stacked", "pie"). This define the default type of chart. FYI "wb-charts-line" and "wb-charts-type-line" are equivalent.
  • width: Number. This sets the width of the graphic in pixel. e.g., "wb-charts-width-300", "wb-charts-width-255".
  • height: Number. This sets the height of the graphic in pixel. e.g., "wb-charts-height-500", "wb-charts-height-715".
  • graphclass: String. This allows you to set custom class to the figure container element generated during the creation of the chart. With this you can set your own style to the chart container and legend. e.g., Add the "bold" class to the graphic once generated "wb-charts-graphclass-bold". Once the charts is generated that will produce the action of adding the class "bold" to the figure element (<figure class="wb-charts bold">). This can be useful when you want to set specific style to the legend."ul" list, like by forcing 2 column rendering or completly hide the legend.
  • topvalue: Number. This sets the top value used for y-axis in the chart. e.g., "wb-charts-topvalue-4000000", "wb-charts-topvalue-10"
  • topvaluenegative: Boolean. This sets the value set with "topvalue" to be in his negative form.
  • bottomvalue: Number. This sets the bottom value used for the y-axis in the chart. e.g.,"wb-charts-bottomvalue-0", "wb-charts-bottomvalue-50".
  • bottomvaluenegative: Boolean. This sets the value set with "bottomvalue" to be in its negative form.
  • nocutaxis: Boolean. This is for disabling the auto axis cut. e.g., "wb-charts-nocutaxis-true"
  • steps: Number. This forces the step value to be taken to draw the chart. e.g., "wb-charts-steps-5500"
  • parseDirection: Enumeration ("y", "x"). This define the direction on how the data table should be read. By default the value is "x".
  • noencapsulation: Boolean. This disables the moving of the data source html table inside a details/summary below the charts. e.g., "wb-charts-noencapsulation-true"
  • maxwidth: Number. This sets the maximum allowed width in pixel for the charts.

Only available for pie chart

  • decimal: Number. This sets decimal precision. For an example if you may have a pie chart with a quarter that is below 0.5% can not be display properly. e.g., "wb-charts-decimal-1, wb-charts-decimal-2"

Removed

  • hide: Boolean. This was replaced by a build in mechanism that use a details/summary element under the chart to provide an access to the tabular data.

Technical cheat

  • execdelay: Number. This sets the amount of time (in milisecond) to wait before to create the second and subsequent charts. By default the value is set to 200 milisecond.

<tbody> element

Note: Only the first tbody is used to create the graphic, all the subsequent data group are currently just ignored.

  • type default: Enumeration ("line", "area", "bar", "stacked", "pie"). This define the default type of chart. FYI "wb-charts-line" and "wb-charts-type-line" are equivalent. This will overwrite any value set for the table element.

<td> element

Note: Only available for the pie chart.

  • color: String. This allow you to set a custom html color to the pie quarter associated. "wb-charts-color-[Any]" e.g., "wb-charts-color-blue", "wb-charts-color-yellow"
  • overcolor: String. This allow you to set a custom mouse hover html color to the pie quarter associated. "wb-charts-overcolor-[Any]" e.g., "wb-charts-overcolor-red", "wb-charts-overcolor-orangered"

For an implementation example, please take a look at the pie chart in the complex charts working example.

<th> element (Defined in the header row group, thead)

Note: Only available for the Line, Area, Bar and Stacked Chart.

  • fill: String. This allow you to set a custom background html color to this cell header once it's draw on the graphic. "wb-charts-fill-[Any]" e.g., "wb-charts-fill-red", "wb-charts-fill-orangered"
  • fillover: String. This allow you to set a custom mouseover background html color to this cell header once it's draw on the graphic. "wb-charts-fillover-[Any]" e.g., "wb-charts-fillover-blue", "wb-charts-fillover-yellow"

<th> element (Defined in the first data row group, tbody)

Note: Only the type is available for a pie chart, all the other option is for a Line, Area, Bar and Stacked Chart.

  • type default: Enumeration ("line", "area", "bar", "stacked", "pie"). This define the default type of chart. FYI "wb-charts-line" and "wb-charts-type-line" are equivalent. This will overwrite any value set on row group (tbody) and table parent element.
  • color: String. This allow you to set a custom html color for the bar, stacked, area or line. "wb-charts-color-[Any]" e.g., "wb-charts-color-blue", "wb-charts-color-yellow"
  • fillopacity: Number (between 0 and 100). This allow you to set the opacity for a bar, stacked and area object. "wb-charts-fillopacity-[Any]" e.g., "wb-charts-fillopacity-20", "wb-charts-fillopacity-50"
  • dasharray: String value. This allow you to set a pattern stroke. e.g., "wb-charts-dasharray-dashspacedot". Please see the section on dasharrary for example

"dasharray" example

  • wb-charts-dasharray-none draw a continuous line, this is the default
  • wb-charts-dasharray-dash draw: "------------"
  • wb-charts-dasharray-dashdot draw: "-.-.-.-.-.-."
  • wb-charts-dasharray-dot draw: "............"
  • wb-charts-dasharray-dotspace draw: ". . . . . . . . . . . . "
  • wb-charts-dasharray-dashspace draw: "- - - - - - - - - - - - "
  • wb-charts-dasharray-dashspacedot draw: "- . - . - . - . - . - . - . - . - . - . - . - . "

Working example using parameter

Development

It is possible to overwrite all the default setting above by using the WET setting mechanism. The variable to use is "wet_boew_charts". However the default color can not be overwritten.

Known issues

  • Row grouping tag is required (thead, tbody)
  • Only the first data row group (tbody) is use to create the charts.
  • The column group summaries technique is not supported.
  • Key cell and description cell for a row is not supported.

Future

  • Add the possibility to overwrite the data cell parsing
  • Use the full potential of the complex table technique

Version history

  • 2012-09-17 WET 3.0:
  • 2012-03-14 2.01: Percentage calculation for the pie chart was fixed because sometime it does not equal to 100%
  • 2012-02-06 2.0: Complete re-write and support for complex tables and complex graphic
  • 2011-08-08 1.01: Updated to latest versions of the HTML5 core markup structure, the CLF 2.0 theme, and the base theme
  • 2011-02-07 1.0: Initial release

References

HTML tables techniques

Zebra striping

Complex data table

Case studies