blob42
/
nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix for Bar/Pie chart not showing updated data...

Browse Source
master-patched
Nathanael Anderson 12 years ago
parent a37fa26fb6
commit 61313ade5d
6 changed files with 201 additions and 141 deletions
Show Stats Download Patch File Download Diff File

65
examples/bar.html
Unescape Escape View File

@ -28,7 +28,7 @@ text {
},
{
label: "Two is also very long",
y: null
y: 2
},
{
label: "Three",
@ -48,6 +48,34 @@ text {
}
];
var testdata2 = [
{
label: "One is a very long",
y: 1
},
{
label: "Two is also very long",
y: 12
},
{
label: "Three",
y: -9
},
{
label: "Four",
y: 4
},
{
label: "Five",
y: 6
}
];
var td = 0;
var a = (Math.random()*10)+1;
if (a > 5) td = 1;
//Format A
nv.addGraph({
generate: function() {
@ -63,11 +91,19 @@ nv.addGraph({
.title("This is a sample chart title")
;
d3.select("#test1")
.attr('width', width)
.attr('height', height)
.datum(testdata)
.call(chart);
if (td === 0) {
d3.select("#test1")
.attr('width', width)
.attr('height', height)
.datum(testdata)
.call(chart);
} else {
d3.select("#test1")
.attr('width', width)
.attr('height', height)
.datum(testdata2)
.call(chart);
}
return chart;
},
@ -98,6 +134,23 @@ nv.addGraph({
console.log("Chart Click",e);
});
graph.dispatch.on('chartClick', function(e) {
console.log('Click Switching to');
if (td === 0) {
d3.select("#test1")
.datum(testdata2)
.call(graph);
td = 1;
} else {
d3.select("#test1")
.datum(testdata)
.call(graph);
td = 0;
}
});
window.onresize = function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;

56
examples/pie.html
Unescape Escape View File

@ -48,7 +48,35 @@ text {
}
];
//Format A
var testdata2 = [
{
label: "One",
y: 10
},
{
label: "Two",
y: 5
},
{
label: "Three",
y: 3
},
{
label: "Four",
y: 7
},
{
label: "Five",
y: 2
}
];
var td = 0;
var a = (Math.random()*10)+1;
if (a > 5) td = 1;
//Format A
nv.addGraph({
generate: function() {
var width = nv.utils.windowSize().width - 40,
@ -62,11 +90,19 @@ nv.addGraph({
.title('Hi this is the chart title')
;
if (td === 0) {
d3.select("#test1")
.attr('width', width)
.attr('height', height)
.datum(testdata)
.call(chart);
} else {
d3.select("#test1")
.attr('width', width)
.attr('height', height)
.datum(testdata2)
.call(chart);
}
@ -91,9 +127,25 @@ nv.addGraph({
nv.tooltip.cleanup();
});
graph.dispatch.on('chartClick', function(e) {
console.log('Click Switching to');
if (td === 0) {
d3.select("#test1")
.datum(testdata2)
.call(graph);
td = 1;
} else {
d3.select("#test1")
.datum(testdata)
.call(graph);
td = 0;
}
});
graph.dispatch.on('elementClick', function(e) { console.log("Clicked on Element",e); });
graph.dispatch.on('elementDblClick', function(e) { console.log("Double Clicked on Element",e); });
graph.dispatch.on('chartClick', function(e) { console.log("Clicked on chart",e); });
//graph.dispatch.on('chartClick', function(e) { console.log("Clicked on chart",e); });
window.onresize = function() {
var width = nv.utils.windowSize().width - 40,

109
nv.d3.js
Unescape Escape View File

@ -275,6 +275,7 @@ nv.models.bar = function() {
x .domain(data.map(function(d,i) { return d[label]; }))
.rangeRoundBands([0, width - margin.left - margin.right], .1);
var min = d3.min(data, function(d) { return d[field] });
var max = d3.max(data, function(d) { return d[field] });
var x0 = Math.max(-min, max);
@ -301,7 +302,6 @@ nv.models.bar = function() {
});
var wrap = parent.selectAll('g.wrap').data([data]);
var gEnter = wrap.enter();
gEnter.append("text")
@ -326,12 +326,15 @@ nv.models.bar = function() {
var bars = wrap.select('.bars').selectAll('.bar')
.data(function(d) { return d });
.data(function(d) { return d; });
bars.exit().remove();
bars.exit().remove();
var barsEnter = bars.enter().append('g')
.attr("class", function(d, i) { return d[field] < 0 ? "bar negative" : "bar positive"; })
var barsEnter = bars.enter().append('svg:rect')
.attr('class', function(d) { return d[field] < 0 ? "bar negative" : "bar positive"})
.attr("fill", function(d, i) { return color(i); })
.attr('x', 0 )
.on('mouseover', function(d,i){
d3.select(this).classed('hover', true);
dispatch.tooltipShow({
@ -368,9 +371,9 @@ nv.models.bar = function() {
})
.on('dblclick', function(d,i) {
dispatch.elementDblClick({
label: d.data[label],
value: d.data[field],
data: d.data,
label: d[label],
value: d[field],
data: d,
index: i,
pos: d3.event,
id: id
@ -379,36 +382,16 @@ nv.models.bar = function() {
});
barsEnter.append('rect')
.attr('y', function(d) { return y(0); })
.attr("fill", function(d, i) { return color(i); });
barsEnter.append('text')
.attr('text-anchor', 'middle')
.attr('dy', '-4px');
bars
.attr('transform', function(d,i) { return 'translate(' + x(d[label]) + ',0)'; });
bars.selectAll('rect')
.order()
bars
.attr('class', function(d) { return d[field] < 0 ? "bar negative" : "bar positive"})
.attr('transform', function(d,i) { return 'translate(' + x(d[label]) + ',0)'; })
.attr('width', x.rangeBand )
.order()
.transition()
.duration(animate)
.attr('x', 0 )
.attr('y', function(d) { return y(Math.max(0, d[field])) })
.attr('height', function(d) { return Math.abs(y(d[field]) - y(0)); });
// function(d) { return y.range()[0] - y(d[field]) });
.attr('y', function(d) { return y(Math.max(0, d[field])); })
.attr('height', function(d) { return Math.abs(y(d[field]) - y(0)); });
/* if (hasLabel) {
bars.selectAll('text')
.attr('x', 0 )
.attr('y', function(d) { return y(d[field]) })
.attr('dx', x.rangeBand() / 2)
.text(function(d) { return d[field] });
} */
g.select('.x.axis')
.attr('transform', 'translate(0,' + y.range()[0] + ')')
@ -1814,16 +1797,7 @@ nv.models.pie = function() {
if (donut) arc.innerRadius(radius / 2);
// TODO: figure a better way to remove old chart on a redraw
if (lastWidth != width || lastHeight != height) {
background.select('.pie').selectAll(".slice").remove();
lastWidth = width;
lastHeight = height;
}
// Setup the Pie chart and choose the data element
// Setup the Pie chart and choose the data element
var pie = d3.layout.pie()
.value(function (d) { return d[field]; });
@ -1832,8 +1806,6 @@ nv.models.pie = function() {
slices.exit().remove();
var ae = slices.enter().append("svg:g")
.attr("class", "slice")
.on('mouseover', function(d,i){
@ -1881,24 +1853,34 @@ nv.models.pie = function() {
d3.event.stopPropagation();
});
var paths = ae.append("svg:path")
.attr('class','path')
.attr("fill", function(d, i) { return color(i); });
//.attr('d', arc);
var paths = ae.append("svg:path")
.attr("fill", function(d, i) { return color(i); })
.attr('d', arc);
slices.select('.path')
.attr('d', arc)
.transition()
.ease("bounce")
.duration(animate)
.attrTween("d", tweenPie);
if (showLabels) {
// This does the normal label
ae.append("text")
.attr("transform", function(d) {
d.outerRadius = radius + 10; // Set Outer Coordinate
d.innerRadius = radius + 15; // Set Inner Coordinate
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle") //center the text on it's origin
.style("font", "bold 12px Arial")
//.attr("fill", function(d, i) { return color(i); })
.text(function(d, i) { return d.data[label]; });
// This does the normal label
ae.append("text");
slices.select("text")
.transition()
.duration(animate)
.ease('bounce')
.attr("transform", function(d) {
d.outerRadius = radius + 10; // Set Outer Coordinate
d.innerRadius = radius + 15; // Set Inner Coordinate
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle") //center the text on it's origin
.style("font", "bold 12px Arial")
.text(function(d, i) { return d.data[label]; });
}
@ -1908,11 +1890,6 @@ nv.models.pie = function() {
return a > 90 ? a - 180 : a;
}
// Animation
paths.transition()
.ease("bounce")
.duration(animate)
.attrTween("d", tweenPie);

1
src/d3.css
Unescape Escape View File

@ -21,6 +21,7 @@
background-color: rgba(255,255,255,1);
padding: 10px;
border: 1px solid #ddd;
z-index: 10000;
font-family: Arial;
font-size: 13px;

53
src/models/bar.js
Unescape Escape View File

@ -24,6 +24,7 @@ nv.models.bar = function() {
x .domain(data.map(function(d,i) { return d[label]; }))
.rangeRoundBands([0, width - margin.left - margin.right], .1);
var min = d3.min(data, function(d) { return d[field] });
var max = d3.max(data, function(d) { return d[field] });
var x0 = Math.max(-min, max);
@ -50,8 +51,7 @@ nv.models.bar = function() {
});
var wrap = parent.selectAll('g.wrap').data([data]);
var wrap = parent.selectAll('g.wrap').data([data]);
var gEnter = wrap.enter();
gEnter.append("text")
.attr("class", "title")
@ -75,12 +75,15 @@ nv.models.bar = function() {
var bars = wrap.select('.bars').selectAll('.bar')
.data(function(d) { return d });
.data(function(d) { return d; });
bars.exit().remove();
bars.exit().remove();
var barsEnter = bars.enter().append('g')
.attr("class", function(d, i) { return d[field] < 0 ? "bar negative" : "bar positive"; })
var barsEnter = bars.enter().append('svg:rect')
.attr('class', function(d) { return d[field] < 0 ? "bar negative" : "bar positive"})
.attr("fill", function(d, i) { return color(i); })
.attr('x', 0 )
.on('mouseover', function(d,i){
d3.select(this).classed('hover', true);
dispatch.tooltipShow({
@ -117,9 +120,9 @@ nv.models.bar = function() {
})
.on('dblclick', function(d,i) {
dispatch.elementDblClick({
label: d.data[label],
value: d.data[field],
data: d.data,
label: d[label],
value: d[field],
data: d,
index: i,
pos: d3.event,
id: id
@ -128,36 +131,16 @@ nv.models.bar = function() {
});
barsEnter.append('rect')
.attr('y', function(d) { return y(0); })
.attr("fill", function(d, i) { return color(i); });
barsEnter.append('text')
.attr('text-anchor', 'middle')
.attr('dy', '-4px');
bars
.attr('transform', function(d,i) { return 'translate(' + x(d[label]) + ',0)'; });
bars.selectAll('rect')
.order()
bars
.attr('class', function(d) { return d[field] < 0 ? "bar negative" : "bar positive"})
.attr('transform', function(d,i) { return 'translate(' + x(d[label]) + ',0)'; })
.attr('width', x.rangeBand )
.order()
.transition()
.duration(animate)
.attr('x', 0 )
.attr('y', function(d) { return y(Math.max(0, d[field])) })
.attr('height', function(d) { return Math.abs(y(d[field]) - y(0)); });
// function(d) { return y.range()[0] - y(d[field]) });
.attr('y', function(d) { return y(Math.max(0, d[field])); })
.attr('height', function(d) { return Math.abs(y(d[field]) - y(0)); });
/* if (hasLabel) {
bars.selectAll('text')
.attr('x', 0 )
.attr('y', function(d) { return y(d[field]) })
.attr('dx', x.rangeBand() / 2)
.text(function(d) { return d[field] });
} */
g.select('.x.axis')
.attr('transform', 'translate(0,' + y.range()[0] + ')')

58
src/models/pie.js
Unescape Escape View File

@ -74,16 +74,7 @@ nv.models.pie = function() {
if (donut) arc.innerRadius(radius / 2);
// TODO: figure a better way to remove old chart on a redraw
if (lastWidth != width || lastHeight != height) {
background.select('.pie').selectAll(".slice").remove();
lastWidth = width;
lastHeight = height;
}
// Setup the Pie chart and choose the data element
// Setup the Pie chart and choose the data element
var pie = d3.layout.pie()
.value(function (d) { return d[field]; });
@ -92,8 +83,6 @@ nv.models.pie = function() {
slices.exit().remove();
var ae = slices.enter().append("svg:g")
.attr("class", "slice")
.on('mouseover', function(d,i){
@ -141,24 +130,34 @@ nv.models.pie = function() {
d3.event.stopPropagation();
});
var paths = ae.append("svg:path")
.attr('class','path')
.attr("fill", function(d, i) { return color(i); });
//.attr('d', arc);
var paths = ae.append("svg:path")
.attr("fill", function(d, i) { return color(i); })
.attr('d', arc);
slices.select('.path')
.attr('d', arc)
.transition()
.ease("bounce")
.duration(animate)
.attrTween("d", tweenPie);
if (showLabels) {
// This does the normal label
ae.append("text")
.attr("transform", function(d) {
d.outerRadius = radius + 10; // Set Outer Coordinate
d.innerRadius = radius + 15; // Set Inner Coordinate
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle") //center the text on it's origin
.style("font", "bold 12px Arial")
//.attr("fill", function(d, i) { return color(i); })
.text(function(d, i) { return d.data[label]; });
// This does the normal label
ae.append("text");
slices.select("text")
.transition()
.duration(animate)
.ease('bounce')
.attr("transform", function(d) {
d.outerRadius = radius + 10; // Set Outer Coordinate
d.innerRadius = radius + 15; // Set Inner Coordinate
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle") //center the text on it's origin
.style("font", "bold 12px Arial")
.text(function(d, i) { return d.data[label]; });
}
@ -168,11 +167,6 @@ nv.models.pie = function() {
return a > 90 ? a - 180 : a;
}
// Animation
paths.transition()
.ease("bounce")
.duration(animate)
.attrTween("d", tweenPie);

Write Preview
Loading…
Cancel
Save