surya preethaaa

I want to get the sum total of check box for each row in a table on Click SelectAll Option
The below code works when select CheckBox Individually,But not works on Click Select All Option

Javascript : To Sum the checked row value

I want to know how to write function to get each row value on click SelectAll Option

Any help here??? Thanks in Advance

4 years ago

HTML Pages with CSS and JavaScript

Get the Sum of checked checkbox for each row of table On Click SELECT ALL

Mistakenly i posted in Other Language Forum,Let me Post this in Correct Forum

4 years ago

Other Languages

Get the Sum of checked checkbox for each row of table On Click SELECT ALL

Actually i am using html javascript jquery,

4 years ago

Other Languages

Get the Sum of checked checkbox for each row of table On Click SELECT ALL

I want to get the sum total of check box for each row in a table on Click SelectAll Option
The below code works when select CheckBox Individually,But not works on Click Select All Option

Javascript : To Sum the checked row value

I want to know how to write function to get each row value on click SelectAll Option

Any help here??? Thanks in Advance

4 years ago

Other Languages

how to toggle the position of the parent in d3

In Rotating Cluster Layout,i want to place the parent word at the center(ABOVE THE NODE CIRCLE) on click..
The PROBLEM is on node close ,the position of the parent word remains same.How should i overcome this issue?
(already asked in other site,i didn't get proper response there..thats why i am posting it here...
https://stackoverflow.com/questions/45476504/selecting-the-parent-text-in-d3 )

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
   <style>
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.node text {
font-size: 120%;
}
}
   
div#tooltip {
  position: absolute;
display:inline-block;
   background: orange;
    border-radius: 8px;
padding-left: 5px;
padding-right: 5px;
  pointer-events: none;
}
.node {
   cursor: pointer;
}
.node circle {
   fill: #fff;
   stroke: steelblue;
   stroke-width: 1.5px;
}
.node text {
    font: sans-serif;
text-align: center;
}
.link {
   fill: none;  
}
.parent{
fill :red;
}
#myTable,#myTable1
{
border-radius:9px;
position:absolute;
          top:50%;
          left:40%;
border: 2 px solid red;
margin:auto;
}
#buttn,#buttn1
{
   -moz-box-shadow:inset 0px 1px 0px 0px #fbafe3;
   -webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3;
   box-shadow:inset 0px 1px 0px 0px #fbafe3;
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d) );
   background:-moz-linear-gradient( center top, #ff5bb0 5%, #ef027d 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bb0', endColorstr='#ef027d');
   background-color:#ff5bb0;
margin-left:40%;
   border-radius:9px;
   -webkit-border-radius:9px;
   -moz-border-border-radius:9px;
   border:1px solid #ee1eb5;
   display:inline-block;
   color:#ffffff;
   font-family:Arial;
   font-size:15px;
   font-weight:bold;
   font-style:normal;
   height: 25px;
   line-height: 20px;
   width:50px;
   text-decoration:none;
   text-align:center;
   text-shadow:1px 1px 0px #c70067;
}
#load{
position:absolute;
margin-bottom:5%;
margin-left: 30%;
margin-right: 10%;
}
#update{
margin-left: 2%;
border-radius:15px;
padding:1px;
width:50px;
   -moz-box-shadow:inset 0px 1px 0px 0px #fbafe3;
   -webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3;
   box-shadow:inset 0px 1px 0px 0px #fbafe3;
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d) );
   background:-moz-linear-gradient( center top, #ff5bb0 5%, #ef027d 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bb0', endColorstr='#ef027d');
   background-color:#ff5bb0;
   border-radius:9px;
   -webkit-border-radius:9px;
   -moz-border-border-radius:9px;
   border:1px solid #ee1eb5;
   display:inline-block;
   color:#ffffff;
   font-family:Arial;
   font-size:15px;
   font-weight:bold;
   font-style:normal;
   height: 25px;
   line-height: 20px;
   width:50px;
   text-decoration:none;
   text-align:center;
   text-shadow:1px 1px 0px #c70067;
}
#myTable,#myTable1, #myTr1,#myTr {
 
   background-color:pink;
  padding-top: 10px;
   padding-right: 30px;
   padding-bottom: 10px;
   padding-left: 30px;
}
a{
font-weight:bold;
}
#keyy{
margin-left: 1%;
}
.ui-autocomplete{
max-height:100 px;
overflow y:auto;
overflow x:hidden;
padding-right:20 px;
}
#editor {
   background: white;
   border: 1px solid #ffa853;
   border-radius: 5px;
   box-shadow: 0 0 2px 2px #ffa853;
   color: #666;
   outline: none;
   height:20px;
   width: 190px;
 }
 .ui-autocomplete {
height:300px;
position:absolute;
overflow-x:hidden;
overflow-y:scroll;
}
ul.ui-autocomplete {
border-radius:15px;
}
a{
color:blue;
}
</style>
 
