Manipuler JSON avec CANVAS via WEBSOCKET

Signaler
-
Bonjour,


Je débute en HTML 5, et actuellement je travaille sur une application en HTML5 pour afficher un diagramme ( diagramme de l’œil ) sur ma page web.( voir image du canvas ci-dessous)
Les points du diagramme (côté serveur en langage C = carte électronique) seront remontés par un programme, et convertis en format Json avant d'être envoyer via les websockets.
Donc mon application ( coté client ) doit pouvoir récupérer ces points et les affichés autour du "trapéze-rectagle" du milieu.
Le fichier JSON aura une forme simple :

"EYE DIAGRAM" : [
{ "X" : " $$$", // coordonnées X du point a afficher
"Y" : " $$$", // coordonnées Y du point a afficher
"BER": " $$$",}, // précise la couleur du point a afficher en fonction d'un code couleur
{ "X" : " $$$",
"Y" : " $$$",
"BER": " $$$",},
....
]
Bien sur une conversion doit se faire pour convertir ces valeurs reçu en pixels.


1/ J'aimerai savoir comment on manipule un fichier JSON en local pour faire test et m'exercer avant de recevoir le reel fichier?
2/ comment je pourrai manipuler ce genre de fichier JSON pour positionner mes points sur mon graphe?
3/ comment je pourrai gérer l'interopérabilité WebSocket-JSON-CANVAS , recevoir le fichier JSON avec les websockets et le manipuler avec Canvas?

toutes réponses est la bienvenue.
Merci d'avance.

<!DOCTYPE html>
<html>


<canvas id="myCanvas" width="600" height="450" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#5A5E6B";
ctx.fillRect(50,50,500,350);
ctx.moveTo(50,225);
ctx.lineTo(550,225);

ctx.moveTo(300,50);
ctx.lineTo(300,400);


ctx.moveTo(300,50);
ctx.lineTo(300,400);
ctx.stroke();


    ctx.font = "10pt Calibri,Geneva,Arial";
 
    ctx.fillStyle = "rgb(51,255, 255)";
    ctx.strokeText("0,5 UI", 550,225 );
    ctx.strokeText("-0,5 UI", 15, 225);
    ctx.strokeText("0 ", 300, 225);

    ctx.strokeText("EYE MAGNITUDE", 270, 30);
    ctx.strokeText("mV-", 300, 410);
    ctx.strokeText("mV+", 300, 50);

    ctx.strokeStyle = "rgb(0,0,1000)";
    ctx.fillRect (240,185, 120, 80);
  
    ctx.moveTo(200,225);
    ctx.lineTo(240,185);

    ctx.moveTo(200,225);
    ctx.lineTo(240,265);



    ctx.moveTo(240,185);
    ctx.lineTo(360,185);

    ctx.moveTo(240,265);
    ctx.lineTo(360,265);




    ctx.moveTo(360,185);
    ctx.lineTo(400,225);

    ctx.moveTo(360,265);
    ctx.lineTo(400,225);
    ctx.stroke();
    ctx.fill();

    ctx.fillStyle = "rgb(51,255, 255)";   
    ctx.moveTo(200,225);
    ctx.lineTo(240,185);
    ctx.lineTo(240,265);

     ctx.moveTo(360,185);
     ctx.lineTo(400,225);
     ctx.lineTo(360,265);
    
    ctx.fill();


</script>


</html>