Project: statosio - The Ruby Toolbox

Statosio generate charts in a .svg format. Works with prawn-svg to generate .pdf documents.

Examples
Quickstart
Code Generator
Introduction
Documentation
Chart Types
Parameters
Options
Contributing
License
Code of Conduct
Support my Work

gem install 'statosio'
gem install 'open-uri'
gem install 'json'

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
# -> <svg>[]....</svg>

The render process is based on puppeteer-ruby. You may need to have puppeteer installed. Find more Informations here.

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

gem install 'statosio'
gem install 'prawn'
gem install 'prawn-svg'

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:

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://www.youtube.com/watch?v=i6od9O8jz1E

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

Point

Create a simple point chart

Stacked

Create simple stacked bar chart

	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	false	A, B	Show or hide title on the front of the diagram.
A.2.	showLegend	false	A, B, C	Show or hide legend. Recommended for stacked diagrams.
A.3.	showAverage	true	A, B, C	Calculate and show average line
A.4.	showRangeYLog	false	A, B	Calculate and show range y in a log scale.
A.5.	showDataAsCircle	false	A, B, C	Show data as circles instead of rectangles. Only for not stacked diagram available.
B.1.	viewTitle	"Statosio Demo"	A	Set title content.
B.2.	viewDomId	"d3_statosio"	A	Set id from the Element which holds the d3 content inside.
B.3.	viewMarginTop	20	A, B	Set margin top
B.4.	viewMarginRight	40	A, B	Set margin right
B.5.	viewMarginBottom	100	A, B	Set margin bottom
B.6.	viewMarginLeft	60	A, B	Set margin left
B.7.	viewWidthOuter	600	A, B	Set width of the "canvas" including margin, titles etc.
B.8.	viewHeightOuter	300	A, B	Set height of the "canvas" including margin.
B.9.	viewTranslateMultiplicator	1.5	A, B	Between title, legend and diagram are spaces. These spaces gets calculated through this multiplicator.
C.1.	dataXKey	""		Expect a "key" name from the dataset to arrange the x range.
C.2.	dataXSelectors	[]	A, B	Expect one or more names which are included in the x range.
C.3.	dataXTextLength	25	A, B	This value counts the length of the x range names an cut of the rest.
C.4.	dataXTextPlaceholder	"..."	A, B	Set an suffix behind a string. As a signal to the viewer, that the text was cut of.
C.5.	dataYKeys	[]		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	5	A, B	Ticks in d3 land means "steps". Here you can set the steps from the grid and y range.
C.7.	dataSortCurrent	"none"	A, B	Set the general route for sorting. You can choose between "none", "values", "names".
C.8.	dataSortByValues	"decending"	A, B, C	Here you can set type of sorting. You can choose between "ascending" and "decending"
C.9.	dataSortByNames	"ascending"	A, B	Here you can set type of sorting. You can choose between "ascending" and "decending"
C.10.	dataSortSelection	"none"	A, B, C	Change position of your selection. You can choose between "start", "end" and "none"
C.11.	dataLegendTextSeparater	"_"	A	This tweak split your keys with the separater and capitalize every word and insert a space in between.
D.1.	styleColorAverage	"#000000"	A, B	Set color of the average line.
D.2.	styleColorCanvasBackground	"white"	A, B	Set background color.
D.3.	styleColorFont	"#000000"	A, B	Set default font color. Excluding non-selection content.
D.4.	styleColorLegends	["#5186EC", "#D95040", "#F2BD42"]	A, B	Set legend color palettes. Expect an array of "hex" values or "html" color-names.
D.5.	styleColorGridline	"#E5E5E5"	A, B	Set the gridline color. Use "hex" value or "html" color-names.
D.6.	styleColorSelectorsChart	["#EE752F", "#5186EC"]	A, B	Colorize the chart of the selection. Use "hex" values or "html" color-names.
D.7.	styleColorSelectorsText	["#000000", "#000000"]	A, B	Colorize the font of the selection. Use "hex" values or "html" color-names.
D.8.	styleFontSizeText	10	A, B	Set default font size, including selection.
D.9.	styleFontSizeTitle	18	A, B	Set font size of title
D.10.	styleFontFamily	"arial"	A, B	Set default font family
D.11.	styleFontFormatSelectors	["bold", "normal"]	A, B	Set format of content use "Html" Syntax ("bold", "underline", "normal" etc.).
D.12.	styleStrokeAverage	2	A, B	Set stroke weight of average line.
D.13.	styleStrokeGridline	2	A, B	Set stroke weight of gridline.
D.14.	styleLegendRectSizeFull	16	A, B	Set rectangle size of legend item.
D.15.	styleOtherCircleChartRadius	4	A, B	Set radius of circle.
D.16.	styleOtherRangeXTextRotation	-45	A, 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.