</head>
<body bgcolor="#FFFFE0">
<div class="container">
<div id="tree-container"class="full" bgcolor="#FFFFE0"></div>
<script>
var data={
 "name": "அகடம்",
 "tooltip": "",
 "color": "#FF0000",
 "children": [
   {
     "name": "பொல்லாங்கு",
     "tooltip": "",
     "color": "#FF0000",
     "children": [
       {
         "name": "தீது",
         "tooltip": "",
         "color": "#FF0000",
         "children": [
           {
             "name": "தீமை",
             "tooltip": "நன்றிதுதீதென(திருவாச.49,2).",
             "color": "#FF0000"
           },
           {
             "name": "பாவச்செயல்",
             "tooltip": "உள்ளத்தாலுள்ளலுந்தீதே(குறள்,282).",
             "color": "#FF0000"
           },
           {
             "name": "துன்பம்",
             "tooltip": "தீதுண்டோமன்னுமுயிர்க்கு(குறள்,190).",
             "color": "#00C957"
           },
           {
             "name": "கேடு",
             "tooltip": "அனல்கனற்றத்தீதுறும்பஞ்சியின்(உபதேசகா.சிவவிரத.164).",
             "color": "#00C957"
           },
           {
             "name": "இடையூறு",
             "tooltip": "இடையூறு,தீதின்றுருள்கநீயேந்தியதிகிரி(மணி.22,16).",
             "color": "#00C957"
           },
           {
             "name": "இறப்பு",
             "tooltip": "நின்மகன்றீதினீங்கினான்(சீவக.327).",
             "color": "#1E90FF"
           },
           {
             "name": "உடம்பு",
             "tooltip": "(சிலப்.19,66,உரை.)",
             "color": "#FF00FF"
           }
         ]
       },
       {
         "name": "குற்றம்",
         "tooltip": "",
         "color": "#FF0000",
         "children": [
           {
             "name": "பிழை",
             "tooltip": "ஏதிலார்குற்றம்போற்றங்குற்றங்காண்கிற்பின்(குறள்.190).",
             "color": "#FF0000"
           },
           {
             "name": "குறை",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "குறைபாடு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "கறை",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "வழு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "பழுது",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "பிழைபாடு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "தவறு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "பழி",
             "tooltip": "குற்றமின்முனிவரும்(கந்தபு.வரைபுனை.218).",
             "color": "#00C957"
           },
           {
             "name": "பழிக்கூறு",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "அவதூறு",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "இழிதகவு",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "இகழ்ச்சி",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "திட்டு",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "வசவு",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "இழுக்கு",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "குற்றச்சாட்டு",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "துன்பம்",
             "tooltip": "குடும்பத்தைக்குற்றமறைப்பான்(குறள்.1029).",
             "color": "#1E90FF"
           },
           {
             "name": "வேதனை",
             "tooltip": "",
             "color": "#1E90FF"
           },
           {
             "name": "மனத்துன்பம்",
             "tooltip": "",
             "color": "#1E90FF"
           },
           {
             "name": "மனத்துயர்",
             "tooltip": "",
             "color": "#1E90FF"
           },
           {
             "name": "வருத்தம்",
             "tooltip": "",
             "color": "#1E90FF",
             "children": [
               {
                 "name": "துன்பம்",
                 "tooltip": "களிற்றின்வருத்தஞ்சொலிய(அகநா.8).",
                 "color": "#FF0000"
               },
               {
                 "name": "கஷ்டம்",
                 "tooltip": "மெய்வருத்தம்பாரார்(நீதிநெறி,53).",
                 "color": "#FF0000"
               },
               {
                 "name": "சிரமம்",
                 "tooltip": "",
                 "color": "#FF0000"
               },
               {
                 "name": "முயற்சி",
                 "tooltip": "ஆற்றின்வருந்தாவருத்தம்(குறள்.468).",
                 "color": "#00C957"
               },
               {
                 "name": "ஊக்கம்",
                 "tooltip": "",
                 "color": "#00C957"
               },
               {
                 "name": "களைப்பு",
                 "tooltip": "அசைந்துகடைந்தவருத்தமோ(திவ்.இயற்.3,64).",
                 "color": "#1E90FF"
               },
               {
                 "name": "முழுச்சோர்வு",
                 "tooltip": "",
                 "color": "#1E90FF"
               },
               {
                 "name": "சோர்வு",
                 "tooltip": "",
                 "color": "#1E90FF"
               },
               {
                 "name": "தளர்ச்சி",
                 "tooltip": "",
                 "color": "#1E90FF"
               }
             ]
           },
           {
             "name": "அங்கக்குறை",
             "tooltip": "",
             "color": "#FF00FF"
           },
           {
             "name": "தீங்கு",
             "tooltip": "கோடாதவேதனுக்கியான்செய்தகுற்றமென்(கந்தரலங்.76).",
             "color": "#8A2BE2"
           },
           {
             "name": "தூய்மைக்கேடு",
             "tooltip": "",
             "color": "#0000FF"
           },
           {
             "name": "அபராதம்",
             "tooltip": "",
             "color": "#EE1289"
           }
         ]
       },
       {
         "name": "கேடு",
         "tooltip": "",
         "color": "#FF0000",
         "children": [
           {
             "name": "அழிவு",
             "tooltip": "கேடிவல்விழுச்செல்வம்(குறள்,400).",
             "color": "#FF0000"
           },
           {
             "name": "நஷ்டம்",
             "tooltip": "நேராகக்காணுமேற்கேடோருவன்கைப்படும்(சினேந்.158).",
             "color": "#FF0000"
           },
           {
             "name": "வறுமை",
             "tooltip": "கேட்டினுமுண்டோருறுதி(குறள்,796).",
             "color": "#FF0000"
           },
           {
             "name": "தீமை",
             "tooltip": "கிள்ளைபோன்மொழியார்க்கெல்லாங்கேடுசூழ்கின்றேனன்றே(கம்பரா.மாரீச.77).",
             "color": "#FF0000"
           },
           {
             "name": "மரணம்",
             "tooltip": "பிணிபிறவிகேடென்று(தேவா.935,1).",
             "color": "#00C957"
           },
           {
             "name": "கெடுதல்விகாரம்",
             "tooltip": "வந்தனகரந்திரிந்துழிநண்ணுங்கேடே(நன்.210).",
             "color": "#1E90FF"
           },
           {
             "name": "அழகின்மை",
             "tooltip": "",
             "color": "#FF00FF"
           }
         ]
       },
       {
         "name": "ஈனம்",
         "tooltip": "",
         "color": "#00C957",
         "children": [
           {
             "name": "இழிவு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "கீழ்மை",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "தாழ்வு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "குறைபாடு",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "கள்ளி",
             "tooltip": "",
             "color": "#1E90FF"
           },
           {
             "name": "சரிவு",
             "tooltip": "",
             "color": "#FF00FF"
           },
           {
             "name": "முயல்",
             "tooltip": "",
             "color": "#8A2BE2"
           }
         ]
       },
       {
         "name": "மறதி",
         "tooltip": "",
         "color": "#1E90FF",
         "children": [
           {
             "name": "ஞாபகமறதி",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "நினைவிழப்பு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "நினைவின்மை",
             "tooltip": "",
             "color": "#FF0000"
           }
         ]
       }
     ]
   },
   {
     "name": "அநீதி",
     "tooltip": "",
     "color": "#FF0000",
     "children": [
       {
         "name": "அநியாயம்",
         "tooltip": "",
         "color": "#FF0000"
       },
       {
         "name": "",
         "tooltip": "",
         "color": "white"
       }
     ]
   },
   {
     "name": "கபடம்",
     "tooltip": "",
     "color": "#FF0000",
     "children": [
       {
         "name": "வஞ்சகம்",
         "tooltip": "",
         "color": "#FF0000",
         "children": [
           {
             "name": "தந்திரம்",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "ஏமாற்றம்",
             "tooltip": "வஞ்சகப்பெரும்புலையனேனையும்(திருவாச.5,96).",
             "color": "#FF0000"
           },
           {
             "name": "சூழ்ச்சி",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "கைத்திறம்",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "ஏய்ப்பு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "மோசடி",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "வஞ்சகச்சூழ்ச்சி",
             "tooltip": "(யாழ்.அக.)",
             "color": "#FF0000"
           },
           {
             "name": "இரண்டகம்",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "சூது",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "எத்துமானம்",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "புரட்டு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "மறைவு",
             "tooltip": "(யார்.அக.)",
             "color": "#00C957"
           }
         ]
       },
       {
         "name": "",
         "tooltip": "",
         "color": "white"
       }
     ]
   },
   {
     "name": "சூழ்ச்சி",
     "tooltip": "",
     "color": "#FF0000",
     "children": [
       {
         "name": "வியாபகம்",
         "tooltip": "",
         "color": "#FF0000"
       },
       {
         "name": "படர்வு",
         "tooltip": "",
         "color": "#FF0000"
       },
       {
         "name": "ஆலோசனை",
         "tooltip": "போற்றார்ய்பொறுத்தலுஞ்சூழ்ச்சியதகலமும்(புறநா.2,7).",
         "color": "#00C957",
         "children": [
           {
             "name": "யோசனை",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "சிந்திப்பு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "பார்வை",
             "tooltip": "(நாநார்த்த.)",
             "color": "#00C957"
           },
           {
             "name": "காட்சி",
             "tooltip": "",
             "color": "#00C957"
           }
         ]
       },
       {
         "name": "முதிர்சிந்தனை",
         "tooltip": "",
         "color": "#00C957"
       },
       {
         "name": "ஆழ்ந்தாராய்வு",
         "tooltip": "",
         "color": "#00C957"
       },
       {
         "name": "கலந்தாய்வு",
         "tooltip": "",
         "color": "#00C957",
         "children": [
           {
             "name": "கலந்துபேசு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "அறிவுரை",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "கருத்துரை",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "கலந்தாய்வுக்கூட்டம்",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "மாநாடு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "ஆலோசனைக்கூட்டம்",
             "tooltip": "",
             "color": "#FF0000"
           }
         ]
       },
       {
         "name": "அறிவுரை",
         "tooltip": "",
         "color": "#00C957"
       },
       {
         "name": "நுண்ணறிவு",
         "tooltip": "கருமக்கிடக்கையுங்கவங்காச்சூழ்ச்சியும்(பெருங்.உஞ்சைக்.46,117).",
         "color": "#1E90FF",
         "children": [
           {
             "name": "நுண்ணுணர்வு",
             "tooltip": "நூலளவேயாகுமாநுண்ணறிவு(வாக்குண்.7).",
             "color": "#FF0000"
           },
           {
             "name": "",
             "tooltip": "",
             "color": "white"
           }
         ]
       },
       {
         "name": "உபாயம்",
         "tooltip": "சொல்லாயானுன்னைச்சார்வதோர்சூழ்ச்சியே(திவ்.திருவாய்.3,2,3).",
         "color": "#FF00FF",
         "children": [
           {
             "name": "சூழ்ச்சி",
             "tooltip": "யாஅருபாயத்தின்வாழாதார்(நாலடி,119).",
             "color": "#FF0000"
           },
           {
             "name": "சொற்பம்",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "சாதனம்",
             "tooltip": "காசுஒடுக்கஉபாயமில்லாமையாலும்(S.I.I.v,370).",
             "color": "#1E90FF"
           }
         ]
       },
       {
         "name": "வழிவகை",
         "tooltip": "",
         "color": "#FF00FF"
       },
       {
         "name": "தகுமுறை",
         "tooltip": "",
         "color": "#FF00FF"
       },
       {
         "name": "வழித்துணை",
         "tooltip": "",
         "color": "#FF00FF"
       },
       {
         "name": "மனத்தடுமாற்றம்",
         "tooltip": "கைம்மிகனலிதல்சூழ்ச்சி(தொல்.பொ.260).",
         "color": "#8A2BE2"
       },
       {
         "name": "கடுந்துன்பம்",
         "tooltip": "",
         "color": "#8A2BE2"
       },
       {
         "name": "வேதனை",
         "tooltip": "",
         "color": "#8A2BE2",
         "children": [
           {
             "name": "வருத்தம்",
             "tooltip": "வேதனைபெருகி(சீவக.2506).",
             "color": "#FF0000",
             "children": [
               {
                 "name": "துன்பம்",
                 "tooltip": "களிற்றின்வருத்தஞ்சொலிய(அகநா.8).",
                 "color": "#FF0000"
               },
               {
                 "name": "கஷ்டம்",
                 "tooltip": "மெய்வருத்தம்பாரார்(நீதிநெறி,53).",
                 "color": "#FF0000"
               },
               {
                 "name": "சிரமம்",
                 "tooltip": "",
                 "color": "#FF0000"
               },
               {
                 "name": "முயற்சி",
                 "tooltip": "ஆற்றின்வருந்தாவருத்தம்(குறள்.468).",
                 "color": "#00C957"
               },
               {
                 "name": "ஊக்கம்",
                 "tooltip": "",
                 "color": "#00C957"
               },
               {
                 "name": "களைப்பு",
                 "tooltip": "அசைந்துகடைந்தவருத்தமோ(திவ்.இயற்.3,64).",
                 "color": "#1E90FF"
               },
               {
                 "name": "முழுச்சோர்வு",
                 "tooltip": "",
                 "color": "#1E90FF"
               },
               {
                 "name": "சோர்வு",
                 "tooltip": "",
                 "color": "#1E90FF"
               },
               {
                 "name": "தளர்ச்சி",
                 "tooltip": "",
                 "color": "#1E90FF"
               }
             ]
           },
           {
             "name": "தொல்லை",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "மனக்கலக்கம்",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "உணர்ச்சி",
             "tooltip": "பஞ்சகந்தங்களுள்சுகழந்துக்கமும்அவ்விரண்டின்கலப்புமானஉணர்ச்சி.(மணி.30,189-190,உரை.)",
             "color": "#FF0000"
           },
           {
             "name": "நோவு",
             "tooltip": "(பிங்.)கருப்பம்...வேதனைமுதிர்ந்துகாட்ட(பிரமோத்.6,18).",
             "color": "#00C957",
             "children": [
               {
                 "name": "வலி",
                 "tooltip": "",
                 "color": "#FF0000"
               },
               {
                 "name": "துன்பம்",
                 "tooltip": "(திவா.)",
                 "color": "#FF0000"
               },
               {
                 "name": "வேதனை",
                 "tooltip": "",
                 "color": "#FF0000"
               },
               {
                 "name": "மனத்துயர்",
                 "tooltip": "",
                 "color": "#FF0000"
               },
               {
                 "name": "மனத்துன்பம்",
                 "tooltip": "",
                 "color": "#FF0000"
               },
               {
                 "name": "வியாதி",
                 "tooltip": "",
                 "color": "#00C957"
               },
               {
                 "name": "ஊறு",
                 "tooltip": "",
                 "color": "#00C957"
               },
               {
                 "name": "காயம்",
                 "tooltip": "",
                 "color": "#00C957"
               },
               {
                 "name": "தீங்கு",
                 "tooltip": "",
                 "color": "#00C957"
               },
               {
                 "name": "பிரசவவேதனை",
                 "tooltip": "ஈன்றக்கானோவும்(நாலடி,201).",
                 "color": "#1E90FF"
               },
               {
                 "name": "இரக்கம்",
                 "tooltip": "தாம்நோவுபடாநிற்பர்(ஈடு).",
                 "color": "#FF00FF"
               }
             ]
           },
           {
             "name": "நுகர்ச்சி",
             "tooltip": "(மணி.30,46,உரை.)",
             "color": "#1E90FF"
           },
           {
             "name": "கருமம்",
             "tooltip": "",
             "color": "#FF00FF"
           }
         ]
       }
     ]
   },
   {
     "name": "மோசடி",
     "tooltip": "",
     "color": "#FF0000",
     "children": [
       {
         "name": "ஏமாற்றம்",
         "tooltip": "",
         "color": "#FF0000",
         "children": [
           {
             "name": "நம்பிக்கைகுலை",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "மனமுறிவு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "மனக்கசப்பு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "வஞ்சகம்",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "ஏக்கம்",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "எண்ணக்குலைவு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "மனஉலைவு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "மோசடி",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "தோல்வி",
             "tooltip": "",
             "color": "#FF0000"
           }
         ]
       },
       {
         "name": "",
         "tooltip": "",
         "color": "white"
       }
     ]
   }
 ]
};
var i = 0,
   duration = 750;
 var root=data;
var width = 1000;
var height =1000;
var radius = 500 / 2;
var cluster = d3.layout.cluster()
 .size([360, radius - 120]);
var diagonal = d3.svg.diagonal.radial()
 .projection(function(d) {
   return [d.y, d.x / 180 * Math.PI];
 });
var svg = d3.select("#tree-container").append("svg")
   .attr("width", width)
   .attr("height", height)
 .append("g")
   .attr("transform", "translate(" + 650 + "," + 300 + ")");
 root = data;
 root.x0 = height / 2;
 root.y0 = 0;
 function collapse(d) {
   if (d.children) {
     d.all_children = d.children;
     d._children = d.children;
     d._children.forEach(collapse);
     d.children = null;
     d.hidden = true;
   }
 }
 root.all_children = root.children;
 root.children.forEach(collapse);
 root.children.forEach(function(d) { d.hidden = false; });
 root.hidden = false;
 update(root);
d3.select(self.frameElement).style("height", "800px");
window.onload=nn();
function nn(){
d3.select('text').style("stroke","red");
d3.select('text').style("font-size","17px");
d3.select('text').style("font-weight","lighter");
// d3.select('text').attr("x", function(d) { return d.x < 180 === d.children ? 6 : -6; })
d3.select('text').attr("y", function(d) { return d.y < 180 === d.children ? 20 : -20; })
}
function update(source) {
var nodes = cluster.nodes(root);
     links = cluster.links(nodes);
 var node = svg.selectAll("g.node")
     .data(nodes, function(d) { return d.id || (d.id = ++i); });
//nodes.forEach(function(d) { d.y = d.depth * 70; });
svg.append("svg:defs").selectAll("marker")
   .data(["end"])  
 .enter().append("svg:marker")
   .attr("id", String)
   .attr("viewBox", "0 -5 10 10")
   .attr("refX", 15)
   .attr("refY", -1.5)
   .attr("markerWidth", 6)
  // .attr("markerHeight", 6)
   .attr("orient", "auto")
 .append("svg:path")
   .attr("d", "M0,-5L10,0L0,5");
var nodeEnter = node.enter().append("g")
     .attr("class", "node")
   .on("click",function(d){
click(d);
});
 
  nodeEnter.append("circle")
       .attr("class", "smallcircle")
.attr("id", function(d){return "node" + d.id;})
           .style("stroke", function(d) {
     return d.color;
   })
 nodeEnter.append("text")
   .text(function (d) {
       return d.name;
   })
   .style("opacity", 1)
.on("mouseover", function (d) {
var r = d3.select(this).node().getBoundingClientRect();
          d3.select("div#tooltip")
               .style("display", "inline")
              .style("top", (r.top-25) + "px")
  .style("top", 25 + "px")
//    .text(d3.event.pageX + ", " + d3.event.pageY)
     .style("left", (d3.event.pageX) + "px")
     .style("top", (d3.event.pageY - 40) + "px")
             .style("left", r.left + 80+"px")
 .style("left",  + "px")
               .style("position", "absolute")
              .text(d.tooltip);
})
   .on("mouseout", function(){
      d3.select("div#tooltip").style("display", "none")
  })
       .style("fill-opacity", 0);
   node.select("circle.nodeCircle")
       .attr("r", 4.5)
      var nodeUpdate = node.transition()
       .duration(duration)
 .attr("transform", function (d) {
       return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")rotate(" + (-d.x + 90) + ")";
  });
   nodeUpdate.select("circle")
       .attr("r", 4.5)
       .style("fill", function (d) {
       if (d._children){
return d.color;
}
   });
   nodeUpdate.select("text")
 .style("fill-opacity", 9)
  .style("fill", function(d) {
    return d.color;
   })
.attr("font-size",function(d){return (d.children?"17px":"14px");})
.attr("dy", ".35em")
//  .attr("font-size","14px")
.attr("font-weight",function(d){return (d.children?"bolder":"lighter");})
.attr("x", function(d) { return d.x < 180 === !d.children ? 6 : -6; })
//.attr("y", function(d) { return d.y < 180 === !d.children ? 6 : -6; })
       .attr("text-anchor", function (d) {
       return d.x < 180 ? "start" : "end";
   })
.attr("transform", function(d) { return d.children?"rotate(360)":"rotate(" + (d.x < 180 ? d.x - 90 : d.x + 90) + ")"; });
 var nodeExit = node.exit().transition()
     .duration(duration)
     .remove();
 nodeExit.select("circle")
     .attr("r", 1e-6);
 nodeExit.select("text")
     .style("fill-opacity", 1e-6);
function x(d) { console.log(d); return d.y * Math.cos((d.x - 90) / 180 * Math.PI); }
function y(d) { return d.y * Math.sin((d.x - 90) / 180 * Math.PI); }
 var link = svg.selectAll("path.link")
    .data(links, function(d) { return d.target.id; });
 link.enter().insert("path", "g")
     .attr("class", "link")
  .attr("id", function(d){ return ("link" + d.source.id + "-" + d.target.id)})
    .style("stroke", function(d) {
    return d.target.color;
   })//.attr("marker-end", "url(#end)")
      .attr("d",diagonal);
 link.transition()
     .duration(duration)//.attr("marker-end", "url(#end)")
       .attr("d",diagonal);
 
 link.exit().transition()
     .duration(duration)//.attr("marker-end", "url(#end)")
         .attr("d",diagonal)
     .remove();
 
 nodes.forEach(function(d) {
   d.x0 = d.x;
   d.y0 = d.y;
 });
}
function click(d) {
if(!d.parent)
{
return;
}
 if (d.children) {
   d._children = d.children;
   d.children = null;
   if (d._children) {
       d._children.forEach(function(n) { n.hidden = true; });
   
       if (d.parent) {
           d.parent.children = d.parent.all_children;
           d.parent.children.forEach(function(n) {
               n.hidden = false;
           });
       }
   }
 } else {
   d.children = d._children;
   d._children = null;
   if (d.children) {
       d.children.forEach(function(n) { n.hidden = false; });
   
       if (d.parent) {
           d.parent.children = [d,];
 d.parent.children.filter(function(n) { return n !== d; }).forEach(function(n) {
               n.hidden = true;
           });
       }
   }
 }
 d3.selectAll("text").attr("y","-15");
 
 
update(d);
}
 
