I am looking to create smoothed lines for my chart. I used teechart.js to make a chart, but it is not working well. Here is an image comparison: the left image is mine and I would like to achieve the smooth line on the right. See example here
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>Chart</title>
<script src="./js/three.min.js" type="text/javascript"></script>
<script src="./js/Detector.js" type="text/javascript"></script>
<script src="./js/TrackballControls.js" type="text/javascript"></script>
<script src="./js/helvetiker_regular.typeface.js"></script>
<script src="./js/teechart.js" type="text/javascript"></script>
<script src="./js/teechart-3d.js" type="text/javascript"></script>
<script type="text/javascript">
"use strict";
var three1, Chart1;
function draw() {
three1 = new Tee.Three("canvas1");
three1.setShowShadows(true);
Chart1 = new Tee.Chart(three1);
Chart1.addSeries(new Tee.Line([80,70,60,50,40,30,40,50,60,70,80,90] , 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split(',')));
Chart1.addSeries(new Tee.Line([10,20,30,40,50,60,70,60,50,40,30,20]));
Chart1.title.text="";
Chart1.footer.text="";
Chart1.legend.visible = false;
Chart1.walls.back.size=0.2;
Chart1.walls.left.size=10;
Chart1.walls.bottom.size=10;
Chart1.walls.back.format.transparency=0.2;
Chart1.bounds.x = -100;
Chart1.bounds.y = 50;
Chart1.bounds.width = 900;
Chart1.bounds.height = 400;
Chart1.axes.left.setMinMax(0, 120);
if (three1.isEnabled()) {
Chart1.draw();
animate1();
} else {
// Show message (WebGL not available) :
Detector.addGetWebGLMessage();
// Disable WebGL and use HTML5 2D Canvas:
three1.setEnabled(false, Chart1);
}
// Loop
function animate1() {
three1.update();
requestAnimationFrame(animate1);
}
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas1" style="width: 700px; height: 500px; display: inline; background: white;" width="800" height="500"></canvas>
</body>
</html>
I look forward to your helpful responses.