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 bars on a website.
Some background:
We are aiming to use a floating score in our upcoming tech reviews on a webpage, meaning that you assign a product an absolute score (lets say 67) and then the maximum score would be able to move as new and better products hit the market. This way you would still be able to read a review from last year and use the score for something meaningful, as the score of 67 is now measured against this years max-score. Hope it makes sense.
Anyhow, our CMS only permits javascript to be embedded in news entries, so I can't store our review scores in SQL or use php, and I was thinking of using XML instead (not optimal, but it should work). Each review would then contain a certain number of results including the beforementioned final score (and some intermediate sub-scores as well). I need to be able to insert a piece of JS code that extracts the scores for a specific review from the XML file and inserts the HTML code needed to draw the bars.
I have a JSfiddle set up, that contains the XML, it has the chart (hardcoded though), and using the jQuery code from my previous question I can sort of extract the results, but the code loops through all the XML and I don't really have a clue how to pick out the specific review number I need nor how to get things measured against the max-score, so it just prints everything right now and calculates a score based on a max-score of 100. I haven't tied the values to my chart yet, so the test version just prints the results in a ul/li.
So basically I need some sort of code that I can invoke from my HTML that goes along the lines of
ShowScores(testno)
that would write everything inside the first
<div class="row">..</row>
containing the bars, where the %-width of the bars would be calculated as the score assigned divided by the maxscore:
- Each item has 3 assigned scores: scorePicture, scoreFeature, scoreUI, and 1 calculated total score (weighted average)
- A global max score exists for each of the 3 scores: topscorePicture, topscoreFeature, topscoreUI
As I suck at JS, I have spent 5 hours getting to this point, and I have no clue how to make things load from e.g. a testscore.xml file instead and then extract what I need with jQuery - and I probably also need some help making my HTML load the script i.e. how to invoke it afterwards. The documentation on jQuery is concerned with loading all content in the XML and not just a specific node?
All help is appreciated.
My own thoughts on some pseudo code would be a script that, when envoked from my HTML document would do something like
function(reviewNo)
var max1 = load maxscore1 from XML
var max2 = load maxscore2 from XML
var max3 = load maxscore3 from XML
var score1 = load assignedscore1 for reviewNo from XML
var score2 = load assignedscore2 for reviewNo from XML
var score3 = load assignedscore2 for reviewNo from XML
Calculate % width of bar 1, bar 2 and bar 3 and save as variables as math.round()
write HTML DIV code and subsitute the width of the bars with the calculated values from above
