bendtherules/opencharts
1
0
Fork 0
mirror of https://github.com/bendtherules/opencharts.git synced 2026-08-18 22:02:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

CssCharts aka OpenCharts

Browse Source 
Horizontal and vertical bar charts done
This commit is contained in:
bendtherules
2014-03-26 16:35:26 -07:00
commit 2477ca5489
9 changed files with 677 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bar_hor/bar_hor.css
+115
View File
@@ -0,0 +1,115 @@
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.chart {
width: 50vw;
height: 50vh;
margin: 25vh 25vw;
background-color: #90ee90;
position: relative;
}
.chart-container {
width: 100%;
height: 100%;
}
.axis {
width: 100%;
height: 100%;
position: absolute;
}
.axis .axis-x,
.axis .axis-y {
position: absolute;
background-color: #d3d3d3;
}
.axis .axis-y {
width: 1em;
height: 100%;
}
.axis .axis-y .axis-line {
left: 50%;
}
.axis .axis-y .axis-line .axis-line-container {
margin: 0 -0.125em;
height: 100%;
width: 0.25em;
}
.axis .axis-x {
height: 1em;
width: 100%;
bottom: 0;
}
.axis .axis-x .axis-line {
top: 50%;
}
.axis .axis-x .axis-line .axis-line-container {
margin: -0.125em 0;
height: 0.25em;
width: 100%;
}
.axis-line {
width: 100%;
height: 100%;
position: absolute;
z-index: 5;
}
.axis-line-container {
background-color: #000;
}
.scene {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
padding-left: 1em;
padding-bottom: 1em;
}
.scene .scene-container {
position: relative;
width: 100%;
height: 100%;
background-color: #add8e6;
padding-top: 0.02px;
}
.bar {
height: 12.5%;
width: 100%;
position: absolute;
}
.bar .bar-inner {
height: 100%;
background-color: #ff0;
}
.bar.part-1 {
top: 6.25%;
right: 12.5% 12.5% 1;
}
.bar.part-2 {
top: 31.25%;
right: 12.5% 12.5% 2;
}
.bar.part-3 {
top: 56.25%;
right: 12.5% 12.5% 3;
}
.bar.part-4 {
top: 81.25%;
right: 12.5% 12.5% 4;
}
.part-1 .bar-inner {
width: 40%;
}
.part-2 .bar-inner {
width: 65%;
}
.part-3 .bar-inner {
width: 90%;
}
.part-4 .bar-inner {
width: 75%;
}
.clearfix {
clear: both;
}
bar_hor/bar_hor.html
+46
View File
@@ -0,0 +1,46 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Bar Chart</title>
<link rel="stylesheet" href="bar_hor.css">
</head>
<body>
<div class="chart">
<div class="chart-container">
<div class="axis">
<div class="axis-y">
<div class="axis-line">
<div class="axis-line-container"></div>
</div>
</div>
<div class="axis-x">
<div class="axis-line">
<div class="axis-line-container"></div>
</div>
</div>
</div>
<div class="scene">
<div class="scene-container">
<div class="bar part-1" data-val="50%">
<div class="bar-inner"></div>
</div>
<div class="bar part-2" data-val="62%">
<div class="bar-inner"></div>
</div>
<div class=" bar part-3" data-val="40%">
<div class="bar-inner"></div>
</div>
<div class=" bar part-4" data-val="20%">
<div class="bar-inner"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
</html>
bar_hor/bar_hor.styl
+136
View File
@@ -0,0 +1,136 @@
full=100%
half=50%
add_unitless()
sum=null
res_unit=unit(arguments)
for arg in arguments
arg=unit(arg,"")
if sum is null
sum=arg
else
sum=sum+arg
return unit(sum,res_unit)
*
-webkit-box-sizing border-box
-moz-box-sizing border-box
box-sizing border-box
.chart
width 50vw
height 50vh
margin 25vh 25vw
background-color lightgreen
position relative
.chart-container
width full
height full
axis-thick=1em
axis-line-thick=.25em
.axis
width full
height full
position absolute
// z-index 4
.axis-x
.axis-y
position absolute
background-color lightgray
.axis-y
width axis-thick
height full
.axis-line
left half
.axis-line-container
margin 0 -0.5*axis-line-thick
height full
width axis-line-thick
.axis-x
height axis-thick
width full
bottom 0
.axis-line
top 50%
.axis-line-container
margin -0.5*axis-line-thick 0
height axis-line-thick
width full
.axis-line
width full
height full
position absolute
z-index 5
.axis-line-container
background-color black
.scene
position absolute
z-index 1
// background-color green
width full
height full
padding-left axis-thick
padding-bottom axis-thick
.scene-container
position relative
width full
height full
background-color lightblue
padding-top 0.02px
count_bar=4
p_empty=50%
p_bar_m=p_empty/count_bar
p_bar_w=(full - p_empty)/count_bar
// p_bar=p_bar/count_bar
.bar
height p_bar_w
width full
// margin (p_bar_m/2) 0
// background-color lightgreen
// float left
position absolute
.bar-inner
// position absolute
// bottom 0
height full
background-color yellow
//make this thing below possible
for tmp_count in 1..count_bar
.bar.part-{tmp_count}
top add_unitless((p_bar_m / 2),(p_bar_m * (tmp_count - 1)),(p_bar_w * (tmp_count - 1)))
right p_bar_m p_bar_w tmp_count
//automate this part
.part-1
.bar-inner
width 40%
.part-2
.bar-inner
width 65%
.part-3
.bar-inner
width 90%
.part-4
.bar-inner
width 75%
.clearfix
clear both
bar_ver/bar_ver.css
+103
View File
@@ -0,0 +1,103 @@
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.chart {
width: 50vw;
height: 50vh;
margin: 25vh 25vw;
background-color: #90ee90;
position: relative;
}
.chart-container {
width: 100%;
height: 100%;
}
.axis {
width: 100%;
height: 100%;
position: absolute;
z-index: 4;
}
.axis .axis-x,
.axis .axis-y {
position: absolute;
background-color: #d3d3d3;
}
.axis .axis-y {
width: 1em;
height: 100%;
}
.axis .axis-y .axis-line {
left: 50%;
}
.axis .axis-y .axis-line .axis-line-container {
margin: 0 -0.125em;
height: 100%;
width: 0.25em;
}
.axis .axis-x {
height: 1em;
width: 100%;
bottom: 0;
}
.axis .axis-x .axis-line {
top: 50%;
}
.axis .axis-x .axis-line .axis-line-container {
margin: -0.125em 0;
height: 0.25em;
width: 100%;
}
.axis-line {
width: 100%;
height: 100%;
position: absolute;
z-index: 5;
}
.axis-line-container {
background-color: #000;
}
.scene {
position: absolute;
z-index: 1;
background-color: #008000;
width: 100%;
height: 100%;
padding-left: 1em;
padding-bottom: 1em;
}
.scene .scene-container {
width: 100%;
height: 100%;
background-color: #add8e6;
}
.bar {
width: 12.5%;
height: 100%;
margin: 0 6.25%;
float: left;
position: relative;
}
.bar .bar-inner {
position: absolute;
bottom: 0;
width: 100%;
background-color: #ff0;
}
.part-1 .bar-inner {
height: 40%;
}
.part-2 .bar-inner {
height: 65%;
}
.part-3 .bar-inner {
height: 90%;
}
.part-4 .bar-inner {
height: 75%;
}
.clearfix {
clear: both;
}
bar_ver/bar_ver.html
+46
View File
@@ -0,0 +1,46 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical Bar Chart</title>
<link rel="stylesheet" href="bar_ver.css">
</head>
<body>
<div class="chart">
<div class="chart-container">
<div class="axis">
<div class="axis-y">
<div class="axis-line">
<div class="axis-line-container"></div>
</div>
</div>
<div class="axis-x">
<div class="axis-line">
<div class="axis-line-container"></div>
</div>
</div>
</div>
<div class="scene">
<div class="scene-container">
<div class="bar part-1" data-val="50%">
<div class="bar-inner"></div>
</div>
<div class="bar part-2" data-val="62%">
<div class="bar-inner"></div>
</div>
<div class=" bar part-3" data-val="40%">
<div class="bar-inner"></div>
</div>
<div class=" bar part-4" data-val="20%">
<div class="bar-inner"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
</html>
bar_ver/bar_ver.styl
+117
View File
@@ -0,0 +1,117 @@
full=100%
half=50%
*
-webkit-box-sizing border-box
-moz-box-sizing border-box
box-sizing border-box
.chart
width 50vw
height 50vh
margin 25vh 25vw
background-color lightgreen
position relative
.chart-container
width full
height full
axis-thick=1em
axis-line-thick=.25em
.axis
width full
height full
position absolute
z-index 4
.axis-x
.axis-y
position absolute
background-color lightgray
.axis-y
width axis-thick
height full
.axis-line
left half
.axis-line-container
margin 0 -0.5*axis-line-thick
height full
width axis-line-thick
.axis-x
height axis-thick
width full
bottom 0
.axis-line
top 50%
.axis-line-container
margin -0.5*axis-line-thick 0
height axis-line-thick
width full
.axis-line
width full
height full
position absolute
z-index 5
.axis-line-container
background-color black
.scene
position absolute
z-index 1
background-color green
width full
height full
padding-left axis-thick
padding-bottom axis-thick
.scene-container
width full
height full
background-color lightblue
count_bar=4
p_empty=50%
p_bar_m=p_empty/count_bar
p_bar_w=(full - p_empty)/count_bar
// p_bar=p_bar/count_bar
.bar
width p_bar_w
height full
margin 0 (p_bar_m/2)
// background-color lightgreen
float left
position relative
.bar-inner
position absolute
bottom 0
width full
background-color yellow
//automate this part
.part-1
.bar-inner
height 40%
.part-2
.bar-inner
height 65%
.part-3
.bar-inner
height 90%
.part-4
.bar-inner
height 75%
.clearfix
clear both
pie/pie-1.css
+80
View File
@@ -0,0 +1,80 @@
html,body{
width: 100%;
height: 100%;
}
body{
position: relative;
margin: 0;
}
.wrapper{
}
.pie-part{
position: absolute;
width: 200px;
height: 100px;
left: 200px;
top: 200px;
background-color: green;
border-top-right-radius: 50% 100%;
border-top-left-radius: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.part-1{
background-color: rgb(200,50,255);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
z-index: 1;
}
.part-2{
background-color: rgb(150,100,255);
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
z-index: 2;
}
.part-3{
background-color: rgb(100,150,255);
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
-ms-transform: rotate(150deg);
-o-transform: rotate(150deg);
transform: rotate(150deg);
z-index: 3;
}
.part-4{
background-color: rgb(50,200,255);
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
z-index: 4;
left: 0;
top:-100px;
}
.clipper{
overflow: hidden;
position: absolute;
left: 200px;
top: 300px;
width: 200px;
height: 100px;
}
pie/pie-1.html
+21
View File
@@ -0,0 +1,21 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS PIE Chart</title>
<link rel="stylesheet" href="./pie-1.css">
</head>
<body>
<div class="wrapper">
<div class="pie-part part-1"></div>
<div class="pie-part part-2"></div>
<div class="pie-part part-3"></div>
<div class="clipper">
<div class="pie-part part-4"></div>
</div>
</div>
</body>
</html>
todo.txt
+13
View File
@@ -0,0 +1,13 @@
(responsive and animatable by design)
(with custom width, color, border-radius, font, intelligent labels)
bar charts (hor,ver)
pie charts (pop-out)
line chart (with smoothing option)
bubble chart
overlay charts of diff type
3d transforms
creation 2 ways - simple stylus file (for design) or js loading (for data)
1. bar-ver
Labels, template out