Kundli From Image

Jyotishgher Astrology
By -Jyotishgher Astrology
2:31 AM
0

 




<!DOCTYPE html>

<html>

<head>

<style>

#canvas{

  border: solid 2px green; 

  width:50%;

}



.container {

  position: relative;

  text-align: center;

  color: red;

}


.bottom-left {

  position: absolute;

  bottom: 8px;

  left: 40px;

}


.bottom-left5 {

  position: absolute;

  bottom: 60px;

  left: 20px;

}


.top-left {

  position: absolute;

  top: 8px;

  left: 50px;

}


.top-right {

  position: absolute;

  top: 8px;

  right: 50px;

}



.top-left3 {

  position: absolute;

  top: 45px;

  left: 30px;

}


.top-right11 {

  position: absolute;

  top: 45px;

  right: 30px;

}


.bottom-right {

  position: absolute;

  bottom: 8px;

  right: 50px;

}

.bottom-right9 {

  position: absolute;

  bottom:60px;

  right: 30px;

}

.centered {

  position: absolute;

  top: 20%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.centeredD {

  position: absolute;

  top: 70%;

  left: 50%;

  transform: translate(-50%, -50%);

}


.centered4 {

  position: absolute;

  top: 50%;

  left: 20%;

  transform: translate(-50%, -50%);

}

.centered10 {

  position: absolute;

  top: 50%;

  right: 20%;

  transform: translate(-50%, -50%);

}


img.sticky {

  position: -webkit-sticky;

  position: sticky;

  

}

</style>




</head>


<body  >



<div class="container">

  <img src="https://jyotishgher.in/Vedic-Rishi/blankkundli.png"  class="sticky"alt="Snow" style="width:100%;">

    <div class="bottom-left5"><p id="h5">5</p></div>


  <div class="bottom-left"><p id="h6">6</p></div>

  <div class="top-left"><p id="h2">2</p></div>

  <div class="top-right"><p id="h12">12</p></div>

  

  <div class="top-left3"><p id="h3">3</p></div>

  <div class="top-right11"><p id="h11">11</p></div>

  <div class="bottom-right"><p id="h8">8</p></div>

    <div class="bottom-right9"><p id="h9">9</p></div>


  <div class="centered"><p id="h1">1</p></div>

    <div class="centeredD"><p id="h7">7th</p></div>

    

     <div class="centered4"><p id="h4">4</p></div>

    <div class="centered10"><p id="h10">10</p></div>


  

</div>


<script>



var jsonArray = [{"sign":3,"sign_name":"Gemini","planet":["SUN","MARS","MERCURY"],"planet_small":["Su ","Ma ","Me "],"planet_degree":[]},{"sign":4,"sign_name":"Cancer","planet":[],"planet_small":[],"planet_degree":[]},{"sign":5,"sign_name":"Leo","planet":["MOON"],"planet_small":["Mo "],"planet_degree":[]},{"sign":6,"sign_name":"Virgo","planet":[],"planet_small":[],"planet_degree":[]},{"sign":7,"sign_name":"Libra","planet":["SATURN","KETU"],"planet_small":["Sa ","Ke "],"planet_degree":[]},{"sign":8,"sign_name":"Scorpio","planet":[],"planet_small":[],"planet_degree":[]},{"sign":9,"sign_name":"Sagittarius","planet":[],"planet_small":[],"planet_degree":[]},{"sign":10,"sign_name":"Capricorn","planet":["JUPITER"],"planet_small":["Ju "],"planet_degree":[]},{"sign":11,"sign_name":"Aquarius","planet":[],"planet_small":[],"planet_degree":[]},{"sign":12,"sign_name":"Pisces","planet":[],"planet_small":[],"planet_degree":[]},{"sign":1,"sign_name":"Aries","planet":["VENUS","RAHU"],"planet_small":["Ve ","Ra "],"planet_degree":[]},{"sign":2,"sign_name":"Taurus","planet":[],"planet_small":[],"planet_degree":[]}];


     var item = jsonArray[0];  // since there is only one item in the array, have specified the index else you shall use 'for' loop to iterate all the items

               var planet_small_0 = item.planet_small;

               var sign_name_0 = item.sign_name;

               var sign_0 = item.sign;

               var planet_0 = item.planet;

     //alert(planet_small_0 + '|' + sign_0 + '|' + sign_name_0 + '|'+ planet_0);

    document.getElementById("h1").innerHTML = sign_0 + "<br />"+ planet_small_0;


     

     

       var item = jsonArray[1];  // since there is only one item in the array, have specified the index else you shall use 'for' loop to iterate all the items

               var planet_small_1 = item.planet_small;

               var sign_name_1 = item.sign_name;

               var sign_1 = item.sign;

               var planet_1 = item.planet;

   //  alert(planet_small_1 + '|' + sign_1 + '|' + sign_name_1 + '|'+ planet_1);

   

       document.getElementById("h2").innerHTML = sign_1 +" <br />"+ planet_small_1;


     

          var item = jsonArray[2];  // since there is only one item in the array, have specified the index else you shall use 'for' loop to iterate all the items

               var planet_small_2 = item.planet_small;

               var sign_name_2 = item.sign_name;

               var sign_2= item.sign;

               var planet_2 = item.planet;

    // alert(planet_small_2 + '|' + sign_2 + '|' + sign_name_2 + '|'+ planet_2);

    

         document.getElementById("h3").innerHTML = sign_2 +"<br /> "+ planet_small_2;


     

          var item = jsonArray[3];  // since there is only one item in the array, have specified the index else you shall use 'for' loop to iterate all the items

               var planet_small_3 = item.planet_small;

               var sign_name_3 = item.sign_name;

               var sign_3 = item.sign;

               var planet_3 = item.planet;

  //   alert(planet_small_3 + '|' + sign_3 + '|' + sign_name_3 + '|'+ planet_3);

       document.getElementById("h4").innerHTML = sign_3 +"<br /> "+ planet_small_3;


     

          var item = jsonArray[4];  // since there is only one item in the array, have specified the index else you shall use 'for' loop to iterate all the items

               var planet_small_4 = item.planet_small;

               var sign_name_4 = item.sign_name;

               var sign_4 = item.sign;

               var planet_4 = item.planet;

   //  alert(planet_small_4 + '|' + sign_4 + '|' + sign_name_4 + '|'+ planet_4);

          document.getElementById("h5").innerHTML = sign_4 +"<br /> "+ planet_small_4;


   

     

          var item = jsonArray[5];  // since there is only one item in the array, have specified the index else you shall use 'for' loop to iterate all the items

               var planet_small_5 = item.planet_small;

               var sign_name_5 = item.sign_name;

               var sign_5 = item.sign;

               var planet_5 = item.planet;

    // alert(planet_small_5 + '|' + sign_5 + '|' + sign_name_5 + '|'+ planet_5);

    

        document.getElementById("h6").innerHTML = sign_5 +" <br />"+ planet_small_5;


     

          var item = jsonArray[6];  // since there is only one item in the array, have specified the index else you shall use 'for' loop to iterate all the items

               var planet_small_6 = item.planet_small;

               var sign_name_6 = item.sign_name;

               var sign_6 = item.sign;

               var planet_6 = item.planet;

    // alert(planet_small_6 + '|' + sign_6 + '|' + sign_name_6+ '|'+ planet_6);

    

          document.getElementById("h7").innerHTML = sign_6 +"<br /> "+ planet_small_6;


     

          var item = jsonArray[7];  // since there is only one item in the array, have specified the index else you shall use 'for' loop to iterate all the items

               var planet_small_7 = item.planet_small;

               var sign_name_7 = item.sign_name;

               var sign_7 = item.sign;

               var planet_7 = item.planet;

    // alert(planet_small_7 + '|' + sign_7 + '|' + sign_name_7 + '|'+ planet_7);

          document.getElementById("h8").innerHTML = sign_7 +" <br />"+ planet_small_7;


    

     

          var item = jsonArray[8];  // since there is only one item in the array, have specified the index else you shall use 'for' loop to iterate all the items

               var planet_small_8 = item.planet_small;

               var sign_name_8 = item.sign_name;

               var sign_8 = item.sign;

               var planet_8 = item.planet;

   //  alert(planet_small_8 + '|' + sign_8 + '|' + sign_name_8 + '|'+ planet_8);

         document.getElementById("h9").innerHTML = sign_8 +"<br /> "+ planet_small_8;


   

     

          var item = jsonArray[9];  // since there is only one item in the array, have specified the index else you shall use 'for' loop to iterate all the items

               var planet_small_9 = item.planet_small;

               var sign_name_9 = item.sign_name;

               var sign_9 = item.sign;

               var planet_9 = item.planet;

   //  alert(planet_small_9 + '|' + sign_9 + '|' + sign_name_9 + '|'+ planet_9);

        document.getElementById("h10").innerHTML = sign_9 +"<br /> "+ planet_small_9;


   

     

          var item = jsonArray[10];  // since there is only one item in the array, have specified the index else you shall use 'for' loop to iterate all the items

               var planet_small_10 = item.planet_small;

               var sign_name_10 = item.sign_name;

               var sign_10 = item.sign;

               var planet_10 = item.planet;

     //alert(planet_small_10 + '|' + sign_10 + '|' + sign_name_10 + '|'+ planet_10);

     document.getElementById("h11").innerHTML = sign_10 +"<br /> "+ planet_small_10;



    var item = jsonArray[11];  // since there is only one item in the array, have specified the index else you shall use 'for' loop to iterate all the items

               var planet_small_11 = item.planet_small;

               var sign_name_11 = item.sign_name;

               var sign_11 = item.sign;

               var planet_11 = item.planet;

    // alert(planet_small_11 + '|' + sign_11 + '|' + sign_name_11 + '|'+ planet_11);

      document.getElementById("h12").innerHTML = sign_11 +"<br /> "+ planet_small_11;





</script>







</body>

</html>


========================================================================


<!DOCTYPE html>




<html>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">

         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

         <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

         <script src="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/alertify.min.js"></script>

         <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/alertify.min.css"/>

         <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.12.0/build/css/themes/default.min.css"/>


<head>




<style>




#canvas{




  border: solid 2px green; 




  width:50%;




}








