1) As shown in the attached image, the app have to support multiple sets of CSV in the same image.
2) we have to support 3 types of curve. normal curve, cyclic curve and edged curve.
3) To support the cyclic curve the following changes have to to be made to the CSV.
For any CSV file, the first value represents whether the curve is cyclic of non-cyclic. For example, lets use a curve "90,53,74,119,167,95,224,153,249,99"
For cyclic curve it will be: "1,90,53,74,119,167,95,224,153,249,99"
For non-cyclic curve (normal curve) it will be: "0,90,53,74,119,167,95,224,153,249,99"
4) To support the edged curve, the following changes have to to be made to the CSV.
for every pair of x,y coordinate, there will be one more value which represents if that coordinate is an edge or curvy one. Lets take the above non-cyclic curve example of "0,90,53,74,119,167,95,224,153,249,99". This example has five coordinates. Now I am going to add one more value after each XY coordinate pair.
"0,90,53,0,74,119,0,167,95,1,224,153,0,249,99,0" Here my intention is to make the 3rd coordinate as an edge. And of course this in non cyclic since the first value is 0. If it was 1, then it will become a cyclic one.
5) For the final app, the CSV for multiple sets have to be in one single string. But since I dont much about split/concatenate/parse in js, I am leaving it to you.
For example, say we have 3 sets as follows.
What is the best suggested way to concatenate it from the server so that JS can easily parse it? If you decide it to be a ";" , then the string from the server looks like following.