diff --git a/js/wq/chart.js b/js/wq/chart.js
index dc34bde5..c04c9c20 100644
--- a/js/wq/chart.js
+++ b/js/wq/chart.js
@@ -743,8 +743,6 @@ chart.scatter = function() {
// Render lines in background to ensure all points are above them
plot.renderBackground(function(dataset) {
- if (!drawLinesIf(dataset))
- return;
var items = plot.items()(dataset),
yunits = plot.yunits()(dataset),
sid = plot.id()(dataset),
@@ -755,6 +753,10 @@ chart.scatter = function() {
line = d3.svg.line()
.x(xscaled)
.y(yscaled);
+ if (!drawLinesIf(dataset)) {
+ path.remove();
+ return;
+ }
// Generate path element for new datasets
if (path.empty()) {
path = g.append('path')
@@ -768,8 +770,6 @@ chart.scatter = function() {
});
plot.render(function(dataset) {
- if (!drawPointsIf(dataset))
- return;
var items = plot.items()(dataset),
yunits = plot.yunits()(dataset),
sid = plot.id()(dataset),
@@ -777,6 +777,10 @@ chart.scatter = function() {
g = d3.select(this),
points, newpoints;
+ if (!drawPointsIf(dataset)) {
+ g.selectAll('g.data').remove();
+ return;
+ }
points = g.selectAll('g.data').data(items, plot.itemid());
// Generate elements for new data
diff --git a/tests/chart.html b/tests/chart.html
new file mode 100644
index 00000000..3b39e6a7
--- /dev/null
+++ b/tests/chart.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/js/chart.js b/tests/js/chart.js
new file mode 100644
index 00000000..e3318e56
--- /dev/null
+++ b/tests/js/chart.js
@@ -0,0 +1,72 @@
+requirejs.config({
+ 'baseUrl': '../../js'
+});
+
+define(['d3', 'wq/chart'],
+function(d3, chart) {
+
+var plot = chart.scatter();
+
+// Initialize dataset
+var data = [];
+_newDataset();
+data[0].list.push({
+ 'x': 0,
+ 'y': Math.random() * 100
+});
+
+// Main loop
+setInterval(_update, 100);
+function _update() {
+ if (Math.random() > 0.97 && data.length < 12) {
+ _newDataset();
+ }
+ if (Math.random() > 0.99) {
+ _sliceDataset();
+ }
+ _newPoint();
+ plot.xscale({
+ 'xmin': data[0].list[0].x,
+ 'xmax': data[0].list[0].x,
+ 'auto': true
+ });
+ d3.select('svg').datum(data).call(plot);
+}
+
+// Add new dataset to array
+function _newDataset() {
+ data.push({
+ 'id': 'data' + data.length,
+ 'label': 'Dataset ' + (data.length + 1),
+ 'yunits': 'Unit' + (data.length % 2 + 1),
+ 'list': []
+ });
+}
+
+// Add point to all datasets (test switch from points to lines)
+function _newPoint() {
+ data.forEach(function(ds) {
+ var y, last;
+ if (ds.list.length) {
+ last = ds.list[ds.list.length - 1];
+ y = last.y - 5 + Math.random() * 10;
+ } else {
+ last = data[0].list[data[0].list.length - 1];
+ y = Math.random() * 100 * (data.length % 2 + 1);
+ }
+ ds.list.push({
+ 'x': last.x + 1,
+ 'y': y
+ });
+ });
+}
+
+// Truncate a dataset (test switch from lines back to points)
+function _sliceDataset() {
+ var ds = data[Math.floor(Math.random() * data.length)];
+ if (ds.list.length > 50) {
+ ds.list = ds.list.slice(ds.list.length-1);
+ }
+}
+
+});