Rendering issue of two nvd3 charts on same page.
312 views
Skip to first unread message
rizwa...@gmail.com
May 12, 2016, 6:10:07 AM5/12/16
to jsreport
I am using jsReport to show charts on client side using 'html' Recipe, on front-end i am using angularjs and render output of jsrport with angular app using ng-bind-html. It works perfectly but when I call same template with different data it overrides the previous graph. I think the issue is in template where because the id is same for both rendered graph so it over-rides.
The Question is: How I can resolve this issue dynamically for multiple graphs using same template.
My full Template code is here
<div id="chart"> <svg></svg></div>The Question is: How I can resolve this issue dynamically for multiple graphs using same template.
My full Template code is here
<script src="http://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/nvd3/1.8.3/nv.d3.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.3/nv.d3.min.css"/>
<body>
<style>
#chart svg {
height: 400px;
}
</style>
<div id="chart">
<svg></svg>
</div>
<script>
var data = {{#toJSON this}}{{/toJSON}}
nv.addGraph(function(c) {
var xaxis = function(d,a) { return d.lable}
var chart = nv.models.discreteBarChart()
.x(xaxis) //Specify the data accessors.
.y(function(d) { return d.value })
;
chart.margin().left = 120
chart.margin().bottom = 120
chart.rotateLabels(-45);
d3.select('#chart svg')
.datum(data)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
</script>
</body>
///and helper is here
function toJSON(data) { return JSON.stringify(data);}
//data is here
[{ "key": "Cumulative Return", "values": [ { "lable" : "A lable" , "value" : -29.765957771107 } , { "lable" : "B lable" , "value" : 0 } ...... ]}]
Jan Blaha
May 12, 2016, 12:43:33 PM5/12/16
to jsreport
I answered on stack overflow
Please don't cross post your questions next time. I do monitor stackoverflow, gg as well as github. It won't speed up the answer if you put the question everywhere.
Reply all
Reply to author
Forward
0 new messages