Skip to content
This repository was archived by the owner on Apr 5, 2025. It is now read-only.

Commit 3e4b135

Browse files
dgrechkadgrechka
authored
Merge pull request #149 from lucymukh/lucymu/barWidthDensityPlot
iddBarWidth binding for markers works with plot coordinates now
2 parents 2757953 + 9412f65 commit 3e4b135

File tree

6 files changed

+44
-30
lines changed

6 files changed

+44
-30
lines changed

‎RELEASE_NOTES.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
### 1.5.10 (May 29, 2018)
2+
3+
Bug fixed:
4+
- iddBarWidth binding for markers works with plot coordinates now
5+
16
### 1.5.9 (May 21, 2018)
27

38
Bug fixed:

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "interactive-data-display",
3-
"version": "1.5.9",
3+
"version": "1.5.10",
44
"license": "Apache-2.0",
55
"homepage": "https://github.com/predictionmachines/InteractiveDataDisplay/wiki",
66
"description": "A JavaScript visualization library for dynamic data",

‎samples/KO.Bars.html

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
this.A_Height = ko.observable(1);
2323
this.B_Height = ko.observable(6);
2424
this.C_Height = ko.observable(3);
25+
this.Xlog = ko.observable(false);
2526

2627
this.BarHeights = ko.computed(function() {
2728
return [this.A_Height(),this.B_Height(),this.C_Height()];
@@ -36,26 +37,28 @@
3637
</script>
3738
</head>
3839
<body>
40+
<p>X log axis <input type="checkbox" data-bind="checked: Xlog"></p>
3941
<div style="display: inline-block">
40-
<div id="chart" data-idd-plot="chart" style="width: 600px; height: 400px; float:left">
41-
<div data-idd-plot="markers"
42-
data-bind="
43-
iddX: [1,2,3],
44-
iddY: BarHeights,
45-
iddColor: ['red','blue','green'],
46-
iddBarWidth: 0.9,
47-
iddShadow: 'grey',
48-
iddShape: 'bars',
49-
iddPlotName: 'Bars'
50-
">
42+
<div id="chart" data-idd-plot="chart" style="width: 600px; height: 400px; float:left">
43+
<div data-idd-plot="markers"
44+
data-bind="
45+
iddX: [1,2,3],
46+
iddY: BarHeights,
47+
iddColor: ['red','blue','green'],
48+
iddBarWidth: 0.05,
49+
iddShadow: 'grey',
50+
iddShape: 'bars',
51+
iddPlotName: 'Bars',
52+
iddXlog: Xlog
53+
">
54+
</div>
55+
</div>
56+
<div style="float: right; margin: 2em">
57+
<p>Height 1:<input data-bind="value: A_Height" type="number" min="1" max="20"></p>
58+
<p>Height 2:<input data-bind="value: B_Height" type="number" min="1" max="20"></p>
59+
<p>Height 3:<input data-bind="value: C_Height" type="number" min="1" max="20"></p>
60+
</p>
5161
</div>
52-
</div>
53-
<div style="float: right; margin: 2em">
54-
<p>Height 1:<input data-bind="value: A_Height" type="number" min="1" max="20"></p>
55-
<p>Height 2:<input data-bind="value: B_Height" type="number" min="1" max="20"></p>
56-
<p>Height 3:<input data-bind="value: C_Height" type="number" min="1" max="20"></p>
57-
</p>
58-
</div>
5962
</div>
6063
</body>
6164
</html>

‎src/idd/idd.base.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2230,8 +2230,8 @@ var _initializeInteractiveDataDisplay = function () { // determines settings dep
22302230
c.height = finalRect.height;
22312231
};
22322232

2233-
// Gets the transform functions from data to screen coordinates.
2234-
// Returns { dataToScreenX, dataToScreenY }
2233+
// Gets transform functions from data to screen coordinates, from plot to screen coords
2234+
// Returns { dataToScreenX, dataToScreenY, plotToScreenX, plotToScreenY}
22352235
this.getTransform = function () {
22362236
var ct = this.coordinateTransform;
22372237
var plotToScreenX = ct.plotToScreenX;
@@ -2241,7 +2241,10 @@ var _initializeInteractiveDataDisplay = function () { // determines settings dep
22412241
var dataToScreenX = dataToPlotX ? function (x) { return plotToScreenX(dataToPlotX(x)); } : plotToScreenX;
22422242
var dataToScreenY = dataToPlotY ? function (y) { return plotToScreenY(dataToPlotY(y)); } : plotToScreenY;
22432243

2244-
return { dataToScreenX: dataToScreenX, dataToScreenY: dataToScreenY };
2244+
return {
2245+
dataToScreenX: dataToScreenX, dataToScreenY: dataToScreenY,
2246+
plotToScreenX: plotToScreenX, plotToScreenY: plotToScreenY
2247+
};
22452248
};
22462249

22472250
// Gets the transform functions from screen to data coordinates.

‎src/idd/idd.markers.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,12 @@ InteractiveDataDisplay.Markers = function (div, master) {
6161
}
6262
return { arrays: arrays, scalars: scalars, length: n === -1 ? 0 : n };
6363
}
64+
6465
//return copy of data
6566
this.getDataCopy = function () {
6667
return _originalData;
6768
}
69+
6870
// Draws the data as markers.
6971
this.draw = function (data, titles) {
7072
if(data == undefined || data == null) throw "The argument 'data' is undefined or null";
@@ -77,7 +79,7 @@ InteractiveDataDisplay.Markers = function (div, master) {
7779
else if(typeof data.shape === "string") {
7880
shape = InteractiveDataDisplay.Markers.shapes[data.shape];
7981
if(shape == undefined) throw "The given marker shape is unknown";
80-
}else if(typeof data.shape === "object" && data.shape != null && typeof data.shape.draw === "function") {
82+
} else if(typeof data.shape === "object" && data.shape != null && typeof data.shape.draw === "function") {
8183
shape = data.shape;
8284
}
8385
else throw "The argument 'data' is incorrect: value of the property 'shape' must be a string, a MarkerShape object, undefined or null";

‎src/idd/idd.markers.uncertain.js

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1203,8 +1203,7 @@ InteractiveDataDisplay.Bars = {
12031203
}
12041204
},
12051205
draw: function (marker, plotRect, screenSize, transform, context) {
1206-
var barWidth = 0.5 * marker.barWidth;
1207-
var xLeft, xRight, yTop, yBottom;
1206+
var xLeft, xRight, yTop, yBottom, barWidthScreenX, barWidthScreenY;
12081207
if (marker.orientation == "h") {
12091208
xLeft = transform.dataToScreenX(0);
12101209
xRight = transform.dataToScreenX(marker.x);
@@ -1214,15 +1213,17 @@ InteractiveDataDisplay.Bars = {
12141213
xLeft = k;
12151214
}
12161215
if (xLeft > screenSize.width || xRight < 0) return;
1217-
yTop = transform.dataToScreenY(marker.y + barWidth);
1218-
yBottom = transform.dataToScreenY(marker.y - barWidth);
1216+
barWidthScreenY = transform.plotToScreenY(marker.barWidth) - transform.plotToScreenY(0.0);
1217+
yBottom = transform.dataToScreenY(marker.y) - barWidthScreenY / 2.0;
1218+
yTop = transform.dataToScreenY(marker.y) + barWidthScreenY / 2.0;
12191219
if (yTop > screenSize.height || yBottom < 0) return;
12201220
} else {
1221-
xLeft = transform.dataToScreenX(marker.x - barWidth);
1222-
xRight = transform.dataToScreenX(marker.x + barWidth);
1221+
barWidthScreenX = transform.plotToScreenX(marker.barWidth) - transform.plotToScreenX(0.0);
1222+
xLeft = transform.dataToScreenX(marker.x) - barWidthScreenX / 2.0;
1223+
xRight = transform.dataToScreenX(marker.x) + barWidthScreenX / 2.0;
12231224
if (xLeft > screenSize.width || xRight < 0) return;
1224-
yTop = transform.dataToScreenY(marker.y);
12251225
yBottom = transform.dataToScreenY(0);
1226+
yTop = transform.dataToScreenY(marker.y);
12261227
if (yTop > yBottom) {
12271228
var k = yBottom;
12281229
yBottom = yTop;

0 commit comments

Comments
 (0)