SpatZan SpatZan - 1 month ago 7
Javascript Question

Javascript/Jquiry width of a graph

I'm currently having trouble making my horizontal bar graph width. the current problem is that i don't know how my "" and '' should be placed so that the obj.sightingCount can be used as a width in the buildGraph function.

css:

div.bar {
display: inline-block;
text-align: right;
padding-right: 5px;
background-color: blue;
}
div.year {
display: inline-block;
}


jQuiry/javascript

$.ajax({
url: "api/UFOSightings",
method: "GET",
timeout: 10000,
success: buildGraph,
error: myError
});


function myError(data) {
}

function buildGraph(data) {
$.each(data, function (index, obj) {
$('#graph').append('<div><div class="year">' + obj.sightingYear + '</div><div class="bar" style= width: "obj.sightingCount%;" >' + obj.sightingCount + '</div></div>');
})}

Answer

I think this might work for you

function buildGraph(data) {
    $.each(data, function (index, obj) {
        $('#graph').append('<div><div class="year">' + obj.sightingYear + '</div><div class="bar" style="width:'+ obj.sightingCount + '%;" >' + obj.sightingCount + '</div></div>');
    });
}