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

Adding state management to most charts

Browse Source
This commit is contained in:
Bob Monteverde 2012-12-28 00:05:37 -05:00
parent 8d7553d734
commit 6213a74e3b
16 changed files with 221 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/lineChart.html
View File

@ -51,8 +51,10 @@ svg {
// Wrapping in nv.addGraph allows for '0 timeout render', stors rendered charts in nv.graphs, and may do more in the future... it's NOT required
var chart;
nv.addGraph(function() {
var chart = nv.models.lineChart();
chart = nv.models.lineChart();
chart
.x(function(d,i) { return i })
@ -75,6 +77,8 @@ nv.addGraph(function() {
nv.utils.windowResize(chart.update);
//nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});

9
examples/linePlusBarChart.html
View File

@ -60,7 +60,7 @@ var testdata = [
return series;
});
/*
//For testing single data point
var testdata = [
{
@ -76,11 +76,12 @@ var testdata = [
series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
return series;
});
*/
var chart;
nv.addGraph(function() {
var chart = nv.models.linePlusBarChart()
chart = nv.models.linePlusBarChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
.x(function(d,i) { return i })
.color(d3.scale.category10().range());
@ -105,6 +106,8 @@ nv.addGraph(function() {
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});

6
examples/multiBarChart.html
View File

@ -52,9 +52,9 @@ var test_data = stream_layers(3,10+Math.random()*100,.1).map(function(data, i) {
});
var chart;
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart = nv.models.multiBarChart();
chart.xAxis
.showMaxMin(true)
@ -69,6 +69,8 @@ nv.addGraph(function() {
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});

6
examples/multiBarHorizontalChart.html
View File

@ -136,9 +136,9 @@ long_short_data = [
];
var chart;
nv.addGraph(function() {
var chart = nv.models.multiBarHorizontalChart()
chart = nv.models.multiBarHorizontalChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.margin({top: 30, right: 20, bottom: 50, left: 175})
@ -156,6 +156,8 @@ nv.addGraph(function() {
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});

6
examples/pieChart.html
View File

@ -59,12 +59,12 @@ text {
var chart;
nv.addGraph(function() {
var width = 500,
height = 500;
var chart = nv.models.pieChart()
chart = nv.models.pieChart()
.x(function(d) { return d.key })
.y(function(d) { return d.y })
//.showLabels(false)
@ -80,6 +80,8 @@ nv.addGraph(function() {
.attr('height', height)
.call(chart);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});

5
examples/scatterChart.html
View File

@ -61,8 +61,9 @@ div {
//Format A
var chart;
nv.addGraph(function() {
var chart = nv.models.scatterChart()
chart = nv.models.scatterChart()
.showDistX(true)
.showDistY(true)
//.height(500)
@ -79,6 +80,8 @@ nv.addGraph(function() {
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});

5
examples/scatterPlusLineChart.html
View File

@ -61,8 +61,9 @@ div {
//Format A
var chart;
nv.addGraph(function() {
var chart = nv.models.scatterPlusLineChart()
chart = nv.models.scatterPlusLineChart()
.showDistX(true)
.showDistY(true)
//.height(500)
@ -78,6 +79,8 @@ nv.addGraph(function() {
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});

5
examples/stackedAreaChart.html
View File

@ -190,8 +190,9 @@ var histcatexpshort = [
var colors = d3.scale.category20();
keyColor = function(d, i) {return colors(d.key)};
var chart;
nv.addGraph(function() {
var chart = nv.models.stackedAreaChart()
chart = nv.models.stackedAreaChart()
.x(function(d) { return d[0] })
.y(function(d) { return d[1] })
.color(keyColor)
@ -211,6 +212,8 @@ nv.addGraph(function() {
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});

20
src/models/lineChart.js
View File

@ -24,8 +24,9 @@ nv.models.lineChart = function() {
}
, x
, y
, state = {}
, noData = 'No Data Available.'
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
;
xAxis
@ -216,6 +217,9 @@ nv.models.lineChart = function() {
});
}
state.disabled = data.map(function(d) { return !!d.disabled });
dispatch.stateChange(state);
selection.transition().call(chart);
});
@ -235,6 +239,20 @@ nv.models.lineChart = function() {
if (tooltips) showTooltip(e, that.parentNode);
});
dispatch.on('changeState', function(e) {
if (typeof e.disabled !== 'undefined') {
data.forEach(function(series,i) {
series.disabled = e.disabled[i];
});
state.disabled = e.disabled;
}
selection.call(chart);
});
//============================================================
});

38
src/models/linePlusBarChart.js
View File

@ -29,7 +29,7 @@ nv.models.linePlusBarChart = function() {
, y1
, y2
, noData = "No Data Available."
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
;
bars
@ -58,15 +58,17 @@ nv.models.linePlusBarChart = function() {
// Private Variables
//------------------------------------------------------------
var showTooltip = function(e, offsetElement) {
var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
top = e.pos[1] + ( offsetElement.offsetTop || 0),
x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)),
y = (e.series.bar ? y1Axis : y2Axis).tickFormat()(lines.y()(e.point, e.pointIndex)),
content = tooltip(e.series.key, x, y, e, chart);
var state = {},
showTooltip = function(e, offsetElement) {
var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
top = e.pos[1] + ( offsetElement.offsetTop || 0),
x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)),
y = (e.series.bar ? y1Axis : y2Axis).tickFormat()(lines.y()(e.point, e.pointIndex)),
content = tooltip(e.series.key, x, y, e, chart);
nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's', null, offsetElement);
};
nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's', null, offsetElement);
}
;
//------------------------------------------------------------
@ -260,6 +262,9 @@ nv.models.linePlusBarChart = function() {
});
}
state.disabled = data.map(function(d) { return !!d.disabled });
dispatch.stateChange(state);
selection.transition().call(chart);
});
@ -267,6 +272,21 @@ nv.models.linePlusBarChart = function() {
if (tooltips) showTooltip(e, that.parentNode);
});
// Update chart from a state object passed to event handler
dispatch.on('changeState', function(e) {
if (typeof e.disabled !== 'undefined') {
data.forEach(function(series,i) {
series.disabled = e.disabled[i];
});
state.disabled = e.disabled;
}
selection.call(chart);
});
//============================================================

28
src/models/multiBarChart.js
View File

@ -27,8 +27,9 @@ nv.models.multiBarChart = function() {
}
, x //can be accessed via chart.xScale()
, y //can be accessed via chart.yScale()
, state = { stacked: false }
, noData = "No Data Available."
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
;
multibar
@ -256,6 +257,9 @@ nv.models.multiBarChart = function() {
});
}
state.disabled = data.map(function(d) { return !!d.disabled });
dispatch.stateChange(state);
selection.transition().call(chart);
});
@ -276,6 +280,9 @@ nv.models.multiBarChart = function() {
break;
}
state.stacked = multibar.stacked();
dispatch.stateChange(state);
selection.transition().call(chart);
});
@ -283,6 +290,25 @@ nv.models.multiBarChart = function() {
if (tooltips) showTooltip(e, that.parentNode)
});
// Update chart from a state object passed to event handler
dispatch.on('changeState', function(e) {
if (typeof e.disabled !== 'undefined') {
data.forEach(function(series,i) {
series.disabled = e.disabled[i];
});
state.disabled = e.disabled;
}
if (typeof e.stacked !== 'undefined') {
multibar.stacked(e.stacked);
state.stacked = e.stacked;
}
selection.call(chart);
});
//============================================================

