Project

statosio

0.0
The project is in a healthy, maintained state
Statosio generate charts in a .svg format. Works with prawn-svg to generate .pdf documents.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
 Dependencies

Runtime

~> 2.5.1
 Project Readme

# Statosio for Ruby

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


Examples

Select

# d3.statosio
Select and change position of columns

Sort Data

# d3.statosio
Sort dataset by values

Change Style

# d3.statosio
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>

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

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


Code Generator

http://statosio-sandbox.herokuapp.com/code-generator/index.html


Introduction

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


Doocumentation

https://d3.statosio.com


Chart Types

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

Bar

# d3.statosio
Create simple bar chart

Point

# d3.statosio
Create a simple point chart

Stacked

# d3.statosio
Create simple stacked bar chart


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.

Support my Work

Donate by https://www.paypal.com