ngrinder的二次开发

最近在做ngrinder的二次开发，遇到一个自己纠结了好久的问题，现在记录下给自己以后做个提醒。
遇到的一个问题是自己钻牛角尖，走到了一个死胡同，非要用js实现一个动态创建的功能，纠结了两天。

需求：实现运行测试的实时监控，并绘制成表格，如下图

代码实现思路：
freemaker 结合js脚本动态实现该功能

    function getRunningDataAndDraw(num) {
        var samplingAjax = new AjaxObj("/perftest/{testId}/api/sample");
        samplingAjax.params = {
            testId: ${(test.id!0)?c}
        };
        samplingAjax.success = function (data) {
            if (data.status == "TESTING") {
                curPerf = data.perf;
                curAgentStat = data.agent;
                curMonitorStat = data.monitor;
                if (curPerf !== undefined) {
                    tpsQueue.enQueue(curPerf.tpsChartData);
                    tpsChart.plot();
                }
                if (curMonitorStat !== undefined) {
                    $.each(curMonitorStat, function (name, value) {
                <#assign z = 1>
                <@list list_items = test.targetHosts?split(",") ; host >
                    <@list list_items = host?split(":") ; host1 >
                        <#if host1?index_of("1")!=-1>
                            if(name == '${host1}'){
                                n${z}.enQueue(value.cpuUsedPercentage);
                            }
                            if(${z} == num){
                                c${z}.plot();
                            }
                            <#assign z = z+1>
                        </#if>
                    </@list>
                </@list>
                    }
                    );
                }
            }
        };