27
src/models/multiBarHorizontalChart.js
View File

@ -26,8 +26,9 @@ nv.models.multiBarHorizontalChart = function() {
}
, x //can be accessed via chart.xScale()
, y //can be accessed via chart.yScale()
, state = { stacked: stacked }
, noData = 'No Data Available.'
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
;
multibar
@ -239,6 +240,9 @@ nv.models.multiBarHorizontalChart = function() {
});
}
state.disabled = data.map(function(d) { return !!d.disabled });
dispatch.stateChange(state);
selection.transition().call(chart);
});
@ -259,6 +263,9 @@ nv.models.multiBarHorizontalChart = function() {
break;
}
state.stacked = multibar.stacked();
dispatch.stateChange(state);
selection.transition().call(chart);
});
@ -266,6 +273,24 @@ nv.models.multiBarHorizontalChart = function() {
if (tooltips) showTooltip(e, that.parentNode);
});
// Update chart from a state object passed to event handler
dispatch.on('changeState', function(e) {
if (typeof e.disabled !== 'undefined') {
data.forEach(function(series,i) {
series.disabled = e.disabled[i];
});
state.disabled = e.disabled;
}
if (typeof e.stacked !== 'undefined') {
multibar.stacked(e.stacked);
state.stacked = e.stacked;
}
selection.call(chart);
});
//============================================================

20
src/models/pieChart.js
View File

