www.webdeveloper.com
Results 1 to 5 of 5

Thread: Joining scatter dots with lines of different colors

  1. #1
    Join Date
    Apr 2014
    Posts
    1

    Joining scatter dots with lines of different colors

    Consider this jsfiddle link http://jsfiddle.net/h2yJn/1904/. Here I would like to join the scatter dots with lines of different colors. That is if lines have varying x value then the line should have one color and if x value remains constant then the line joining scatter dots must have different color as shown below. How to do this ?

  2. #2
    Join Date
    Sep 2007
    Posts
    317
    Code:
     
    <html>
    <head>
    </head>
    <body style="margin:0; padding:0;" onclick="show_coords(event)">
    <div id="pano" style="position:absolute; letf:0px; top:0px;"></div>
    
    <script type="text/javascript">
    
    var tablo ="<table style='position:absolute; left:0; top:0; z-index:1;'>";
    
    for(var i=0; i<=10; i++) {
    tablo +="<tr>";
    for(var n=0; n<=10; n++){
    if(i==0){ tablo +="<td style='width:40px; height:20px;text-align:right;'>"+n+"</td>"; }
    else if(i!=0 && n==0){ tablo +="<td style='width:20px; height:40px;vertical-align:bottom'>"+i+"</td>"; }  // http://www.w3schools.com/css/tryit.asp?filename=trycss_table_vertical-align
    else { tablo +="<td><div  style='width:40px; height:40px;border:1px solid red;'>&nbsp;</div></td>";}
    }
    tablo +="</tr>";
    }
    tablo +="</table>";
    var el = document.getElementById('pano');
    el.innerHTML = tablo;
    
    
    </script>
    
    
    <div id="netice" style="position:absolute; left:500px; top:20px;"></div>
    
    <script type="text/javascript">
    
    var dizi = [ [2,3], [3,4],[5,5],[7,6],[9,9]];
    var L,T;
    
    for(var t=0; t<dizi.length; t++) {
    x= (dizi[t][0]*45 +20);
    y = (dizi[t][1] *45 +20 );
    
    if(dizi[t][0]== dizi[t][1]) { el.innerHTML +=  "<div style='position:absolute; left:"+x+"px; top:"+y+"px;border:1px solid #a1a1a1; background:blue;width:20px;height:15x;border-radius:15px;z-index:2;'>&nbsp;</div>";}
    
    if(dizi[t][0]!= dizi[t][1]) {el.innerHTML +=  "<div style='position:absolute; left:"+x+"px; top:"+y+"px;border:1px solid #a1a1a1; background:green;width:20px;height:15px;border-radius:15px;z-index:2;'>&nbsp;</div>";}
    
    }
    
    // http://www.w3schools.com/jsref/event_clientx.asp
    // <body onclick="show_coords(event)" >
    function show_coords(event)
      {
      var x=event.clientX
      var y=event.clientY
      alert("X coords: " + x + ", Y coords: " + y)
      }
    
    // <p onmousedown="show_coords(event)">Click this paragraph, and an alert box will alert the x and y coordinates of the mouse pointer.</p>
    
    </script>
    </head>
    
    <body>
    
    </script>
    
    
    </body>
    </html>

  3. #3
    Join Date
    Sep 2007
    Posts
    317
    If I understand
    body {background-image:url("tablo.png");

    This code is working firefox4.0b9
    Code:
      
    <!DOCTYPE html>
    <html>
    <style type="text/css">
    body {margin:0px; padding:0px;background-image:url("tablo.png"); background-repeat:no-repeat;} 
    /* http://www.w3schools.com/cssref/pr_background-image.asp  */
    </style>
    <body>
    
    <canvas id="myCanvas" width="480" height="480" style="margin:0px; padding:0px;background-color:transparent;border:1px solid red;">
    Your browser does not support the HTML5 canvas tag.</canvas>
    
    <script type="text/javascript">
    
    var dizi = [ [2,2], [3,3],[3,4],[4,5] ];  // x  ve y değerlerini bunlardan faydalanarak bulacağız
    
    var A=[], D=[]; // A çember rengi,  D çizgi rengi
    for(var n=0; n< (dizi.length -1); n++){
    if(dizi[n][0]== dizi[n+1][0] ){ A.push("green","green"); D.push("pink"); }
    if(dizi[n][0]!= dizi[n+1][0] ){ A.push("blue"); D.push("purple"); }
    }
    
    
    // cemberleri çizelim
    var nokta=[];
    for(var t=0; t<dizi.length; t++) {
      x= (dizi[t][0]*45 +20);
      y = (dizi[t][1] *45 +20 );
      nokta.push( x,y);
    
      if(x== y) { 
      var c4=document.getElementById("myCanvas");
      var ctx=c4.getContext("2d");
      ctx.beginPath();
      ctx.arc(x,y,10,0,2*Math.PI);
      ctx.fillStyle=A[t];
      ctx.fill();
      ctx.lineWidth="3";
      ctx.strokeStyle=A[t];
      ctx.stroke();
      }
    
      if(x!= y) {
    
      var c4=document.getElementById("myCanvas");
      var ctx=c4.getContext("2d");
      ctx.beginPath();
      ctx.arc(x,y,10,0,2*Math.PI);
      ctx.fillStyle=A[t];
      ctx.fill();
      ctx.lineWidth="3";
      ctx.strokeStyle=A[t];
      ctx.stroke();
      }
    }
    
    // çizgileri çizelim
    
    // alert(nokta);// 110,110,155,155,155,200,200,245;
    var say=0;
    for(var n =0; n< (dizi.length-1); n++) {
    var c0=document.getElementById("myCanvas");
    var ctx=c0.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(nokta[say],nokta[say+1]);
    ctx.lineTo(nokta[say+2],nokta[say+3]);
    ctx.lineWidth="4";
    ctx.strokeStyle=D[n];  
    ctx.stroke();
    say = say+2;
    }
    
    /*
    arc(x,y,r,start,stop)
    http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_path2
    http://www.w3schools.com/html/html5_canvas.asp
    */
    </script>
    
    </body>
    </html>
    without for loop
    Code:
      
    <!DOCTYPE html>
    <html>
    <style type="text/css">
    body {margin:0px; padding:0px;background-image:url("tablo.png"); background-repeat:no-repeat;}
    </style>
    <body>
    
    <canvas id="myCanvas" width="480" height="480" style="margin:0px; padding:0px;background-color:transparent;border:1px solid red;">
    Your browser does not support the HTML5 canvas tag.</canvas>
    
    <script type="text/javascript">
    
    var c0=document.getElementById("myCanvas");
    var ctx=c0.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(110,110);
    ctx.lineTo(155,155);
    ctx.lineWidth="4";
    ctx.strokeStyle="pink";  
    ctx.stroke();
    var c1=document.getElementById("myCanvas");
    var ctx=c1.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(155,155);
    ctx.lineTo(155,200);
    ctx.lineWidth="4";
    ctx.strokeStyle="yellow";
    ctx.stroke();
    var c2=document.getElementById("myCanvas");
    var ctx=c2.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(155,200);
    ctx.lineTo(200,245);
    ctx.lineWidth="4";
    ctx.strokeStyle="pink";
    ctx.stroke();
    
    var c3=document.getElementById("myCanvas");
    var ctx=c3.getContext("2d");
    
    ctx.beginPath();
    ctx.arc(100,110,10,0,2*Math.PI);
    ctx.fillStyle="#FF0000";
    ctx.fill();
    ctx.lineWidth="4";
    ctx.strokeStyle="#FF0000";
    ctx.stroke();
    
    var c4=document.getElementById("myCanvas");
    var ctx=c4.getContext("2d");
    ctx.beginPath();
    ctx.arc(155,155,10,0,2*Math.PI);
    ctx.fillStyle="blue";
    ctx.fill();
    ctx.lineWidth="4";
    ctx.strokeStyle="blue";
    ctx.stroke();
    
    var c4=document.getElementById("myCanvas");
    var ctx=c4.getContext("2d");
    ctx.beginPath();
    ctx.arc(155,200,10,0,2*Math.PI);
    ctx.fillStyle="blue";
    ctx.fill();
    ctx.strokeStyle="blue";
    ctx.stroke();
    var c4=document.getElementById("myCanvas");
    var ctx=c4.getContext("2d");
    ctx.beginPath();
    ctx.arc(200,245,10,0,2*Math.PI);
    ctx.fillStyle="red";
    ctx.fill();
    ctx.strokeStyle="red";
    ctx.stroke();
    /*
    arc(x,y,r,start,stop)
    http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_path2
    */
    
    </script>
    </body>
    </html>

  4. #4
    Join Date
    Sep 2007
    Posts
    317
    I changed this
    Code:
      
    var A=[], D=[]; // A çember rengi,  D çizgi rengi
    for(var n=0; n< (dizi.length -1); n++){
    if(dizi[n][0]== dizi[n+1][0] ){ A.push("green","green"); D.push("pink"); }
    if(dizi[n][0]!= dizi[n+1][0] ){ A.push("blue"); D.push("purple"); }
    }
    to this
    Code:
      
    //var dizi = [ [2,2], [3,3],[3,4],[4,5],[4,7],[6,2] ];
    var dizi = [ [2,2], [3,3],[3,4],[4,5] ];
    var S=[],A=[], D=[]; // S aynı olanların sırası, A çember rengi,  D çizgi rengi
    for(var n=0; n< (dizi.length -1); n++){
    if(dizi[n][0]== dizi[n+1][0] ){ S.push(n, n+1); A[n]="green";A[n+1]="green"; D.push("pink"); }
    if(dizi[n][0]!= dizi[n+1][0] ){  D.push("purple"); }
    }
    
    // alert(A);
    // alert(S);
    for(var v =0; v<dizi.length; v++) {
    if(A[v]==undefined) {A[v]="blue";}
    }
    // alert(A);

  5. #5
    Join Date
    Sep 2007
    Posts
    317
    using Jquery
    Code:
     
    <html>
        <head>
    <style>
    body {
        background: white;
    }
    
    canvas {
        background: #fff;
        margin: 20px;
    }
    </style>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>
    </head>
        <body>
    
    
    <script type="text/javascript">
    // x değeri önceki ile aynı ise nokta yeşil renk oluyor. yeşil noktalar arasına pembe çizgi çiziliyor. Noktaların rengi farklı ise mor olur
    //grid width and height
    var bw = 400;
    var bh = 400;
    //padding around grid
    var p = 10;
    //size of canvas
    var cw = bw + (p*2) + 1;
    var ch = bh + (p*2) + 1;
    //var data = [[2,2],[3,3],[3,4],[4,5]]; 
    var data = [[2,2],[3,3],[3,4],[4,5],[6,7],[6,4]];
    
    var A=[], D=[]; // S aynı olanların sırası, A çember rengi,  D çizgi rengi
    for(var n=0; n< (data.length -1); n++){
    if(data[n][0]== data[n+1][0] ){ A[n]="green";A[n+1]="green"; D.push("pink"); }
    if(data[n][0]!= data[n+1][0] ){  D.push("purple"); }
    }
    
    // alert(A);
    
    for(var v =0; v<data.length; v++) {
    if(A[v]==undefined) {A[v]="blue";}
    }
    
    var nokta=[];
    for(var t=0; t<data.length; t++) {
      x= (data[t][0]*40 +10);
      y = (data[t][1] *40 +10 );
      nokta.push( x,y);
    }
    
    
    var colors = ["blue","green"];
    
    var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body');
    
    var context = canvas.get(0).getContext("2d");
    
    function drawBoard(){
    // ilk for döngüsü yukarıdan aşağıya çizgiler çiziyor her çizginin sol üst tarafına sayı yazıyor.
        for (var x = 0; x <= bw; x += 40) {
            context.moveTo(0.5 + x + p, p);  // çizginin başladığı yer
            context.lineTo(0.5 + x + p, bh + p);  // çizginin bittiği yer
            context.fillText(x/40,x,8);  // rakamları yazan satır burası
        }
    
    // ikinci for döngüsü soldan sağa çizgiler çiziyor. her çizginin sol tarafın sayı yazıyor.
        for (var x = 0; x <= bh; x += 40) {
            context.moveTo(p, 0.5 + x + p);  // çizginin başladığı yer
            context.lineTo(bw + p, 0.5 + x + p);  // çizginin bittiği yer
            context.fillText(x/40,0,x + 7); // rakamları yazan satır burası
        }
    
        context.strokeStyle = "black"; // çizgi rengi
        context.stroke();
    }
    
    
    
    function drawData(_data) {
    var i =0;
        _data.forEach(function(elem){
           console.log(elem[0], elem[1]); // bu satır olsa da olmasa da kod çalışıyor. Ne işe yarıyor bu satır?
            context.beginPath();
            context.arc((elem[0]*40 + 10),(elem[1]*40 + 10),10,0,2*Math.PI);
            context.fillStyle =  A[i++];   //colors[elem[0] % 2];  //dairenin iç rengi
            context.fill();
            context.strokeStyle = '#003300';
            context.stroke();
        });
    }
    
    function cizgiCiz() {
    var say=0;
    for(var n =0; n< (data.length-1); n++) {
    
    context.beginPath();
    context.moveTo(nokta[say],nokta[say+1]);
    context.lineTo(nokta[say+2],nokta[say+3]);
    context.lineWidth="4";
    context.strokeStyle=D[n];  
    context.stroke();
    say = say+2;
    }
    }
    
    drawBoard(); // tahtayı çiziyor
    drawData(data); // çemberleri çiziyor
    cizgiCiz();  // çemberler arasına çizgi çiziyor
    </script>
    
    
        </body>
    </html>
    This code is working in Firefox 4.0b9
    Last edited by Ayşe; 05-04-2014 at 10:22 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles