├── src ├── cssplot.base.less ├── cssplot.group.less ├── cssplot.full.less └── modules │ ├── defaults.less │ ├── loops.less │ ├── group.less │ └── base.less ├── docs └── images │ ├── cssplot_bar_chart.png │ ├── cssplot_column_chart.png │ ├── cssplot_scatter_plot.png │ ├── cssplot_stacked_bar_chart.png │ └── cssplot_stacked_column_chart.png ├── Makefile ├── LICENSE └── README.md /src/cssplot.base.less: -------------------------------------------------------------------------------- 1 | @import "modules/defaults.less"; 2 | @import "modules/base.less"; -------------------------------------------------------------------------------- /src/cssplot.group.less: -------------------------------------------------------------------------------- 1 | @import "modules/defaults.less"; 2 | @import "modules/group.less"; -------------------------------------------------------------------------------- /docs/images/cssplot_bar_chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asciimoo/cssplot/HEAD/docs/images/cssplot_bar_chart.png -------------------------------------------------------------------------------- /src/cssplot.full.less: -------------------------------------------------------------------------------- 1 | @import "modules/defaults.less"; 2 | @import "modules/base.less"; 3 | @import "modules/loops.less"; -------------------------------------------------------------------------------- /docs/images/cssplot_column_chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asciimoo/cssplot/HEAD/docs/images/cssplot_column_chart.png -------------------------------------------------------------------------------- /docs/images/cssplot_scatter_plot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asciimoo/cssplot/HEAD/docs/images/cssplot_scatter_plot.png -------------------------------------------------------------------------------- /docs/images/cssplot_stacked_bar_chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asciimoo/cssplot/HEAD/docs/images/cssplot_stacked_bar_chart.png -------------------------------------------------------------------------------- /docs/images/cssplot_stacked_column_chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asciimoo/cssplot/HEAD/docs/images/cssplot_stacked_column_chart.png -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | 2 | all: prepare base full group 3 | 4 | prepare: clean 5 | @mkdir build/ 6 | @echo "[!] build/ directory created" 7 | 8 | base: 9 | @lessc src/cssplot.base.less > build/cssplot.base.css 10 | @echo "[!] cssplot.base.css generated" 11 | 12 | full: 13 | @lessc src/cssplot.full.less > build/cssplot.full.css 14 | @echo "[!] cssplot.full.css generated" 15 | 16 | group: 17 | @lessc src/cssplot.group.less > build/cssplot.group.css 18 | @echo "[!] cssplot.group.css generated" 19 | 20 | clean: 21 | @rm -rf build/ 22 | 23 | .PHONY: all prepare base full clean 24 | -------------------------------------------------------------------------------- /src/modules/defaults.less: -------------------------------------------------------------------------------- 1 | @chart-primary-color: #3498db; 2 | @chart-primary-label-color: #FFFFFF; 3 | @chart-primary-border-color: #FFFFFF; 4 | @chart-secondary-color: #ff6699; 5 | @chart-secondary-label-color: @chart-primary-label-color; 6 | @chart-group2-color: #93b881; 7 | @chart-group2-label-color: @chart-primary-label-color; 8 | @chart-group3-color: #e09e87; 9 | @chart-group3-label-color: @chart-primary-label-color; 10 | @chart-group4-color: #a22041; 11 | @chart-group4-label-color: @chart-primary-label-color; 12 | @chart-group5-color: #95879c; 13 | @chart-group5-label-color: @chart-primary-label-color; 14 | @scatter-plot-dot-size: 6; 15 | -------------------------------------------------------------------------------- /src/modules/loops.less: -------------------------------------------------------------------------------- 1 | 2 | .height_loop(@percent_counter) when (@percent_counter >= 0) { 3 | .height_loop((@percent_counter - 1)); 4 | [data-cp-size="@{percent_counter}"] { height: ~"@{percent_counter}%"; }; 5 | } 6 | 7 | .width_loop(@percent_counter) when (@percent_counter >= 0) { 8 | .width_loop((@percent_counter - 1)); 9 | [data-cp-size="@{percent_counter}"] { width: ~"@{percent_counter}%"; }; 10 | } 11 | 12 | .x_loop(@percent_counter) when (@percent_counter >= 0) { 13 | .x_loop((@percent_counter - 1)); 14 | [data-cp-x="@{percent_counter}"] { left: ~"@{percent_counter}%"; }; 15 | } 16 | 17 | .y_loop(@percent_counter) when (@percent_counter >= 0) { 18 | .y_loop((@percent_counter - 1)); 19 | [data-cp-y="@{percent_counter}"] { bottom: ~"@{percent_counter}%"; }; 20 | } 21 | 22 | .column-chart .plot-container { 23 | .height_loop(100); 24 | } 25 | 26 | .bar-chart .plot-container { 27 | .width_loop(100); 28 | } 29 | 30 | .scatter-plot .plot-container { 31 | .x_loop(100); 32 | .y_loop(100); 33 | } 34 | -------------------------------------------------------------------------------- /src/modules/group.less: -------------------------------------------------------------------------------- 1 | .group-by-gender { 2 | .male { 3 | background: @chart-primary-color; 4 | color: @chart-primary-label-color; 5 | } 6 | 7 | .female { 8 | background: @chart-secondary-color; 9 | color: @chart-secondary-label-color; 10 | } 11 | } 12 | 13 | .group-by-number { 14 | [data-group="0"] { 15 | background: @chart-primary-color; 16 | color: @chart-primary-label-color; 17 | } 18 | 19 | [data-group="1"] { 20 | background: @chart-secondary-color; 21 | color: @chart-secondary-label-color; 22 | } 23 | 24 | [data-group="2"] { 25 | background: @chart-group2-color; 26 | color: @chart-group2-label-color; 27 | } 28 | 29 | [data-group="3"] { 30 | background: @chart-group3-color; 31 | color: @chart-group3-label-color; 32 | } 33 | 34 | [data-group="4"] { 35 | background: @chart-group4-color; 36 | color: @chart-group4-label-color; 37 | } 38 | 39 | [data-group="5"] { 40 | background: @chart-group5-color; 41 | color: @chart-group5-label-color; 42 | } 43 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | The above copyright notice and this permission notice shall be included in all 10 | copies or substantial portions of the Software. 11 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 12 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 13 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 14 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 15 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 16 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 17 | SOFTWARE. 18 | 19 | (C) 2014- by Adam Tauber 20 | -------------------------------------------------------------------------------- /src/modules/base.less: -------------------------------------------------------------------------------- 1 | .column-chart, .bar-chart, .scatter-plot { 2 | position: relative; 3 | min-width: 100px; 4 | min-height: 100px; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | .column-chart .chart-column, 10 | .bar-chart .chart-row, 11 | .column-chart [data-cp-size], 12 | .bar-chart [data-cp-size], 13 | .plot-container > * > * { 14 | list-style: none; 15 | border: 1px solid #ffffff; 16 | } 17 | 18 | .column-chart .plot-container { 19 | display: -webkit-flex; 20 | display: flex; 21 | -webkit-flex-direction: row; 22 | flex-direction: row; 23 | -webkit-flex-wrap: nowrap; 24 | flex-wrap: nowrap; 25 | position: absolute; 26 | text-align: center; 27 | top: 0; left: 0; bottom: 0; right: 0; 28 | padding: 0; 29 | margin: 0; 30 | min-height: 100px; 31 | } 32 | 33 | .column-chart.stacked > * > * { 34 | height: 100%; 35 | -webkit-transform: scaleY(-1); 36 | -moz-transform: scaleY(-1); 37 | -o-transform: scaleY(-1); 38 | -ms-transform: scaleY(-1); 39 | transform: scaleY(-1); 40 | } 41 | 42 | .column-chart.stacked .group-by-number [data-cp-size] { 43 | -webkit-transform: scaleY(-1); 44 | -moz-transform: scaleY(-1); 45 | -o-transform: scaleY(-1); 46 | -ms-transform: scaleY(-1); 47 | transform: scaleY(-1); 48 | } 49 | 50 | .column-chart .chart-column, 51 | .column-chart [data-cp-size], 52 | .column-chart.stacked > * > * { 53 | -webkit-flex-grow: 1; 54 | flex-grow: 1; 55 | -webkit-align-self: flex-end; 56 | align-self: flex-end; 57 | } 58 | 59 | .column-chart .chart-column, 60 | .bar-chart .chart-row, 61 | .column-chart [data-cp-size], 62 | .bar-chart [data-cp-size] { 63 | background: @chart-primary-color; 64 | color: @chart-primary-label-color; 65 | box-sizing: border-box; 66 | } 67 | 68 | .bar-chart { 69 | clear: both; 70 | } 71 | 72 | .bar-chart .plot-container { 73 | flex-direction: row; 74 | padding: 0; 75 | margin: 0; 76 | width: 100%; 77 | } 78 | 79 | .bar-chart .chart-row, 80 | .bar-chart [data-cp-size] { 81 | min-height: 8px; 82 | } 83 | 84 | .bar-chart.stacked > * > * { 85 | display: flex; 86 | } 87 | 88 | .bar-chart.stacked .group-by-number [data-cp-size] { 89 | display: inline-block; 90 | } 91 | 92 | .scatter-plot .plot-container { 93 | position: absolute; 94 | top: e(%("%dpx", @scatter-plot-dot-size * 2)); 95 | left: 0; 96 | right: e(%("%dpx", @scatter-plot-dot-size * 2)); 97 | bottom: 0; 98 | margin: 0; padding: 0; 99 | } 100 | 101 | .scatter-plot .chart-dot, 102 | .scatter-plot .chart-dot, 103 | .scatter-plot [data-cp-x], 104 | .scatter-plot [data-cp-y] { 105 | position: absolute; 106 | height: 0; 107 | width: 0; 108 | list-style: none; 109 | overflow: hidden; 110 | border: e(%("%dpx", @scatter-plot-dot-size)) solid @chart-primary-color; 111 | border-radius: 100%; 112 | } 113 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | cssplot 2 | ======= 3 | 4 | Simple, css-only plotting. 5 | 6 | ## Features 7 | 8 | * No javascript required 9 | * Easy-to-use 10 | * Responsive 11 | 12 | Check [asciimoo.github.io/cssplot](https://asciimoo.github.io/cssplot) for demo. 13 | 14 | ## Usage 15 | 16 | ```html 17 | 18 | ``` 19 | 20 | Alternatively `cssplot.base.css` can be used alone with the following modifications: 21 | 22 | * Bar chart: use `class="chart-column" style="height: 99.0%"` instead of `data-cp-size="99"` 23 | * Vertical bar chart: use `class="chart-row" style="width: 99.0%"` instead of `data-cp-size="99"` 24 | * Scatter plot: use `class="chart-dot" style="left: 20.0%; bottom: 10.0%"` instead of `data-cp-x="20" data-cp-y="10"` 25 | 26 | ## Examples 27 | 28 | ### Column chart 29 | 30 | ```html 31 |
32 | 42 |
43 | ``` 44 | 45 |
46 | 47 |
48 | 49 | ### Stacked Column chart 50 | 51 | ```html 52 |
53 | 85 |
86 | ``` 87 | 88 |
89 | 90 |
91 | 92 | ### Bar chart 93 | 94 | ```html 95 |
96 | 103 |
104 | ``` 105 | 106 |
107 | 108 |
109 | 110 | ### Stacked Bar chart 111 | 112 | ```html 113 |
114 | 135 |
136 | ``` 137 | 138 |
139 | 140 |
141 | 142 | ### Scatter plot 143 | 144 | ```html 145 |
146 | 156 |
157 | ``` 158 | 159 |
160 | 161 |
162 | 163 | ## Conceptions 164 | 165 | - [ ] Pie chart 166 | - [ ] Line chart 167 | - [ ] Axis/scale support 168 | - [ ] Live demo 169 | - [ ] Better build script 170 | --------------------------------------------------------------------------------