javascript - html doesnt render in partial view -
following code using render html view. @{ layout = null; }
<script type="text/javascript"> $(document).ready(function () { debugger; $("#divchart").load('http://localhost/abcd.portal/barchart.html'); }); </script> <div style="width: 100%;" id="divchart"></div>
html trying load
<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> debugger; 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) { debugger; result = eval(json.parse(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>
i no errors view not rendering. trying render d3 bar chart. suggestion going wrong.
i have parent loads partial view. if write html code inside partial view gives error. so, tried loading html file instead.
this not way load partial view using jquery, use action it.
create action return partial view:
public actionresult barchart() { return view(); }
and in jquery :
$(document).ready(function () { debugger; $("#divchart").load('@url.action("barchart","controllername")'); });
Comments
Post a Comment