An HTML microformat is a convention for adding extra metadata to an HTML document so that it is easy to extract meaningful data from the document. Microformats typically use the class attribute to identify the data.
- The specification of the chart is entirely within the content of the document. All that is required is a relatively simple, generic processor to convert the data into the options required by the charting library.
- It forces the chart to be driven by defined content, which makes is easier to support alternative charting libraries and to manage options through time.
- Because it is just HTML, the content can be produced by processes that are not permitted to create scripts.
- It makes testing easier for both the processes that produce the HTML and the processes that consume it.
- It allows the data to be shown to the user in both its original form and its processed form, for example showing the user data as both a chart and a table.
- Using a generic microformat makes it is easy to extend, for example adding options required by one charting library that can be ignored by another.
|1.||Root processing||The root element is interpreted as an object. Objects contain data, arrays and other objects, which must have names.||
|2.||Data within an object||
||The element is interpreted as an object property. The class immediately after the data class gives the name of the property, and the content of the element gives the value of the property.
By default, the data is assumed to be a string. The classes number and boolean can be used to denote numeric and boolean data types.
|3.||Object within an object||
||The element is interpreted as a nested object. The class immediately after the object class gives the name of the nested object. The content of the element gives the object content.
|4.||Array within an object||
||The element represents a nested array. The class immediately after the array class gives the name of the nested array. The content of the element gives the array content.
If an array of the same name already exists within the parent object, then this array is merged with that. This is useful where HTML rules prevents the creation of an enclosing element to represent the array. This is useful for defining some <td> elements within a <tr> as an array, but not all of them.
As well as declaring an array, the element may contain an mfData or mfObject class to denote that it contains data or an object, removing the need for an extra level of HTML markup.
Example using array merging:
|5.||JSON data within an object||
||The element contains data in JSON format. The class name immediately after the mfJSON class gives the name of the property.||
|6.||Data within an array||
||The element represents an array item. This is the same as data within an object, except that there is no name.||
|7.||Object within an array||
||The element represents an object within an array. This is the same as an object within an object, except that there is no name.|
|8.||Array within an array||
||The element represents a nested array. This is the same as array within an object, except that there is no name.|
|9.||JSON data within an array.||
||The element contains data in JSON format. This is the same as JSON data within an object, except that there is no name.|
The mfparse.js script defines the mfparse jQuery plug-in.
var chartData = $(this).mfparse();
// Do something with chartData
The mfparse.display.js and mfparse.display.css provide a convenient method for testing an mfparse structure. When you use the class mfParse, then the structure will be parsed and displayed as a series of nested tables.