JQuery highchartstablehtml table to highcharts chart plugin

Copyright statement
JQuery highchartstable created by Pmsipilot, Chinese use document published by Highcharts Chinese language network
This article by Theo, Red chicken wings, Mr.zhang translation finishing, copyright Highcharts Chinese Network all, unless allowed, not allowed in any form reproduced!

I. (about) 1, introduction

Highchartstable is a plug-in for the HTML table conversion highcharts chart written in jquery.
With it, you just need to focus on the HTML table configuration to create highcharts charts!

2. Operating principle

Highchartstable uses the Data-* property of HTML5 to specify chart rendering options.

3. Browser compatibility

Highchartstable is compatible with current mainstream browsers, including:

Note: The JQuery version requires >= 1.4.3

highchartstable compatibility depends on Highcharts compatibility, Highcharts compatible with current mainstream browsers, including IE6, see Highcharts Compatibility for details

4. License (License)

Highchartstable based on the MIT license agreement

Ii. examples (Demo)

Here are some examples of how HTML tables are converted into graphs

1, Column chart (column)

Column Example

Month	Sales	Benefits
January	8000	2000
February	12000	3000
March	18000	4000
April	2000	-1000
May	500	-2500

Tips:

• 1. Please click on the Right tab to see the code, the key code is marked in red
• 2. See the Online demo >> hctable demo for more examples

• Result
• HTML Code
• Javascript Code

Valeurcolumn examplesalesbenefitsjanuaryfebruarymarchaprilmay-5k0k5k10k15k20k 2, line chart

Line Example

Month	Sales	Benefits
January	8000	2000
February	12000	3000
March	18000	4000
April	2000	-1000
May	500	-2500

Tips:

• 1. Please click on the Right tab to see the code, the key code is marked in red
• 2. See the Online demo >> hctable demo for more examples

• Result
• HTML Code
• Javascript Code

Valeurline examplesalesbenefitsjanuaryfebruarymarchaprilmay-5k0k5k10k15k20k 3, Mixed graph (Column + area)

Column + Area Example

Month	Sales	Benefits
January	8000	2000
February	12000	3000
March	18000	4000
April	2000	-1000
May	500	-2500

Tips:

• 1. Please click on the Right tab to see the code, the key code is marked in red
• 2. See the Online demo >> hctable demo for more examples

• Result
• HTML Code
• Javascript Code

Valeurcolumn + Area examplesalesbenefitsjanuaryfebruarymarchaprilmay-5k0k5k10k15k20k Third, use documents (document)

• 1. Use (usage)
• 2. Graphics Configuration (graph)
• 3. Legend Configuration (Legend)
• 4. Data column configuration (Series)
• 5. Line Configuration
• 6. Axis (axis)
• 7. Points (point)
• 8. Vertical line (Vertical lines)
• 9. Specific options for pie charts (pie charts specific options)

• Dynamic options implemented under 10.js (dynamically option in JavaScript)

1. Usage

Highchartstable needs to read the data and attributes from an HTML table, analyze and create a hightcharts chart. All the key to creating a chart with Highchartstable is the creation of an HTML table.

Here's a detailed description of the process of creating a chart

1), download and introduce the necessary JS file

<script type= "Text/javascript" src= "jquery.min.js" ></script><script type= "Text/javascript" src= " Highcharts.js "></script><script type=" Text/javascript "src=" Jquery.highchartsTable.js "></ Script>

2), create a chart rendering container

<div class= "container" ></div>

3), create an HTML table

In <table> , you have to set some properties, table type and chart render container etc.
Where the name of the data column (Series) is <thead> defined in, the value is defined in the <tbody>
<tr>The first represents the value of the <td> x-axis (Xaxis), the other <td> represents the Y-value (value) of each series, and the sample code is as follows:

<table class= "Highchart" data-graph-container= "container" data-graph-type= "column" >                                     // You must specify the render container Data-graph-container and chart type for the chart in table Data-graph-type  <thead>                            //thead Specify data columns      <tr>          <th>Month</th>          <th>Sales</th>      </tr>   </thead>   < tbody>                           //tbody Specify data      <tr>          <td>January</td>          <td>8000</td>      </tr>      <tr>          <td>February</td>          <td>12000</td>      < /tr>  </tbody></table>

4), call the chart conversion function

Finally, the highcharttable () function is raised on the table, and the code is as follows

$ (document). Ready (function () {  $ ("Table.highchart"). highcharttable ();});

You can see the chart effect after completing the above steps, which details the configuration properties below.

2. Graphics option Configuration

The graph options correspond to the chart properties of Highcharts and all configuration options are listed below

Properties	Your HTML tag	Description	value or value type	Example
Data-graph-type	Table	Chart type, this property is required	Column Line Area Spline Pie	Online Demo
Caption	Caption	Chart title	String	Online Demo
Data-graph-subtitle-text	Table	Subtitle	String	Online Demo
Data-graph-container-before Data-graph-container	Table	The chart renders the container, which is a required property. There are two ways of defining: 1. If 2. Other cases set "Data-graph-container" as the class for rendering Div	1, Data-graph-container-before:1 2, Data-graph-container:div's class	Online Demo
Data-graph-height	Table	Chart height. Unit is PX	Number *	Online Demo
Data-graph-margin-top	Table	The top margin of the chart. Unit is PX	Number	Online Demo
Data-graph-margin-right	Table	The right margin of the chart. Unit is PX	Number	Online Demo
Data-graph-margin-bottom	Table	Bottom margin of chart	Number	Online Demo
Data-graph-margin-left	Table	Left margin of chart	Number	Online Demo
data-graph-inverted	Table	Axis Rollover property, when set to 1 o'clock, the x-axis and y-axis positions are swapped	1	Online Demo
Data-graph-area-fillopacity	Table	Graphic transparency, only available for area maps	Decimal from 0-1	Online Demo
Data-graph-datalabels-formatter	Table	DataLabels formatting functions	Name of function	Online Demo

* Note: number refers to numbers, including decimals, etc.

3. Legend Configuration (Legend)

Properties	Your HTML tag	Description	value or value type	Example
Data-graph-legend-disabled	Table	Disable legend	1	Online Demo
Data-graph-legend-layout	Table	Legend Alignment	Vertical (vertical alignment) Hortizontal (horizontal alignment, default value)	Online Demo
Data-graph-legend-width	Table	Legend width, Unit is px	Number	Online Demo
Data-graph-legend-x	Table	The offset of the legend in the horizontal direction, in px	Number	Online Demo
Data-graph-legend-y	Table	The offset of the legend in the vertical direction, in px	Number	Online Demo

4. Data column (Series)

	HTML tag	description	value or value type	example
data-graph-color-x	table	x takes a value from 1-9, which is from data-graph-color-1 To Data-graph-color-9, which represents the color of the data column	hexadecimal color, for example: #ff0000	Online demo
data-graph-dash-stylet	th	data column line style	Dash (default, straight) dot longdash Shortdash Shortdot Shortdashdot Shortdashdotdot	Online Demo
data-graph-hidden	th	Whether the data column is hidden by default	1	online demo
data-graph-skip	th	ignore a column in the diagram	1	online demo
graph-stack-group	th	make the columns in the table appear in the same column on the diagram by setting the same Data-graph-stack-group value	String	Online Demo

5. Line Configuration

Properties	Your HTML tag	Description	value or value type	Example
Data-graph-line-width	Table	Chart line width, unit is px	Number	Online Demo
Data-graph-line-shadow	Table	A shaded area below the area chart, which is not available by setting the value of Data-graph-line-shadow to zero	0	Online Demo

6. Axis (axis)

