What started out as a fun project to create a graphing utility quickly turned into a serious endeavor...
My goal was simple - to create a line graph.
Despite my efforts, attempting to use a for-loop in my TypeScript project resulted in no output.
In the source code below, you'll notice console logs placed strategically to verify certain actions. In my TypeScript project, they all execute perfectly and in the intended sequence.
Since Stack Overflow doesn't provide support for TypeScript, here is a link to a CodePen containing the complete source code along with the TypeScript compiler: https://codepen.io/SkylerSpark/pen/zYvpWNZ
The section causing me trouble is as follows:
g.px & g.py represent my coordinates, extracted from this sample array (depicting pizza sales data):
const pizzas = {
x: [0, 5, 10, 15, 20, 25, 30, 35, 40],
y: [0, 1, 2, 3, 4],
px: [0, 5.2, 7, 20.9, 34.3, 39.5],
py: [0, 1.1, 1.3, 2.7, 3.5, 3.9]
};
// Drawing Numbers
if (g.px.length == g.py.length) {
console.log("confirm");
for (var i = 1; i < g.px.length + 1; i++) {
if (i == 1) {
console.log("start");
ctx.beginPath();
ctx.moveTo(g.px[i], g.py[i]);
} else if (i < g.px.length) {
console.log("continue");
ctx.lineTo(g.px[i], g.py[i]);
} else {
console.log("draw");
ctx.stroke();
}
console.log(i);
}
}
Take a look at the image below illustrating that everything runs smoothly: https://i.stack.imgur.com/WkA3M.png