</script>
</div>
 </body>
</html>

7 years ago

Web Services

text pattern change in D3 based on number of childs

In rotating cluster layout i want to change the text pattern based on number of children ..if the child is more than 15 the design looks like this

,(i.e)overlapping text...so i want to change the pattern of the text based on the number of child ...if the child is more than 15 i want to make the text vertical like https://i.stack.imgur.com/cCdSo.png otherwise i want the text to be horizontal...already asked here https://stackoverflow.com/questions/44518043/change-the-pattern-of-the-text-in-d3-based-on-number-of-childs i did'nt get proper response so i post this question here...

8 years ago

HTML Pages with CSS and JavaScript

two action in one button click, one after another

thanks for your reply...
i used like this

only the d3 file run and show data.json file not found

8 years ago

HTML Pages with CSS and JavaScript

two action in one button click, one after another

i have four files
*try.html
*index.php // mysql data to json format conversion
*in.html //d3 design
*data.json // json for d3

try.html

i want to do two actions in one button click (one after another)
first index.php should load and write json into the data.json file
second the json file should be used in the in.html

index.php

<?php
$con=mysqli_connect("localhost","root","admin321","php");      
if (mysqli_connect_errno())                
 {
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
 }
$r = mysqli_query($con,"SELECT * FROM phptab");
       $data = array();
       while($row = mysqli_fetch_assoc($r)) {
        $data[] = $row;
        }  
