g2d-chart
Version:
g2-chart - Charts for g2
58 lines (53 loc) • 2.22 kB
HTML
<html>
<head>
<meta charset='utf-8'>
<title>g2 - interactive chart</title>
<style> canvas { border: 1px solid #000; } </style>
</head>
<body>
<h1>g2 - interactive chart</h1>
<canvas id="c" width="400" height="300"></canvas><br>
<input id="range" type="range" style="min-width:375px;vertical-align:middle;margin:0;padding:0" min="-90" max="360" value="-90" step="1" />
<output id="output" for="phi" style="text-align:right;">-90°</output>
<script src="https://gitcdn.xyz/repo/goessner/g2/master/g2.min.js"></script>
<script src="https://gitcdn.xyz/repo/goessner/g2-chart/master/g2.chart.min.js"></script>
<script>
function setPhi(e) {
if (dirty = (range.value !== output.value)) {
output.value = range.value + "°";
phi = range.value/180*Math.PI;
cursor = ch.trimPixOf({x:phi,y:Math.sin(phi)});
}
return true;
};
function render() {
if (dirty) {
g = g2().clr().cartesian()
.chart(ch)
.cir(cursor.x,cursor.y,3,{ls:"transparent",fs:"maroon"})
.lin(cursor.x,ch.y,cursor.x,ch.y+ch.h,{ls:"maroon"})
.exe(ctx);
dirty = false;
}
requestAnimationFrame(render);
}
var ctx = document.getElementById("c").getContext("2d"),
range = document.getElementById("range"),
output = document.getElementById("output"),
xA0 = 100, yA0 = 100, a = 80, b = 200, e = 30, xA, yA, xB, yB,
dirty = true,
phi = -Math.PI/2,
ch = g2.Chart.create({x:100,y:100,b:200,h:150,
xmin:-Math.PI/2,xmax:2*Math.PI,
ymin:-0.75,ymax:0.75,
funcs:[{fn:Math.sin,dx:Math.PI/30,fill:true}],
title:{text:"sine"},
xaxis:{title:{text:"phi"}},
yaxis:{title:{text:"sin(phi)"},origin:true}}),
cursor = ch.trimPixOf({x:phi,y:Math.sin(phi)});
range.addEventListener("input",setPhi,false);
render();
</script>
</body>
</html>