Skip to content

Added Stacked Bar and Column Charts #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Nov 18, 2014
Merged

Added Stacked Bar and Column Charts #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
10e8d80
Added Stacked Bar Charts
dcrousso Nov 13, 2014
bd83fe7
Added Stacked Column Charts
dcrousso Nov 13, 2014
636bceb
Updated Readme
dcrousso Nov 13, 2014
4ec6f0e
Added demo page
dcrousso Nov 13, 2014
fac4dcf
Added Stacked charts to base file
dcrousso Nov 13, 2014
d1b99d5
Added Stacked bar/column charts to base less file
dcrousso Nov 14, 2014
de91252
Removed index.html
dcrousso Nov 17, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 75 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,49 @@ Alternatively `cssplot.base.css` can be used alone with the following modificati
<img src="docs/images/cssplot_column_chart.png"/>
</div>

### Stacked Column chart

```html
<div class="column-chart stacked">
<ul class="plot-container group-by-number">
<li>
<div data-cp-size="99">99%</div>
</li>
<li>
<div data-cp-size="50">50%</div>
<div data-cp-size="20" data-group="5">20%</div>
</li>
<li>
<div data-cp-size="30">30%</div>
<div data-cp-size="15" data-group="5">15%</div>
</li>
<li>
<div data-cp-size="90">90%</div>
<div data-cp-size="10" data-group="5">10%</div>
</li>
<li>
<div data-cp-size="10">10%</div>
<div data-cp-size="60" data-group="5">60%</div>
</li>
<li>
<div data-cp-size="70">70%</div>
<div data-cp-size="25" data-group="5">25%</div>
</li>
<li>
<div data-cp-size="30">30%</div>
<div data-cp-size="40" data-group="5">40%</div>
</li>
<li>
<div data-cp-size="90">90%</div>
</li>
</ul>
</div>
```

<div align="center">
<img src="docs/images/cssplot_stacked_column_chart.png"/>
</div>

### Bar chart

```html
Expand All @@ -64,6 +107,38 @@ Alternatively `cssplot.base.css` can be used alone with the following modificati
<img src="docs/images/cssplot_bar_chart.png"/>
</div>

### Stacked Bar chart

```html
<div class="bar-chart stacked pad">
<ul class="plot-container group-by-number">
<li>
<div data-cp-size="100">100%</div>
</li>
<li>
<div data-cp-size="30">30%</div>
<div data-cp-size="30" data-group="5">30%</div>
</li>
<li>
<div data-cp-size="20">20%</div>
<div data-cp-size="50" data-group="5">50%</div>
</li>
<li>
<div data-cp-size="70">70%</div>
<div data-cp-size="20" data-group="5">20%</div>
</li>
<li>
<div data-cp-size="90">90%</div>
<div data-cp-size="10" data-group="5">10%</div>
</li>
</ul>
</div>
```

<div align="center">
<img src="docs/images/cssplot_stacked_bar_chart.png"/>
</div>

### Scatter plot

```html
Expand All @@ -88,7 +163,6 @@ Alternatively `cssplot.base.css` can be used alone with the following modificati
## Conceptions

- [ ] Pie chart
- [ ] Stacked bar chart
- [ ] Line chart
- [ ] Axis/scale support
- [ ] Live demo
Expand Down
30 changes: 27 additions & 3 deletions build/cssplot.base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
padding: 0;
margin: 0;
}
.plot-container li {
list-style: none;
border: 1px solid #ffffff;
}
.column-chart .plot-container {
display: -webkit-flex;
display: flex;
Expand All @@ -24,8 +28,24 @@
margin: 0;
min-height: 100px;
}
.column-chart.stacked li {
height: 100%;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
}
.column-chart.stacked .group-by-number [data-cp-size] {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
}
.column-chart .chart-column,
.column-chart [data-cp-size] {
.column-chart [data-cp-size],
.column-chart.stacked li {
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-align-self: flex-end;
Expand All @@ -37,8 +57,6 @@
.bar-chart [data-cp-size] {
background: #3498db;
color: #ffffff;
list-style: none;
border: 1px solid #ffffff;
box-sizing: border-box;
}
.bar-chart {
Expand All @@ -54,6 +72,12 @@
.bar-chart [data-cp-size] {
min-height: 8px;
}
.bar-chart.stacked li {
display: flex;
}
.bar-chart.stacked .group-by-number [data-cp-size] {
display: inline-block;
}
.scatter-plot .plot-container {
position: absolute;
top: 12px;
Expand Down
30 changes: 27 additions & 3 deletions build/cssplot.full.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
padding: 0;
margin: 0;
}
.plot-container li {
list-style: none;
border: 1px solid #ffffff;
}
.column-chart .plot-container {
display: -webkit-flex;
display: flex;
Expand All @@ -24,8 +28,24 @@
margin: 0;
min-height: 100px;
}
.column-chart.stacked li {
height: 100%;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
}
.column-chart.stacked .group-by-number [data-cp-size] {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
}
.column-chart .chart-column,
.column-chart [data-cp-size] {
.column-chart [data-cp-size],
.column-chart.stacked li {
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-align-self: flex-end;
Expand All @@ -37,8 +57,6 @@
.bar-chart [data-cp-size] {
background: #3498db;
color: #ffffff;
list-style: none;
border: 1px solid #ffffff;
box-sizing: border-box;
}
.bar-chart {
Expand All @@ -54,6 +72,12 @@
.bar-chart [data-cp-size] {
min-height: 8px;
}
.bar-chart.stacked li {
display: flex;
}
.bar-chart.stacked .group-by-number [data-cp-size] {
display: inline-block;
}
.scatter-plot .plot-container {
position: absolute;
top: 12px;
Expand Down
Binary file added docs/images/cssplot_stacked_bar_chart.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/cssplot_stacked_column_chart.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 32 additions & 3 deletions src/modules/base.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@
margin: 0;
}

.plot-container li {
list-style: none;
border: 1px solid #ffffff;
}

.column-chart .plot-container {
display: -webkit-flex;
display: flex;
Expand All @@ -21,8 +26,26 @@
min-height: 100px;
}

.column-chart.stacked li {
height: 100%;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
}

.column-chart.stacked .group-by-number [data-cp-size] {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
}

.column-chart .chart-column,
.column-chart [data-cp-size] {
.column-chart [data-cp-size],
.column-chart.stacked li {
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-align-self: flex-end;
Expand All @@ -35,8 +58,6 @@
.bar-chart [data-cp-size] {
background: @chart-primary-color;
color: @chart-primary-label-color;
list-style: none;
border: 1px solid @chart-primary-border-color;
box-sizing: border-box;
}

Expand All @@ -56,6 +77,14 @@
min-height: 8px;
}

.bar-chart.stacked li {
display: flex;
}

.bar-chart.stacked .group-by-number [data-cp-size] {
display: inline-block;
}

.scatter-plot .plot-container {
position: absolute;
top: e(%("%dpx", @scatter-plot-dot-size * 2));
Expand Down