www.webdeveloper.com
Results 1 to 5 of 5

Thread: Joining scatter dots with lines of different colors

Hybrid View

  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
    Location
    istanbul
    Posts
    315
    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>
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  3. #3
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    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>
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  4. #4
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    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);
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  5. #5
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    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 09:22 AM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

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