Created
April 24, 2012 08:39
-
-
Save frendhisaido/2477952 to your computer and use it in GitHub Desktop.
update data yang diambil dari mysql
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Bar Chart</title> | |
| <script type="http://mbostock.github.com/d3/d3.js?2.1.3"></script> | |
| <script type="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var m = [30, 5, 5, 5], | |
| w = 375 - m[1] - m[3], | |
| h = 260 - m[0] - m[2]; | |
| var format = d3.format(",.0f"); | |
| var x = d3.scale.linear().range([0, w]).domain([0, 25000]), | |
| y = d3.scale.ordinal().rangeRoundBands([0, h], .1), | |
| z = d3.scale.ordinal().domain(["negatif","positif","netral"]).range(["red","green","blue"]), | |
| o = d3.scale.ordinal().range(["NEGATIF","POSITIF","NETRAL"]); | |
| var xAxis = d3.svg.axis().scale(x).orient("top").ticks(5); | |
| var svg = d3.select("#bar").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("http://danaro.web.id/vis/expr/data/barchartjson.php", function(data) { | |
| //console.log(data); | |
| // Parse numbers, and sort by value. | |
| data.forEach(function(d) { d.jumlah = +d.jumlah; }); | |
| data.sort(function(a, b) { return b.jumlah - a.jumlah; }); | |
| console.log(data); | |
| // Set the scale domain. | |
| //x.domain([0, d3.sum(data, function(d) { return d.jumlah; })]); | |
| y.domain(data.map(function(d) { return d.orientasi; })); | |
| o.domain(data.map(function(d) { return d.orientasi; })); | |
| var bar = svg.selectAll("g.bar") | |
| .data(data) | |
| .enter().append("g") | |
| .attr("class", "bar") | |
| .attr("transform", function(d) { return "translate(0," + y(d.orientasi) + ")"; }); | |
| bar.append("rect") | |
| .attr("width", w) | |
| .attr("height", y.rangeBand()) | |
| .style("fill", "#C9C9C9"); | |
| bar.append("text") | |
| .attr("class", "value") | |
| .attr("x", 0) | |
| .attr("y", y.rangeBand() / 6) | |
| .attr("dx", 4) | |
| .attr("dy", ".35em") | |
| .attr("font-size", 12) | |
| .attr("text-anchor", "start") | |
| .text(function(d,i) { return o(i) }) | |
| .transition() | |
| .delay(100) | |
| .duration(1000) | |
| .attr("x", function(d) { return x(d.jumlah); }); | |
| bar.append("rect") | |
| .attr("id", "activebar") | |
| .style("stroke","black") | |
| .attr("width", 0) | |
| .attr("height", y.rangeBand()) | |
| .transition() | |
| .delay(100) | |
| .duration(1000) | |
| .attr("width", function(d) { return x(d.jumlah); }) | |
| .style("fill-opacity", 0.8) | |
| .style("fill", function(d) { return z(d.orientasi);}); | |
| bar.append("text") | |
| .attr("class", "value") | |
| .attr("id", "jumlahtiap") | |
| .attr("x", 0) | |
| .attr("y", y.rangeBand() - 10) | |
| .attr("dx", 4) | |
| .attr("dy", ".35em") | |
| .attr("font-size", 12) | |
| .attr("text-anchor", "start") | |
| .text(function(d) { return format(d.jumlah); }) | |
| .transition() | |
| .delay(100) | |
| .duration(1000) | |
| .attr("x", function(d) { return x(d.jumlah); }); | |
| svg.append("text") | |
| .attr("class", "value") | |
| .attr("id","teksjumlah") | |
| .attr("x", "98%") | |
| .attr("y", "78%") | |
| .transition() | |
| .delay(100) | |
| .duration(1000) | |
| .attr("dx", -3) | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", "end") | |
| .style("font", "24pt Helvetica") | |
| .style("text-shadow", "3px 3px 3px rgba(0,0,0,.4)") | |
| .text(d3.sum(data, function(d) { return d.jumlah; })); | |
| svg.append("g") | |
| .attr("class", "xaxis") | |
| .call(xAxis); | |
| }); | |
| function makebar(date1, date2) { | |
| var barchartjson = "http://danaro.web.id/vis/expr/data/barchartjson.php?df="+date1+"&dl="+date2; | |
| d3.json(barchartjson , function(data) { | |
| // Parse numbers, and sort by value. | |
| data.forEach(function(d) { d.jumlah = +d.jumlah; }); | |
| data.sort(function(a, b) { return b.jumlah - a.jumlah; }); | |
| // Set the scale domain. | |
| var xa = d3.scale.linear().range([0, w]).domain([0, d3.sum(data, function(d) { return d.jumlah; })]); | |
| //y.domain(data.map(function(d) { return d.orientasi; })); | |
| //o.domain(data.map(function(d) { return d.orientasi; })); | |
| //z.domain(["negatif","positif","netral"]); | |
| console.log(d3.sum(data, function(d) { return d.jumlah; })); | |
| console.log(data); | |
| var updatebar = svg.selectAll("#activebar"); | |
| var updateteksjumlah = svg.selectAll("#teksjumlah"); | |
| var updatejumlahtiap = svg.selectAll("#jumlahtiap"); | |
| updatejumlahtiap.transition().duration(1000) | |
| .attr("x", function(d) { return x(d.jumlah); }) | |
| .text(function(d) { return format(d.jumlah); }) | |
| updateteksjumlah.transition().duration(500) | |
| .text(d3.sum(data, function(d) { console.log("Teks Jumlah"+ d.jumlah); | |
| return parseInt(d.jumlah); })); | |
| updatebar.transition().duration(1000) | |
| .attr("width", function(d) { console.log("updt width"+ xa(d.jumlah)); | |
| return xa(d.jumlah); }); | |
| }); | |
| } | |
| </script> | |
| <div id="bar"></div> | |
| <select id="dates1"></select> | |
| <select id="dates2"></select> | |
| <button id="set">SET</button> | |
| <script type="text/javascript"> | |
| //init(); | |
| $.getJSON("http://danaro.web.id/vis/expr/data/datelist.php", function(result) { | |
| var opt1 = $("#dates1"), | |
| opt2 = $("#dates2"); | |
| $.each(result, function() { | |
| opt1.append($("<option />").val(this.date).text(this.date)); | |
| opt2.append($("<option />").val(this.date).text(this.date)); | |
| }); | |
| }); | |
| $("#set").click(function() { | |
| var date1 = $("#dates1 option:selected").val(); | |
| var date2 = $("#dates2 option:selected").val(); | |
| makebar(date1, date2); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment