JQuery highchartstablehtml table to highcharts chart plugin

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.