mirror of
https://github.com/bendtherules/opencharts.git
synced 2026-08-18 22:02:37 +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">
|
||||
/*{{ 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>
|
||||
@@ -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">
|
||||
<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>
|
||||
<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>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user