Voortgangsbalk

Status
Niet open voor verdere reacties.
S

sjorzz

Gebruiker
Lid geworden
25 aug 2010
Berichten
24
Goedemorgen,

Voor een schoolopdracht moet ik een web applicatie maken die data uit een database visueel weer geeft.

Ik moet een status balk maken die enerzijds naar links uit kan slaan op het moment dat de gegevens positief zijn. En anderzijds naar rechts uit slaat zodra de gegevens negatief zijn.

Zou iemand mij kunnen vertellen of überhaupt mogelijk is en zo ja zou iemand mij op weg kunnen helpen.

Groeten,
Sjors
 
Wat een heerlijk heldere vraag weer.

Wanneer zijn volgens jou gegevens positief en wanneer zijn ze positief ?
Wat wil je in de database bewaren ?
Is het mogelijk dat je helft van de gegevens positief en en de nadere helft negatief ?
 
het is uiteindelijk de bedoeling dat de database gevuld wordt met informatie vanuit social media (in eerste instantie alleen twitter). Door bepaalde berekeningen (waar ik geen beeld van heb en voor mij gedaan wordt) wordt er bepaald of een bericht positief of negatief is. De balk zal 0 zijn op het moment dat positief en negatief evenveel is. Zodra er meer positieve berichten zijn zal hij naar links uit slaan. Zijn er meer negatieve berichten slaat hij uit naar rechts.

Hoe ik het voor me zie;

Stel er zijn 27% meer positieve dan negatieve berichten, dan gaat de balk 27% naar rechts (totaal van 100% rechts en 100% links dus)
Is het aantal negatieve berichten 27% meer dan het aantal positieve dan slaat de balk 27% uit naar links.

ik hoop dat het zo iets duidelijker is.
 
Dat lijkt toch niet ontzettend lastig? je maakt gewoon een div element, geeft deze een achtergrondkleurje. en verplaatst deze naar links, en verhoogt de breedte bij meer positief, en houd deze in het midden, en verhoogt de width voor negatieve gegevens. Maak je gebruik van jquery?

bijvoorbeelt
HTML: 
<div class="progress-bar">
   <div class="progress-bar-box">
      <div class="progress-bar-bar"></div>
   </div>
</div>

Code: 
<style>
.progress-bar-box{
   height: 50px;
   width: 300px;
   background: #AAAAAA;
}

.progress-bar-bar{
   height: 50px;
   width: 0px;
   background: #FFFFFF;
}
</style>

Code: 
var resultaat = -50,
      width = 0;
      

$(document).ready(function(){
   width = $(".progress-bar-box").width();
   if(resultaat < 0)
   {
      var margin = width / 2 / 100 * (resultaat + 100);
      var barWidth = width / 2 - margin;
      $(".progress-bar-bar").css({'margin-left': margin, 'width': barWidth})
   }
   else
   {
      var margin = width / 2 - margin;
      var barWidth = width / 2 / 100 * (resultaat + 100);
      $(".progress-bar-bar").css({'margin-left': margin, 'width': barWidth})
   }
});

als resultaat -100 zou zijn, dan is de balk helemaal naar links gevuld, als die 100 zou zijn helemaal naar rechts.
 
Laatst bewerkt:
Je zou het ook met php, iedere andere taal kunnen doen, maar als je die gegevens met ajax calls ophaalt lijkt dit me makkelijker.
 
waarschijnlijk is het inderdaad niet zo lastig als je wat ervaring hebt, maar ik ben nog niet zo lang bezig met javascript.

Jquery ben ik nog niet mee begonnen, maar wil ik zodra ik javascript goed onder de knie heb wel gaan leren
 
Get gaat meer om de css dan om de javascript, eh? En het is meer zo, als je javascript onder de knie hebt, dan ken je jquery al. Jquery maakt het schrijven van javascriptapplicaties alleen een stuk eenvoudiger.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan