Introduction
js-datatable
is an open source JQuery plugin to produce dynamic HTML tables with data visualization capabilities. The plugins was originally developed for the need of academic data visualization (DCASE2016 evaluation campaign results), and to be used with Pelican static page generation framework. js-datatable
is a spin-off project, which separates core functionality into standalone JQuery-plugin. For integration with Pelican, see pelican-datatable
project.
The js-datatable
is designed to be used with Bootstrap 3 framework. Dynamic table handling is implemented with bootstrap-table.js and data visualizations with chart.js.
To see plugin in action, check DCASE2016 challenge results page.
Installation instructions
To use plugin, following javascripts and css files are required:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js.min/datatable.bundle.min.js"></script>
<link rel="stylesheet" href="css.min/datatable.bundle.min.css">
You can use also non-minified versions in case debugging is required:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table.js"></script>
<script type="text/javascript" src="js/Chart.bundle.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/datatable.js"></script>
<link rel="stylesheet" href="css/bootstrap-table.css">
<link rel="stylesheet" href="css/datatable.css">
Plugin is initialized automatically for <table>
elements having class `datatable` set on them. Most of the parametrization is done through data-fields either inside <table>
-tag or in header <th>
-tags.
Download
Download latest release
Usage
js-datatable
is an open source JQuery plugin to produce dynamic HTML tables with data visualization capabilities. This page gives a shot tutorial how to use the plugin and shows it in action.
Via data attributes
This is the simplest way to use the plugin.
Create table
element with class="datatable"
. Parameters to the plugin are given with attributes to table
element.
<table class="table datatable"
data-id-field="code"
data-sort-name="value1"
data-sort-order="desc"
data-show-chart="false"
data-pagination="false"
data-show-pagination-switch="false">
<thead>
<tr>
<th data-field="code" data-sortable="true">Name</th>
<th data-field="value1" data-sortable="true">Value 1</th>
<th data-field="value2" data-sortable="true">Value 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>item 1</td>
<td>40.4</td>
<td>6.5344</td>
</tr>
</tbody>
</table>
More detailed examples see examples below.
Via JavaScript
In case you need customization.
In case an extensive customization is required, the datatable can be created with javascript.
<table id="dynamic-table-1" class="table"
data-id-field="code"
data-sort-name="value1"
data-sort-order="desc"
data-show-chart="false"
data-pagination="false"
data-show-pagination-switch="false">
<thead>
<tr>
<th data-field="code" data-sortable="true">Name</th>
<th data-field="value1" data-sortable="true">Value 1</th>
<th data-field="value2" data-sortable="true">Value 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>item 1</td>
<td>40.4</td>
<td>6.5344</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$( document ).ready(function() {
$('#dynamic-table-1').datatable({});
});
</script>
Parameters
Table options
Name |
Attribute |
JS parameter |
Type |
Default |
Description |
ID field |
data-id-field |
table.id_field |
String |
undefined |
Column name to be used to identify rows. |
Chart visualization |
data-show-chart |
show_chart |
Boolean |
false |
Controls chart visualization. |
Data JSON |
data-json |
|
String |
undefined |
JSON file to populate the table from. |
Data YMAL |
data-yaml |
|
String |
undefined |
YAML file to populate the table from. |
Ranking |
data-rank-mode |
rank_mode |
String |
'normal' |
Dynamic ranking mode:
- normal
- grouped_muted
- grouped_empty
|
Tagging |
data-tag-mode |
tag_mode |
String |
'global' |
Dynamic tagging, column values are grouped and groups are assigned a color. Modes:
- global, all columns are pulled together before assigning a tag color.
- column, all values from a single column is pulled together before assigning a tag color.
|
Row highlighting |
data-row-highlighting |
table.row_highlighting |
Boolean |
false |
Use row_css field in the data file to have row colors. |
Chart modes |
data-chart-modes |
chart_modes |
String |
'bar' |
Comma separated list of visualization modes:
|
Default char mode |
data-chart-default-mode |
chart_default_mode |
String |
'bar' |
Default visualization mode:
|
Bar / Show x-axis |
data-bar-show-xaxis |
bar.show_xaxis |
Boolean |
true |
Show x-axis in bar visualization. |
Bar / height |
data-bar-height |
bar.height |
Number |
240 |
Height of a visualization canvas. |
Bar / horizontal line |
data-bar-hline |
bar.horizontal_line.enabled |
Boolean |
false |
Show horizontal line, value got from data file. Use hline field to set. |
Bar / Tooltip position |
data-bar-tooltip-position |
bar.tooltips.position |
String |
'top' |
Tooltip position, possible values: |
Bar / Show horizontal indicator line |
data-bar-show-horizontal-indicator |
bar.vertical_horizontal_line.enabled |
Boolean |
true |
Show horizontal indicator line. |
Bar / Show vertical indicator line |
data-bar-show-vertical-indicator |
bar.vertical_indicator_line.enabled |
Boolean |
false |
Show vertical indicator line. |
Bar / Vertical indicator line width |
data-bar-vertical-indicator-linewidth |
bar.vertical_indicator_line.lineWidth |
Number |
4 |
Vertical indicator line width. |
Bar / Vertical indicator line color |
data-bar-vertical-indicator-stroke |
bar.vertical_indicator_line.strokeStyle |
String |
rgba(0,0,0,0.2) |
Vertical indicator line color. |
Bar / Horizontal indicator line width |
data-bar-horizontal-indicator-linewidth |
bar.horizontal_indicator_line.lineWidth |
Number |
4 |
Horizontal indicator line width. |
Bar / Horizontal indicator line color |
data-bar-horizontal-indicator-stroke |
bar.horizontal_indicator_line.strokeStyle |
String |
rgba(0,0,0,0.2) |
Horizontal indicator line color. |
Bar / Horizontal indicator line fill color |
data-bar-horizontal-indicator-fill |
bar.horizontal_indicator_line.fillStyle |
String |
rgba(0,0,0,0.1) |
Horizontal indicator fill color. |
Bar / Show error bars |
data-bar-show-error-bar |
bar.error_bar.enabled |
Boolean |
true |
Show error bar for data point (if interval is defined). |
Bar / Error bar line width |
data-bar-error-bar-linewidth |
bar.error_bar.lineWidth |
Number |
2 |
Error bar line width. |
Bar / Error bars tip width |
data-bar-error-bar-tipwidth |
bar.error_bar.tipWidth |
Number |
undefined |
Error bar tip width. If undefined give, then tip width is defined automatically. |
Bar / Error bars line color |
data-bar-error-bar-stroke |
bar.error_bar.strokeStyle |
String |
undefined |
Error bar line color. If undefined given, then item/row color is used. |
Line / fields |
data-line-fields |
line.fields |
String |
undefined |
Comma separated list of fields to be show in the line plot. If undefined, all field shown. |
Line / fill |
data-line-fill |
line.fill |
Boolen |
false |
Fill area under the line. |
Line / Show X-axis |
data-show-xaxis |
line.xaxis.display |
Boolen |
true |
Show x-axis. |
Line / X-axis field |
data-line-xaxis-field |
line.xaxis.field |
String |
undefined |
Data field to be used on x-axis. |
Line / Sorted X-axis |
data-line-xaxis-sorted |
line.xaxis.sorted |
Boolean |
false |
Should the data be sorted based on x-axis field. |
Line / X-axis time unit |
data-line-xaxis-timeunit |
line.xaxis.timeunit |
String |
undefined |
Time unit used. Possible values e.g. minute,hour,day,month,year |
Line / X-axis time step size |
data-line-xaxis-timestepsize |
line.xaxis.timestepsize |
Number |
undefined |
Step size. |
Line / X-axis gridlines |
data-line-xaxis-gridlines |
line.xaxis.gridlines |
Boolean |
true |
Show x-axis gridlines. |
Line / Y-axis beginatzero |
data-line-yaxis-beginatzero |
line.yaxis.beginatzero |
Boolean |
false |
Start y-axis from zero. |
Line / Y-axis label |
data-line-yaxis-label |
line.yaxis.label |
String |
undefined |
Label for y-axis. |
Line / Y-axis scale |
data-line-yaxis-scale |
line.yaxis.scale |
String |
undefined |
Scale for y-axis. Possible values 'log', 'log_unit', 'log_exp', 'log10', 'log10_unit', and 'log10_exp'. |
Line / Y-axis gridlines |
data-line-yaxis-gridlines |
line.yaxis.gridlines |
Boolean |
true |
Show y-axis gridlines. |
Line / Height |
data-line-height |
line.height |
Number |
240 |
Height of a visualization canvas. |
Line / Show data points |
data-line-show-point |
line.point.enabled |
Boolean |
false |
Show data points. |
Line / Data point radius |
data-line-point-radius |
line.point.radius.normal |
Number |
4 |
Data point radius. |
Line / Data point radius hover |
data-line-point-radius-hover |
line.point.radius.hover |
Number |
4 |
Data point radius when mouse on top of it. |
Line / Show line |
data-line-show-line |
line.line.enabled |
Boolean |
true |
Show line between data points. |
Line / Show vertical indicator line |
data-line-show-vertical-indicator |
line.vertical_indicator_line.enabled |
Boolean |
true |
Show vertical indicator line. |
Line / Vertical indicator line width |
data-line-vertical-indicator-linewidth |
line.vertical_indicator_line.lineWidth |
Number |
4 |
Vertical indicator line width. |
Line / Vertical indicator line color |
data-line-vertical-indicator-stroke |
line.vertical_indicator_line.strokeStyle |
String |
rgba(160,160,160,0.5) |
Vertical indicator line color. |
Line / Show horizontal indicator line |
data-line-show-horizontal-indicator |
line.vertical_horizontal_line.enabled |
Boolean |
true |
Show horizontal indicator line. |
Line / Horizontal indicator line width |
data-line-horizontal-indicator-linewidth |
line.horizontal_indicator_line.lineWidth |
Number |
4 |
Horizontal indicator line width. |
Line / Horizontal indicator line color |
data-line-horizontal-indicator-stroke |
line.horizontal_indicator_line.strokeStyle |
String |
rgba(160,160,160,0.5) |
Horizontal indicator line color. |
Line / Horizontal indicator fill color |
data-line-horizontal-indicator-fill |
line.horizontal_indicator_line.fillStyle |
String |
rgba(160,160,160,0.5) |
Horizontal indicator fill color. |
Line / Show horizontal highlights |
data-line-show-horizontal-highlights |
line.horizontal_highlights.enabled |
Boolean |
true |
Show horizontal highlights. |
Line / Horizontal highlights |
data-line-horizontal-highlights |
line.horizontal_highlights.data |
String |
undefined |
Data structure to contain data for highlights in format: value1;title;color,value2;title2;color |
Line / Horizontal highlight line opacity |
data-line-horizontal-highlight-opacity |
line.horizontal_highlights.opacity |
Number |
0.1 |
Line opacity. |
Line / Horizontal highlight line width |
data-line-horizontal-highlight-linewidth |
line.horizontal_highlights.linewidth |
Number |
1 |
Line width. |
Line / Horizontal highlight line color |
data-line-horizontal-highlight-stroke |
line.horizontal_highlights.stroke |
String |
rgba(112, 187, 225 ,1.0) |
Line color. |
Line / Horizontal highlight label position |
data-line-horizontal-highlight-label-position |
line.horizontal_highlights.label.position |
String |
'bottom-right' |
Line title position, possible values: top-left, top-right, bottom-left, bottom-right |
Line / Horizontal highlight label color |
data-line-horizontal-highlight-label-fill |
line.horizontal_highlights.label.fillStyle |
String |
#000 |
Line title color. |
Line / Horizontal highlight label size |
data-line-horizontal-highlight-label-size |
line.horizontal_highlights.label.fontSize |
String |
'12px' |
Line title size. |
Line / Horizontal highlight label opacity |
data-line-horizontal-highlight-label-opacity |
line.horizontal_highlights.label.opacity |
Number |
0.2 |
Line title opacity. |
Line / Show vertical segments |
data-line-show-vertical-segments |
line.vertical_segments.enabled |
Boolean |
true |
Show vertical segments. |
Line / Vertical segments |
data-line-vertical-segments |
line.vertical_segments.data |
String |
undefined |
Data structure to contain data for segments in format: start_value1;stop_value1;title;color,start_value2;stop_value2;title2;color |
Line / Vertical segments opacity |
data-line-vertical-segment-opacity |
line.vertical_segments.opacity |
Number |
0.1 |
Segment opacity. |
Line / Vertical segment label position |
data-line-vertical-segment-label-position |
line.vertical_segments.label.position |
String |
'bottom-right' |
Segment title position, possible values: top, bottom, middle |
Line / Vertical segment label color |
data-line-vertical-segment-label-fill |
line.vertical_segments.label.fillStyle |
String |
#000 |
Segment title color. |
Line / Vertical segment label size |
data-line-vertical-segment-label-size |
line.vertical_segments.label.fontSize |
String |
'12px' |
Segment title size. |
Line / Vertical segment label opacity |
data-line-vertical-segment-label-opacity |
line.vertical_segments.label.opacity |
Number |
0.2 |
Segment title opacity. |
Line / Show error bars |
data-line-show-error-bar |
line.error_bar.enabled |
Boolean |
true |
Show error bar for data point (if interval is defined). |
Line / Error bar line width |
data-line-error-bar-linewidth |
line.error_bar.lineWidth |
Number |
2 |
Error bar line width. |
Line / Error bars tip width |
data-line-error-bar-tipwidth |
line.error_bar.tipWidth |
Number |
undefined |
Error bar tip width. If undefined give, then tip width is defined automatically. |
Line / Error bars line color |
data-line-error-bar-stroke |
line.error_bar.strokeStyle |
String |
undefined |
Error bar line color. If undefined given, then item/row color is used. |
Line / Show interval |
data-line-show-interval |
line.interval.enabled |
Boolean |
true |
Show interval. |
Line / Interval line width |
data-line-interval-linewidth |
line.interval.lineWidth |
Number |
0.4 |
Interval line width. |
Line / Horizontal line |
data-line-hline |
line.horizontal_line.enabled |
Boolean |
false |
Show horizontal line, value got from data file. Use hline field to set. |
Line / Tooltip position |
data-line-tooltip-position |
line.tooltips.position |
String |
'top' |
Tooltip position, possible values: |
Line / Show legend |
data-line-show-legend |
line.legend.enabled |
Boolean |
true |
Show legend. |
Line / Legend position |
data-line-legend-position |
line.legend.position |
String |
'right' |
Legend position, possible values: |
Scatter / height |
data-scatter-height |
scatter.height |
Number |
240 |
Height of a visualization canvas. |
Scatter / x |
data-scatter-x |
scatter.x |
String |
undefined |
Id of a column used as default data source for a scatter plot. |
Scatter / y |
data-scatter-y |
scatter.y |
String |
undefined |
Id of a column used as default data source for a scatter plot. |
Scatter / Point radius |
data-scatter-point-radius |
scatter.point.normal |
Number |
5 |
Data point radius. |
Scatter / Point radius hover |
data-scatter-point-radius-hover |
scatter.point.hover |
Number |
10 |
Data point radius when mouse on top of it. |
Scatter / Show vertical indicator line |
data-scatter-show-vertical-indicator |
scatter.vertical_indicator_line.enabled |
Boolean |
true |
Show vertical indicator line. |
Scatter / Vertical indicator line width |
data-scatter-vertical-indicator-linewidth |
scatter.vertical_indicator_line.lineWidth |
Number |
4 |
Vertical indicator line width. |
Scatter / Vertical indicator line color |
data-scatter-vertical-indicator-stroke |
scatter.vertical_indicator_line.strokeStyle |
String |
rgba(160,160,160,0.5) |
Vertical indicator line color. |
Scatter / Show horizontal indicator line |
data-scatter-show-horizontal-indicator |
scatter.vertical_horizontal_line.enabled |
Boolean |
true |
Show horizontal indicator line. |
Scatter / Horizontal indicator line width |
data-scatter-horizontal-indicator-linewidth |
scatter.horizontal_indicator_line.lineWidth |
Number |
4 |
Horizontal indicator line width. |
Scatter / Horizontal indicator line color |
data-scatter-horizontal-indicator-stroke |
scatter.horizontal_indicator_line.strokeStyle |
String |
rgba(160,160,160,0.5) |
Horizontal indicator line color. |
Scatter / Horizontal indicator fill color |
data-scatter-horizontal-indicator-fill |
scatter.horizontal_indicator_line.fillStyle |
String |
rgba(160,160,160,0.5) |
Horizontal indicator fill color. |
Scatter / Show error bars |
data-scatter-show-error-bar |
scatter.error_bar.enabled |
Boolean |
true |
Show error bar for data point (if interval is defined). |
Scatter / Error bar line width |
data-scatter-error-bar-linewidth |
scatter.error_bar.lineWidth |
Number |
1 |
Error bar line width. |
Scatter / Error bars tip width |
data-scatter-error-bar-tipwidth |
scatter.error_bar.tipWidth |
Number |
8 |
Error bar tip width. |
Scatter / Error bars line color |
data-scatter-error-bar-stroke |
scatter.error_bar.strokeStyle |
String |
rgba(0,0,0,0.2) |
Error bar line color. |
Scatter / Show error box |
data-scatter-show-error-box |
scatter.error_bar.bounding_box |
Boolean |
true |
Show bounding box for error. |
Scatter / Error box fill color |
data-scatter-error-box-fill |
scatter.error_bar.fillStyle |
String |
rgba(0,0,0,0.05) |
Error bounding box fill color. |
Comparison / height |
data-comparison-height |
comparison.height |
Number |
240 |
Height of a visualization canvas. |
Comparison / Row id field |
data-comparison-row-id-field |
comparison.row_id_field |
String |
undefined |
Id of a column used to populate selection dropdown. |
Comparison / Sets json |
data-comparison-sets-json |
comparison.sets |
JSON |
undefined |
Comparison sets in JSON format. It should contain a list of object with following format:
{
"title": "title of a set",
"data_axis_title": "custom value for axis",
"fields": ["column_field1", "column_field1"],
"field_titles": ["custom title 1","custom title 2"]
}
|
Comparison / Default set |
data-comparison-active-set |
comparison.active_set |
String |
undefined |
Preselected set. |
Comparison / Default A row |
data-comparison-a-row |
comparison.a_row |
String |
undefined |
Preselected row A |
Comparison / Default B row |
data-comparison-b-row |
comparison.b_row |
String |
undefined |
Preselected row B |
Comparison / Show error bars |
data-comparison-show-error-bar |
comparison.error_bar.enabled |
Boolean |
true |
Show error bar for data point (if interval is defined). |
Comparison / Error bar line width |
data-comparison-error-bar-linewidth |
comparison.error_bar.lineWidth |
Number |
2 |
Error bar line width. |
Comparison / Error bars tip width |
data-comparison-error-bar-tipwidth |
comparison.error_bar.tipWidth |
Number |
8 |
Error bar tip width. |
Comparison / Error bars line color |
data-comparison-error-bar-stroke |
comparison.error_bar.strokeStyle |
String |
rgba(0,0,0,0.2) |
Error bar line color. |
Header options
Name |
Attribute |
Type |
Default |
Description |
Tag |
data-tag |
Boolean |
undefined |
Groups values in the column and colors them. |
Chartable |
data-chartable |
Boolean |
undefined |
Can the column be select for visualization. |
Begin at zero |
data-beginatzero |
Boolean |
undefined |
0 is included in when values from column are visualized. |
Postfix |
data-postfix |
String |
'' |
String to be added at the end of all values. Use for units. |
Value type |
data-value-type |
String |
undefined |
Value formatter:
int , int-percentage and int-error , numeric, integer
float1 , float1-percentage and float1-error , numeric, float with one decimal
float2 , float2-percentage and float2-error , numeric, float with two decimals
float3 , float3-percentage and float3-error , numeric, float with three decimals
float4 , float4-percentage and float4-error , numeric, float with four decimals
int-percentage-interval and int-percentage-interval-muted , numeric with intervals, format [value] ([interval_low - interval_high]), integers
float1-percentage-interval and float1-percentage-interval-muted , numeric with intervals, format [value] ([interval_low - interval_high]), floats with one decimals
float2-percentage-interval and float2-percentage-interval-muted , numeric with intervals, format [value] ([interval_low - interval_high]), floats with two decimals
float3-percentage-interval and float3-percentage-interval-muted , numeric with intervals, format [value] ([interval_low - interval_high]), floats with three decimals
float4-percentage-interval and float4-percentage-interval-muted , numeric with intervals, format [value] ([interval_low - interval_high]), floats with four decimals
int-percentage-plusminus and int-percentage-plusminus-muted , numeric with plusminus interval, format [value] ±[interval], integers
float1-percentage-plusminus and float1-percentage-plusminus-muted , numeric with plusminus intervals, format [value] ±[interval], floats with one decimals
float2-percentage-plusminus and float2-percentage-plusminus-muted , numeric with plusminus intervals, format [value] ±[interval], floats with two decimals
float3-percentage-plusminus and float3-percentage-plusminus-muted , numeric with plusminus intervals, format [value] ±[interval], floats with three decimals
float4-percentage-plusminus and float4-percentage-plusminus-muted , numeric with plusminus intervals, format [value] ±[interval], floats with four decimals
list , data split , into rows
url data in parsed into list of hrefs, format [url];[url title],[url];[url title]
ref data in parsed into list of reference hrefs, format [url to reference];[reference label],[url to reference];[reference label]
anchor data value used for href to jump to HTML link anchor. In case the link refers to collapsed item, it is opened.
When using percentage formatters, data-postfix is set automatically to % .
|
Bar char y-axis label |
data-axis-label |
String |
undefined |
String to be used as label for axis in charts (bar and scatter), overrides the default label (the column header). |
Axis scale type |
data-axis-scale |
String |
'linear' |
Axis scale type, possible values: log , log_unit , log_exp , log10 , log10_unit , and log10_exp . log10* will show only exponents of 10, *_unit will shorten large numbers with units (k, M, T), exp will use exponent notation. |
Bootstraptable parameters
Essential Bootstraptable specific parameters are collected here for completeness. For full reference, see Bootstraptable.js documentation.
Table options
Name |
Attribute |
Type |
Default |
Description |
Sort name |
data-sort-name |
String |
undefined |
Defines which column will be sorted. |
Sort order |
data-sort-order |
String |
'asc' |
Defines the column sort order, can only be 'asc' or 'desc'. |
Sort order |
data-sort-order |
String |
'asc' |
Defines the column sort order, can only be 'asc' or 'desc'. |
Striped |
data-striped |
Boolean |
true |
True to stripe the rows. |
Pagination |
data-pagination |
Boolean |
true |
True to show a pagination toolbar on table bottom. |
Page list |
data-page-list |
Array |
[10, 25, 50, 100] |
When set pagination property, initialize the page size selecting list. If you include the 'All' option, all the records will be shown in your table. |
Show columns |
data-show-columns |
Boolean |
false |
True to show the columns drop down list. |
Show toggle |
data-show-toggle |
Boolean |
false |
True to show the toggle button to toggle table / card view. |
Show pagination switch |
data-show-pagination-switch |
Boolean |
true |
True to show the pagination switch button. |
Header options
Name |
Attribute |
Type |
Default |
Description |
Field |
data-field |
String |
undefined |
The column field name. |
Sortable |
data-sortable |
Boolean |
false |
True to allow the column can be sorted. |
Visible |
data-visible |
Boolean |
true |
False to hide the columns item. |
Formatter |
data-formatter |
Function |
undefined |
The context (this) is the column Object. The cell formatter function, take three parameters: value: the field value. row: the row record data. index: the row index. |
Table examples
Preferred way to deliver the data to js-datatable is to have all data in HTML table. If static page generation is used, the data can be read from data files in the generation stage. Alternative method is to use asynchronous loading (JSON or YAML files) when the data is loaded once the page is loaded and table is populated with the data. By using static content, the all data is show once page is loaded and in if javascript is turned off table is still showing some data. When using remote data source, there is a delay depending on the connection speed before the table data is populated. Modern web crawlers (e.g. google) should handle dynamic data and index it.
Simple table, data from HTML table
Safest way to create dynamic table is to have all data in HTML table. One can also populate data
This a simple dynamic table, basically same than what you would get with bootstrap-table.js alone.
Name |
Value 1 |
Value 2 |
item 1 |
40.4 |
6.5344 |
item 2 |
60.2 |
3.232 |
item 3 |
20.6 |
9.32 |
Show code
<table class="table datatable"
data-id-field="code"
data-sort-name="value1"
data-sort-order="desc"
data-pagination="false"
data-show-pagination-switch="false">
<thead>
<tr>
<th data-field="code" data-sortable="true">Name</th>
<th data-field="value1" data-sortable="true">Value 1</th>
<th data-field="value2" data-sortable="true">Value 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>item 1</td>
<td>40.4</td>
<td>6.5344</td>
</tr>
<tr>
<td>item 2</td>
<td>60.2</td>
<td>3.232</td>
</tr>
<tr>
<td>item 3</td>
<td>20.6</td>
<td>9.32</td>
</tr>
</tbody>
</table>
Simple table, data from remote JSON file
This a simple dynamic table, basically same than what you would get with bootstrap-table.js alone.
Show code
Show JSON
<table class="table datatable"
data-json="data2.json"
data-id-field="name"
data-sort-name="value1"
data-sort-order="desc"
data-pagination="false"
data-show-pagination-switch="false">
<thead>
<tr>
<th data-field="code" data-sortable="true">Name</th>
<th data-field="value1" data-sortable="true">Value 1</th>
<th data-field="value2" data-sortable="true">Value 2</th>
</tr>
</thead>
</table>
[
{
"code": "Red",
"value1": "12",
"value2": "22",
"value3": "5",
"value4": "34",
"feature1": "square",
"feature2": "triangle",
"row_css": "danger"
},
{
"code": "Blue",
"value1": "62",
"value2": "42",
"value3": "8",
"value4": "64",
"feature1": "circle",
"feature2": "triangle",
"row_css": "warning"
}
]
Simple table, data from remote YAML file
Show code
Show YAML
<table class="table datatable"
data-yaml="data2.yaml"
data-id-field="name"
data-sort-name="value1"
data-sort-order="desc"
data-pagination="false"
data-show-pagination-switch="false">
<thead>
<tr>
<th data-field="code" data-sortable="true">Name</th>
<th data-field="value1" data-sortable="true">Value 1</th>
<th data-field="value2" data-sortable="true">Value 2</th>
</tr>
</thead>
</table>
data:
- code: Red
value1: 12
value2: 22
feature1: square
feature2: triangle
row_css: danger
- code: Blue
value1: 62
value2: 42
feature1: circle
feature2: triangle
row_css: warning
Ranking
Plugin provides a few way to rank rows dynamically based on sorting:
normal
, running index
Rank |
Name |
Value 1 |
Value 2 |
Show code
<table class="table datatable"
data-json="data2.json"
data-rank-mode="normal"
data-id-field="name"
data-sort-name="value1"
data-sort-order="desc"
data-pagination="false"
data-show-pagination-switch="false">
<thead>
<tr>
<th data-rank="true">Rank</th>
<th data-field="code" data-sortable="true">Name</th>
<th data-field="value1" data-sortable="true">Value 1</th>
<th data-field="value2" data-sortable="true">Value 2</th>
</tr>
</thead>
</table>
grouped_muted
, values are grouped so that equal values get same rank index. Only first rank index is shown normally, rest is muted.
Rank |
Name |
Value 1 |
Value 2 |
Show code
<table class="table datatable"
data-json="data2.json"
data-rank-mode="grouped_muted"
data-id-field="name"
data-sort-name="value1"
data-sort-order="desc"
data-pagination="false"
data-show-pagination-switch="false">
<thead>
<tr>
<th data-rank="true">Rank</th>
<th data-field="code" data-sortable="true">Name</th>
<th data-field="value1" data-sortable="true">Value 1</th>
<th data-field="value2" data-sortable="true">Value 2</th>
</tr>
</thead>
</table>
grouped_empty
, values are grouped so that equal values get same rank index. Only first rank index is shown.
Rank |
Name |
Value 1 |
Value 2 |
Show code
<table class="table datatable"
data-json="data2.json"
data-rank-mode="grouped_empty"
data-id-field="name"
data-sort-name="value1"
data-sort-order="desc"
data-pagination="false"
data-show-pagination-switch="false">
<thead>
<tr>
<th data-rank="true">Rank</th>
<th data-field="code" data-sortable="true">Name</th>
<th data-field="value1" data-sortable="true">Value 1</th>
<th data-field="value2" data-sortable="true">Value 2</th>
</tr>
</thead>
</table>
Value in the cells can be formatted dynamically. js-datatable provides currently following formatters.
Numeric
int
, numeric, integer
float1
, numeric, float with one decimal
float2
, numeric, float with two decimal
float3
, numeric, float with three decimal
float4
, numeric, float with four decimal
float1-exp
, numeric, scientific number format with one decimal
float2-exp
, numeric, scientific number format with two decimal
float3-exp
, numeric, scientific number format with three decimal
float4-exp
, numeric, scientific number format with four decimal
numeric-unit
, numeric, transform number to use nearest unit [k, M, B, T]
Name |
int |
float1 |
float2 |
float3 |
float4 |
Show code
Numeric with interval
Data format: [value] ([interval low value] - [interval high value])
int-interval
and int-interval-muted
, numeric with intervals, integers.
float1-interval
and float1-interval-muted
, numeric with intervals, floats with one decimals.
float2-interval
and float2-interval-muted
, numeric with intervals, floats with two decimals.
float3-interval
and float3-interval-muted
, numeric with intervals, floats with three decimals.
float4-interval
and float4-interval-muted
, numeric with intervals, floats with four decimals.
Name |
int-interval |
int-interval-muted |
float1-interval |
float1-interval-muted |
float2-interval |
float2-interval-muted |
float3-interval |
float3-interval-muted |
float4-interval |
float4-interval-muted |
Show code
Numeric with plusminus interval
Data format: [value1]±[plusminus value]
int-plusminus
and int-plusminus-muted
, numeric with plus minus interval, integers.
float1-plusminus
and float1-plusminus-muted
, numeric with plus minus interval, floats with one decimals.
float2-plusminus
and float2-plusminus-muted
, numeric with plus minus interval, floats with two decimals.
float3-plusminus
and float3-plusminus-muted
, numeric with plus minus interval, floats with three decimals.
float4-plusminus
and float4-plusminus-muted
, numeric with plus minus interval, floats with four decimals.
Name |
int-plusminus |
int-plusminus-muted |
float1-plusminus |
float1-plusminus-muted |
float2-plusminus |
float2-plusminus-muted |
float3-plusminus |
float3-plusminus-muted |
float4-plusminus |
float4-plusminus-muted |
Show code
Plusminus error
Data format: [plusminus value]
int-error
, numeric plus minus interval, integers.
float1-error
, numeric plus minus interval, floats with one decimals.
float2-error
, numeric plus minus interval, floats with two decimals.
float3-error
, numeric plus minus interval, floats with three decimals.
float4-error
, numeric plus minus interval, floats with four decimals.
Name |
int-error |
float1-error |
float2-error |
float3-error |
float4-error |
Show code
Percentage
int-percentage
, numeric, integer.
float1-percentage
, numeric, float with one decimal.
float2-percentage
, numeric, float with two decimal.
float3-percentage
, numeric, float with three decimal.
float4-percentage
, numeric, float with four decimal.
Name |
int-percentage |
float1-percentage |
float2-percentage |
float3-percentage |
float4-percentage |
Show code
Percentage with interval
Data format: [value] ([interval low value] - [interval high value])
int-percentage-interval
and int-percentage-interval-muted
, numeric with intervals, integers.
float1-percentage-interval
and float1-percentage-interval-muted
, numeric with intervals, floats with one decimals.
float2-percentage-interval
and float2-percentage-interval-muted
, numeric with intervals, floats with two decimals.
float3-percentage-interval
and float3-percentage-interval-muted
, numeric with intervals, floats with three decimals.
float4-percentage-interval
and float4-percentage-interval-muted
, numeric with intervals, floats with four decimals.
Name |
int-percentage-interval |
int-percentage-interval-muted |
float1-percentage-interval |
float1-percentage-interval-muted |
float2-percentage-interval |
float2-percentage-interval-muted |
float3-percentage-interval |
float3-percentage-interval-muted |
float4-percentage-interval |
float4-percentage-interval-muted |
Show code
Percentage with plusminus interval
Data format: [value]±[plusminus value]
int-percentage-plusminus
and int-percentage-plusminus-muted
, numeric with plus minus interval, integers.
float1-percentage-plusminus
and float1-percentage-plusminus-muted
, numeric with plus minus interval, floats with one decimals.
float2-percentage-plusminus
and float2-percentage-plusminus-muted
, numeric with plus minus interval, floats with two decimals.
float3-percentage-plusminus
and float3-percentage-plusminus-muted
, numeric with plus minus interval, floats with three decimals.
float4-percentage-plusminus
and float4-percentage-plusminus-muted
, numeric with plus minus interval, floats with four decimals.
Name |
int-percentage-plusminus |
int-percentage-plusminus-muted |
float1-percentage-plusminus |
float1-percentage-plusminus-muted |
float2-percentage-plusminus |
float2-percentage-plusminus-muted |
float3-percentage-plusminus |
float3-percentage-plusminus-muted |
float4-percentage-plusminus |
float4-percentage-plusminus-muted |
Show code
Data lists
list
, data items delimited with ,
are split into <br>
separated lines.
Show code
Linking
url
data in parsed into list of hrefs. Data format: [url];[url title],[url];[url title]
ref
similar to url
, but content is assumed to be reference to scientific article. Data format: [url to pdf];[reference label],[url to pdf];[reference label]
anchor
data value used for href to jump to HTML link anchor. In case the link refers to collapsed item, it is opened.
Name |
Anchor |
URL |
References |
Show code
Inline data visualization
Inline data visualization can be used to visualize data series inside a cell. There is available a few different graph types:
inline-bar-horizontal-percentage
and inline-bar-horizontal-thin-percentage
to visualize percentages, values should add up to 100.
inline-bar-vertical
, data series is visualized as bar plot.
inline-line
and inline-line-steps
, data series is visualized with line plot either linearly interpolating between data points or not.
inline-bar-vertical-tristate
, data series is visualized as tristate box plot.
inline-indicator-value
and inline-indicator-value-html
, visualize data series with equal sized boxes, and fill color is used to indicate data point value.
inline-indicator-binary
and inline-indicator-binary-html
, visualize data series with equal sized boxes, and fill color is used to indicate data point value 0 or >0.
inline-indicator-tristate
and inline-indicator-tristate-html
, visualize data series with equal sized boxes, and fill color and offset is used to indicate data point values 0, >0 and <0.
Data series should be formatted for inline graphs as:
[value1];[text label (with HTML tags) or HTML color code (#000000, rgb(), or rgba())],[value2];[text/color]
Name |
inline-bar-horizontal-percentage |
inline-bar-horizontal-thin-percentage |
Name |
inline-bar-vertical |
inline-bar-vertical-tristate |
inline-line |
inline-line-steps |
Name |
inline-indicator-value |
inline-indicator-value-html |
inline-indicator-binary |
inline-indicator-binary-html |
inline-indicator-tristate |
inline-indicator-tristate-html |
Show code
Values in columns can be grouped, and for each group a distinct background color can be assigned. Tagging mode is set by data-tag-mode
, available modes are
- global, all columns are pulled together before assigning a tag color.
- column, all values from a single column is pulled together before assigning a tag color.
Name
|
Value 1
|
Value 2
|
Feature 1
|
Feature 2
|
Show code
<table class="table datatable"
data-json="data2.json"
data-id-field="name"
data-sort-name="value1"
data-sort-order="desc"
data-pagination="false"
data-tag-mode="global"
data-show-pagination-switch="false">
<thead>
<tr>
<th data-field="code"
data-sortable="true">
Name
</th>
<th data-align="center"
data-field="value1"
data-sortable="true"
data-tag="true">
Value 1
</th>
<th data-align="center"
data-field="value2"
data-sortable="true"
data-tag="true">
Value 2
</th>
<th class="sep-left-cell"
data-align="center"
data-field="feature1"
data-sortable="true"
data-tag="true">
Feature 1
</th>
<th class="sep-left-cell"
data-align="center"
data-field="feature2"
data-sortable="true"
data-tag="true">
Feature 2
</th>
</tr>
</thead>
</table>
Filtering
Column based filtering.
Name
|
Value 1
|
Value 2
|
Feature 1
|
Feature 2
|
Show code
<table class="table datatable"
data-json="data2.json"
data-id-field="name"
data-sort-name="value1"
data-sort-order="desc"
data-filter-control="true"
data-filter-show-clear="true"
>
<thead>
<tr>
<th data-field="code"
data-sortable="true">
Name
</th>
<th data-align="center"
data-field="value1"
data-sortable="true">
Value 1
</th>
<th data-align="center"
data-field="value2"
data-sortable="true">
Value 2
</th>
<th class="sep-left-cell"
data-align="center"
data-field="feature1"
data-sortable="true"
data-filter-control="select">
Feature 1
</th>
<th class="sep-left-cell"
data-align="center"
data-field="feature2"
data-sortable="true"
data-filter-control="select">
Feature 2
</th>
</tr>
</thead>
</table>
Row highlighting
To assign colors to rows, use data-row-css="info"
. In case of dynamic data population, add "row_css": "info"
field in JSON data structure or row_css: info
in YAML data structure. Possible colors are:
active
success
info
warning
danger
Rank |
Name |
Value 1 |
Value 2 |
Show code
Show JSON
<table class="table datatable"
data-json="data2.json"
data-rank-mode="grouped_muted"
data-row-highlighting="true"
data-id-field="name"
data-sort-name="value1"
data-sort-order="desc"
data-pagination="false"
data-show-pagination-switch="false"
>
<thead>
<tr>
<th data-field="code"
data-sortable="true">
Name
</th>
<th data-align="center"
data-field="value1"
data-sortable="true">
Value 1
</th>
<th data-align="center"
data-field="value2"
data-sortable="true">
Value 2
</th>
<th class="sep-left-cell"
data-align="center"
data-field="feature1"
data-sortable="true"
data-filter-control="select">
Feature 1
</th>
<th class="sep-left-cell"
data-align="center"
data-field="feature2"
data-sortable="true"
data-filter-control="select">
Feature 2
</th>
</tr>
</thead>
</table>
[
{
"code": "Red",
"value1": "12",
"value2": "22",
"value3": "5",
"value4": "34",
"feature1": "square",
"feature2": "triangle",
"row_css": "danger"
},
{
"code": "Blue",
"value1": "62",
"value2": "42",
"value3": "8",
"value4": "64",
"feature1": "circle",
"feature2": "triangle",
"row_css": "warning"
}
]
With js-datatable, you can use multiple row in thead
normally, you just need to use rowspan
and colspan
attributes correctly. Example using multiple header rows.
Name
|
Values
|
Features
|
1
|
2
|
1
|
2
|
Show code
Visualization examples
Bar
Rank
|
System
|
Value 1
|
Value 2
|
Show code
<table
class="datatable table"
data-json="data2.json"
data-show-chart="true"
data-id-field="code"
data-rank-mode="grouped_muted"
data-chart-modes="bar"
data-bar-show-xaxis="true"
data-sort-name="value1"
data-sort-order="desc"
data-pagination="false"
data-show-pagination-switch="false"
>
<thead>
<tr>
<th data-sortable="false" data-rank="true">
<span class="text-muted">Rank</span>
</th>
<th class="sep-left-cell"
data-chartable="false"
data-field="code"
data-sortable="true"
data-visible="true">
System
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value1"
data-sortable="true"
data-visible="true">
Value 1
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value2"
data-sortable="true"
data-visible="true">
Value 2
</th>
</tr>
</thead>
</table>
Bar with error bars
Rank
|
System
|
Value 1
|
Value 2
|
Show code
<table
class="datatable table"
data-json="data2.json"
data-show-chart="true"
data-id-field="code"
data-rank-mode="grouped_muted"
data-chart-modes="bar"
data-bar-show-xaxis="true"
data-sort-name="value1i"
data-sort-order="desc"
data-pagination="false"
data-show-pagination-switch="false"
>
<thead>
<tr>
<th data-sortable="false" data-rank="true">
<span class="text-muted">Rank</span>
</th>
<th class="sep-left-cell"
data-chartable="false"
data-field="code"
data-sortable="true"
data-visible="true">
System
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value1i"
data-sortable="true"
data-value-type="float1-percentage-interval-muted"
data-visible="true">
Value 1
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value1p"
data-sortable="true"
data-value-type="int-percentage-plusminus-muted"
data-visible="true">
Value 2
</th>
</tr>
</thead>
</table>
Line
Rank
|
System
|
Value 1
|
Value 2
|
Show code
<table
class="datatable table"
data-json="data2.json"
data-show-chart="true"
data-id-field="code"
data-rank-mode="grouped_muted"
data-chart-modes="line"
data-bar-show-xaxis="true"
data-sort-name="value1"
data-sort-order="desc"
data-pagination="false"
data-show-pagination-switch="false"
>
<thead>
<tr>
<th data-sortable="false" data-rank="true">
<span class="text-muted">Rank</span>
</th>
<th class="sep-left-cell"
data-chartable="false"
data-field="code"
data-sortable="true"
data-visible="true">
System
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value1"
data-sortable="true"
data-visible="true">
Value 1
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value2"
data-sortable="true"
data-visible="true">
Value 2
</th>
</tr>
</thead>
</table>
Line with error bar
Rank
|
System
|
Value 1
|
Value 2
|
Show code
<table
class="datatable table"
data-json="data4.json"
data-show-chart="true"
data-id-field="code"
data-rank-mode="grouped_muted"
data-chart-modes="line"
data-sort-name="value1i"
data-sort-order="desc"
data-pagination="false"
data-line-show-error-bar="true"
data-line-show-interval="false"
>
<thead>
<tr>
<th data-sortable="false" data-rank="true">
<span class="text-muted">Rank</span>
</th>
<th class="sep-left-cell"
data-chartable="false"
data-field="code"
data-sortable="true"
data-visible="true">
System
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value1i"
data-sortable="true"
data-value-type="float1-percentage-interval-muted"
data-visible="true">
Value 1
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value1p"
data-sortable="true"
data-value-type="int-percentage-plusminus-muted"
data-visible="true">
Value 2
</th>
</tr>
</thead>
</table>
Line with error bounds
Rank
|
System
|
Value 1
|
Value 2
|
Show code
<table
class="datatable table"
data-json="data4.json"
data-show-chart="true"
data-id-field="code"
data-rank-mode="grouped_muted"
data-chart-modes="line"
data-sort-name="value1i"
data-sort-order="desc"
data-pagination="false"
data-show-pagination-switch="false"
data-line-show-error-bar="false"
data-line-show-interval="true"
>
<thead>
<tr>
<th data-sortable="false" data-rank="true">
<span class="text-muted">Rank</span>
</th>
<th class="sep-left-cell"
data-chartable="false"
data-field="code"
data-sortable="true"
data-visible="true">
System
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value1i"
data-sortable="true"
data-value-type="float1-percentage-interval-muted"
data-visible="true">
Value 1
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value1p"
data-sortable="true"
data-value-type="int-percentage-plusminus-muted"
data-visible="true">
Value 2
</th>
</tr>
</thead>
</table>
Scatter
Two dimensional data visualisation. Visualized columns can be selected from dropdown menus. Default columns for scatter chart are set with data-scatter-x
and data-scatter-y
attributes.
Rank
|
System
|
Value 1
|
Value 2
|
Show code
<table
class="datatable table"
data-json="data2.json"
data-show-chart="true"
data-id-field="code"
data-rank-mode="grouped_muted"
data-chart-modes="scatter"
data-scatter-x="value1"
data-scatter-y="value2"
data-sort-name="value1"
data-sort-order="desc"
data-pagination="false"
data-show-pagination-switch="false"
>
<thead>
<tr>
<th data-sortable="false" data-rank="true">
<span class="text-muted">Rank</span>
</th>
<th class="sep-left-cell"
data-chartable="false"
data-field="code"
data-sortable="true"
data-visible="true">
System
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value1"
data-sortable="true"
data-visible="true">
Value 1
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value2"
data-sortable="true"
data-visible="true">
Value 2
</th>
</tr>
</thead>
</table>
Scatter with error bars
Rank
|
System
|
Value 1
|
Value 2
|
Show code
<table
class="datatable table"
data-json="data2.json"
data-show-chart="true"
data-id-field="code"
data-rank-mode="grouped_muted"
data-chart-modes="scatter"
data-scatter-x="value1"
data-scatter-y="value2"
data-sort-name="value1"
data-sort-order="desc"
data-pagination="false"
data-show-pagination-switch="false"
>
<thead>
<tr>
<th data-sortable="false" data-rank="true">
<span class="text-muted">Rank</span>
</th>
<th class="sep-left-cell"
data-chartable="false"
data-field="code"
data-sortable="true"
data-visible="true">
System
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value1"
data-sortable="true"
data-visible="true">
Value 1
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value2"
data-sortable="true"
data-visible="true">
Value 2
</th>
</tr>
</thead>
</table>
Comparison
Grouped bar chart to ease the comparison of multiple one dimensional values. Visualized row are selected from dropdown menus.
User can setup multiple comparison sets, collection of columns to provide different view to the data.
Comparison sets are set with data-comparison-sets-json
attribute, and default comparison setup is set with data-comparison-active-set
attribute. Default rows for comparison are set with data-comparison-a-row
and data-comparison-b-row
attributes.
Rank
|
System
|
Value 1
|
Value 2
|
Value 3
|
Value 4
|
Show code
<table
class="datatable table"
data-json="data2.json"
data-show-chart="true"
data-id-field="code"
data-rank-mode="grouped_muted"
data-chart-modes="comparison"
data-comparison-row-id-field="code"
data-comparison-sets-json='[{"title": "All values","data_axis_title": "Value axis", "fields": ["value1", "value2", "value3", "value4"], "field_titles": ["custom title 1","custom title 2","custom title 3","custom title 4"]},{"title": "Sub comparison 1","data_axis_title": "Value", "fields": ["value1", "value2"]},{"title": "Sub comparison 2", "data_axis_title": "Accuracy", "fields": ["value3", "value4"]}]'
data-comparison-active-set="All values"
data-comparison-a-row="Red"
data-comparison-b-row="Blue"
data-sort-name="value1"
data-sort-order="desc"
data-pagination="false"
data-show-pagination-switch="false"
>
<thead>
<tr>
<th data-sortable="false" data-rank="true">
<span class="text-muted">Rank</span>
</th>
<th class="sep-left-cell"
data-chartable="false"
data-field="code"
data-sortable="true"
data-visible="true">
System
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value1"
data-sortable="true"
data-visible="true">
Value 1
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value2"
data-sortable="true"
data-visible="true">
Value 2
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value3"
data-sortable="true"
data-visible="true">
Value 3
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value4"
data-sortable="true"
data-visible="true">
Value 4
</th>
</tr>
</thead>
</table>
Multiple visualization types
Rank
|
System
|
Value 1
|
Value 2
|
Value 3
|
Value 4
|
Show code
<table
class="datatable table"
data-json="data2.json"
data-show-chart="true"
data-id-field="code"
data-rank-mode="grouped_muted"
data-chart-modes="bar,scatter,comparison"
data-chart-default-mode="scatter"
data-scatter-x="value1"
data-scatter-y="value2"
data-comparison-row-id-field="code"
data-comparison-sets-json='[{"title": "All values","data_axis_title": "Value axis", "fields": ["value1", "value2", "value3", "value4"], "field_titles": ["custom title 1","custom title 2","custom title 3","custom title 4"]},{"title": "Sub comparison 1","data_axis_title": "Value", "fields": ["value1", "value2"]},{"title": "Sub comparison 2", "data_axis_title": "Accuracy", "fields": ["value3", "value4"]}]'
data-comparison-active-set="All values"
data-comparison-a-row="Red"
data-comparison-b-row="Blue"
data-sort-name="value1"
data-sort-order="desc"
data-pagination="false"
data-show-pagination-switch="false"
>
<thead>
<tr>
<th data-sortable="false" data-rank="true">
<span class="text-muted">Rank</span>
</th>
<th class="sep-left-cell"
data-chartable="false"
data-field="code"
data-sortable="true"
data-visible="true">
System
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value1"
data-sortable="true"
data-visible="true">
Value 1
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value2"
data-sortable="true"
data-visible="true">
Value 2
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value3"
data-sortable="true"
data-visible="true">
Value 3
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value4"
data-sortable="true"
data-visible="true">
Value 4
</th>
</tr>
</thead>
</table>
Horizontal line
In some cases there is a need to draw horizontal line at certain row value in the bar chart. To enable this feature use data-bar-hline="true"
attribute and mark row with data-hline="true"
. In case of dynamic data population, add "hline": "true"
field in JSON data structure or hline: true
in YAML data structure. Color for the line is taken from row_css
field (see more).
Rank
|
System
|
Value 1
|
Value 2
|
Value 3
|
Value 4
|
Show code
<table
class="datatable table"
data-json="data3.json"
data-show-chart="true"
data-id-field="code"
data-rank-mode="grouped_muted"
data-chart-modes="bar,scatter,comparison"
data-chart-default-mode="scatter"
data-scatter-x="value1"
data-scatter-y="value2"
data-comparison-row-id-field="code"
data-comparison-sets-json='[{"title": "All values","data_axis_title": "Value axis", "fields": ["value1", "value2", "value3", "value4"], "field_titles": ["custom title 1","custom title 2","custom title 3","custom title 4"]},{"title": "Sub comparison 1","data_axis_title": "Value", "fields": ["value1", "value2"]},{"title": "Sub comparison 2", "data_axis_title": "Accuracy", "fields": ["value3", "value4"]}]'
data-comparison-active-set="All values"
data-comparison-a-row="Red"
data-comparison-b-row="Blue"
data-sort-name="value1"
data-sort-order="desc"
data-pagination="false"
data-show-pagination-switch="false"
>
<thead>
<tr>
<th data-sortable="false" data-rank="true">
<span class="text-muted">Rank</span>
</th>
<th class="sep-left-cell"
data-chartable="false"
data-field="code"
data-sortable="true"
data-visible="true">
System
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value1"
data-sortable="true"
data-visible="true">
Value 1
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value2"
data-sortable="true"
data-visible="true">
Value 2
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value3"
data-sortable="true"
data-visible="true">
Value 3
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value4"
data-sortable="true"
data-visible="true">
Value 4
</th>
</tr>
</thead>
</table>
Row highlighting
If data-row-highlighting
is enabled, row colors are relayed onto bar and scatter visualizations.
Rank
|
System
|
Value 1
|
Value 2
|
Value 3
|
Value 4
|
Show code
<table
class="datatable table"
data-json="data2.json"
data-show-chart="true"
data-id-field="code"
data-rank-mode="grouped_muted"
data-row-highlighting="true"
data-chart-modes="bar,scatter,comparison"
data-chart-default-mode="scatter"
data-scatter-x="value1"
data-scatter-y="value2"
data-comparison-row-id-field="code"
data-comparison-sets-json='[{"title": "All values","data_axis_title": "Value axis", "fields": ["value1", "value2", "value3", "value4"], "field_titles": ["custom title 1","custom title 2","custom title 3","custom title 4"]},{"title": "Sub comparison 1","data_axis_title": "Value", "fields": ["value1", "value2"]},{"title": "Sub comparison 2", "data_axis_title": "Accuracy", "fields": ["value3", "value4"]}]'
data-comparison-active-set="All values"
data-comparison-a-row="Red"
data-comparison-b-row="Blue"
data-sort-name="value1"
data-sort-order="desc"
data-pagination="false"
data-show-pagination-switch="false"
>
<thead>
<tr>
<th data-sortable="false" data-rank="true">
<span class="text-muted">Rank</span>
</th>
<th class="sep-left-cell"
data-chartable="false"
data-field="code"
data-sortable="true"
data-visible="true">
System
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value1"
data-sortable="true"
data-visible="true">
Value 1
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value2"
data-sortable="true"
data-visible="true">
Value 2
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value3"
data-sortable="true"
data-visible="true">
Value 3
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value4"
data-sortable="true"
data-visible="true">
Value 4
</th>
</tr>
</thead>
</table>
Customization
This is an example how datatable is created from javascript, and customized.
Rank
|
System
|
Value 1
|
Value 2
|
Value 3
|
Value 4
|
Show HTML
Show JavaScript
<table
id="js-customization-example"
class="table"
data-json="data3.json"
data-show-chart="true"
data-id-field="code"
data-rank-mode="grouped_muted"
data-chart-modes="bar,scatter,comparison"
data-chart-default-mode="scatter"
data-scatter-x="value1"
data-scatter-y="value2"
data-comparison-row-id-field="code"
data-comparison-sets-json='[{"title": "All values","data_axis_title": "Value axis", "fields": ["value1", "value2", "value3", "value4"], "field_titles": ["custom title 1","custom title 2","custom title 3","custom title 4"]},{"title": "Sub comparison 1","data_axis_title": "Value", "fields": ["value1", "value2"]},{"title": "Sub comparison 2", "data_axis_title": "Accuracy", "fields": ["value3", "value4"]}]'
data-comparison-active-set="All values"
data-comparison-a-row="Red"
data-comparison-b-row="Blue"
data-sort-name="value1"
data-sort-order="desc"
data-pagination="false"
data-show-pagination-switch="false"
>
<thead>
<tr>
<th data-sortable="false" data-rank="true">
<span class="text-muted">Rank</span>
</th>
<th class="sep-left-cell"
data-chartable="false"
data-field="code"
data-sortable="true"
data-visible="true">
System
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value1"
data-sortable="true"
data-visible="true">
Value 1
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value2"
data-sortable="true"
data-visible="true">
Value 2
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value3"
data-sortable="true"
data-visible="true">
Value 3
</th>
<th class="sep-left-cell"
data-align="center"
data-beginatzero="false"
data-chartable="true"
data-field="value4"
data-sortable="true"
data-visible="true">
Value 4
</th>
</tr>
</thead>
</table>
$( document ).ready(function() {
$('#js-customization-example').datatable({
bar: {
height: 440,
},
scatter: {
height: 400,
},
comparison: {
height: 400,
},
icon: {
bar: '',
scatter: '',
comparison: '',
off: '',
caret: '',
chartable: ''
},
label: {
bar: 'Custom Bar',
scatter: 'Custom Scatter',
comparison: 'Custom Comparison',
off: 'Off',
select_x_axis: 'Select data field for X-axis',
select_y_axis: 'Select data field for Y-axis',
select_set: 'Select set',
select_a_row: 'Select row A',
select_b_row: 'Select row B',
},
button_css:{
bar: 'btn btn-primary selector-button',
scatter: 'btn btn-danger selector-button',
comparison: 'btn btn-warning selector-button',
off: 'btn btn-default selector-button',
},
});
});