Rendering same template multiple time on one page using jsreport

Question

I am using jsreport to draw charts using templates, on client side I am using angularjs to call jsreports templates via API I have the following template in jsreport.

Template

 <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.css" rel="stylesheet"> <div id="district-bar-chart"></div> <div id="tehsil-bar-chart"></div> <div id="chart-bar-ucPopulation"></div> <script> var data = {{#toJSON this}}{{/toJSON}} // console.log(data) var mylable = data.x var ndx = crossfilter(data.data); // var mycustomlabel = crossfilter(data.x) var test =0; var districtDim = ndx.dimension(function(d) { return d[mylable]; }); var districtcount = districtDim.group().reduceCount(); // var districts = districtcount.all(); // for(var i=0; i<districts.length;i++){ // console.log(districts[i]); // } // var minDistPop=0; // var maxDistPop=0; // var districtPopulation = districtDim.group().reduceSum(function(d){return Number(d["Target Population (IDIMS)"]);}); // var distPop = districtPopulation.all(); // for(var j=0; j<distPop.length;j++){ // console.log(distPop[j]); // if(maxDistPop<Number(distPop[j].value)){ // maxDistPop = Number(distPop[j].value); // } // if(maxDistPop>Number(distPop[j].value)){ // minDistPop = Number(distPop[j].value); // } // } // console.log(minDistPop); // console.log(maxDistPop); var distBarChart = dc.barChart('#district-bar-chart'); distBarChart.width(500) .height(300) .gap(20) .dimension(districtDim) .group(districtcount) .yAxisLabel(".",50) .x(d3.scale.ordinal().domain(districtDim)) .xUnits(dc.units.ordinal) // .y(d3.scale.linear().domain([0,maxDistPop+50000])) .elasticY(true) .renderHorizontalGridLines(true) .renderTitle(true) .brushOn(true); dc.renderAll(); </script> 

DATA

 { "x" : "tableName", "data": [{"apiLength":8330,"columnsMigrated":8330,"id":0,"url":"http://58.65.177.12/api_who/api/get_alllocation/5468XE2LN6CzR7qRG041/","tableName":"tmp_alllocations","error":"null","description":"tmp_alllocationsupdated in 11.601seconds with 8330 rows","lastMigration":"Thu Mar 10 2016 20:00:37 GMT+0500 (Pakistan Standard Time)","timeTakenSec":"11.601"},{"apiLength":8330,"columnsMigrated":8330,"id":0,"url":"http://58.65.177.12/api_who/api/get_alllocation/5468XE2LN6CzR7qRG041/","tableName":"tmp_alllocations","error":"null","description":"tmp_alllocationsupdated in 11.276seconds with 8330 rows","lastMigration":"Thu Mar 10 2016 20:02:26 GMT+0500 (Pakistan Standard Time)","timeTakenSec":"11.276"},{"apiLength":8330,"columnsMigrated":8330,"id":0,"url":"http://58.65.177.12/api_who/api/get_alllocation/5468XE2LN6CzR7qRG041/","tableName":"tmp_alllocations","error":"null","description":"tmp_alllocationsupdated in 10.032seconds with 8330 rows","lastMigration":"Thu Mar 10 2016 20:04:10 GMT+0500 (Pakistan Standard Time)","timeTakenSec":"10.032"},{"apiLength":8330,"columnsMigrated":8330,"id":0,"url":"http://58.65.177.12/api_who/api/get_alllocation/5468XE2LN6CzR7qRG041/","tableName":"tmp_alllocations","error":"null","description":"tmp_alllocationsupdated in 15.128seconds with 8330 rows","lastMigration":"Thu Mar 10 2016 20:06:15 GMT+0500 (Pakistan Standard Time)","timeTakenSec":"15.128"}] } 

helper

 function toJSON(data) { console.log(JSON.stringify(data)) return JSON.stringify(data); } 

In AngularJS controller my code is

 $scope.dcharts = [] $scope.deliberatelyTrustDangerousSnippet= function (remoteHTML) { // $scope.dcharts.push($sce.trustAsHtml(remoteHTML).typeof) return $sce.trustAsHtml(remoteHTML); } $scope.drawgraph = function (data, templateID) { var settings = { "async": true, "crossDomain": true, // "responseType":'arraybuffer', //for pdf "url": "http://localhost:3001/api/report", "method": "POST", "headers": { "content-type": "application/json", "cache-control": "no-cache" }, "processData": false, "data": { "template": { "shortid": templateID, "recipe": 'html' }, // "data": data, "options": { "reports": { "save": false } } } } $http(settings).then(function (responce) { $scope.graphtml = responce.data $scope.dcharts.push($scope.graphtml) }) } //drawgraph() $scope.drawgraph(mygraphdata, "4JfXr7BZZ") $scope.drawgraph(mygraphdata, "4JfXr7BZZ") 

 <div class="row"> <div ng-repeat="mychart in dcharts" class="col-md-4" ng-bind-html="deliberatelyTrustDangerousSnippet(mychart)"></div> </div> 

But the result show only one chart

Answer 1

This way you put two chart divs with the same id into the html document and d3 chart then paints just the first one.

One solution is to write the report html into the iframe. The second is to make the div id unique.

The second solution is pretty simple

template content:

<div id={{randomOnce}} /></div>

<script>
    document.getElementById('{{randomOnce}}').innerHTML = 'yes it works'
</script>

template helper:

function randomOnce() {
  return number     
}
var number = new Date().getTime()

Playground example online here