function buildtree($src_arr, $parent_id = 0, $tree = array())
{
   foreach($src_arr as $idx => $row)
   {
       if($row['parent'] == $parent_id)
       {
           foreach($row as $k => $v)
               $tree[$row['id']][$k] = $v;
           unset($src_arr[$idx]);
           $tree[$row['id']]['children'] = buildtree($src_arr, $row['id']);
       }
   }
   ksort($tree);
   return $tree;
}
function insertIntoNestedArray(&$array, $searchItem){
   if($searchItem['parent'] == 0){
       array_push($array, $searchItem);
       return;
   }
   if(empty($array)){ return; }
array_walk($array, function(&$item, $key, $searchItem){
   if($item['id'] == $searchItem['parent']){
           array_push($item['children'], $searchItem);
           return;
       }
       insertIntoNestedArray($item['children'], $searchItem);
}, $searchItem);
}
$nestedArray = array();
foreach($data as $itemData){
   $nestedArrayItem['id'] = $itemData['id'];
   $nestedArrayItem['name'] = $itemData['name'];
$nestedArrayItem['color'] = $itemData['color'];
 $nestedArrayItem['tooltip'] = $itemData['tooltip'];
  $nestedArrayItem['level'] = $itemData['level'];
   $nestedArrayItem['parent'] = $itemData['parent'];
   $nestedArrayItem['children'] = array();
   insertIntoNestedArray($nestedArray, $nestedArrayItem);
}
header('Content-Type: application/json');
header('Content-Type: text/html; charset=utf-8');
$json= json_encode($nestedArray);
$json = substr($json, 1, -1);
file_put_contents('data.json',$json);
?>

