Question

I’m currently displaying a circle graph in a project I’m working on. I’m wanting to update the circle chart by changing the image URL that is displayed, there are 100 unique images each representing one percentage point on the chart. The URLs are set up in such a fashion img/circleGraph/circleG-12.png the number (in this case 12) being the percentage complete that the graph is showing. In JavaScript /jQuery how could I alter the URL that is displayed dynamically, based on a percentage I’m returned from the database?

This is a .Net MVC application that I’m working on, so the percentage complete is returning back to me in a Razor variable as a decimal. I know I would have to multiply this variable by 100 in order to convert to a whole number and then set that as part of the URL, but am unsure on how to approach it.

Answer 1

$("img").attr("src", "/img/circleGraph/circleG-" + Math.Round(number*100) + fileExtension);

where number is the number you are returned from the DB and fileExtension is the file extension of the image file (.jpg, .png, etc…) – thanks @Shmiddty for the reminder!