html - Diagram som table - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #14808 @ 19.03.09 15:19

Hej Udviklere

Først og fremmest må jeg heller understrege at dette er min første post på denne side, og ydermere at jeg er ret grøn hvad angår kodning!

Jeg er pt i praktik hos Aalborg kommune hvor vi er igang med at udarbejde en ny hjemmeside.

På den gamle webside har vi nogle organisationsdiagrammer, som pt er formateret som billeder, hvilket er ret uhensigtsmæssigt pga søgning osv.
Aalborg Kommune organisationsdiagram

Derfor har jeg undersøgt hvilke muligheder der er, og kom i den forbindelse forbi mthøjgaard's side. MT Højgaard diagram
Her har man lavet diagrammerne som en tabel!

Resultatet ser ganske nydeligt ud, og vil helt sikkert være tilstrækkeligt rent æstetisk. Men jeg er bange for at det bliver en tricky affære at vedligeholde diagrammerne.

Jeg har forsøgt at lave en kopi til vores formål for at få lidt styr på hvordan man gør.
Mit eget diagram

Mit spørgsmål til jer er nu følgende:

1. Kan jeg lave mine diagramtabeller på en måde så det er super nemt for en nybegynder (endnu ringere end mig!!) at opdatere og vedligeholde diagrammerne? Fx noget software?

2. Er det en totalt tåbelig løsning jeg har valgt til at lave vores diagrammer? - Hvad er alternativerne - java, flash?? Ingen broer er endnu brændte!

Kort sagt: Jeg har de hersens diagrammer - De skal præsenteres pæne, smarte og søgbare og ydermere skal diagrammerne være nemme at vedligeholde? Hvordan ville DU gøre?

<3
Anders

Indlæg senest redigeret d. 19.03.2009 15:21 af Bruger #14808

5 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 1 karma

Sorter efter stemmer Sorter efter dato

Bruger #11386 @ 19.03.09 21:08

503

Hvis de skal være nemme og vedligeholde er det mest optimale en database hvor du har et form for hierarki med dine diagrammer.

Problemet er så nok bare at det vil være svært for dig da det lader til du kun har styr på HTML/CSS

Bruger #5620 @ 19.03.09 22:21

1.500

Umiddelbart ville min første ide være at gemme dine diagrammer i et eller andet xml format,

Kode

<gruppe navn="Byrådet Margistraten">
  <gruppe navn="Borgmester Forvaltning"/>
  <gruppe navn="Familie- og beskæftigelsesforvaltningen"/>
  <gruppe navn="Ældre- og Handicapforvaltningen"/>
  etc...
</gruppe>

Så lave html udfra det gennem javascript, du skal selvfølgelig stadig have de der billeder der jo nogen måske der ikke har javascript.

Rent teorestisk burde du kunne gemme alle diagrammerne i en enkelt stor xml fil, så lave et ny diagram når en gruppe i diagrammet vælges.

Min anden ide er at det vil være svært at lave så det altid passede, man kunne i stedet lave et tool der lod en lave HTML diagrammer noget i retning af:

Kode

<html>
<head>
<style>
#chart{
  position:relative;
  width:500px;
  border:1px dotted black;
  height:400px;
}
#diag{
  position:relative;
  width:500px;
  height:400px;
}
.box{
  position:absolute;
  text-align:center;
  vertical-align:middle; 
  padding:2px 2px 3px 5px; 
  margin:0; 
  background-color:rgb(132,154,181); 
  color:rgb(255,255,255);
  border:1px solid rgb(132,154,181);
}
.vert{
  position:absolute;
  border-left:1px solid black;
}
.hoz{
  position:absolute;
  border-top:1px solid black;
}

</style>
<script>
function newBox(e){
  var reply=prompt("Box Title", "");
  var div=document.createElement("div");
  div.setAttribute("class","box");
  div.innerHTML=reply;
  div.style.left=e.layerX;
  div.style.top=e.layerY;
  document.getElementById("chart").appendChild(div);
}
from=null;
function newLine(e){
  if(from==null){
    from=new Array(e.layerX,e.layerY);
  }else{
    var x=Math.abs(from[0]-e.layerX);
    var y=Math.abs(from[1]-e.layerY);
    var div=document.createElement("div");
    if(from[0]<e.layerX){
      div.style.left=from[0];
    }else{
      div.style.left=e.layerX;
    }
    if(from[1]<e.layerY){
      div.style.top=from[1];
    }else{
      div.style.top=e.layerY;
    }
    if(x<y){
      div.setAttribute("class","vert");
      div.style.height=y;
    }else{
      div.setAttribute("class","hoz");
      div.style.width=x;
    }
    //div.innerHTML="T";
    document.getElementById("chart").appendChild(div);
    from=null;
  }
}
function fixE(e){	
	if (typeof e == 'undefined') e = window.event;
	if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
	if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
	return e;
}
function clickedChart(e){	
  e=fixE(e);
  switch(make){
    case 1:newBox(e);break;
    case 2:newLine(e);break;
  }
  document.getElementById("code").innerHTML=document.getElementById("chart").innerHTML;
}

var make=1;
function NewLines(){
  document.getElementById("newLine").disabled=true;
  document.getElementById("newBox").disabled=false;
  make=2;
}
function NewBoxes(){
  document.getElementById("newLine").disabled=false;
  document.getElementById("newBox").disabled=true;
  make=1;
}
</script>
</head>
<body>
<div id="chart" onclick="clickedChart(event);">
 
</div>
<button id="newBox"  onclick="NewBoxes()"disabled>New Box</button>
<button id="newLine" onclick="NewLines()">New Line</button>
<textarea id="code">
</textarea>
<div id="diag" >
  <div style="left: 156px; top: 114px;" class="box">Test</div><div class="vert" style="left: 169px; top: 142px; height: 63px;"></div>
</div>
</body>

Indlæg senest redigeret d. 20.03.2009 00:40 af Bruger #5620

Bruger #14808 @ 20.03.09 15:21

Jeg har bestemt forestillet mig at koble diagrammerne til en database.

Problem ift vedligeholdelse er ikke så meget selve indholdet - altså navn på medarbejdere og afdelinger osv. Det vil kunne klares via ændringer i en database. Nej mit problem er i forhold til strukturen. Hvordan gør jeg det nemt at vedligeholde, hvis fx et nyt kontor oprettes. Altså - problemet er i forhold til diagrammernes udseende!

Lad mig omformulere opgaven en smule.

Hvordan gør man således at en uerfaren IT bruger kan oprette diagrammer som skal kunne hente information i en database og som skal kunne vises på en hjemmeside?

Bruger #14808 @ 22.03.09 03:16

Det er en rimelig fræk løsning du er ved at have udviklet dér. Jeg har prøvet at teste den, men er ikke sikker på at jeg har fået den til at virke optimalt. Dog kan jeg godt se ideen. Frækt!

Gider du ved lejlighed prøve at uploade den på dit eget site og sende mig en besked, så jeg kan se den mere funktionel? Måske jeg endda kan fremtvinge en skilling, hvis den kommer til at virke efter hensigten.

Indlæg senest redigeret d. 22.03.2009 03:18 af Bruger #14808

Bruger #5620 @ 28.03.09 11:15

1.500

En lidt forbedret udgave af mit forslag:
http://donp.the-hive.dk/Homepage/index.php?pid=diagram

Diagram som table

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler