+ The HighchartsTable Plugin takes data and attributes from a table and parses them to simply create an Hightcharts chart. +
+ +First you must set some attributes to the table, like the graph type or where to put the graph.
+ +
+ The series names are defined in the thead, their values are defined in the tbody.
+ The first td of a tr contains the Xaxis value. The other ones contains the value for each series in that x value.
+
+<table class="highchart" data-graph-container-before="1" data-graph-type="column"> + <thead> + <tr> + <th>Month</th> + <th>Sales</th> + </tr> + </thead> + <tbody> + <tr> + <td>January</td> + <td>8000</td> + </tr> + <tr> + <td>February</td> + <td>12000</td> + </tr> + </tbody> +</table> ++ + Then, simply call highchartTable on a selector that selects the prepared table. Like this : + +
+$(document).ready(function() {
+ $('table.highchart').highchartTable();
+});
+
+
+ This will display a column graph before the table of class highchart according to the values defined in its tbody.
+ | Attribute | +Scope | +Informations | +Allowed values | +Examples | +
|---|---|---|---|---|
| data-graph-type | +table | +The data-graph-type attribute is required. | +
+
|
+
+
|
+
| + | caption | +
+ The chart's main title is defined via the table caption.
+ <table><caption>this is a title</caption></table>+ |
+ Any string | +Example | +
| data-graph-subtitle-text | +table | +The subtitle is defined via the data-graph-subtitle-text on the table element. | +Any string | +Example | +
|
+ data-graph-container-before + data-graph-container |
+ table | +
+ There is two ways to defined where the graph must be displayed. + If you want a graph before the table you can use "data-graph-container-before" + otherwise use "data-graph-container" and use a css selector to choose where to display the graph. + |
+
+ For data-graph-container-before : 1 + For data-graph-container : a css selector + |
+
+ Example with data-graph-container-before + Example with data-graph-container + |
+
| data-graph-height | +table | ++ Height of the graph. + | +Height in px | +Example | +
| data-graph-margin-top | +table | ++ | Margin in px | +Example | +
| data-graph-margin-right | +table | ++ | +Margin in px | +Example | +
| data-graph-margin-bottom | +table | ++ | +Margin in px | +Example | +
| data-graph-margin-left | +table | ++ | +Margin in px | +Example | +
| data-graph-inverted | +table | +Inverts the graph axes. | +1 | +Example | +
| data-graph-area-fillOpacity | +table | +Works only on area graphs. | +Decimal from 0 to 1 | +Example | +
| Attribute | +Scope | +Informations | +Allowed values | +Examples | +
|---|---|---|---|---|
| data-graph-legend-disabled | +table | +Don't display the legend. | +1 | +Example | +
| data-graph-legend-layout | +table | ++ | vertical/hortizontal (default : horizontal) | +
+ Horizontal example + Vertical example + |
+
| data-graph-legend-width | +table | ++ | width in px | +Example | +
| data-graph-legend-x | +table | ++ | size in px | +Example | +
| data-graph-legend-y | +table | ++ | size in px | +Example | +
| Attribute | +Scope | +Informations | +Allowed values | +Examples | +
|---|---|---|---|---|
| data-graph-color-1 | +table | +From data-graph-color-1 to data-graph-color-9. Where the number is the series index. | +hexadecimal color | +Example | +
| data-graph-hidden | +th | +Hide the series by default. It could be displayed by clicking on the legend. | +1 | +Example | +
| data-graph-skip | +th | +Ignores the column. | +1 | +Example | +
| data-graph-dash-style | +th | ++ |
+
|
+ Example | +
| Attribute | +Scope | +Informations | +Allowed values | +Examples | +
|---|---|---|---|---|
| data-graph-line-width | +table | ++ | width in px | +Example | +
| data-graph-line-shadow | +table | +Area graphs has a shadow under the line. To disable it set the value of the data-graph-line-shadow attribute to 0. | +0 | +Example | +
| Attribute | +Scope | +Informations | +Allowed values | +Examples | +
|---|---|---|---|---|
| data-graph-xaxis-title-text | +table | ++ | Any string | +Example | +
| data-graph-xaxis-rotation | +table | +Default : 0 | +Degres | +Example | +
| data-graph-xaxis-start-on-tick | +table | +Remove margin between the line and Y axis. | +1 | +Example | +
| data-graph-xaxis-end-on-tick | +table | +Remove margin between the line and the graph end. | +1 | +Example | +
| data-graph-yaxis-X-formatter-callback | +table | +Callback to format the YAxis values. Where x is the number of the axis (generaly data-graph-yaxis-1-formatter-callback) | +Name of the function to call | +Example | +
| data-graph-xaxis-min | +table | +Highcharts detects the minimum values of the X axis, but sometimes it usefull to force this value. | +Decimal | +Example | +
| data-graph-xaxis-max | +table | +Highcharts detects the maximum values of the X axis, but sometimes it usefull to force this value. | +Decimal | +Example | +
| data-graph-yaxis-2-opposite | +table | +Move the second Yaxis to the right. You must use data-graph-yaxis to defined witch series is on the second axis. | +1 | +Example | +
| data-graph-yaxis-X-reversed | +table | +Higher values are closer to the xAxis. | +1 | +Example | +
| Attribute | +Scope | +Informations | +Allowed values | +Examples | +
|---|---|---|---|---|
| data-graph-datalabels-enabled | +table | +Displays values on each point of the graph. | +1 | +Example | +
| data-graph-datalabels-align | +table | +Defines where to put the label according to the point position. | +
+
|
+ Example | +
| data-graph-point-callback | +table | ++ | Name of the function to call, the first parameter is an Highcharts Point object | +Example | +
| Attribute | +Scope | +Informations | +Allowed values | +Examples | +
|---|---|---|---|---|
| data-graph-vline-x | +th | +Arbitrary draws a vertical line in the graph. Must be used with the data-graph-vline-height attribute. | +decimal | +Example | +
| data-graph-vline-height | +th | +Arbitrary draws a vertical line in the graph. Must be used with the data-graph-vline-x attribute. | +decimal | +Example | +
| data-graph-vline-name | +th | +Value displayed on the vertical line tooltip. | +decimal | +Example | +
| Attribute | +Scope | +Informations | +Allowed values | +Examples | +
|---|---|---|---|---|
| data-graph-item-highlight | +td | +Moves the series outside the chart to be more visible. | +1 | +Example | +
| data-graph-item-color | +td | ++ | hexadecimal color | +Example | +