Databases
StackOverflow2013
Postsdbo
POD3.js update bar chart from json
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POD3.js update bar chart from json
    text
    copied!<p>I'm working on a bar chart using d3.js, the bar shoud be able correspond to a new json data. </p> <pre><code>var m = [30, 5, 5, 5], w = 375 - m[1] - m[3], h = 260 - m[0] - m[2]; var format = d3.format(",.0f"); var wdthnew = d3.scale.linear().range([0, w]), wdth = d3.scale.linear().range([0, w]).domain([0, 25000]), hght = d3.scale.ordinal().rangeRoundBands([0, h], .1); var svg = d3.select("body").append("svg") .attr("width", w + m[1] + m[3]) .attr("height", h + m[0] + m[2]) .append("g") .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); d3.json("barchartjson.php", function(data) { data.sort(function(a, b) { return b.value - a.value; }); hght.domain(data.map(function(d) { return d.orientation; })); var bar = svg.selectAll("g.bar") .data(data) .enter().append("g") .attr("class", "bar") .attr("transform", function(d) { return "translate(0," + hght(d.orientation) + ")"; }); bar.append("rect") .attr("id", "activebar") .attr("width", 0) .attr("height", hght.rangeBand()) .transition() .delay(100) .duration(1000) .attr("width", function(d) { return wdth(d.value); }); }); function makebar(date1, date2) { var barchartjson = "barchartjson.php?df="+date1+"&amp;dl="+date2; d3.json(barchartjson , function(datanew) { datanew.sort(function(a, b) { return b.jumlah - a.jumlah; }); wdthnew.domain([0, d3.sum(datanew, function(d) { return d.value; })]); console.log("SUM datanew: "+ d3.sum(datanew, function(d) { return d.value; })); console.log("Array datanew: "); console.log(datanew); var updatebar = svg.selectAll("#activebar"); updatebar.transition().duration(1000) .attr("width", function(a) { console.log("update width: wdthnew("+a.value+") = "+wdthnew(a.value)); return wdthnew(a.value); }); }); } </code></pre> <p>Here is the json from barchartjson.php used at the first time:</p> <pre><code>[{"orientation":"negatif","value":"15964"},{"orientation":"netral","value":"2788"},{"orientation":"positif","value":"9701"}] </code></pre> <p>The bar is showing properly for the first time. <strong>The problem is when makebar() is called, updating the bar width with the new json data. Each bar width is updated, but in some case they are out of range.</strong> Here is the output from console.log :</p> <pre><code>SUM datanew: 2520 Array datanew: [Object value: "1411" orientation: "negatif" __proto__: Object , Object value: "846" orientation: "positif" __proto__: Object , Object value: "263" orientation: "netral" __proto__: Object ] update width: wdthnew(15964) = 2312.246031746032 update width: wdthnew(9701) = 1405.1051587301588 update width: wdthnew(2788) = 403.81746031746036 </code></pre> <p>a new json successfully called , but the log showing that wdthnew is keep scaling the old json.</p> <pre><code> updatebar.transition().duration(1000) .attr("width", function(a) { console.log("update width: wdthnew("+a.value+") = "+wdthnew(a.value)); return wdthnew(a.value); }); </code></pre> <p>resulting:</p> <pre><code>update width: wdthnew(15964) = 2312.246031746032 </code></pre> <p>despite 15694 is from the old json, the wdthnew(d.value) is actually return a value from wdthnew(1411) wich is 2312 and it is out of range..</p> <p>Can someone help me solve this problem? Or point out where I'm doing wrong? I'm new to d3.js and javascript. I'm sorry for the bad grammar. English is not my native language. </p> <p>jsFiddle here: <a href="http://jsfiddle.net/saido/5mREA/" rel="nofollow">http://jsfiddle.net/saido/5mREA/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload