i'm using donut3d.js library (which based on d3.js chart library) (http://bl.ocks.org/npashap/9994181).
i've created javascript event listener listen changes in select option html combo box control. users select option combo box , based on selected option, data 3d pie chart fetched sql server database , chart re-drawn. however, chart not rendering, although when i'm in firebug debug mode, re-drawn. i'm using firefox , firebug debugging. web app using mvc pattern , c# programming language. following code snippets:
in partial view1:
<select id=hucddl></select> in partial view2:
<script> $(document).ready(function(){ //event listener when selection changes $("#hucddl").change(function () { //get huc value var huc; if($("#hucddl").val() != null){ huc = $("#hucddl").val(); }); //call function changedata(); }); function changedata(){ <blockquote>var huc = $("#hucddl").val(); var arr = []; var lulcdata = null; //get data sql server $.ajax({<br/></blockquote> url: "/home/getbaselulcjson/", type: "get", data: {huccode: huc}, datatype: "json", contenttype: "application/json; charset=utf-8", success: function(result){ arr = result; }, error: function(data){ } }) lulcdata = [ { "label": "cropland", "value": arr[0], "color": "#ffb3ba" }, { "label": "forest", "value": arr[1], "color": "#ffdfba" }, { "label": "pasture", "value": arr[2], "color": "#ffffba" }, { "label": "rangeland", "value": arr[3], "color": "#baffc9" }, { "label": "urban", "value": arr[4], "color": "#bae1ff" } ]; //draw 3d pie chart donut3d.draw("blulcpie", getdata(), 90, 50, 90, 40, 30, 0); function getdata(){ <blockquote>return lulcdata.map(function (d) { return { label: d.label, value: +d.value, color: d.color }; }); } }); </script> the changedata() function not firing on selection change.
does know how chart re-draw when data changes?
the data fetched sql server correct.
i'm not sure what's causing chart not re-draw.
solved issue. revised codes follows:
index.cshmtl (main view):
<!--d3.js references--> <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script> <script src="~/myscripts/donut3d.js" type="text/javascript"></script> <div id="blulc"> <label>major landuse</label> @html.partial("~/views/shared/_baselanduse.cshtml") </div> partial view1 (holds select html control):
<select id = "hucddl"></select> partial view2 (contains 3d pie chart) "_baselanduse.cshtml":
<script type="text/javascript"> $(document).ready(function () { //set default array values initial display on page load var def_arr = [0.2, 80.3, 1.9, 16.9, 0.7]; var defdata = [ { "label": "cropland", "value": def_arr[0], "color": "#ffb3ba" }, { "label": "forest", "value": def_arr[1], "color": "#ffdfba" }, { "label": "pasture", "value": def_arr[2], "color": "#ffffba" }, { "label": "rangeland", "value": def_arr[3], "color": "#baffc9" }, { "label": "urban", "value": def_arr[4], "color": "#bae1ff" } ]; //define chart parameters var margin = { top: 0, right: 20, bottom: 0, left: 20 } var width = 180, height = 230 - margin.bottom; var svg = d3.select("#blulc") .append("svg") .attr("width", width) .attr("height", height); svg.append("g") .data([defdata]) .attr("id", "blulcpie"); //draw chart donut3d.draw("blulcpie", defdata, 90, 50, 90, 40, 30, 0); //define legend square size var legendspace = 4; var rectsize = 8; //add legend defdata.foreach(function (d, i) { svg.append("rect") .attr("transform", "translate(0," + * (rectsize + legendspace) + ")") .attr("class", "rect") .attr("width", rectsize) .attr("height", rectsize) .attr("x", 50) //x-axis of rect .attr("y", 130) //y-axis of rect .style("stroke", "#000000") .style("stroke-width", .25) .style("fill", defdata[i].color); svg.append("text") .attr("class", "legend") .attr("x", rectsize + legendspace) .attr("y", (i * legendspace) + (i * rectsize)) .attr("dx", 50) //x-axis of text .attr("dy", 138) //y-axis of text .style("font-size", "10px") .text(defdata[i].label); }); //event listener when huccode changes $("#hucddl").bind("mousedown mouseup", function () { debugger; //get data sql server via controller $.ajax({ url: "/home/getbaselulcjson/", type: "get", data: { huccode: $("#hucddl").val() }, datatype: "json", contenttype: "application/json; charset=utf-8", success: function (result) { arr = result; //alert(arr); }, error: function (data) { //alert(data); } }) var currdata = [ { label: "cropland", value: arr[0], color: "#ffb3ba" }, { label: "forest", value: arr[1], color: "#ffdfba" }, { label: "pasture", value: arr[2], color: "#ffffba" }, { label: "rangeland", value: arr[3], color: "#baffc9" }, { label: "urban", value: arr[4], color: "#bae1ff" } ]; donut3d.transition("blulcpie", currdata, 90, 40, 30, 0); }); }); controller:
[httpget] public jsonresult getbaselulcjson(string huccode) { //returns single row, selected columns var lulcbase = (from f in db.fractionslulcs f.huccode == huccode select new { f.cropland, f.forest, f.pasture, f.range, f.urban }).singleordefault(); //convert percentage double?[] lulc = new double?[5]; lulc[0] = math.round(convert.todouble(lulcbase.cropland) * 100, 1); lulc[1] = math.round(convert.todouble(lulcbase.forest) * 100, 1); lulc[2] = math.round(convert.todouble(lulcbase.pasture) * 100, 1); lulc[3] = math.round(convert.todouble(lulcbase.range) * 100, 1); lulc[4] = math.round(convert.todouble(lulcbase.urban) * 100, 1); return json(lulc, jsonrequestbehavior.allowget); } 
Comments
Post a Comment