Return d3 object for handlebar helper function
<p>I am trying to return a d3 object from a handlebar.js helper function so that I can use the chart generated from the function in the template.
Here is my script:-</p>

<pre><code>&lt;style&gt;
#name {
    color: black;
    float: left;
    width: 34%;
}

#group {
    color: red;
    float: left;
    width: 33%;
}


.barChart div {
    font: 10px sans-serif;
    text-align: right;
    padding: 5px;
    margin: 1px;
    color: white;
    width: 50%;
}


#chart {
    width: 350px;
    padding: 10px;
}

#footer {
    color: blue;
    clear: both;
    text-align: center;
    padding: 5px;
}

#bodyStats {
    color: black;
    clear: both;
    text-align: center;
    padding: 5px;
}

#header {
    background-color: white;
    color: white;
    text-align: center;
    padding: 10px;
}
&lt;/style&gt;
&lt;div id="test"&gt;&lt;/div&gt;
&lt;script id="template" type="text/x-handlebars-template"&gt; 
{{#each this}}

&lt;div id="header"&gt;
        &lt;div id="wave" style="color: #000FFF; font-size: 28px"&gt;Wave&lt;/div&gt;
        &lt;div id="name" style="color: #000000; font-size: 28px"&gt;{{name}}&lt;/div&gt;
        &lt;div id="group" style="color: #000000; font-size: 28px"&gt;{{groupName}}&lt;/div&gt;
 &lt;/div&gt;

&lt;div id="table"&gt;
    &lt;table&gt;
    &lt;tr&gt;

        &lt;td&gt;&lt;div class="barChart"&gt;{{recommendedBarChart}}&lt;/div&gt;&lt;/td&gt;

    &lt;/tr&gt;
    &lt;tr&gt;

        &lt;td&gt;&lt;div id="chart"&gt;{{foods}}&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;div id="footer"&gt;
    Questions? Contact us 
&lt;/div&gt;
{{/each}}
&lt;/script&gt;
&lt;script src="//d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
&lt;script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"&gt;&lt;/script&gt;
&lt;script&gt;

 $(document).ready(function (){

     Handlebars.registerHelper("foods", function() {
        return recommendedFoods(); 
     });
     function recommendedFoods() {
            var w = 50;
            var h = 50;
            var r = h / 2;
            d3.select("#chart").append("text").attr("text-anchor", "middle").style(
                    "font-size", "28px").style("text-decoration", "bold").text(
                    "Recommended");
            var color = d3.scale.ordinal().range(
                    [ "#ffe5ff", "#ffeee5", "#d0743c", "#ff8c00" ]);
            //GPVF
            var data = [ {
                "label" : "8",
                "value" : 25
            }, {
                "label" : "3",
                "value" : 25
            }, {
                "label" : "6",
                "value" : 25
            }, {
                "label" : "2",
                "value" : 25
            } ];

            var vis = d3.select('#chart').append("svg:svg").data([ data ]).attr(
                    "width", w).attr("height", h).append("svg:g").attr("transform",
                    "translate(" + r + "," + r + ")");
            var pie = d3.layout.pie().value(function(d) {
                return d.value;
            });

            // declare an arc generator function
            var arc = d3.svg.arc().outerRadius(r);

            // select paths, use arc generator to draw
            var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g")
                    .attr("class", "slice");

            arcs.append("svg:path").attr("fill", function(d, i) {
                return color(i);
                // return color(d.data.value)
            }).attr("d", function(d) {
                return arc(d);
            }).attr('stroke', '#fff') // &lt;-- THIS
            .attr('stroke-width', '3');

            // add the text
            arcs.append("svg:text").attr("transform", function(d) {
                d.innerRadius = 0;
                d.outerRadius = r;
                return "translate(" + arc.centroid(d) + ")";
            }).attr("text-anchor", "middle").text(function(d, i) {
                return data[i].label;
            });
        }
     Handlebars.registerHelper("recommendedBarChart", function() {
            return recommendedBarChart();
     });
            function recommendedBarChart() {

                var data = [ {
                    "label" : "You ",
                    "value" : 60
                }, {
                    "label" : " Recommended",
                    "value" : 60
                }, {
                    "label" : "Peers",
                    "value" : 40
                } ];
                var color = d3.scale.ordinal().range(
                        [ "#8BA870", "#000000", "#FF8040", "#ff8c00" ]);

                var x = d3.scale.linear().domain([ 0, 1000 ]).range([ 0, 1000 ]);
                var height = 20;

                d3.select(".barChart").append("text").attr("x", (100 / 2)).attr("y",
                        0 - (50 / 2)).attr("text-anchor", "middle").style("font-size",
                        "28px").style("text-decoration", "bold").text(
                        "MODERATE/VIGOROUS INTENSITY (MIN/DAY)");

                 d3.select(".barChart").selectAll("div").data(data).enter()
                        .append("div").style("width", "1px").style("height",
                                height * 2 + "px").style("padding-top", "0.1px").style(
                                "padding", "0.1px").style("background-color", "black")

                        .append("div").style({
                            stroke : "black",
                            "stroke-width" : "2px"
                        }).style("height", function(d) {
                            return height + "px";
                        }).style("font-size", "20px").style("margin-top", "10px")
                        .style("text-align", "left").style("width", function(d) {
                            return (d.value + 100) + "px";
                        }).style("background-color", function(d, i) {
                            return color(i);
                        }).text(function(d, i) {
                            return data[i].label;
                        }).append("p").style("margin-top", function(d) {
                            return -height - 5 + "px";
                        }).style("margin-left", function(d) {
                            return (d.value + 100) + 10 + "px";
                        })

                        .style("color", "black").text(function(d) {
                            return d.value
                        });
            }

     var source = $("#template").html();
     var template = Handlebars.compile(source);
       var string = [{"groupName":"Default Group","name":"Dummy"},{"groupName":"New","name":"Becker"}];

    var ht = template(string);
    $("#test").html(ht);


});
&lt;/script&gt;
</code></pre>

<p>Can anyone please help me with what to return from the two javascript methods so that they can be displayed using the template?</p>