Dynamically Setting Bar Graph Values From A Xml Source

I got some great help parsing some RSS into a menu yesterday using jQuery Parse RSS feed with JS, and inspired by this I would like to use something similar to control some chart b

Solution 1:

Ok, so I figured that jQuery was not going to give me what I needed, so I turned to plain JS loading the XML with

functionloadXMLDoc(filename)
{
if (window.XMLHttpRequest)
  {
  xhttp=newXMLHttpRequest();
  }
else// code for IE5 and IE6
  {
  xhttp=newActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}

I then use the code in my HTML as:

<script>// Which test no should be loadedvar testNo =1;

    //Load the XML
    xmlDoc=loadXMLDoc("testscores.xml");

    //Extract the highest score for picture
    tsp=xmlDoc.getElementsByTagName("topscorePicture")[0];
    topspvalue= tsp.childNodes[0];

    //Extract highest score for features
    tsf=xmlDoc.getElementsByTagName("topscoreFeature")[0];
    topsfvalue= tsf.childNodes[0];

    //Extract highest score for UI
    tsui=xmlDoc.getElementsByTagName("topscoreUI")[0];
    topsuivalue= tsui.childNodes[0];

    //Extract  picture score for the specific test no.
    sp=xmlDoc.getElementsByTagName("scorePicture")[testNo];
    spvalue=sp.childNodes[0];

    //Extract Feature score for the specific test no.
    sf=xmlDoc.getElementsByTagName("scoreFeature")[testNo];
    sfvalue=sf.childNodes[0];

    //Extract UI score for the specific test no.
    sui=xmlDoc.getElementsByTagName("scoreUI")[testNo];
    suivalue=sui.childNodes[0];

    //Calculate current scores
    scorePicture =Math.round(Number(spvalue.nodeValue)/Number(topspvalue.nodeValue)*100);
    scoreFeature =Math.round(Number(sfvalue.nodeValue)/Number(topsfvalue.nodeValue)*100);
    scoreUI =Math.round(Number(suivalue.nodeValue)/Number(topsuivalue.nodeValue)*100);
    scoreTotal =Math.round(0.5*scorePicture +0.25*scoreFeature +0.25*scoreUI);

    //Construct HTMLHTMLchunkStart="<div style=\"float: Right; text-align: right; width: 40px; font-weight: 500; padding-left: 20px; color: #666;\"><i class=\"fa fa-picture-o\"></i></div><div class=\"progress\" style=\"background-color:#E2E2E2\">";
    pictureBar ="<div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\""+Number(spvalue.nodeValue)+"\" aria-valuemin=\"0\" aria-valuemax=\""+Number(topspvalue.nodeValue)+"\" style=\"width:"+ scorePicture+"%"+";\">"+scorePicture+"%</div>";
    HTMLchunk1="</div> <div style=\"float: Right; text-align: right; width: 40px; font-weight: 500; padding-left: 20px; color: #666;\"><i class=\"fa fa-cogs\"></i></div><div class=\"progress\" style=\"background-color:#E2E2E2\">";
    featureBar ="<div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\""+Number(sfvalue.nodeValue)+"\" aria-valuemin=\"0\" aria-valuemax=\""+Number(topsfvalue.nodeValue)+"\" style=\"width:"+ scoreFeature+"%"+";\">"+scoreFeature+"%</div>";
    HTMLchunk2=" </div><div style=\"float: Right; text-align: right; width: 40px; font-weight: 500; padding-left: 20px; color: #666;\"><i class=\"fa fa-user\"></i></div><div class=\"progress\" style=\"background-color:#E2E2E2\">";
    UIbar="<div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\""+Number(suivalue.nodeValue)+"\" aria-valuemin=\"0\" aria-valuemax=\""+Number(topsuivalue.nodeValue)+"\" style=\"width:"+ scoreUI+"%"+";\">"+scoreUI+"%</div>";
    HTMLchunk3="</div> <div style=\"padding-top: 3px;float: Right; text-align: right; width: 40px; font-weight: 500; padding-left: 20px; color: #666;\"><i class=\"fa fa-star\"></i></div><div class=\"progress progress-lg\" style=\"background-color:#E2E2E2;height: 30px;\">"; 
    totalBar ="<div class=\"progress-bar progress-bar-info\" role=\"progressbar\" aria-valuenow=\""+scoreTotal+"\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:"+ scoreTotal+"%"+";padding-top: 4px;\">"+scoreTotal+"%</div>";

    //Write the HTML
    document.write(HTMLchunkStart+ pictureBar +HTMLchunk1+featureBar+HTMLchunk2+UIbar+HTMLchunk3+totalBar);
</script>

Currently I put this directly in my HTML, but I would like to put it in a separate file and simply call the code by e.g.

<script>showScore(1)</script>

To get the second entry in the XML. I am so close, but I would like a push in the right direction on how to make my code into a function that can accept a single input, which would be used as the "testNo" variable and then return all the HTML-code I have in my document.write at the end.

I also realise that my JS might not be the most efficient nor pretty, so any advice regarding clean-up is also welcome.

Another feature that comes to mind, would be the possibility to change the color of the bars according to the score. The current "progress-bar" class is just plain blue, but I could append another class to only change the colour. In my mind this would be possible by creating some classes for colours and then dependent on the % score the appropriate colour class would be added to the HTML code. If someone has an idea on how to do this I would also appreciate some input. Would I use a switch to pick the class names from an array or what?

Solution 2:

Alright... talking a bit to myself here, but in the spirit of telling the entire story to anyone who might venture in here in the future, the current piece of code now uses a switch to set the HTML color for each of the four bars and the code is then inserted using the code described above, tossed into a function that is invoked using

<script>showScore(reveiwNo);</script>

inside my HTML. It works pretty well. I would like to link to the final code, but it is being used on our working templates for our new website, so I would rather keep them to myself until the site goes live - and I am not trying to advertise either.