I am currently working with a JSON data file that contains values and displays them on the screen alongside a CSS property width. However, I do not want the output to be the actual numerical data; instead, I aim to connect the JSON file so that the value sets the width of the bar. Here's the jQuery code snippet I'm using:
$(document).ready(function(){
var MAX_WIDTH = 100; // Define max bar width in Pixels here
$.getJSON("js/json/sidekicks.json", function(obj){
$.each(obj.Sidekicks, function(key, value){
var color = 'rgb(' + ((value.Score / 100) * 255) + ', #de0001, 10';
var width = (value.Score / 33) * MAX_WIDTH;
$('div#' + value.Id).find('span.red_line_fill').text(value.Score).css("background-color", color).width(width);
});
});
});
Below is an image illustrating what I am aiming for. The objective is to remove the displayed value "20" from the screen.
Is there any way to indicate the leader by displaying the label "1st" in the image?