in.html

<!DOCTYPE html>
  <html>
    <head>
  <title>Radial Cluster Demo</title>
<script src="//d3js.org/d3.v3.min.js"></script>
 <style>
.node {
   cursor: pointer;
}
.overlay {
   background-color:white;
}
.node circle {
   fill: #fff;
   stroke: steelblue;
   stroke-width: 1.5px;
}
.node text {
    font: sans-serif;
font-size: 80%;
text-align: center;
}
.link {
   fill: none;  
}
.parent{
fill :red;
}
div#tooltip {
   position: absolute;
 font: 15px sans-serif;
   background: orange;
    border-radius: 8px;
padding-left: 5px;
padding-right: 5px;
   pointer-events: none;
}
</style>
   </head>
 <body>
<div id="tooltip" style="display:none"></div>
<div id="tree-container"class="full"></div>
<script type="text/javascript">
var selectedNode = null;
var draggingNode = null;
var panSpeed = 200;
var panBoundary = 0;
var i = 0;
var duration = 750;
var root;
var width = 5000;
var height = 5000;
var diameter = 750;
var tree = d3.layout.tree().size([360, diameter / 2 - 120])
   .separation(function (a, b) {
   return (a.parent == b.parent ? 1 : 5) / a.depth;
});
var diagonal = d3.svg.diagonal.radial()
   .projection(function (d) {
   return [d.y, d.x / 180 * Math.PI];
});
d3.select(self.frameElement).style("height", width);
function sortTree() {
   tree.sort(function (a, b) {
       return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;
   });
}
sortTree();
var baseSvg = d3.select("#tree-container").append("svg")
   .attr("width", width)
   .attr("height", height)
   .attr("class", "overlay")
