From 89cc3c5ac437c95cfde6077bc37f7bbaaf688588 Mon Sep 17 00:00:00 2001 From: Adrien Gallou Date: Fri, 16 Dec 2011 11:12:49 +0100 Subject: [PATCH 1/2] added fist documentation draft --- index.html | 647 ++++++++++++++++++++++++++++++++++- js/jquery.tablesorter.min.js | 4 + js/main.js | 1 + 3 files changed, 651 insertions(+), 1 deletion(-) create mode 100644 js/jquery.tablesorter.min.js diff --git a/index.html b/index.html index ea52fe1..096a59b 100644 --- a/index.html +++ b/index.html @@ -367,11 +367,655 @@

JS file

Quickstart

- +

Documentation

+ +
    +
  1. Usage
    2. +
  2. Graph
    3. +
  3. Legend
    4. +
  4. Series
    5. +
  5. Lines
    6. +
  6. Axes
    7. +
  7. Points
    8. +
  8. Vertical lines
    9. +
  9. Pie charts specific options
    10. +
+ + +
+ +
+

1. Usage

+
+ +

+ 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. +
+ + +
+ +
+

2. Graph

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeScopeInformationsAllowed valuesExamples
data-graph-typetableThe data-graph-type attribute is required. +
    +
  • column
    • +
  • line
    • +
  • area
    • +
  • spline
    • +
  • pie
    • +
+ 		+ +
caption + The chart's main title is defined via the table caption. + 
<table><caption>this is a title</caption></table>
+ 		Any stringExample
data-graph-subtitle-texttableThe subtitle is defined via the data-graph-subtitle-text on the table element.Any stringExample
+ 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-heighttable + Height of the graph. + Height in pxExample
data-graph-margin-toptableMargin in pxExample
data-graph-margin-righttable + Margin in pxExample
data-graph-margin-bottomtable + Margin in pxExample
data-graph-margin-lefttable + Margin in pxExample
data-graph-invertedtableInverts the graph axes.1Example
data-graph-area-fillOpacitytableWorks only on area graphs.Decimal from 0 to 1Example
+ +
+ +
+ +
+

3. Legend

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeScopeInformationsAllowed valuesExamples
data-graph-legend-disabledtableDon't display the legend.1Example
data-graph-legend-layouttablevertical/hortizontal (default : horizontal) + Horizontal example
+ Vertical example +
data-graph-legend-widthtablewidth in pxExample
data-graph-legend-xtablesize in pxExample
data-graph-legend-ytablesize in pxExample
+ +
+ +
+ +
+

4. Series

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeScopeInformationsAllowed valuesExamples
data-graph-color-1tableFrom data-graph-color-1 to data-graph-color-9. Where the number is the series index.hexadecimal colorExample
data-graph-hiddenthHide the series by default. It could be displayed by clicking on the legend.1Example
data-graph-dash-styleth +
    +
  • dash
    • +
  • dot
    • +
  • longdash
    • +
  • shortdash
    • +
  • shortdot
    • +
  • shortdashdot
    • +
  • shortdashdotdot
    • +
+ + 		Example
+
+ +
+ +
+

5. Lines

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeScopeInformationsAllowed valuesExamples
data-graph-line-widthtablewidth in pxExample
data-graph-line-shadowtableArea graphs has a shadow under the line. To disable it set the value of the data-graph-line-shadow attribute to 0.0Example
+
+ +
+ +
+

6. Axes

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeScopeInformationsAllowed valuesExamples
data-graph-xaxis-title-texttableAny stringExample
data-graph-xaxis-rotationtableDefault : 0DegresExample
data-graph-xaxis-start-on-ticktableRemove margin between the line and Y axis.1Example
data-graph-xaxis-end-on-ticktableRemove margin between the line and the graph end.1Example
data-graph-yaxis-X-formatter-callbacktableCallback 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 callExample
data-graph-xaxis-mintableHighcharts detects the minimum values of the X axis, but sometimes it usefull to force this value.DecimalExample
data-graph-xaxis-maxtableHighcharts detects the maximum values of the X axis, but sometimes it usefull to force this value.DecimalExample
data-graph-yaxis-2-oppositetableMove the second Yaxis to the right. You must use data-graph-yaxis to defined witch series is on the second axis.1Example
data-graph-yaxis-X-reversedtableHigher values are closer to the xAxis.1Example
+
+ + +
+ +
+

7. Points

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeScopeInformationsAllowed valuesExamples
data-graph-datalabels-enabledtableDisplays values on each point of the graph.1Example
data-graph-datalabels-aligntableDefines where to put the label according to the point position. +
    +
  • right
    • +
  • center
    • +
  • left
    • +
+ + 		Example
data-graph-point-callbacktableName of the function to call, the first parameter is an Highcharts Point objectExample
+
+ + +
+ +
+

8. Vertical Lines

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeScopeInformationsAllowed valuesExamples
data-graph-vline-xthArbitrary draws a vertical line in the graph. Must be used with the data-graph-vline-height attribute.decimalExample
data-graph-vline-heightthArbitrary draws a vertical line in the graph. Must be used with the data-graph-vline-x attribute.decimalExample
data-graph-vline-namethValue displayed on the vertical line tooltip.decimalExample
+
+ +
+ +
+

9. Pie charts specific options

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeScopeInformationsAllowed valuesExamples
data-graph-item-highlighttdMoves the series outside the chart to be more visible.1Example
data-graph-item-colortdhexadecimal colorExample
+
+