create svg with jquery

from http://stackoverflow.com/questions/13732326/jquery-created-svg-rect-doesnt-appear

by DOK_UA

HTML

<svg id="chart" class="chart" width=420 height=120 style="display: block;"><rect y="0" width="40" height="20"></rect> <!--added to test-->
</svg>

JavaScript

jQuery("h1").append(" and jQuery!");

var data = [2, 2, 2, 2, 2, 2];
var $chart = jQuery("#chart");
jQuery.each(data, function(index, value) {
    var $bar = $(document.createElementNS("http://www.w3.org/2000/svg", "rect")).attr({
        x: 0,
        y: index * 20,
        width: value * 10,
        height: 20
    });
    $chart.append($bar);
    
    $bar.attr({fill: "gray", stroke: "white"});

});