Statosio for Wordpress is based on statosio.js and helps to generate simple charts, with Wordpress [shortcodes]

✔️ 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://docs.statosio.com

1. Quickstart
   
2. Chart Types
3. Features
   
4. Import your Data
   
5. Parameters
   
6. Options
7. Contributing
8. Limitations
9. License
   
10. Code of Conduct
    
11. Support my Work
    

• Install Plugin: wordpress.com/plugins/statosio
• Create a Post
• Insert [statosio-demo]
• Preview your Post

Bar Chart

Create simple bar chart

[statosio dataset='https://docs.statosio.com/data/performance.json' x='name' y='mobile' options='{"showAverage":false}']

Point Chart

Create a simple point chart

[statosio dataset='https://docs.statosio.com/data/performance.json' x='name' y='mobile' options='                    {"showDataAsCircle":true,"showAverage":false,"viewDomId":"intermediate-show"}']

Stacked Chart

Create simple stacked bar chart

[statosio dataset='https://docs.statosio.com/data/performance.json' x='name' y='mobile,desktop' options='{"showAverage":false}']

Select

Select and change position of columns

[statosio dataset='https://docs.statosio.com/data/performance.json' x='name' y='mobile,desktop' options='{"dataXSelectors":["Data", "Spock"],"dataSortSelection" : "start","showAverage":false}']

Sort Data

Sort dataset by values

[statosio dataset='https://docs.statosio.com/data/performance.json' x='name' y='mobile' options='{"dataSortCurrent":"values","dataSortByValues":"ascending","showAverage":false}']

Change Style

Change style to dark-mode

[statosio dataset='https://docs.statosio.com/data/performance.json' x='name' y='mobile' options='{ "styleColorSelectorsChart":["#E2B08E","#CC8074"],"styleColorCanvasBackground":"none","styleColorGridline":"#2F3138","styleStrokeGridline":1,"styleColorFont":"#BABABA","styleColorSelectorsText":["#E2B08E","#BABABA"],"showAverage" : false}']

Please note:

• Replace #{} with your data.
• If have more then one "y" key use: "key1,key2,[...]"
• Write your Code in one line

Pseudocode:

[statosio dataset='#{URL}' x='#{X_KEY}' y="#{Y_KEYS}" options='#{OPTIONS}' ]

Example:

[statosio dataset='https://docs.statosio.com/data/performance.json' x='name' y="mobile,desktop" options='{"showTitle":true}']

	Value	Type	Required
dataset	[{},{}...]	Array of Hash	yes
x	"name"	String	yes
y	"mobile", "mobile,..."	String or Array of Strings	yes
options	{}	Hash	yes

	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:https://raw.githubusercontent.com/statosio-for-wordpress. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the code of conduct.

• Proof of Concept, not battle-tested.

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

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

Please ⭐️ star this Project, every ⭐️ star makes us very happy!