Adding svg element using jquery append

Question

I am trying to create a graph using svg element and then appending a rect element for each bar of the graph in a loop.

How do I pass the "moveBar" variable into the .append statement to adjust the width attribute of the rect element?

 $(document).ready(function () { var ulEmployees = $('#ulEmployees'); var moveBar = 0; $('#btn').click(function () { $.ajax('api/AnnualPowerInterruptions', { dataType: 'json', success: function (data) { ulEmployees.empty(); $('#graphData2').append("<svg id=mySVG class='chart' width='500' height='500'></div>"); $.each(data, function (index, val) { var name = val.year; ulEmployees.append('<li>' + name + '</li>'); $('#mySVG').append("<g transform='translate (100, 0)'><rect width=moveBar 'height='40' style='fill:red'> </rect> <text x='-50' y='30' fill='red'> blue </text></g>"); window.alert(moveBar); moveBar = moveBar + 50; }); $("#graphData2").html($("#graphData2").html()) } }); });

 <div id="graphData2"> </div>

Answer 1

You can use Template literals to assign variable value to your rect tag like this:

 $(document).ready(function() { var ulEmployees = $("#ulEmployees"); var moveBar = 0; $("#btn").click(function() { $.ajax("api/AnnualPowerInterruptions", { dataType: "json", success: function(data) { ulEmployees.empty(); $("#graphData2").append( "<svg id=mySVG class='chart' width='500' height='500'></div>" ); $.each(data, function(index, val) { var name = val.year; ulEmployees.append("<li>" + name + "</li>"); $("#mySVG").append( `<g transform='translate (100, 0)'><rect width=${moveBar} 'height='40' style='fill:red'> </rect> <text x='-50' y='30' fill='red'> blue </text></g>` ); window.alert(moveBar); moveBar = moveBar + 50; }); $("#graphData2").html($("#graphData2").html()); } }); }); });

 <div id="graphData2"> </div>