Properties	Your HTML tag	Description	value or value type	Example
Data-graph-xaxis-title-text	Table	X-Axis Title text	String	Online Demo
Data-graph-xaxis-rotation	Table	X Axis Rotation angle	Degree	Online Demo
Data-graph-xaxis-start-on-tick	Table	Remove the x-axis coordinate lines and the y-axis margins	1	Online Demo
Data-graph-xaxis-end-on-tick	Table	Remove x-axis coordinate lines and margins to the right of the graph	1	Online Demo
Data-graph-yaxis-x-formatter-callback	Table	X represents the subscript for the axis, for example X=1 represents the first y-axis, and x=2 represents the second y-axis. The y-axis format function, most commonly used is data-graph-yaxis-1-formatter-callback, when there are multiple Y-axes, use subscript to indicate	Name of function	Online Demo
Data-graph-xaxis-min	Table	Minimum value of x-axis	Number	Online Demo
Data-graph-xaxis-max	Table	Maximum value of x-axis	Number	Online Demo
Data-graph-xaxis-labels-enabled	Table	Disable x-axis text	0 or 1	Online Demo
Data-graph-xaxis-labels-font-size	Table	X-Axis Text size	CSS unit, can be%\px\em	Online Demo
Data-graph-yaxis-2-opposite	Table	The second y-axis position is reversed, which is displayed on the right side of the chart	1	Online Demo
Data-graph-yaxis-x-reversed	Table	The y-axis is reversed in order and displayed in order from large to small. where x represents the subscript of the y-axis	1	Online Demo
Data-graph-xaxis-type	Table	X-axis type, only one type is supported: datetime	Datetime	Online Demo
Data-graph-yaxis-x-stacklabels-enabled	Table	Show total values in stacked graphs	1	Online Demo

7, coordinate points (point) Td>table

properties	html Label		value or value type	example
data-graph-dat alabels-enabled	table th	Displays the value of each point in the graph. The can be defined in a table tag to control the entire series of data or simply defined in an th tag to control a series of data. The definition in th tag overrides the value defined in table	0 or 1	online demo
data-graph-datalabels-align	Displays the position of the point value based on the location of the point	right center left /ul>	Online demo
data-graph-point-callback	table	point value Show formatting functions	Function Name	Online Demo
data-graph-datalabels-color	table th	display color can be defined in a table tag to control the entire series of data or simply defined in an th tag to Control a series of data. The definition in th tag overrides the value defined in table	String	Online demo

8. Vertical line (Vertical Lines)

Properties	Your HTML tag	Description	value or value type	Example
Data-graph-vline-x	Th	To draw a vertical line in a chart, you must use the Data-graph-vline-height property with the	Number	Online Demo
Data-graph-vline-height	Th	Vertical line height, must be used in conjunction with the Data-graph-vline-x property	Number	Online Demo
Data-graph-vline-name	Th	The name of the vertical line, shown in tooltip form	String	Online Demo

9, the cake tut some properties

Properties	Your HTML tag	Description	value or value type	Example
Data-graph-item-highlight	Td	Pie chart Chunk Bulge, select State	1	Online Demo
Data-graph-item-color	Td	Block color	Hex color code	Online Demo
Data-graph-name	Th	Pie chart Chunk Name	String	Online Demo

10. JavaScript dynamic Configuration

A function is triggered before the chart is rendered, and we can use it to modify some of the chart configurations.

For example: We want to dynamically set the chart data column color according to the chart rendering container, that is, set the Colos array, relative to the server side for each chart generated code, we provide the jquery custom function highchartTable.beforeRender for all the chart settings are valid, A global property similar to Highcharts.

The sample code for modifying colors for all charts is as follows

$ (' Table.highchart '). Bind (' Highcharttable.beforerender ', function (event, highchartconfig) {    Highchartconfig.colors = [' #104C4C ', ' #88CCCC ', ' #228E8E ', ' #CCFFFF ', ' #00CCCC ', ' #3399CC '];}). Highcharttable ();

For more configuration, refer to the Highcharts API documentation.

JQuery highchartstablehtml table to highcharts chart plugin