.attr("transform", "translate(" + 1000 + "," + 1000 + ")");
function expand(d) {
   if (d._children) {
       d.children = d._children;
       d.children.forEach(expand);
       d._children = null;
   }
}
d3.json("data.json", function(error, flare) {
 if (error) throw error;
 root = flare;
 root.x0 = height / 2;
 root.y0 = 0;
function collapse(d) {
   if (d.children) {
       d._children = d.children;
       d._children.forEach(collapse);
       d.children = null;
   }
update(d);
}
flare.children.forEach(collapse);
 update(root);
function toggleChildren(d) {
   if (d.children) {
       d._children = d.children;
       d.children = null;
   } else if (d._children) {
       d.children = d._children;
       d._children = null;
   }
   return d;
}
function click(d) {
if (!d.children)
root.children.forEach(collapse);
 if (d3.event.defaultPrevented) return;
   d = toggleChildren(d);
   update(d);
}
function update(source) {
 
   var levelWidth = [1];
   var childCount = function (level, n) {
       if (n.children && n.children.length > 0) {
           if (levelWidth.length <= level + 1) levelWidth.push(0);
           levelWidth[level + 1] += n.children.length;
           n.children.forEach(function (d) {
               childCount(level + 1, d);
           });
       }
   };
   childCount(0, root);
    var nodes = tree.nodes(root);
   links = tree.links(nodes);
   node = svgGroup.selectAll("g.node")
       .data(nodes, function (d) {
       return d.id || (d.id = ++i);
   });
 var nodeEnter = node.enter().append("g")
       .attr("class", "node")
   .on('click', click)
     nodeEnter.append("circle")
       .attr("class", "smallcircle")
           .style("stroke", function(d) {
     return d.color;
   })
       
   nodeEnter.append("text")
 
   .text(function (d) {
       return d.name;
   })
 
       .style("opacity", 1)
       .style("fill-opacity", 0)
.on("mouseover", function (d) {
           var r = d3.select(this).node().getBoundingClientRect();
          d3.select("div#tooltip")
               .style("display", "inline")
              .style("top", (r.top-25) + "px")
  .style("top", 10 + "px")
.style("left", (d3.event.pageX) + "px")
               .style("top", (d3.event.pageY - 40) + "px")
             .style("left", r.left + 40+"px")
 .style("left",  + "px")
               .style("position", "absolute")
              .text(d.tooltip);
})
   .on("mouseout", function(){
      d3.select("div#tooltip").style("display", "none")
  })
   
   node.select("circle.nodeCircle")
       .attr("r", 4.5)
       .style("fill", function (d) {
       return d._children ? "red" : "#fff";
   });
                           //     });
    var nodeUpdate = node.transition()
       .duration(duration)
       .attr("transform", function (d) {
       return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")rotate(" + (-d.x + 90) + ")";
   });
   nodeUpdate.select("circle")
       .attr("r", 4.5)
       .style("fill", function (d) {
       return d._children ? "lightsteelblue" : "#fff";
   });
   nodeUpdate.select("text")
       .style("fill-opacity", 4)
  .attr("fill",function(d){return (d.children?"red":"black");})
   .attr("stroke-width",function(d){return (d.children?"4":"1");})
.attr("stroke-width",function(d){return (d.children?"4 px":"1 px");})
   .attr("dy", ".35em")
       .attr("text-anchor", function (d) {
       return d.x < 180 ? "start" : "end";
   })
       .attr("transform", function (d) {
       return d.x < 180 ? "translate(8)" : "rotate(360)translate(-8)";
   });
   var nodeExit = node.exit().transition()
       .duration(duration)
       .attr("transform", function (d) {
       return "translate(" + source.x + "," + source.y + ")";
   })
       .remove();
   nodeExit.select("circle")
       .attr("r", 0);
   nodeExit.select("text")
       .style("fill-opacity", 0);
   var link = svgGroup.selectAll("path.link")
       .data(links, function (d) {
       return d.target.id;
   })
link.style("stroke", function(d) {
     return d.color;
   })
   link.enter().insert("path", "g")
       .attr("class", "link")
        link.style("stroke", function(d) {
     return d.target.color;
   })
       .attr("d", function (d) {
       var o = {
           x: source.x0,
           y: source.y0
       };
       return diagonal({
           source: o,
           target: o
       });
   });
 
   link.transition()
       .duration(duration)
       .attr("d", diagonal);
   link.exit().transition()
       .duration(duration)
       .attr("d", function (d) {
       var o = {
           x: source.x,
           y: source.y
       };
       return diagonal({
           source: o,
           target: o
       });
   })
       .remove();
 
   nodes.forEach(function (d) {
       d.x0 = d.x;
       d.y0 = d.y;
   });
}
});
var svgGroup = baseSvg.append("g")
.attr("transform", "translate(" + 550 + "," + 300 + ")")
d3.selectAll("text").style("fill", function (d) { return d3.select(this).classed(d.cond, true); })
</script>
</body>
</html>

in try.html file i tried to do two actions at a time,but onlu the index.php file runs and get the result into data.json..
no action in in.html file..
can anyone tell me where it goes wrong???

8 years ago

Java in General

d3 design based on input without page refresh

also tried with this method,only the url changes,even the testing word itself is not displayed..

8 years ago

Java in General

d3 design based on input without page refresh

i am trying to get the d3 design based on input without page refresh..when i click the submit button ,dfgfggzgfdg is displaying without refresh as i used that words inside the body section in in.html file for testing ..my problem is why it is not taking the d3 script in in.html file..how to get the d3 design in the same page when submit button is clicked???.any suggestions will be helpfull..
here is my code
draw.html

in.html

<!DOCTYPE html>
  <html>
    <head>
  <title>Radial Cluster Demo</title>
<script src="//d3js.org/d3.v3.min.js"></script>

   <style>
.node {
   cursor: pointer;
}
.overlay {
   background-color:white;
}
.node circle {
   fill: #fff;
   stroke: steelblue;
   stroke-width: 1.5px;
}
.node text {
    font: sans-serif;
font-size: 80%;
text-align: center;
}
.link {
   fill: none;  
}
.parent{
fill :red;
}
div#tooltip {
   position: absolute;
 font: 15px sans-serif;
   background: orange;
    border-radius: 8px;
padding-left: 5px;
padding-right: 5px;
   pointer-events: none;
}
</style>
   </head>
 <body>
 dfgfggzgfdg                 //for testing
<div id="tooltip" style="display:none"></div>
<div id="tree-container"class="full"></div>
<script type="text/javascript">
var selectedNode = null;
var draggingNode = null;
var panSpeed = 200;
var panBoundary = 0;
var i = 0;
var duration = 750;
var root;
var width = 5000;
var height = 5000;
var diameter = 750;
var tree = d3.layout.tree().size([360, diameter / 2 - 120])
   .separation(function (a, b) {
   return (a.parent == b.parent ? 1 : 5) / a.depth;
});
var diagonal = d3.svg.diagonal.radial()
   .projection(function (d) {
   return [d.y, d.x / 180 * Math.PI];
});
d3.select(self.frameElement).style("height", width);
function sortTree() {
   tree.sort(function (a, b) {
       return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;
   });
}
sortTree();
var baseSvg = d3.select("#tree-container").append("svg")
   .attr("width", width)
   .attr("height", height)
   .attr("class", "overlay")
