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,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;
|
||||||
|
}
|
||||||
@@ -18,10 +18,15 @@
|
|||||||
<div class="scene-container">
|
<div class="scene-container">
|
||||||
/*{{ for (count=0;count<it.points.length;count++){ }}*/
|
/*{{ for (count=0;count<it.points.length;count++){ }}*/
|
||||||
<div class="line-part part-{{= count+1 }}">
|
<div class="line-part part-{{= count+1 }}">
|
||||||
<div class="line-inner"></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>
|
</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,131 @@
|
|||||||
|
// doT.js
|
||||||
|
// 2011, Laura Doktorova, https://github.com/olado/doT
|
||||||
|
//
|
||||||
|
// doT.js is an open source component of http://bebedo.com
|
||||||
|
// Licensed under the MIT license.
|
||||||
|
//
|
||||||
|
(function() {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var doT = {
|
||||||
|
version: '0.2.0',
|
||||||
|
templateSettings: {
|
||||||
|
evaluate: /\{\{([\s\S]+?)\}\}/g,
|
||||||
|
interpolate: /\{\{=([\s\S]+?)\}\}/g,
|
||||||
|
encode: /\{\{!([\s\S]+?)\}\}/g,
|
||||||
|
use: /\{\{#([\s\S]+?)\}\}/g,
|
||||||
|
define: /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
|
||||||
|
conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
|
||||||
|
iterate: /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,
|
||||||
|
varname: 'it',
|
||||||
|
strip: true,
|
||||||
|
append: true,
|
||||||
|
selfcontained: false
|
||||||
|
},
|
||||||
|
template: undefined, //fn, compile template
|
||||||
|
compile: undefined //fn, for express
|
||||||
|
};
|
||||||
|
|
||||||
|
var global = (function(){ return this || (0,eval)('this'); }());
|
||||||
|
|
||||||
|
if (typeof module !== 'undefined' && module.exports) {
|
||||||
|
module.exports = doT;
|
||||||
|
} else if (typeof define === 'function' && define.amd) {
|
||||||
|
define(function(){return doT;});
|
||||||
|
} else {
|
||||||
|
global.doT = doT;
|
||||||
|
}
|
||||||
|
|
||||||
|
function encodeHTMLSource() {
|
||||||
|
var encodeHTMLRules = { "&": "&", "<": "<", ">": ">", '"': '"', "'": ''', "/": '/' },
|
||||||
|
matchHTML = /&(?!#?\w+;)|<|>|"|'|\//g;
|
||||||
|
return function(code) {
|
||||||
|
return code ? code.toString().replace(matchHTML, function(m) {return encodeHTMLRules[m] || m;}) : code;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
global.encodeHTML = encodeHTMLSource();
|
||||||
|
|
||||||
|
var startend = {
|
||||||
|
append: { start: "'+(", end: ")+'", startencode: "'+encodeHTML(" },
|
||||||
|
split: { start: "';out+=(", end: ");out+='", startencode: "';out+=encodeHTML("}
|
||||||
|
}, skip = /$^/;
|
||||||
|
|
||||||
|
function resolveDefs(c, block, def) {
|
||||||
|
return ((typeof block === 'string') ? block : block.toString())
|
||||||
|
.replace(c.define || skip, function(m, code, assign, value) {
|
||||||
|
if (code.indexOf('def.') === 0) {
|
||||||
|
code = code.substring(4);
|
||||||
|
}
|
||||||
|
if (!(code in def)) {
|
||||||
|
if (assign === ':') {
|
||||||
|
def[code]= value;
|
||||||
|
} else {
|
||||||
|
eval("def['"+code+"']=" + value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
})
|
||||||
|
.replace(c.use || skip, function(m, code) {
|
||||||
|
var v = eval(code);
|
||||||
|
return v ? resolveDefs(c, v, def) : v;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function unescape(code) {
|
||||||
|
return code.replace(/\\('|\\)/g, "$1").replace(/[\r\t\n]/g, ' ');
|
||||||
|
}
|
||||||
|
|
||||||
|
doT.template = function(tmpl, c, def) {
|
||||||
|
c = c || doT.templateSettings;
|
||||||
|
var cse = c.append ? startend.append : startend.split, str, needhtmlencode, sid=0, indv;
|
||||||
|
|
||||||
|
if (c.use || c.define) {
|
||||||
|
var olddef = global.def; global.def = def || {}; // workaround minifiers
|
||||||
|
str = resolveDefs(c, tmpl, global.def);
|
||||||
|
global.def = olddef;
|
||||||
|
} else str = tmpl;
|
||||||
|
|
||||||
|
str = ("var out='" + (c.strip ? str.replace(/(^|\r|\n)\t* +| +\t*(\r|\n|$)/g,' ')
|
||||||
|
.replace(/\r|\n|\t|\/\*[\s\S]*?\*\//g,''): str)
|
||||||
|
.replace(/'|\\/g, '\\$&')
|
||||||
|
.replace(c.interpolate || skip, function(m, code) {
|
||||||
|
return cse.start + unescape(code) + cse.end;
|
||||||
|
})
|
||||||
|
.replace(c.encode || skip, function(m, code) {
|
||||||
|
needhtmlencode = true;
|
||||||
|
return cse.startencode + unescape(code) + cse.end;
|
||||||
|
})
|
||||||
|
.replace(c.conditional || skip, function(m, elsecase, code) {
|
||||||
|
return elsecase ?
|
||||||
|
(code ? "';}else if(" + unescape(code) + "){out+='" : "';}else{out+='") :
|
||||||
|
(code ? "';if(" + unescape(code) + "){out+='" : "';}out+='");
|
||||||
|
})
|
||||||
|
.replace(c.iterate || skip, function(m, iterate, vname, iname) {
|
||||||
|
if (!iterate) return "';} } out+='";
|
||||||
|
sid+=1; indv=iname || "i"+sid; iterate=unescape(iterate);
|
||||||
|
return "';var arr"+sid+"="+iterate+";if(arr"+sid+"){var "+vname+","+indv+"=-1,l"+sid+"=arr"+sid+".length-1;while("+indv+"<l"+sid+"){"
|
||||||
|
+vname+"=arr"+sid+"["+indv+"+=1];out+='";
|
||||||
|
})
|
||||||
|
.replace(c.evaluate || skip, function(m, code) {
|
||||||
|
return "';" + unescape(code) + "out+='";
|
||||||
|
})
|
||||||
|
+ "';return out;")
|
||||||
|
.replace(/\n/g, '\\n').replace(/\t/g, '\\t').replace(/\r/g, '\\r')
|
||||||
|
.replace(/(\s|;|}|^|{)out\+='';/g, '$1').replace(/\+''/g, '')
|
||||||
|
.replace(/(\s|;|}|^|{)out\+=''\+/g,'$1out+=');
|
||||||
|
|
||||||
|
if (needhtmlencode && c.selfcontained) {
|
||||||
|
str = "var encodeHTML=(" + encodeHTMLSource.toString() + "());" + str;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
return new Function(c.varname, str);
|
||||||
|
} catch (e) {
|
||||||
|
if (typeof console !== 'undefined') console.log("Could not create a template function: " + str);
|
||||||
|
throw e;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
doT.compile = function(tmpl, def) {
|
||||||
|
return doT.template(tmpl, null, def);
|
||||||
|
};
|
||||||
|
}());
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
Needs proper unit detection
|
|
||||||
% coverter -> Makes x% to (100-x)%
|
|
||||||
think about how to know if document is loaded or defer it to onloaded
|
|
||||||
@@ -1,96 +0,0 @@
|
|||||||
* {
|
|
||||||
-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;
|
|
||||||
}
|
|
||||||
.line-part {
|
|
||||||
background-color: #008000;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
/*{{ console.log(it.points.length); }}*/
|
|
||||||
/*{{ for(count=0;count<it.points.length;count++){ }}*/
|
|
||||||
.part-/*{{= count+1}}*/ {
|
|
||||||
/* top: {{=it.points[count][0]}};
|
|
||||||
left: {{=it.points[count][1]}}; */
|
|
||||||
junk: "";
|
|
||||||
}
|
|
||||||
/*{{ } }}*/
|
|
||||||
.line-inner {
|
|
||||||
position: absolute;
|
|
||||||
/*left :-{{=it.point_radius}};*/
|
|
||||||
/*top :-{{=it.point_radius}};*/
|
|
||||||
/*width :{{= Number(it.point_radius.slice(0,it.point_radius.length-2))*2 +it.point_radius.slice(it.point_radius.length-2) }};*/
|
|
||||||
/*height :{{= Number(it.point_radius.slice(0,it.point_radius.length-2))*2 +it.point_radius.slice(it.point_radius.length-2) }};*/
|
|
||||||
border-radius: 50% 50%;
|
|
||||||
background-color: #008000;
|
|
||||||
}
|
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
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
|
|
||||||
|
|
||||||
.line-part
|
|
||||||
background-color green
|
|
||||||
position absolute
|
|
||||||
/*{{ console.log(it.points.length); }}*/
|
|
||||||
/*{{ for(count=0;count<it.points.length;count++){ }}*/
|
|
||||||
.part-/*{{= count+1}}*/
|
|
||||||
/* top: {{=it.points[count][0]}};
|
|
||||||
left: {{=it.points[count][1]}}; */
|
|
||||||
junk ""
|
|
||||||
/*{{ } }}*/
|
|
||||||
|
|
||||||
.line-inner
|
|
||||||
position absolute
|
|
||||||
/*left :-{{=it.point_radius}};*/
|
|
||||||
/*top :-{{=it.point_radius}};*/
|
|
||||||
/*width :{{= Number(it.point_radius.slice(0,it.point_radius.length-2))*2 +it.point_radius.slice(it.point_radius.length-2) }};*/
|
|
||||||
/*height :{{= Number(it.point_radius.slice(0,it.point_radius.length-2))*2 +it.point_radius.slice(it.point_radius.length-2) }};*/
|
|
||||||
border-radius 50% 50%
|
|
||||||
background-color green
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
// document.addEventListener("load", load_em_all);
|
|
||||||
|
|
||||||
function load_em_all()
|
|
||||||
{
|
|
||||||
load_html_css_js("html", "./line/line.html",
|
|
||||||
{
|
|
||||||
"points": [
|
|
||||||
["10%", "10%"],
|
|
||||||
["30%", "30%"],
|
|
||||||
["60%", "60%"],
|
|
||||||
["80%", "80%"],
|
|
||||||
["50%", "50%"]
|
|
||||||
],
|
|
||||||
"point_radius": "10px"
|
|
||||||
});
|
|
||||||
load_html_css_js("css", "./line/line.css",
|
|
||||||
{
|
|
||||||
"points": [
|
|
||||||
["10%", "10%"],
|
|
||||||
["30%", "30%"],
|
|
||||||
["60%", "60%"],
|
|
||||||
["80%", "80%"],
|
|
||||||
["50%", "50%"]
|
|
||||||
],
|
|
||||||
"point_radius": "10px"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
load_em_all();
|
|
||||||
console.log("Loaded stuffs");
|
|
||||||
+3
-3
@@ -4,11 +4,11 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Load any graph</title>
|
<title>Load any graph</title>
|
||||||
|
|
||||||
<script src="js/dynamic_load.js" type="text/javascript" charset="utf-8" ></script>
|
|
||||||
<script src="js/doT.min.js" type="text/javascript" charset="utf-8" ></script>
|
|
||||||
<script src="/line/loader_line.js" type="text/javascript" charset="utf-8" ></script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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="/line/loader_line.js" type="text/javascript" charset="utf-8" ></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user