jquery - d3 bar chart not rendering inside a partial view -
i trying render bar chart inside partial view in asp.net mvc application. when put code in html
, put in project(not in view or folder, in root folder) , run html in browser, works fine. put html code in partial view , try render it, not render. following code
<script type="text/javascript" src="~/scripts/jquery-1.11.2.js"></script> <style> .bar { fill: steelblue; } .bar:hover { fill: brown; } .axis { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispedges; } .x.axis path { display: none; } </style> <body> <script src="~/scripts/d3.js"></script> <script> var margin = { top: 20, right: 20, bottom: 30, left: 40 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scale.ordinal() .rangeroundbands([0, width], .1); var y = d3.scale.linear() .range([height, 0]); var xaxis = d3.svg.axis() .scale(x) .orient("bottom"); var yaxis = d3.svg.axis() .scale(y) .orient("left") .ticks(10, "%"); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); $.ajax({ url: 'http://localhost/abcd.portal/dashboard/getdata', type: 'get', data: '', cache: false, datatype: 'text', async: true, error: function (xhr) { //alert('error: ' + xhr.statustext); }, success: function (result) { result = eval(json.parse(result)); alert(result); x.domain(result.map(function (d) { return d.letter; })); y.domain([0, d3.max(result, function (d) { return d.frequency; })]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xaxis); svg.append("g") .attr("class", "y axis") .call(yaxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("frequency"); svg.selectall(".bar") .data(result) .enter().append("rect") .attr("class", "bar") .attr("x", function (d) { return x(d.letter); }) .attr("width", x.rangeband()) .attr("y", function (d) { return y(d.frequency); }) .attr("height", function (d) { return height - y(d.frequency); }); } }); function type(d) { d.frequency = +d.frequency; return d; } </script> </body>
plus keep getting warning
synchronous xmlhttprequest on main thread deprecated because of detrimental effects end user's experience. more help, check http://xhr.spec.whatwg.org/.
please help.
Comments
Post a Comment