.attr("transform", "translate(" + 1000 + "," + 1000 + ")");
function expand(d) {
   if (d._children) {
       d.children = d._children;
       d.children.forEach(expand);
       d._children = null;
   }
}
d3.json("index.php", function(error, flare) {
 if (error) throw error;
 root = flare;
 root.x0 = height / 2;
 root.y0 = 0;
function collapse(d) {
   if (d.children) {
       d._children = d.children;
       d._children.forEach(collapse);
       d.children = null;
   }
update(d);
}
flare.children.forEach(collapse);
 update(root);
function toggleChildren(d) {
   if (d.children) {
       d._children = d.children;
       d.children = null;
   } else if (d._children) {
       d.children = d._children;
       d._children = null;
   }
   return d;
}
function click(d) {
if (!d.children)
root.children.forEach(collapse);
//d.children = d._children;
//    d._children = null;
   if (d3.event.defaultPrevented) return;
   d = toggleChildren(d);
   update(d);
}
function update(source) {
 
   var levelWidth = [1];
   var childCount = function (level, n) {
       if (n.children && n.children.length > 0) {
           if (levelWidth.length <= level + 1) levelWidth.push(0);
           levelWidth[level + 1] += n.children.length;
           n.children.forEach(function (d) {
               childCount(level + 1, d);
           });
       }
   };
   childCount(0, root);
    var nodes = tree.nodes(root);
   links = tree.links(nodes);
   node = svgGroup.selectAll("g.node")
       .data(nodes, function (d) {
       return d.id || (d.id = ++i);
   });
   var nodeEnter = node.enter().append("g")
       .attr("class", "node")
   .on('click', click)
     nodeEnter.append("circle")
       .attr("class", "smallcircle")
           .style("stroke", function(d) {
     return d.color;
   })
       
   nodeEnter.append("text")
 
   .text(function (d) {
       return d.name;
   })
    //   .style("font", "12px serif")
       .style("opacity", 1)
       .style("fill-opacity", 0)
.on("mouseover", function (d) {
           var r = d3.select(this).node().getBoundingClientRect();
          d3.select("div#tooltip")
               .style("display", "inline")
              .style("top", (r.top-25) + "px")
  .style("top", 10 + "px")
.style("left", (d3.event.pageX) + "px")
               .style("top", (d3.event.pageY - 40) + "px")
             .style("left", r.left + 40+"px")
 .style("left",  + "px")
               .style("position", "absolute")
              .text(d.t);
})
   .on("mouseout", function(){
      d3.select("div#tooltip").style("display", "none")
  })
   
   node.select("circle.nodeCircle")
       .attr("r", 4.5)
       .style("fill", function (d) {
       return d._children ? "red" : "#fff";
   });
                           //     });
    var nodeUpdate = node.transition()
       .duration(duration)
       .attr("transform", function (d) {
       return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")rotate(" + (-d.x + 90) + ")";
   });
   nodeUpdate.select("circle")
       .attr("r", 4.5)
       .style("fill", function (d) {
       return d._children ? "lightsteelblue" : "#fff";
   });
   nodeUpdate.select("text")
       .style("fill-opacity", 4)
  .attr("fill",function(d){return (d.children?"red":"black");})
   .attr("stroke-width",function(d){return (d.children?"4":"1");})
.attr("stroke-width",function(d){return (d.children?"4 px":"1 px");})
   .attr("dy", ".35em")
       .attr("text-anchor", function (d) {
       return d.x < 180 ? "start" : "end";
   })
       .attr("transform", function (d) {
       return d.x < 180 ? "translate(8)" : "rotate(360)translate(-8)";
   });
   var nodeExit = node.exit().transition()
       .duration(duration)
       .attr("transform", function (d) {
       return "translate(" + source.x + "," + source.y + ")";
   })
       .remove();
   nodeExit.select("circle")
       .attr("r", 0);
   nodeExit.select("text")
       .style("fill-opacity", 0);
   var link = svgGroup.selectAll("path.link")
       .data(links, function (d) {
       return d.target.id;
   })
link.style("stroke", function(d) {
     return d.color;
   })
   link.enter().insert("path", "g")
       .attr("class", "link")
        link.style("stroke", function(d) {
     return d.target.color;
   })
       .attr("d", function (d) {
       var o = {
           x: source.x0,
           y: source.y0
       };
       return diagonal({
           source: o,
           target: o
       });
   });
 
   link.transition()
       .duration(duration)
       .attr("d", diagonal);
   link.exit().transition()
       .duration(duration)
       .attr("d", function (d) {
       var o = {
           x: source.x,
           y: source.y
       };
       return diagonal({
           source: o,
           target: o
       });
   })
       .remove();
 
   nodes.forEach(function (d) {
       d.x0 = d.x;
       d.y0 = d.y;
   });
}
});
var svgGroup = baseSvg.append("g")
.attr("transform", "translate(" + 550 + "," + 300 + ")")
d3.selectAll("text").style("fill", function (d) { return d3.select(this).classed(d.cond, true); })
 </script>
</body>
</html>

8 years ago

Java in General

get particular rows based on input form from mysql using php

i check like this

shows "name is set"..
don't know where is the error...

8 years ago

JDBC and Relational Databases

get particular rows based on input form from mysql using php

output is SELECT * FROM phpp WHERE value =You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1
where it is wrong

8 years ago

JDBC and Relational Databases