mirror of
https://github.com/bendtherules/opencharts.git
synced 2026-08-18 13:52:49 +00:00
CssCharts aka OpenCharts
Horizontal and vertical bar charts done
This commit is contained in:
bendtherules
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user