statosio

Usage

Statosio.rb is based on statosio.js and helps to generate simple charts, in a fast and reliable way.

Statosio generate charts in a .svg format. Works with prawn-svg to generate .pdf documents. All Charts Data can be searched no information get lost.

✔️ build simple diagrams fast and reliable, with one function!
✔️ pure javascript, no additonal css.
✔️ highly customizable with 40+ style and data options.

Video Introduction: https://www.youtube.com/watch?v=i6od9O8jz1E

Documentation: https://d3.statosio.com

Chart Types

Bar

Create simple bar chart

Point

Create a simple point chart

Stacked

Create simple stacked bar chart

Features

Select

Select and change position of columns

Sort Data

Sort dataset by values

Change Style

Change style to dark-mode

Quickstart

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://d3.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>

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://d3.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

Parameters

	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

Options

	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.

Contributing

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.

License

The gem is available as open source under the terms of the MIT License.

Code of Conduct

Everyone interacting in the Statosio project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.