</style>
















</head>








<body  >





<button onclick="draw()">Click me</button>

   <canvas id="canvas" width="500" height="500"></canvas>


<div class="container">


 

</div>










<script>


var canvas = document.getElementById('canvas');


function draw() {


   var form_data ='date='+'24'+'&month='+'06'+'&year='+'1980'+'&hour='+'05'+'&minute='+'40'+'&latitude='+'20.35'+'&longitude='+'23.45'+'&CHARTTYPE='+"N"; 

                        // alert(form_data);

                              

                                $.ajax(

                                    {

                                     type: "POST",

                                     url: "https://www.jyotishgher.in/Vedic-Rishi/lagna_chart.php",

                                     data: form_data,

                                     dataType: "json",

                                     success: function(result){

                              

                              

                                       const arr =result;

                                       const myJSON = JSON.stringify(arr);

                                       var jsonArray = myJSON;

                                   //    alert(jsonArray);

                                       const parsedData = JSON.parse(jsonArray);


// Storing each value in a variable

const sign = parsedData.map(entry => entry.sign);

//ert(sign[0]);

//const associatedPlanets = parsedData.map(entry => entry.planet);


const planet_small = parsedData.map(entry => entry.planet_small);

//ert(planet_small[0]);

 

   

                           //  document.getElementById("h1").innerHTML = sign[0] +"<br />"+ planet_small[0];

                            // document.getElementById("h2").innerHTML = sign[1] +"<br />"+ planet_small[1];

                                 //  document.getElementById("h3").innerHTML = sign[2] +"<br />"+ planet_small[2];

                            //  document.getElementById("h4").innerHTML = sign[3] +"<br />"+ planet_small[3];

   //ocument.getElementById("h5").innerHTML = sign[4] +"<br />"+ planet_small[4];

   //cument.getElementById("h6").innerHTML = sign[5] +"<br />"+ planet_small[5];

//document.getElementById("h7").innerHTML = sign[6] +"<br />"+ planet_small[6];

//document.getElementById("h8").innerHTML = sign[7] +"<br />"+ planet_small[7];

// document.getElementById("h9").innerHTML = sign[8] +"<br />"+ planet_small[8];

 //ocument.getElementById("h10").innerHTML = sign[9] +"<br />"+ planet_small[9];

//document.getElementById("h11").innerHTML = sign[10] +"<br />"+ planet_small[10];

//document.getElementById("h12").innerHTML = sign[11] +"<br />"+ planet_small[11];

                              


                                       

                             


  var canvasParentWidth = document.getElementById("canvas").parentElement.offsetWidth;


  console.log(canvasParentWidth);


  document.getElementById("canvas").style.width = (canvasParentWidth - 10)+"px";


  document.getElementById("canvas").style.height = (canvasParentWidth - 10)+"px";



  if (canvas.getContext) {


    var ctx = canvas.getContext('2d');




    drawSquareHouse(ctx, 50, 0, 75, 25, 50, 50, 25, 25);


    setText(ctx, 50, 25,sign[0] ,  planet_small[0]) 


    


    drawTriangleHouse(ctx, 0, 0, 50, 0, 25, 25);


    setText(ctx, 25, 12, sign[1] , planet_small[1]) 


    


    drawTriangleHouse(ctx, 0, 0, 25, 25, 0, 50);


    setText(ctx, 12, 25, sign[2] , planet_small[2]) 


    


    drawSquareHouse(ctx, 25, 25, 50, 50, 25, 75, 0, 50);


    setText(ctx, 25, 50, sign[3] , planet_small[3]) 


    


    drawTriangleHouse(ctx, 0, 50, 25, 75, 0, 100);


    setText(ctx, 12, 75, sign[4]  , planet_small[4]) 


    


    drawTriangleHouse(ctx, 25, 75, 50, 100, 0, 100);


    setText(ctx, 25, 88, sign[5],  planet_small[5]) 


    


    drawSquareHouse(ctx, 50, 50, 75, 75, 50, 100, 25, 75);


    setText(ctx, 50, 75, sign[6] ,planet_small[6]) 


    


    drawTriangleHouse(ctx, 75, 75, 100, 100, 50, 100);


    setText(ctx, 75, 88,sign[7] , planet_small[7]) 


    


    drawTriangleHouse(ctx, 75, 75, 100, 50, 100, 100);


    setText(ctx, 88, 75, sign[8] , planet_small[8]) 


    


    drawSquareHouse(ctx, 75, 25, 100, 50, 75, 75, 50, 50);


    setText(ctx, 75, 50, sign[9] , planet_small[9]) 


    


    drawTriangleHouse(ctx, 100, 0, 100, 50, 75, 25);


    setText(ctx, 88, 25, sign[10] , planet_small[10]) 


    


    drawTriangleHouse(ctx, 50, 0, 100, 0, 75, 25);


    setText(ctx, 75, 12,sign[11] ,planet_small[11]) 


  }

    }  });

}




