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
    390
    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
    390
    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
    390
    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
    390
    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.

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.09772 seconds
  • Memory Usage 2,905KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (6)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (5)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (5)postbit
  • (5)postbit_onlinestatus
  • (5)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (71):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates