Charts and graphs - nschonni/wet-boew GitHub Wiki
Project Lead: Pierre Dubois (@duboisp) - Industry Canada, Canadian Intellectual Property Office
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.
WET 3.1 release (Spring 2013). The previous drawing backend supported with RaphaelJS library would be removed in favour of Flot project. The goal is to provide the full advantage of the current table parser with the chart customization provided in the WET 3.0 release.
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 7+
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."
The following technique is supported by the chart and graph
- Layout cell (only the one defined at the header group intersection)
- Row header structure
- Column header structure
- 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 automaticly set correctly.
- Add the class "wet-boew-charts" in the table element.
- Customize your charts by using the CSS Option Class (documented bellow)
Working Example
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.
wb-charts Default required namespace for any parameters and options defined here.
- 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 set the width of the graphic in pixel. eg. "wb-charts-width-300", "wb-charts-width-255".
- height: Number. This set the height of the graphic in pixel. eg. "wb-charts-height-500", "wb-charts-height-715".
- graphclass: String. This allow 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. eg. 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"></figure>). 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: (new) Number. This set the top value used for y-axis in the chart. eg. "wb-charts-topvalue-4000000", wb-charts-topvalue-10
- topvaluenegative: (new) Boolean. This set the value set with "topvalue" to be in his negative form.
- bottomvalue: (new) Number. This set the bottom value used for the y-axis in the chart. eg "wb-charts-bottomvalue-0, wb-charts-bottomvalue-50".
- bottomvaluenegative: new Boolean. This set the value set with "bottomvalue" to be in his negative form.
- nocutaxis: (new) Boolean. This is to disable the auto axis cut. eg. "wb-charts-nocutaxis-true"
- steps: new Number. This force the step value to be taken to draw the chart. eg. "wb-charts-steps-5500"
- parseDirection: (new) Enumeration ("y", "x"). This define the direction on how the data table should be read. By default the value is "x".
- noencapsulation: (new) Boolean. This disable the moving of the data source html table inside a details/summary below the charts. eg. "wb-charts-noencapsulation-true"
- maxwidth: (new) Number. This set the maximum allowed width in pixel for the charts.
- decimal: (new) Number. This set decimal precision. For an example if you may have a pie chart with a quarter that is bellow 0.5 % can not be display properly. eg. "wb-charts-decimal-1, wb-charts-decimal-2"
- 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.
- execdelay: (new) Number. This set 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.
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
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]" eg. "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]" eg. "wb-charts-overcolor-red", "wb-charts-overcolor-orangered"
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]" eg. "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]" eg. "wb-charts-fillover-blue", "wb-charts-fillover-yellow"
Note: Only the type is available for a pie chart, all the other option is for an 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]" eg. "wb-charts-color-blue", "wb-charts-color-yellow"
- fillopacity: Number (between 0 and 100). This allow you to set the opacity for an bar, stacked and area object. "wb-charts-fillopacity-[Any]" eg. "wb-charts-fillopacity-20", "wb-charts-fillopacity-50"
- dasharray: String value. This allow you to set a partern stroke. eg. "wb-charts-dasharray-dashspacedot". Please see the section on dasharrary for 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: "- . - . - . - . - . - . - . - . - . - . - . - . "
It 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.
- 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.
- Use Flot project
- Use the full potential of the complex table technique
- 2012-09-17 WET 3.0: Current version
- 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
- Defining a Key Cell
- Defining a Data Row Group
- Summaries a Data Row Group
- Structuring the Header Row
- Describing a Row Header Cell
- Describing a Row Group Header Cell
- Defining Column Group Header
- Structuring the Header Column Cell
- Defining a Data Column Group
- Summaries a Data Column Group
- Describing a Column Header Cell
- Defining a Layout Cell