Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ggrossetie/asciidoctor-chart
Asciidoctor.js extension to add charts in your document!
https://github.com/ggrossetie/asciidoctor-chart
asciidoctor chart extension javascript
Last synced: about 2 months ago
JSON representation
Asciidoctor.js extension to add charts in your document!
- Host: GitHub
- URL: https://github.com/ggrossetie/asciidoctor-chart
- Owner: ggrossetie
- License: mit
- Created: 2018-12-03T17:09:35.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-03-15T12:02:47.000Z (almost 3 years ago)
- Last Synced: 2024-10-11T20:15:17.300Z (2 months ago)
- Topics: asciidoctor, chart, extension, javascript
- Language: JavaScript
- Homepage: https://asciidoctor.org/
- Size: 1.67 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# :bar_chart: Asciidoctor Chart Extension
An extension for [Asciidoctor.js](https://github.com/asciidoctor/asciidoctor.js) to render charts.
## Install
### Node.js
Install the dependencies:
$ npm install asciidoctor.js asciidoctor-chart
Create a file named `chart.js` with the following content and run it:
```js
const asciidoctor = require('asciidoctor.js')()
const chart = require('asciidoctor-chart')
const input = `
[chart,line]
....
January,February,March
28,48,40
65,59,80
....`
chart.register(asciidoctor.Extensions)
console.log(asciidoctor.convert(input)) // <1>
const registry = asciidoctor.Extensions.create()
chart.register(registry)
console.log(asciidoctor.convert(input, {'extension_registry': registry})) // <2>
```
<1> Register the extension in the global registry
<2> Register the extension in a dedicated registry
**IMPORTANT**
To effectively render the chart in your HTML page you will need to add the Chartist CSS and JavaScript:
```html
```
You will also need to add this JavaScript (after `chartist.min.js`) to generate all the charts in your ``:
```js
document.body.querySelectorAll('div.ct-chart').forEach((node) => {
const options = {
height: node.dataset['chartHeight'],
width: node.dataset['chartWidth'],
colors: node.dataset['chartColors'].split(',')
}
const dataset = Object.assign({}, node.dataset)
const series = Object.values(Object.keys(dataset)
.filter(key => key.startsWith('chartSeries-'))
.reduce((obj, key) => {
obj[key] = dataset[key]
return obj
}, {})).map(value => value.split(','))
const data = {
labels: node.dataset['chartLabels'].split(','),
series: series
}
Chartist[node.dataset['chartType']](node, data, options)
})
```
You can also render a chart from a `csv` file.
Create a file named `sales.csv` with the following content:
```csv
January,February,March
28,48,40
65,59,80
```
And use the following syntax:
```adoc
chart::sales.csv[bar,800,500]
```
### Browser
Install the dependencies:
$ npm install asciidoctor.js asciidoctor-chart
Create a file named `chart.html` with the following content and open it in your browser:
```html
var input = '[chart,line]\n' +
'....\n' +
'January,February,March\n' +
'28,48,40\n' +
'65,59,80\n' +
'....'
var asciidoctor = Asciidoctor()
var chart = AsciidoctorChart
const registry = asciidoctor.Extensions.create()
chart.register(registry)
var result = asciidoctor.convert(input, {'extension_registry': registry})
document.getElementById('content').innerHTML = result
document.body.querySelectorAll('div.ct-chart').forEach((node) => {
const options = {
height: node.dataset['chartHeight'],
width: node.dataset['chartWidth'],
colors: node.dataset['chartColors'].split(',')
}
const dataset = Object.assign({}, node.dataset)
const series = Object.values(Object.keys(dataset)
.filter(key => key.startsWith('chartSeries-'))
.reduce((obj, key) => {
obj[key] = dataset[key]
return obj
}, {})).map(value => value.split(','))
const data = {
labels: node.dataset['chartLabels'].split(','),
series: series
}
Chartist[node.dataset['chartType']](node, data, options)
})
```
<1> Register the extension in the global registry
<2> Register the extension in a dedicated registry
## Usage
You can configure the type (`line` or `bar`), the height and the width in pixel:
*Using positional attributes*
```
// in this order: type, width, height
chart::sales.csv[bar,800,500]
```
*Using named attributes*
```
chart::sales.csv[height=500,width=800,type=line]
```
By default the chart will be a 600px * 400px line chart.
## How ?
This extension is using [Chartist.js](https://gionkunz.github.io/chartist-js/) to render responsives charts.