Horizontal Bar Chart

commit 2477ca548994ae8370f19d51f8a3eb5e005bc1a1 Author: bendtherules Date: Wed Mar 26 16:35:26 2014 -0700 CssCharts aka OpenCharts Horizontal and vertical bar charts done diff --git a/bar_hor/bar_hor.css b/bar_hor/bar_hor.css new file mode 100644 index 0000000..5c69a84 --- /dev/null +++ b/bar_hor/bar_hor.css @@ -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; +} diff --git a/bar_hor/bar_hor.html b/bar_hor/bar_hor.html new file mode 100644 index 0000000..3c5121b --- /dev/null +++ b/bar_hor/bar_hor.html @@ -0,0 +1,46 @@ + + + + + + Horizontal Bar Chart + + + + +

+ + + diff --git a/bar_hor/bar_hor.styl b/bar_hor/bar_hor.styl new file mode 100644 index 0000000..c4354d5 --- /dev/null +++ b/bar_hor/bar_hor.styl @@ -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 diff --git a/bar_ver/bar_ver.css b/bar_ver/bar_ver.css new file mode 100644 index 0000000..aa43b6b --- /dev/null +++ b/bar_ver/bar_ver.css @@ -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; +} diff --git a/bar_ver/bar_ver.html b/bar_ver/bar_ver.html new file mode 100644 index 0000000..2231b44 --- /dev/null +++ b/bar_ver/bar_ver.html @@ -0,0 +1,46 @@ + + + + + + Vertical Bar Chart + + + + +

+ + + diff --git a/bar_ver/bar_ver.styl b/bar_ver/bar_ver.styl new file mode 100644 index 0000000..426977b --- /dev/null +++ b/bar_ver/bar_ver.styl @@ -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 diff --git a/pie/pie-1.css b/pie/pie-1.css new file mode 100644 index 0000000..1aef28f --- /dev/null +++ b/pie/pie-1.css @@ -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; +} diff --git a/pie/pie-1.html b/pie/pie-1.html new file mode 100644 index 0000000..b6710f6 --- /dev/null +++ b/pie/pie-1.html @@ -0,0 +1,21 @@ + + + + + + CSS PIE Chart + + + + +

+ + + diff --git a/todo.txt b/todo.txt new file mode 100644 index 0000000..12ec0f7 --- /dev/null +++ b/todo.txt @@ -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