https://github.com/a6b8/statosio-for-ruby
Statosio generate charts in a .svg format. Works with prawn-svg to generate .pdf documents.
https://github.com/a6b8/statosio-for-ruby
d3 d3js javascript ruby
Last synced: 3 months ago
JSON representation
Statosio generate charts in a .svg format. Works with prawn-svg to generate .pdf documents.
- Host: GitHub
- URL: https://github.com/a6b8/statosio-for-ruby
- Owner: a6b8
- License: mit
- Created: 2021-06-05T11:18:47.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2026-02-15T10:45:33.000Z (5 months ago)
- Last Synced: 2026-02-15T16:10:47.452Z (5 months ago)
- Topics: d3, d3js, javascript, ruby
- Language: HTML
- Homepage: https://docs.statosio.com
- Size: 2.47 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Statosio generate charts in a ```.svg``` format. Works with [prawn-svg](https://github.com/mogest/prawn-svg) to generate ```.pdf``` documents.
### Select
[Select and change position of columns](https://docs.statosio.com/tutorials/select-data.html)
### Sort Data
[Sort dataset by values](https://docs.statosio.com/tutorials/sort-data.html)
### Change Style
[Change style to dark-mode](https://docs.statosio.com/tutorials/change-style.html)
1. [Examples](#examples)
1. [Quickstart](#quickstart)
1. [Code Generator](#code-generator)
1. [Introduction](#introduction)
1. [Documentation](#documentation)
1. [Chart Types](#chart-types)
1. [Parameters](#parameters)
1. [Options](#options)
1. [Contributing](#contributing)
1. [License](#license)
1. [Code of Conduct](#code-of-conduct)
1. [Support my Work](#support-my-work)
```ruby
gem install 'statosio'
gem install 'open-uri'
gem install 'json'
```
```ruby
require 'statosio'
require 'open-uri'
require 'json'
# Initialize Statosio
statosio = Statosio::Generate.new
# Load Sample Dataset
url = 'https://docs.statosio.com/data/performance.json'
content = URI.open( url ).read
dataset = JSON.parse( content )
# Generate chart as .svg
chart = statosio.svg(
dataset: dataset,
x: 'name',
y: 'mobile',
options: {}
)
puts chart
# -> []....
```
> The render process is based on ```puppeteer-ruby```. You may need to have puppeteer installed. Find more Informations [here](https://github.com/YusukeIwaki/puppeteer-ruby#whale-running-in-docker).
>
> Also note that there is an other gem called ```puppeteer``` it causes namespace conflict with the gem above. You need to deinstall before.
### ```Statosio``` with [prawn](https://github.com/prawnpdf/prawn)
```ruby
gem install 'statosio'
gem install 'prawn'
gem install 'prawn-svg'
```
```ruby
require 'open-uri'
require 'statosio'
require 'prawn'
require 'prawn-svg'
# Initialize Statosio
statosio = Statosio::Generate.new
# Load Sample Dataset
url = 'https://docs.statosio.com/data/performance.json'
content = URI.open( url ).read
dataset = JSON.parse( content )
# Generate Statosio
chart = statosio.svg(
dataset: dataset,
x: 'name',
y: 'mobile',
options: {}
)
# Generate .pdf
Prawn::Document.generate( "statosio.pdf" ) do | pdf |
pdf.svg( chart, width: 500, )
end
```
Add this line to your application's Gemfile:
```ruby
gem 'statosio'
```
And then execute:
$ bundle install
Or install it yourself as:
$ gem install statosio
On Rubygems:
- Gem: https://rubygems.org/gems/statosio
- Profile: https://rubygems.org/profiles/a6b8
[https://a6b8.github.io/statosio-shortcode-generator](https://a6b8.github.io/statosio-shortcode-generator)
[https://www.youtube.com/watch?v=i6od9O8jz1E](https://www.youtube.com/watch?v=i6od9O8jz1E)
[https://docs.statosio.com](https://docs.statosio.com/)
✔️ build simple diagrams fast and reliable, with one function!
✔️ pure javascript, no additonal css.
✔️ highly customizable with 40+ style and data options.
### Bar
[Create simple bar chart](https://docs.statosio.com/tutorials/simple-bar-chart.html)
### Point
[Create a simple point chart](https://docs.statosio.com/tutorials/simple-point-chart.html)
### Stacked
[Create simple stacked bar chart](https://docs.statosio.com/tutorials/simple-stacked-bar-chart.html)
| | **Value** | **Type** | **Required** |
|------:|:------|:------| :------|
| **dataset** | ```[{},{}...]``` | Array of Hash | yes |
| **x** | ```"name"``` | String | yes |
| **y** | ```"mobile"```, ```[ "mobile",... ]``` | String or Array of Strings | yes |
| **options** | ```{}``` | Hash | yes |
| **silent** | ```true``` or ```false```| Boolean | no |
| | **Option** | **Default** | **Examples** | **Description** |
|:--|:--|:--|:--|:--|
| A.1. | [showTitle](https://docs.statosio.com/options/show__title.html) | false | [A](https://docs.statosio.com/options/show__title.html#example-a), [B](https://docs.statosio.com/options/show__title.html#example-b) | Show or hide title on the front of the diagram. |
| A.2. | [showLegend](https://docs.statosio.com/options/show__legend.html) | false | [A](https://docs.statosio.com/options/show__legend.html#example-a), [B](https://docs.statosio.com/options/show__legend.html#example-b), [C](https://docs.statosio.com/options/show__legend.html#example-c) | Show or hide legend. Recommended for stacked diagrams. |
| A.3. | [showAverage](https://docs.statosio.com/options/show__average.html) | true | [A](https://docs.statosio.com/options/show__average.html#example-a), [B](https://docs.statosio.com/options/show__average.html#example-b), [C](https://docs.statosio.com/options/show__average.html#example-c) | Calculate and show average line |
| A.4. | [showRangeYLog](https://docs.statosio.com/options/show__range_y_log.html) | false | [A](https://docs.statosio.com/options/show__range_y_log.html#example-a), [B](https://docs.statosio.com/options/show__range_y_log.html#example-b) | Calculate and show range y in a log scale. |
| A.5. | [showDataAsCircle](https://docs.statosio.com/options/show__data_as_circle.html) | false | [A](https://docs.statosio.com/options/show__data_as_circle.html#example-a), [B](https://docs.statosio.com/options/show__data_as_circle.html#example-b), [C](https://docs.statosio.com/options/show__data_as_circle.html#example-c) | Show data as circles instead of rectangles. Only for not stacked diagram available. |
| B.1. | [viewTitle](https://docs.statosio.com/options/view__title.html) | "Statosio Demo" | [A](https://docs.statosio.com/options/view__title.html#example-a) | Set title content. |
| B.2. | [viewDomId](https://docs.statosio.com/options/view__dom_id.html) | "d3_statosio" | [A](https://docs.statosio.com/options/view__dom_id.html#example-a) | Set id from the
Element which holds the d3 content inside. |
| B.3. | [viewMarginTop](https://docs.statosio.com/options/view__margin__top.html) | 20 | [A](https://docs.statosio.com/options/view__margin__top.html#example-a), [B](https://docs.statosio.com/options/view__margin__top.html#example-b) | Set margin top |
| B.4. | [viewMarginRight](https://docs.statosio.com/options/view__margin__right.html) | 40 | [A](https://docs.statosio.com/options/view__margin__right.html#example-a), [B](https://docs.statosio.com/options/view__margin__right.html#example-b) | Set margin right |
| B.5. | [viewMarginBottom](https://docs.statosio.com/options/view__margin__bottom.html) | 100 | [A](https://docs.statosio.com/options/view__margin__bottom.html#example-a), [B](https://docs.statosio.com/options/view__margin__bottom.html#example-b) | Set margin bottom |
| B.6. | [viewMarginLeft](https://docs.statosio.com/options/view__margin__left.html) | 60 | [A](https://docs.statosio.com/options/view__margin__left.html#example-a), [B](https://docs.statosio.com/options/view__margin__left.html#example-b) | Set margin left |
| B.7. | [viewWidthOuter](https://docs.statosio.com/options/view__width__outer.html) | 600 | [A](https://docs.statosio.com/options/view__width__outer.html#example-a), [B](https://docs.statosio.com/options/view__width__outer.html#example-b) | Set width of the "canvas" including margin, titles etc. |
| B.8. | [viewHeightOuter](https://docs.statosio.com/options/view__height__outer.html) | 300 | [A](https://docs.statosio.com/options/view__height__outer.html#example-a), [B](https://docs.statosio.com/options/view__height__outer.html#example-b) | Set height of the "canvas" including margin. |
| B.9. | [viewTranslateMultiplicator](https://docs.statosio.com/options/view__translate__multiplicator.html) | 1.5 | [A](https://docs.statosio.com/options/view__translate__multiplicator.html#example-a), [B](https://docs.statosio.com/options/view__translate__multiplicator.html#example-b) | Between title, legend and diagram are spaces. These spaces gets calculated through this multiplicator. |
| C.1. | [dataXKey](https://docs.statosio.com/options/data__x__key.html) | "" | | Expect a "key" name from the dataset to arrange the x range. |
| C.2. | [dataXSelectors](https://docs.statosio.com/options/data__x__selectors.html) | [] | [A](https://docs.statosio.com/options/data__x__selectors.html#example-a), [B](https://docs.statosio.com/options/data__x__selectors.html#example-b) | Expect one or more names which are included in the x range. |
| C.3. | [dataXTextLength](https://docs.statosio.com/options/data__x__text__length.html) | 25 | [A](https://docs.statosio.com/options/data__x__text__length.html#example-a), [B](https://docs.statosio.com/options/data__x__text__length.html#example-b) | This value counts the length of the x range names an cut of the rest. |
| C.4. | [dataXTextPlaceholder](https://docs.statosio.com/options/data__x__text__placeholder.html) | "..." | [A](https://docs.statosio.com/options/data__x__text__placeholder.html#example-a), [B](https://docs.statosio.com/options/data__x__text__placeholder.html#example-b) | Set an suffix behind a string. As a signal to the viewer, that the text was cut of. |
| C.5. | [dataYKeys](https://docs.statosio.com/options/data__y__keys.html) | [] | | Expect "keys" from the dataset to arrange the y range. If you use one key the internal state is "bar". if you use multiple the internal is "stacked" |
| C.6. | [dataYTicks](https://docs.statosio.com/options/data__y__ticks.html) | 5 | [A](https://docs.statosio.com/options/data__y__ticks.html#example-a), [B](https://docs.statosio.com/options/data__y__ticks.html#example-b) | Ticks in d3 land means "steps". Here you can set the steps from the grid and y range. |
| C.7. | [dataSortCurrent](https://docs.statosio.com/options/data__sort__current.html) | "none" | [A](https://docs.statosio.com/options/data__sort__current.html#example-a), [B](https://docs.statosio.com/options/data__sort__current.html#example-b) | Set the general route for sorting. You can choose between "none", "values", "names". |
| C.8. | [dataSortByValues](https://docs.statosio.com/options/data__sort__by__values.html) | "decending" | [A](https://docs.statosio.com/options/data__sort__by__values.html#example-a), [B](https://docs.statosio.com/options/data__sort__by__values.html#example-b), [C](https://docs.statosio.com/options/data__sort__by__values.html#example-c) | Here you can set type of sorting. You can choose between "ascending" and "decending" |
| C.9. | [dataSortByNames](https://docs.statosio.com/options/data__sort__by__names.html) | "ascending" | [A](https://docs.statosio.com/options/data__sort__by__names.html#example-a), [B](https://docs.statosio.com/options/data__sort__by__names.html#example-b) | Here you can set type of sorting. You can choose between "ascending" and "decending" |
| C.10. | [dataSortSelection](https://docs.statosio.com/options/data__sort__selection.html) | "none" | [A](https://docs.statosio.com/options/data__sort__selection.html#example-a), [B](https://docs.statosio.com/options/data__sort__selection.html#example-b), [C](https://docs.statosio.com/options/data__sort__selection.html#example-c) | Change position of your selection. You can choose between "start", "end" and "none" |
| C.11. | [dataLegendTextSeparater](https://docs.statosio.com/options/data__legend__text__separater.html) | "_" | [A](https://docs.statosio.com/options/data__legend__text__separater.html#example-a) | This tweak split your keys with the separater and capitalize every word and insert a space in between. |
| D.1. | [styleColorAverage](https://docs.statosio.com/options/style__color__average.html) | "#000000" | [A](https://docs.statosio.com/options/style__color__average.html#example-a), [B](https://docs.statosio.com/options/style__color__average.html#example-b) | Set color of the average line. |
| D.2. | [styleColorCanvasBackground](https://docs.statosio.com/options/style__color__canvas_background.html) | "white" | [A](https://docs.statosio.com/options/style__color__canvas_background.html#example-a), [B](https://docs.statosio.com/options/style__color__canvas_background.html#example-b) | Set background color. |
| D.3. | [styleColorFont](https://docs.statosio.com/options/style__color__font.html) | "#000000" | [A](https://docs.statosio.com/options/style__color__font.html#example-a), [B](https://docs.statosio.com/options/style__color__font.html#example-b) | Set default font color. Excluding non-selection content. |
| D.4. | [styleColorLegends](https://docs.statosio.com/options/style__color__legends.html) | ["#5186EC", "#D95040", "#F2BD42"] | [A](https://docs.statosio.com/options/style__color__legends.html#example-a), [B](https://docs.statosio.com/options/style__color__legends.html#example-b) | Set legend color palettes. Expect an array of "hex" values or "html" color-names. |
| D.5. | [styleColorGridline](https://docs.statosio.com/options/style__color__gridline.html) | "#E5E5E5" | [A](https://docs.statosio.com/options/style__color__gridline.html#example-a), [B](https://docs.statosio.com/options/style__color__gridline.html#example-b) | Set the gridline color. Use "hex" value or "html" color-names. |
| D.6. | [styleColorSelectorsChart](https://docs.statosio.com/options/style__color__selectors__chart.html) | ["#EE752F", "#5186EC"] | [A](https://docs.statosio.com/options/style__color__selectors__chart.html#example-a), [B](https://docs.statosio.com/options/style__color__selectors__chart.html#example-b) | Colorize the chart of the selection. Use "hex" values or "html" color-names. |
| D.7. | [styleColorSelectorsText](https://docs.statosio.com/options/style__color__selectors__text.html) | ["#000000", "#000000"] | [A](https://docs.statosio.com/options/style__color__selectors__text.html#example-a), [B](https://docs.statosio.com/options/style__color__selectors__text.html#example-b) | Colorize the font of the selection. Use "hex" values or "html" color-names. |
| D.8. | [styleFontSizeText](https://docs.statosio.com/options/style__font__size__text.html) | 10 | [A](https://docs.statosio.com/options/style__font__size__text.html#example-a), [B](https://docs.statosio.com/options/style__font__size__text.html#example-b) | Set default font size, including selection. |
| D.9. | [styleFontSizeTitle](https://docs.statosio.com/options/style__font__size__title.html) | 18 | [A](https://docs.statosio.com/options/style__font__size__title.html#example-a), [B](https://docs.statosio.com/options/style__font__size__title.html#example-b) | Set font size of title |
| D.10. | [styleFontFamily](https://docs.statosio.com/options/style__font__family.html) | "arial" | [A](https://docs.statosio.com/options/style__font__family.html#example-a), [B](https://docs.statosio.com/options/style__font__family.html#example-b) | Set default font family |
| D.11. | [styleFontFormatSelectors](https://docs.statosio.com/options/style__font__format__selectors.html) | ["bold", "normal"] | [A](https://docs.statosio.com/options/style__font__format__selectors.html#example-a), [B](https://docs.statosio.com/options/style__font__format__selectors.html#example-b) | Set format of content use "Html" Syntax ("bold", "underline", "normal" etc.). |
| D.12. | [styleStrokeAverage](https://docs.statosio.com/options/style__stroke__average.html) | 2 | [A](https://docs.statosio.com/options/style__stroke__average.html#example-a), [B](https://docs.statosio.com/options/style__stroke__average.html#example-b) | Set stroke weight of average line. |
| D.13. | [styleStrokeGridline](https://docs.statosio.com/options/style__stroke__gridline.html) | 2 | [A](https://docs.statosio.com/options/style__stroke__gridline.html#example-a), [B](https://docs.statosio.com/options/style__stroke__gridline.html#example-b) | Set stroke weight of gridline. |
| D.14. | [styleLegendRectSizeFull](https://docs.statosio.com/options/style__legend__rect_size__full.html) | 16 | [A](https://docs.statosio.com/options/style__legend__rect_size__full.html#example-a), [B](https://docs.statosio.com/options/style__legend__rect_size__full.html#example-b) | Set rectangle size of legend item. |
| D.15. | [styleOtherCircleChartRadius](https://docs.statosio.com/options/style__other__circle_chart_radius.html) | 4 | [A](https://docs.statosio.com/options/style__other__circle_chart_radius.html#example-a), [B](https://docs.statosio.com/options/style__other__circle_chart_radius.html#example-b) | Set radius of circle. |
| D.16. | [styleOtherRangeXTextRotation](https://docs.statosio.com/options/style__other__range_x_text_rotation.html) | -45 | [A](https://docs.statosio.com/options/style__other__range_x_text_rotation.html#example-a), [B](https://docs.statosio.com/options/style__other__range_x_text_rotation.html#example-b) | Set text rotation of the x axis. |
Bug reports and pull requests are welcome on GitHub at https://github.com/a6b8/statosio.rb. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/a6b8/statosio/blob/master/CODE_OF_CONDUCT.md).
- Proof of Concept, not production ready.
- json
- [puppeteer-ruby](https://github.com/YusukeIwaki/puppeteer-ruby)
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
Everyone interacting in the Statosio project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/a6b8/statosio/blob/master/CODE_OF_CONDUCT.md).
Please ⭐️ star this Project, every ⭐️ star makes us very happy!