Statosio is an add-on function for d3 to generate simple charts, in a fast and reliable way.
Select and change position of columns
- Examples
- Quickstart
- Video Introduction
- Documentation
- Chart Types
- Parameters
- Options
- Contributing
- License
- Code of Conduct
- Support my Work
<!DOCTYPE html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script>
<script src="../libs/statosio.js"></script>
</head>
<body>
<script>
d3.json( "../data/performance.json" )
.then( ( file ) => {
d3.statosio(
file,
"name",
[ "mobile" ],
{
"showAverage" : false,
}
)
}
)
</script>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js">
</script>
✔️ build simple diagrams fast and reliable, with one function!
✔️ pure javascript, no additonal css.
✔️ highly customizable with 40+ style and data options.
Create simple stacked bar chart
Source:
<script src="https://cdnjs.cloudflare.com/ajax/libs/statosio/0.9/statosio.js"></script>d3.statosio( dataset, x, y, options )| Value | Type | |
|---|---|---|
| dataset | [{},{}...] |
Array of Objects |
| x | "name" |
String |
| y | "mobile", [ "mobile",... ] |
String or Array of Strings |
| options | {} |
Object |
https://docs.statosio.com/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. |
Bug reports and pull requests are welcome on GitHub at https://github.com/a6b8/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.
The gem is available as open source under the terms of the MIT License.
Everyone interacting in the Statosio 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!