Skip to content

Instantly share code, notes, and snippets.

@frendhisaido

frendhisaido/barchart.html

Created April 24, 2012 08:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save frendhisaido/2477952 to your computer and use it in GitHub Desktop.
Save frendhisaido/2477952 to your computer and use it in GitHub Desktop.
Download ZIP
update data yang diambil dari mysql
Raw
barchart.html
<!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