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");
|
||||
Reference in New Issue
Block a user