https://github.com/dubbs/pe-charts

Library for converting HTML tables to Highcharts
https://github.com/dubbs/pe-charts

Last synced: 11 days ago
JSON representation

Library for converting HTML tables to Highcharts

• Host: GitHub
• URL: https://github.com/dubbs/pe-charts
• Owner: dubbs
• Created: 2014-01-22T22:31:34.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2014-08-25T18:05:53.000Z (over 10 years ago)
• Last Synced: 2025-01-13T00:37:38.816Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 486 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# pe-charts

This library employs techniques of [progressive enhancement](http://alistapart.com/article/understandingprogressiveenhancement) to ensure that all users can enjoy your data, whether it be a nice [Highchart](http://www.highcharts.com/) or just numbers!

## Installation

Dependencies are managed with the [bower](http://bower.io/) package manager.

```

bower install

```

## Usage

You start out with a table, lets say Apple Inc.'s revenue

```html

	

		
Revenue in Billions

	

	

		

			

			2011

			2012

			2013

		

	

	

		

			Apple

			108.6

			155.97

			170.87

		

	


```

Then add data-attributes so the plugin knows what type of data you would like to display

```html

	

		
Revenue in Billions

	

	

		

			

			2011

			2012

			2013

		

	

	

		

			Apple

			108.6

			155.97

			170.87

		

	


```

## Available Attributes

```css

table[data-chart-id] { // set id of chart wrapper element }

table[data-chart-type] { // set chart type, line|column_stacked|column|bar|pie }

table[data-hide-legend] { // turn off legend }

table[data-height] { // set chart height }

table[data-yaxis-min] { // set yaxis min }

table[data-xaxis-interval] { // set xaxis tick interval }

table[data-plot-line-value] { // set plot line value }

table[data-plot-line-text] { // set plot line text }

table[data-plot-line-color] { // set plot line color }

*[data-chart-title] { // set chart title }

*[data-chart-subtitle] { // set chart subtitle }

*[data-yaxis-title] { // set yaxis title }

*[data-categories] { // set children within this element as categories }

*[data-ignore] { // set category to be ignored }

*[data-series] { // set children within this element as series data }

*[data-series-name] { // set as current series name }

*[data-footnote] { // set highcharts credit text }

```  

Lastly, add any further customization and initialize the plugin

```js

$('table').pechart({

	all: {

		colors: [

			'#B5B3AE',

			'#005A9C',

			'#FFFFFF'

		]

	}

});

```

## Available Options

Configuration for each chart type will be passed directly to Highcharts.  Consult the [Highcharts API Reference](http://api.highcharts.com/highcharts) for all available options.

To apply configuration to all charts, use `all`:

```js

{

	all: {

		yAxis: {

			title: {

				enabled: false

			}

		}

	}

}

```

To apply configuration to only the line chart type, use `line`

```js

{

	line: {

		yAxis: {

			title: {

				enabled: false

			}

		}

	}

}

```

Here's a full featured [demo](examples/apple_revenue.html), to help you get started.