@ -19,8 +19,9 @@ nv.models.pieChart = function() {
return '<h3>' + key + '</h3>' +
'<p>' + y + '</p>'
}
, state = {}
, noData = "No Data Available."
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
;
//============================================================
@ -152,6 +153,9 @@ nv.models.pieChart = function() {
});
}
state.disabled = data[0].map(function(d) { return !!d.disabled });
dispatch.stateChange(state);
selection.transition().call(chart)
});
@ -159,6 +163,20 @@ nv.models.pieChart = function() {
dispatch.tooltipHide(e);
});
// Update chart from a state object passed to event handler
dispatch.on('changeState', function(e) {
if (typeof e.disabled !== 'undefined') {
data[0].forEach(function(series,i) {
series.disabled = e.disabled[i];
});
state.disabled = e.disabled;
}
selection.call(chart);
});
//============================================================

22
src/models/scatterChart.js
View File

@ -33,7 +33,7 @@ nv.models.scatterChart = function() {
, tooltipY = function(key, x, y) { return '<strong>' + y + '</strong>' }
//, tooltip = function(key, x, y) { return '<h3>' + key + '</h3>' }
, tooltip = null
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
, noData = "No Data Available."
;
@ -63,7 +63,8 @@ nv.models.scatterChart = function() {
// Private Variables
//------------------------------------------------------------
var x0, y0;
var state = {},
x0, y0;
var showTooltip = function(e, offsetElement) {
//TODO: make tooltip style an option between single or dual on axes (maybe on all charts with axes?)
@ -364,6 +365,9 @@ nv.models.scatterChart = function() {
});
}
state.disabled = data.map(function(d) { return !!d.disabled });
dispatch.stateChange(state);
chart(selection);
});
@ -393,6 +397,20 @@ nv.models.scatterChart = function() {
if (tooltips) showTooltip(e, that.parentNode);
});
// Update chart from a state object passed to event handler
dispatch.on('changeState', function(e) {
if (typeof e.disabled !== 'undefined') {
data.forEach(function(series,i) {
series.disabled = e.disabled[i];
});
state.disabled = e.disabled;
}
selection.call(chart);
});
//============================================================

22
src/models/scatterPlusLineChart.js
View File

@ -32,7 +32,7 @@ nv.models.scatterPlusLineChart = function() {
, tooltip = function(key, x, y, date) { return '<h3>' + key + '</h3>'
+ '<p>' + date + '</p>' }
//, tooltip = null
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
, noData = "No Data Available."
;
@ -62,7 +62,8 @@ nv.models.scatterPlusLineChart = function() {
// Private Variables
//------------------------------------------------------------
var x0, y0;
var state = {},
x0, y0;
var showTooltip = function(e, offsetElement) {
//TODO: make tooltip style an option between single or dual on axes (maybe on all charts with axes?)
@ -378,6 +379,9 @@ nv.models.scatterPlusLineChart = function() {
});
}
state.disabled = data.map(function(d) { return !!d.disabled });
dispatch.stateChange(state);
chart(selection);
});
@ -407,6 +411,20 @@ nv.models.scatterPlusLineChart = function() {
if (tooltips) showTooltip(e, that.parentNode);
});
// Update chart from a state object passed to event handler
dispatch.on('changeState', function(e) {
if (typeof e.disabled !== 'undefined') {
data.forEach(function(series,i) {
series.disabled = e.disabled[i];
});
state.disabled = e.disabled;
}
selection.call(chart);
});
//============================================================

27
src/models/stackedAreaChart.js
View File

@ -26,8 +26,9 @@ nv.models.stackedAreaChart = function() {
, x //can be accessed via chart.xScale()
, y //can be accessed via chart.yScale()
, yAxisTickFormat = d3.format(',.2f')
, state = { style: stacked.style() }
, noData = 'No Data Available.'
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
, dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
;
xAxis
@ -260,6 +261,9 @@ nv.models.stackedAreaChart = function() {
});
}
state.disabled = data.map(function(d) { return !!d.disabled });
dispatch.stateChange(state);
//selection.transition().call(chart);
chart(selection);
});
@ -285,6 +289,9 @@ nv.models.stackedAreaChart = function() {
break;
}
state.style = stacked.style();
dispatch.stateChange(state);
//selection.transition().call(chart);
chart(selection);
});
@ -293,6 +300,24 @@ nv.models.stackedAreaChart = function() {
if (tooltips) showTooltip(e, that.parentNode);
});
// Update chart from a state object passed to event handler
dispatch.on('changeState', function(e) {
if (typeof e.disabled !== 'undefined') {
data.forEach(function(series,i) {
series.disabled = e.disabled[i];
});
state.disabled = e.disabled;
}
if (typeof e.style !== 'undefined') {
stacked.style(e.style);
}
selection.call(chart);
});
});