mirror of
https://github.com/bendtherules/opencharts.git
synced 2026-08-18 13:52:49 +00:00
Line + Area chart done, directory re-arranged
This commit is contained in:
bendtherules
@@ -0,0 +1 @@
|
||||
Same as line-quirks
|
||||
@@ -0,0 +1,226 @@
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0.1px;
|
||||
}
|
||||
.chart {
|
||||
width: 50vh;
|
||||
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 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #add8e6;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.line-inner {
|
||||
background-color: #008000;
|
||||
position: absolute;
|
||||
-webkit-transform-origin: left center;
|
||||
-moz-transform-origin: left center;
|
||||
-ms-transform-origin: left center;
|
||||
-o-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
}
|
||||
.line-part {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.area {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
.area .area-rotated {
|
||||
-webkit-transform-origin: left top;
|
||||
-moz-transform-origin: left top;
|
||||
-ms-transform-origin: left top;
|
||||
-o-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
}
|
||||
.area .area-rotated,
|
||||
.area .area-lower-block {
|
||||
position: absolute;
|
||||
background-color: #389ab9;
|
||||
}
|
||||
.area .area-lower-block {
|
||||
width: 100%;
|
||||
}
|
||||
/* {{p=it.points;}} */
|
||||
/*{{ for(count=0;count<it.points.length;count++){ }}*/
|
||||
.part-/*{{= count+1}}*/ {
|
||||
/*
|
||||
left: {{=it.points[count][0]}};
|
||||
top: {{=it.points[count][1]}};
|
||||
*/
|
||||
junk: "";
|
||||
}
|
||||
.part-/*{{= count+1}}*/ .line-inner {
|
||||
/*
|
||||
{{ if (count+1<it.points.length){ }}
|
||||
{{
|
||||
sqr=function(numb){return Math.pow(numb,2)};
|
||||
p1=p[count];
|
||||
p2=p[count+1];
|
||||
x2=Number(p2[0].slice(0,p2[0].length-1));
|
||||
x1=Number(p1[0].slice(0,p1[0].length-1));
|
||||
y2=100-Number(p2[1].slice(0,p2[1].length-1));
|
||||
y1=100-Number(p1[1].slice(0,p1[1].length-1));
|
||||
x_diff=(x2-x1);
|
||||
y_diff=(y2-y1);
|
||||
hypotenuse=Math.sqrt(sqr(x_diff)+sqr(y_diff));
|
||||
rot_angle= -180/Math.PI*Math.atan2(y_diff,x_diff)+"deg";
|
||||
}}
|
||||
width: {{= hypotenuse+"%" }} ;
|
||||
-webkit-transform: rotate({{= rot_angle }});
|
||||
-moz-transform: rotate({{= rot_angle }});
|
||||
-ms-transform: rotate({{= rot_angle }});
|
||||
-o-transform: rotate({{= rot_angle }});
|
||||
transform: rotate({{= rot_angle }});
|
||||
*/
|
||||
/*{{ } }}*/
|
||||
junk: "";
|
||||
}
|
||||
.part-/*{{= count+1}}*/ .area {
|
||||
/*
|
||||
width: {{=x_diff+"%"}};
|
||||
{{ if (count+1<it.points.length){ }}
|
||||
{{ if (y_diff<0){ }}
|
||||
{{ h=y1; }};
|
||||
{{ } }}
|
||||
{{ if (y_diff>0){ }}
|
||||
{{ h=y2; }};
|
||||
top: {{= -y_diff+"%" }};
|
||||
{{ } }}
|
||||
height: {{= h+"%" }};
|
||||
{{ } }}
|
||||
*/
|
||||
junk: "";
|
||||
}
|
||||
.part-/*{{= count+1}}*/ .area .area-rotated {
|
||||
/*
|
||||
width: {{= 100*hypotenuse/x_diff+"%" }};
|
||||
height: {{= Math.abs(y_diff)*100/h+"%" }};
|
||||
-webkit-transform: rotate( {{= rot_angle }} );
|
||||
-moz-transform: rotate( {{= rot_angle }} );
|
||||
-ms-transform: rotate( {{= rot_angle }} );
|
||||
-o-transform: rotate( {{= rot_angle }} );
|
||||
transform: rotate( {{= rot_angle }} );
|
||||
|
||||
{{ if (y_diff<0){ }}
|
||||
// do nthng
|
||||
{{ } }}
|
||||
{{ if (y_diff>0){ }}
|
||||
|
||||
top : {{= 100*Math.abs(y_diff)/y2+"%" }};
|
||||
{{ } }}
|
||||
*/
|
||||
junk: "";
|
||||
}
|
||||
.part-/*{{= count+1}}*/ .area .area-lower-block {
|
||||
/*
|
||||
{{ if (y_diff>0){ }}
|
||||
height: {{= (100*y1/y2)+"%" }};
|
||||
top : {{= 100*Math.abs(y_diff)/y2+"%" }};
|
||||
{{ } }}
|
||||
{{ if (y_diff<0){ }}
|
||||
height: {{= (100*y2/y1)+"%" }};
|
||||
top: {{= Math.abs(y_diff)*100/y1+"%" }};
|
||||
{{ } }}
|
||||
*/
|
||||
junk: "";
|
||||
}
|
||||
/* {{ } }} */
|
||||
.non-area {
|
||||
/*
|
||||
top: {{= -it.point_radius.slice(0,it.point_radius.length-2)+"px" }};
|
||||
*/
|
||||
position: relative;
|
||||
}
|
||||
.line-inner {
|
||||
/*
|
||||
{{ w= Number(it.point_radius.slice(0,it.point_radius.length-2))*2 +it.point_radius.slice(it.point_radius.length-2); }}
|
||||
|
||||
height: {{= w }};
|
||||
*/
|
||||
junk: "";
|
||||
}
|
||||
.point-inner {
|
||||
position: absolute;
|
||||
/*
|
||||
left :-{{= it.point_radius }};
|
||||
width:{{= w }};
|
||||
height :{{= w }};
|
||||
*/
|
||||
border-radius: 50% 50%;
|
||||
background-color: #4a29f8;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
|
||||
<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>
|
||||
/*{{ if (it.points.length){ }}*/
|
||||
<div class="scene">
|
||||
<div class="scene-container">
|
||||
/*{{ for (count=0;count<it.points.length;count++){ }}*/
|
||||
<div class="line-part part-{{= count+1 }}">
|
||||
<div class="area">
|
||||
<div class="area-rotated"></div>
|
||||
<div class="area-lower-block"></div>
|
||||
</div>
|
||||
<div class="non-area">
|
||||
/*{{ if (count+1<it.points.length){ }}*/
|
||||
<div class="line-inner"></div>
|
||||
/*{{ }; }}
|
||||
<div class="point-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
/*{{ }; }}*/
|
||||
/*{{ }; }}*/
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,229 @@
|
||||
full=100%
|
||||
half=50%
|
||||
*
|
||||
-webkit-box-sizing border-box
|
||||
-moz-box-sizing border-box
|
||||
box-sizing border-box
|
||||
|
||||
html,body
|
||||
width full
|
||||
height full
|
||||
|
||||
body
|
||||
margin 0
|
||||
padding .1px
|
||||
.chart
|
||||
width 50vh
|
||||
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
|
||||
position relative
|
||||
overflow hidden
|
||||
|
||||
.line-inner
|
||||
background-color green
|
||||
position absolute
|
||||
|
||||
-webkit-transform-origin : left center;
|
||||
-moz-transform-origin : left center;
|
||||
-ms-transform-origin : left center;
|
||||
-o-transform-origin : left center;
|
||||
transform-origin : left center;
|
||||
|
||||
.line-part
|
||||
position absolute
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.area
|
||||
// background-color darken(lightblue,10%)
|
||||
position absolute
|
||||
overflow hidden
|
||||
|
||||
.area-rotated
|
||||
-webkit-transform-origin : left top;
|
||||
-moz-transform-origin : left top;
|
||||
-ms-transform-origin : left top;
|
||||
-o-transform-origin : left top;
|
||||
transform-origin : left top;
|
||||
|
||||
.area-rotated, .area-lower-block
|
||||
position absolute
|
||||
background-color darken(lightblue,40%)
|
||||
|
||||
.area-lower-block
|
||||
width: 100%;
|
||||
/* {{p=it.points;}} */
|
||||
/*{{ for(count=0;count<it.points.length;count++){ }}*/
|
||||
.part-/*{{= count+1}}*/
|
||||
/*
|
||||
left: {{=it.points[count][0]}};
|
||||
top: {{=it.points[count][1]}};
|
||||
*/
|
||||
junk ""
|
||||
.line-inner
|
||||
/*
|
||||
{{ if (count+1<it.points.length){ }}
|
||||
{{
|
||||
sqr=function(numb){return Math.pow(numb,2)};
|
||||
p1=p[count];
|
||||
p2=p[count+1];
|
||||
x2=Number(p2[0].slice(0,p2[0].length-1));
|
||||
x1=Number(p1[0].slice(0,p1[0].length-1));
|
||||
y2=100-Number(p2[1].slice(0,p2[1].length-1));
|
||||
y1=100-Number(p1[1].slice(0,p1[1].length-1));
|
||||
x_diff=(x2-x1);
|
||||
y_diff=(y2-y1);
|
||||
hypotenuse=Math.sqrt(sqr(x_diff)+sqr(y_diff));
|
||||
rot_angle= -180/Math.PI*Math.atan2(y_diff,x_diff)+"deg";
|
||||
}}
|
||||
width: {{= hypotenuse+"%" }} ;
|
||||
-webkit-transform: rotate({{= rot_angle }});
|
||||
-moz-transform: rotate({{= rot_angle }});
|
||||
-ms-transform: rotate({{= rot_angle }});
|
||||
-o-transform: rotate({{= rot_angle }});
|
||||
transform: rotate({{= rot_angle }});
|
||||
*/
|
||||
/*{{ } }}*/
|
||||
junk ""
|
||||
.area
|
||||
/*
|
||||
width: {{=x_diff+"%"}};
|
||||
{{ if (count+1<it.points.length){ }}
|
||||
{{ if (y_diff<0){ }}
|
||||
{{ h=y1; }};
|
||||
{{ } }}
|
||||
{{ if (y_diff>0){ }}
|
||||
{{ h=y2; }};
|
||||
top: {{= -y_diff+"%" }};
|
||||
{{ } }}
|
||||
height: {{= h+"%" }};
|
||||
{{ } }}
|
||||
*/
|
||||
junk ""
|
||||
|
||||
.area-rotated
|
||||
/*
|
||||
width: {{= 100*hypotenuse/x_diff+"%" }};
|
||||
height: {{= Math.abs(y_diff)*100/h+"%" }};
|
||||
-webkit-transform: rotate( {{= rot_angle }} );
|
||||
-moz-transform: rotate( {{= rot_angle }} );
|
||||
-ms-transform: rotate( {{= rot_angle }} );
|
||||
-o-transform: rotate( {{= rot_angle }} );
|
||||
transform: rotate( {{= rot_angle }} );
|
||||
|
||||
{{ if (y_diff<0){ }}
|
||||
// do nthng
|
||||
{{ } }}
|
||||
{{ if (y_diff>0){ }}
|
||||
|
||||
top : {{= 100*Math.abs(y_diff)/y2+"%" }};
|
||||
{{ } }}
|
||||
*/
|
||||
junk ""
|
||||
|
||||
.area-lower-block
|
||||
/*
|
||||
{{ if (y_diff>0){ }}
|
||||
height: {{= (100*y1/y2)+"%" }};
|
||||
top : {{= 100*Math.abs(y_diff)/y2+"%" }};
|
||||
{{ } }}
|
||||
{{ if (y_diff<0){ }}
|
||||
height: {{= (100*y2/y1)+"%" }};
|
||||
top: {{= Math.abs(y_diff)*100/y1+"%" }};
|
||||
{{ } }}
|
||||
*/
|
||||
junk ""
|
||||
/* {{ } }} */
|
||||
|
||||
.non-area
|
||||
/*
|
||||
top: {{= -it.point_radius.slice(0,it.point_radius.length-2)+"px" }};
|
||||
*/
|
||||
position relative
|
||||
|
||||
|
||||
.line-inner
|
||||
/*
|
||||
{{ w= Number(it.point_radius.slice(0,it.point_radius.length-2))*2 +it.point_radius.slice(it.point_radius.length-2); }}
|
||||
|
||||
height: {{= w }};
|
||||
*/
|
||||
junk ""
|
||||
|
||||
|
||||
.point-inner
|
||||
position absolute
|
||||
/*
|
||||
left :-{{= it.point_radius }};
|
||||
width:{{= w }};
|
||||
height :{{= w }};
|
||||
*/
|
||||
border-radius 50% 50%
|
||||
background-color #4A29F8
|
||||
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Area Graph</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="../../js/dynamic_load.js" type="text/javascript" charset="utf-8" ></script>
|
||||
<script src="../../js/doT.js" type="text/javascript" charset="utf-8" ></script>
|
||||
<script src="loader_area.js" type="text/javascript" charset="utf-8" ></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,26 @@
|
||||
addEventListener("load", load_em_all);
|
||||
|
||||
points = [
|
||||
["0%", "20%"],
|
||||
["20%", "60%"],
|
||||
["45%", "45%"],
|
||||
["55%", "30%"],
|
||||
["85%", "80%"]
|
||||
];
|
||||
|
||||
function load_em_all()
|
||||
{
|
||||
load_html_css_js("html", "area.html",
|
||||
{
|
||||
"points": points,
|
||||
"point_radius": "10px"
|
||||
});
|
||||
load_html_css_js("css", "area.css",
|
||||
{
|
||||
"points": points,
|
||||
"point_radius": "5px"
|
||||
});
|
||||
}
|
||||
|
||||
// load_em_all();
|
||||
// console.log("Loaded stuffs");
|
||||
@@ -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,18 @@
|
||||
Needs proper unit detection
|
||||
% coverter -> Makes x% to (100-x)%
|
||||
think about how to know if document is loaded or defer it to onloaded
|
||||
|
||||
If responsive, how to get angle?
|
||||
Take care of last dot
|
||||
|
||||
think why margin-left is not needed
|
||||
think about making two css (with script) and passing div as input
|
||||
** make .styl conformant with new html structure **
|
||||
|
||||
To make containing area graph
|
||||
------------------------------
|
||||
make area below- outer bigger rect as width-height with overflow:none, inner -> rotated (diff height) rect + inner smaller rect
|
||||
_
|
||||
/_| -> inner rotated diff height
|
||||
|_| -> inner smaller
|
||||
total containing rect -> outer bigger rect
|
||||
@@ -0,0 +1,158 @@
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0.1px;
|
||||
}
|
||||
.chart {
|
||||
width: 50vh;
|
||||
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 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #add8e6;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.line-inner {
|
||||
background-color: #008000;
|
||||
position: absolute;
|
||||
-webkit-transform-origin: left center;
|
||||
-moz-transform-origin: left center;
|
||||
-ms-transform-origin: left center;
|
||||
-o-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
}
|
||||
.line-part {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* {{p=it.points;}} */
|
||||
/*{{ for(count=0;count<it.points.length;count++){ }}*/
|
||||
.part-/*{{= count+1}}*/ {
|
||||
/*
|
||||
left: {{=it.points[count][0]}};
|
||||
top: {{=it.points[count][1]}};
|
||||
*/
|
||||
junk: "";
|
||||
}
|
||||
.part-/*{{= count+1}}*/ .line-inner {
|
||||
/*
|
||||
{{ if (count+1<it.points.length){ }}
|
||||
{{
|
||||
sqr=function(numb){return Math.pow(numb,2)};
|
||||
p1=p[count];
|
||||
p2=p[count+1];
|
||||
x2=Number(p2[0].slice(0,p2[0].length-1));
|
||||
x1=Number(p1[0].slice(0,p1[0].length-1));
|
||||
y2=100-Number(p2[1].slice(0,p2[1].length-1));
|
||||
y1=100-Number(p1[1].slice(0,p1[1].length-1));
|
||||
x_diff=(x2-x1);
|
||||
y_diff=(y2-y1);
|
||||
hypotenuse=Math.sqrt(sqr(x_diff)+sqr(y_diff));
|
||||
rot_angle= -180/Math.PI*Math.atan2(y_diff,x_diff)+"deg";
|
||||
}}
|
||||
width: {{= hypotenuse+"%" }} ;
|
||||
-webkit-transform: rotate({{= rot_angle }});
|
||||
-moz-transform: rotate({{= rot_angle }});
|
||||
-ms-transform: rotate({{= rot_angle }});
|
||||
-o-transform: rotate({{= rot_angle }});
|
||||
transform: rotate({{= rot_angle }});
|
||||
*/
|
||||
/*{{ } }}*/
|
||||
junk: "";
|
||||
}
|
||||
/* {{ } }} */
|
||||
.non-area {
|
||||
/*
|
||||
top: {{= -it.point_radius.slice(0,it.point_radius.length-2)+"px" }};
|
||||
*/
|
||||
position: relative;
|
||||
}
|
||||
.line-inner {
|
||||
/*
|
||||
{{ w= Number(it.point_radius.slice(0,it.point_radius.length-2))*2 +it.point_radius.slice(it.point_radius.length-2); }}
|
||||
|
||||
height: {{= w }};
|
||||
*/
|
||||
junk: "";
|
||||
}
|
||||
.point-inner {
|
||||
position: absolute;
|
||||
/*
|
||||
left :-{{= it.point_radius }};
|
||||
width:{{= w }};
|
||||
height :{{= w }};
|
||||
*/
|
||||
border-radius: 50% 50%;
|
||||
background-color: #4a29f8;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
|
||||
<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>
|
||||
/*{{ if (it.points.length){ }}*/
|
||||
<div class="scene">
|
||||
<div class="scene-container">
|
||||
/*{{ for (count=0;count<it.points.length;count++){ }}*/
|
||||
<div class="line-part part-{{= count+1 }}">
|
||||
<div class="non-area">
|
||||
/*{{ if (count+1<it.points.length){ }}*/
|
||||
<div class="line-inner"></div>
|
||||
/*{{ }; }}
|
||||
<div class="point-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
/*{{ }; }}*/
|
||||
/*{{ }; }}*/
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,165 @@
|
||||
full=100%
|
||||
half=50%
|
||||
*
|
||||
-webkit-box-sizing border-box
|
||||
-moz-box-sizing border-box
|
||||
box-sizing border-box
|
||||
|
||||
html,body
|
||||
width full
|
||||
height full
|
||||
|
||||
body
|
||||
margin 0
|
||||
padding .1px
|
||||
|
||||
.chart
|
||||
width 50vh
|
||||
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
|
||||
position relative
|
||||
overflow hidden
|
||||
|
||||
.line-inner
|
||||
background-color green
|
||||
position absolute
|
||||
|
||||
-webkit-transform-origin : left center;
|
||||
-moz-transform-origin : left center;
|
||||
-ms-transform-origin : left center;
|
||||
-o-transform-origin : left center;
|
||||
transform-origin : left center;
|
||||
|
||||
.line-part
|
||||
position absolute
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
/* {{p=it.points;}} */
|
||||
/*{{ for(count=0;count<it.points.length;count++){ }}*/
|
||||
.part-/*{{= count+1}}*/
|
||||
/*
|
||||
left: {{=it.points[count][0]}};
|
||||
top: {{=it.points[count][1]}};
|
||||
*/
|
||||
junk ""
|
||||
.line-inner
|
||||
/*
|
||||
{{ if (count+1<it.points.length){ }}
|
||||
{{
|
||||
sqr=function(numb){return Math.pow(numb,2)};
|
||||
p1=p[count];
|
||||
p2=p[count+1];
|
||||
x2=Number(p2[0].slice(0,p2[0].length-1));
|
||||
x1=Number(p1[0].slice(0,p1[0].length-1));
|
||||
y2=100-Number(p2[1].slice(0,p2[1].length-1));
|
||||
y1=100-Number(p1[1].slice(0,p1[1].length-1));
|
||||
x_diff=(x2-x1);
|
||||
y_diff=(y2-y1);
|
||||
hypotenuse=Math.sqrt(sqr(x_diff)+sqr(y_diff));
|
||||
rot_angle= -180/Math.PI*Math.atan2(y_diff,x_diff)+"deg";
|
||||
}}
|
||||
width: {{= hypotenuse+"%" }} ;
|
||||
-webkit-transform: rotate({{= rot_angle }});
|
||||
-moz-transform: rotate({{= rot_angle }});
|
||||
-ms-transform: rotate({{= rot_angle }});
|
||||
-o-transform: rotate({{= rot_angle }});
|
||||
transform: rotate({{= rot_angle }});
|
||||
*/
|
||||
/*{{ } }}*/
|
||||
junk ""
|
||||
|
||||
/* {{ } }} */
|
||||
|
||||
.non-area
|
||||
/*
|
||||
top: {{= -it.point_radius.slice(0,it.point_radius.length-2)+"px" }};
|
||||
*/
|
||||
position relative
|
||||
|
||||
|
||||
.line-inner
|
||||
/*
|
||||
{{ w= Number(it.point_radius.slice(0,it.point_radius.length-2))*2 +it.point_radius.slice(it.point_radius.length-2); }}
|
||||
|
||||
height: {{= w }};
|
||||
*/
|
||||
junk ""
|
||||
|
||||
|
||||
.point-inner
|
||||
position absolute
|
||||
/*
|
||||
left :-{{= it.point_radius }};
|
||||
width:{{= w }};
|
||||
height :{{= w }};
|
||||
*/
|
||||
border-radius 50% 50%
|
||||
background-color #4A29F8
|
||||
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Line Graph</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="../../js/dynamic_load.js" type="text/javascript" charset="utf-8" ></script>
|
||||
<script src="../../js/doT.js" type="text/javascript" charset="utf-8" ></script>
|
||||
<script src="loader_line.js" type="text/javascript" charset="utf-8" ></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,26 @@
|
||||
addEventListener("load", load_em_all);
|
||||
|
||||
points = [
|
||||
["0%", "20%"],
|
||||
["20%", "60%"],
|
||||
["45%", "45%"],
|
||||
["55%", "30%"],
|
||||
["85%", "80%"]
|
||||
];
|
||||
|
||||
function load_em_all()
|
||||
{
|
||||
load_html_css_js("html", "line.html",
|
||||
{
|
||||
"points": points,
|
||||
"point_radius": "10px"
|
||||
});
|
||||
load_html_css_js("css", "line.css",
|
||||
{
|
||||
"points": points,
|
||||
"point_radius": "5px"
|
||||
});
|
||||
}
|
||||
|
||||
// load_em_all();
|
||||
// console.log("Loaded stuffs");
|
||||
@@ -0,0 +1,91 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.pie-chart {
|
||||
position: absolute;
|
||||
width: 50vh;
|
||||
height: 50vh;
|
||||
left: 25vh;
|
||||
top: 25vh;
|
||||
}
|
||||
.wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.pie-part {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
.pie-part .part-inner {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #008000;
|
||||
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%;
|
||||
}
|
||||
clipper,
|
||||
.part-4 {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
clipper-inner,
|
||||
.part-4 .part-inner {
|
||||
left: 0;
|
||||
top: -100%;
|
||||
}
|
||||
.part-1 .part-inner {
|
||||
background-color: #c832ff;
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
z-index: 1;
|
||||
}
|
||||
.part-2 .part-inner {
|
||||
background-color: #9664ff;
|
||||
-webkit-transform: rotate(120deg);
|
||||
-moz-transform: rotate(120deg);
|
||||
-ms-transform: rotate(120deg);
|
||||
-o-transform: rotate(120deg);
|
||||
transform: rotate(120deg);
|
||||
z-index: 2;
|
||||
}
|
||||
.part-3 .part-inner {
|
||||
background-color: #6496ff;
|
||||
-webkit-transform: rotate(150deg);
|
||||
-moz-transform: rotate(150deg);
|
||||
-ms-transform: rotate(150deg);
|
||||
-o-transform: rotate(150deg);
|
||||
transform: rotate(150deg);
|
||||
z-index: 3;
|
||||
}
|
||||
.part-4 .part-inner {
|
||||
background-color: #32c8ff;
|
||||
-webkit-transform: rotate(220deg);
|
||||
-moz-transform: rotate(220deg);
|
||||
-ms-transform: rotate(220deg);
|
||||
-o-transform: rotate(220deg);
|
||||
transform: rotate(220deg);
|
||||
z-index: 4;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<!-- generate html and css according to degrees list -->
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS PIE Chart</title>
|
||||
<link rel="stylesheet" href="./pie.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="pie-chart">
|
||||
<div class="wrapper">
|
||||
<div class="pie-part part-1">
|
||||
<div class="part-inner"></div>
|
||||
</div>
|
||||
<div class="pie-part part-2">
|
||||
<div class="part-inner"></div>
|
||||
</div>
|
||||
<div class="pie-part part-3">
|
||||
<div class="part-inner"></div>
|
||||
</div>
|
||||
<div class="pie-part part-4">
|
||||
<div class="part-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,87 @@
|
||||
full=100%
|
||||
half=50%
|
||||
html,body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 0;
|
||||
text-align center
|
||||
}
|
||||
|
||||
.pie-chart{
|
||||
position absolute
|
||||
width 50vh
|
||||
height 50vh
|
||||
left 25vh
|
||||
top 25vh
|
||||
}
|
||||
|
||||
.wrapper
|
||||
position relative
|
||||
width full
|
||||
height full
|
||||
|
||||
.pie-part
|
||||
width full
|
||||
height half
|
||||
position absolute
|
||||
|
||||
.pie-part
|
||||
.part-inner
|
||||
position: absolute;
|
||||
width: full
|
||||
height: full
|
||||
left: 0
|
||||
top: 0
|
||||
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%;
|
||||
|
||||
clipper{
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
clipper-inner
|
||||
left 0
|
||||
top -100%
|
||||
|
||||
transform()
|
||||
-webkit-transform arguments
|
||||
-moz-transform arguments
|
||||
-ms-transform arguments
|
||||
-o-transform arguments
|
||||
transform arguments
|
||||
|
||||
angles=(0 120 150 220)
|
||||
angles_sum=null
|
||||
colors= rgb(200, 50, 255) rgb(150, 100, 255) rgb(100, 150, 255) rgb(50, 200, 255)
|
||||
|
||||
for count in 1..4
|
||||
col=colors[(count - 1)]
|
||||
angle=angles[(count - 1)]
|
||||
if angles_sum is not defined
|
||||
angles_sum=angle
|
||||
else
|
||||
angles_sum+=angle
|
||||
.part-{count}
|
||||
.part-inner
|
||||
background-color col
|
||||
transform rotate(angle deg)
|
||||
z-index count
|
||||
|
||||
if angles_sum>180
|
||||
.part-{count}
|
||||
@extend clipper
|
||||
.part-inner
|
||||
@extend clipper-inner
|
||||
Reference in New Issue
Block a user