function drawTriangleHouse(context, x1, y1, x2, y2, x3, y3) {


  context.beginPath();


  context.moveTo(x1 * canvas.width / 100, y1 * canvas.height / 100);


  context.lineTo(x2 * canvas.width / 100, y2 * canvas.height / 100);


  context.lineTo(x3 * canvas.width / 100, y3 * canvas.height / 100);


  context.closePath();


  context.lineWidth = 1;


  context.strokeStyle = '#666666';


  context.stroke()




}




function drawSquareHouse(context, x1, y1, x2, y2, x3, y3, x4, y4) {


  context.beginPath();


  context.moveTo(x1 * canvas.width / 100, y1 * canvas.height / 100);


  context.lineTo(x2 * canvas.width / 100, y2 * canvas.height / 100);


  context.lineTo(x3 * canvas.width / 100, y3 * canvas.height / 100);


  context.lineTo(x4 * canvas.width / 100, y4 * canvas.height / 100);


  context.closePath();


  context.lineWidth = 1;


  context.strokeStyle = '#666666';


  context.stroke();


}




function setText(context, x, y, maintext, subtext) {


  context.font = "16px Comic Sans MS";


  context.fillStyle = "red";


  context.fillText(maintext, x * canvas.width / 100, y * canvas.width / 100);


 context.fillStyle = "black";


  context.fillText(subtext, (x-10) * canvas.width / 100, y * canvas.width / 100);


}





</script>






















</body>




</html>



Jyotishgher Astrology

Jyotishgher Astrology

Place your burden at the feet of the Lord of the Universe who accomplishes everything. Remain all the time steadfast in the heart, in the Transcendental Absolute. God knows the past, present and future. He will determine the future for you and accomplish the work. What is to be done will be done at the proper time. Don’t worry. Abide in the heart and surrender your acts to the divine

    You Might Like

    Show more
    recent

    Post a Comment

    0Comments

    Post a Comment (0)
    Share to other apps
    Copy Post Link