In following example, I need to drag the point by certain step size, e.g. by 10. See
drag: function (e) {
jsfiddle
As an alternative, here's a modified version of draggable-points.js (GitRaw GitHub) that allows some parameters for dragging in certain step sizes. The following options have been added for a series:
dragStepSizeX: numeric step size for X-axis
dragStepSizeY: numeric step size for Y-axis
dragStepSize: function taking the parameters XorY and point, which you can implement to return the desired step size depending on the axis and the point being dragged
dragStepAllowMinMax: boolean, should you be allowed to drag to the min/max limit, or enforce steps?
dragStepRelative: boolean, should drag steps be done relative to the points original value?
See this JSFiddle demo of it being used to enforce step sizes on the Y-axis of 5 for the 8 first point, and 2 for the remaining points. Not step size on X-axis.
The following functions have been modified to accomodate this in draggable-points.js:
/**
* Adjust value according to step size
*/
function dragStepAdjustment(value, prevValue, stepSize, relative) {
if(stepSize === undefined) {
return value;
}
const midpoint = stepSize/2;
const modulus = relative === true ? (value-prevValue)%stepSize : value%stepSize;
return modulus > midpoint ? value + (stepSize-modulus) : value - modulus;
}
/**
* Filter by dragMin and dragMax
*/
function filterRange(newY, point, series, stepSize, XOrY) {
var options = series.options,
dragMin = pick(options.dragMin ? options.dragMin(XOrY, point) : undefined, options['dragMin' + XOrY], undefined),
dragMax = pick(options.dragMax ? options.dragMax(XOrY, point) : undefined, options['dragMax' + XOrY], undefined),
precision = pick(options['dragPrecision' + XOrY], undefined),
allowMinMax = options.dragStepAllowMinMax === true;
if (!isNaN(precision)) {
newY = Math.round(newY / precision) * precision;
}
if (newY < dragMin) {
if(stepSize !== undefined) {
allowMinMax ? newY = dragMin : newY += stepSize;
}
else {
newY = dragMin;
}
} else if (newY > dragMax) {
if(stepSize !== undefined) {
allowMinMax ? newY = dragMax : newY -= stepSize;
}
else {
newY = dragMax;
}
}
if(newY < dragMin || newY > dragMax) {
newY = 'X' == XOrY ? point.x : point.y;
}
return newY;
}
/**
* Get the new values based on the drag event
*/
function getNewPos(e) {
var originalEvent = e.originalEvent || e,
pageX = originalEvent.changedTouches ? originalEvent.changedTouches[0].pageX : e.pageX,
pageY = originalEvent.changedTouches ? originalEvent.changedTouches[0].pageY : e.pageY,
series = dragPoint.series,
draggableX = series.options.draggableX && dragPoint.draggableX !== false,
draggableY = series.options.draggableY && dragPoint.draggableY !== false,
dragSensitivity = pick(series.options.dragSensitivity, 1),
deltaX = draggableX ? dragX - pageX : 0,
deltaY = draggableY ? dragY - pageY : 0,
newPlotX = dragPlotX - deltaX,
newPlotY = dragPlotY - deltaY,
newX = dragX === undefined ? dragPoint.x : series.xAxis.toValue(newPlotX, true),
newY = dragY === undefined ? dragPoint.y : series.yAxis.toValue(newPlotY, true),
dragStepSizeX = pick(series.options.dragStepSize ? series.options.dragStepSize('X', dragPoint) : undefined, series.options.dragStepSizeX, undefined),
dragStepSizeY = pick(series.options.dragStepSize ? series.options.dragStepSize('Y', dragPoint) : undefined, series.options.dragStepSizeY, undefined),
ret;
newX = dragStepAdjustment(newX, dragPoint.x, dragStepSizeX, series.options.dragStepRelative);
newY = dragStepAdjustment(newY, dragPoint.y, dragStepSizeY, series.options.dragStepRelative);
newX = filterRange(newX, dragPoint, series, dragStepSizeX, 'X');
newY = filterRange(newY, dragPoint, series, dragStepSizeY, 'Y');
if (dragPoint.low) {
var newPlotHigh = dragPlotHigh - deltaY,
newPlotLow = dragPlotLow - deltaY;
newHigh = dragY === undefined ? dragPoint.high : series.yAxis.toValue(newPlotHigh, true);
newLow = dragY === undefined ? dragPoint.low : series.yAxis.toValue(newPlotLow, true);
newHigh = dragStepAdjustment(newHigh, dragPoint.y, dragStepSizeY, series.options.dragStepRelative);
newLow = dragStepAdjustment(newLow, dragPoint.y, dragStepSizeY, series.options.dragStepRelative);
newHigh = filterRange(newHigh, dragPoint, series, dragStepSizeY, 'Y');
newLow = filterRange(newLow, dragPoint, series, dragStepSizeY, 'Y');
}
if (Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2)) > dragSensitivity) {
return {
x: draggableX ? newX : dragPoint.x,
y: draggableY ? newY : dragPoint.y,
high: (draggableY && !changeLow) ? newHigh : dragPoint.high,
low: (draggableY && changeLow) ? newLow : dragPoint.low,
dragStart: dragStart,
originalEvent: e
};
} else {
return null;
}
}
This is a modification of the code of Torstein Honsi of Highsoft, under the MIT License.
Related
I want the green dot to follow the touch point in a circular path, but it doesn't seem to be doing it right.
It seems like there is an unwanted offset somewhere but I can't find it on my own for quite some time.
Here is my code:
#Preview
#Composable
fun Test() {
val touchPoint = remember { mutableStateOf(Offset.Zero) }
Scaffold {
Column() {
Box(Modifier.height(100.dp).fillMaxWidth().background(Color.Blue))
Layout(
modifier = Modifier.aspectRatio(1f).fillMaxSize(),
content = {
Box(
Modifier
.size(48.dp)
.clip(CircleShape)
.background(Color.Green)
.pointerInput(Unit) {
detectDragGestures(
onDrag = { change, dragAmount ->
change.consumeAllChanges()
touchPoint.value += dragAmount
}
)
}
)
}
) { measurables, constraints ->
val dot = measurables.first().measure(constraints.copy(minHeight = 0, minWidth = 0))
val width = constraints.maxWidth
val height = constraints.maxHeight
val centerX = width / 2
val centerY = height / 2
val lengthFromCenter = width / 2 - dot.width / 2
val touchX = touchPoint.value.x
val touchY = touchPoint.value.y
layout(width, height) {
// I planned to achieve the desired behaviour with the following steps:
// 1. Convert cartesian coordinates to polar ones
val r = sqrt(touchX.pow(2) + touchY.pow(2))
val angle = atan2(touchY.toDouble(), touchX.toDouble())
// 2. Use fixed polar radius
val rFixed = lengthFromCenter
// 3. Convert it back to cartesian coordinates
val x = rFixed * cos(angle)
val y = rFixed * sin(angle)
// 4. Layout on screen
dot.place(
x = (x + centerX - dot.width / 2).roundToInt(),
y = (y + centerY - dot.height / 2).roundToInt()
)
}
}
Box(Modifier.fillMaxSize().background(Color.Blue))
}
}
}
I'm definitely missing something but don't know what exactly. What am I doing wrong?
touchPoint.value += dragAmount
Is in pixel values, and you're updating the position of the dot with pixel values, where it requires dp values. If you update that with
private fun Float.pxToDp(context: Context): Dp = // Float or Int, depends on the value you have, or Double
(this / context.resources.displayMetrics.density).dp
The amount with which it will be moved, will be smaller and reflect the dragging made by the user
You can easily achieve this by using some math:
#Composable
fun CircularView(
content: #Composable () -> Unit
) {
var middle by remember {
mutableStateOf(Offset.Zero)
}
var size by remember {
mutableStateOf(0.dp)
}
var dragAngle by remember {
mutableStateOf(0f)
}
Canvas(modifier = Modifier.size(size)) {
drawCircle(
color = Color.Red,
center = middle,
style = Stroke(1.dp.toPx())
)
}
Layout(
content = content,
modifier = Modifier.pointerInput(true) {
detectDragGestures(
onDrag = { change, _ ->
change.consumeAllChanges()
val positionOfDrag = change.position
val previousPosition = change.previousPosition
dragAngle += atan2(
positionOfDrag.x - middle.x,
positionOfDrag.y - middle.y
) - atan2(
previousPosition.x - middle.x,
previousPosition.y - middle.y
)
}
)
}
) { measurables, constraints ->
val placeables = measurables.map { it.measure(constraints) }
val layoutWidth = constraints.maxWidth
val layoutHeight = constraints.maxHeight
layout(layoutWidth, layoutHeight) {
val childCount = placeables.size
if (childCount == 0) return#layout
val middleX = layoutWidth / 2f
val middleY = layoutHeight / 2f
middle = Offset(middleX, middleY)
val angleBetween = 2 * PI / childCount
val radius =
min(
layoutWidth - (placeables.maxByOrNull { it.width }?.width ?: 0),
layoutHeight - (placeables.maxByOrNull { it.height }?.height ?: 0)
) / 2
size = (radius * 2).toDp()
placeables.forEachIndexed { index, placeable ->
val angle = index * angleBetween - PI / 2 - dragAngle
val x = middleX + (radius) * cos(angle) - placeable.width / 2f
val y = middleY + (radius) * sin(angle) - placeable.height / 2f
placeable.placeRelative(x = x.toInt(), y = y.toInt())
}
}
}
}
On the calling side:
CircularView {
repeat(10) {
Box(
modifier = Modifier
.background(
Color(
red = random.nextInt(255),
green = random.nextInt(255),
blue = random.nextInt(255)
), shape = CircleShape
)
.size(50.dp),
contentAlignment = Alignment.Center
) {
Text(text = it.toString(), fontSize = 12.sp, color = Color.White)
}
}
}
I'm working on translating this ActionScript tutorial on binary space partitioning into Swift so I can use it in my rogue-like game. I came across a hitch.
In the article, the writer initializes his class like so:
public function Leaf(X:int, Y:int, Width:int, Height:int)
{
// initialize our leaf
x = X;
y = Y;
width = Width;
height = Height;
}
When I translated this into Swift, I ran into an error. The code above doesn't initialize all its declared values. This leads me into an impossible error that I can't seem to fix. Somehow, the writer of the article initializes his leftChild and rightChild variables with this function that is outside the initialization scope.
public function split():Boolean
{
// begin splitting the leaf into two children
if (leftChild != null || rightChild != null)
return false; // we're already split! Abort!
// determine direction of split
// if the width is >25% larger than height, we split vertically
// if the height is >25% larger than the width, we split horizontally
// otherwise we split randomly
var splitH:Boolean = FlxG.random() > 0.5;
if (width > height && width / height >= 1.25)
splitH = false;
else if (height > width && height / width >= 1.25)
splitH = true;
var max:int = (splitH ? height : width) - MIN_LEAF_SIZE; // determine the maximum height or width
if (max <= MIN_LEAF_SIZE)
return false; // the area is too small to split any more...
var split:int = Registry.randomNumber(MIN_LEAF_SIZE, max); // determine where we're going to split
// create our left and right children based on the direction of the split
if (splitH)
{
leftChild = new Leaf(x, y, width, split);
rightChild = new Leaf(x, y + split, width, height - split);
}
else
{
leftChild = new Leaf(x, y, split, height);
rightChild = new Leaf(x + split, y, width - split, height);
}
return true; // split successful!
}
Which is somehow ok in ActionScript, but in Swift it leads me to my problem.
Here is my translated code (Swift):
private let mapWidth:Int = 50
private let mapHeight:Int = 50
class Leaf {
var leftLeaf = [Leaf]()
var rightLeaf = [Leaf]()
var minLeafSize:Int = 6
var x, y, width, height: Int
var leftChild:Leaf
var rightChild:Leaf
init (X:Int, Y:Int, W:Int, H:Int) {
x = Y
y = Y
width = W
height = H
let maxLeafSize:UInt = 20
var leaves = [Leaf]()
// first, create a Leaf to be the 'root' of all Leafs.
let root = Leaf(X: 0, Y: 0, W: mapWidth, H: mapHeight)
leaves.append(root)
var didSplit:Bool = true
// we loop through every Leaf in our Vector over and over again, until no more Leafs can be split.
while (didSplit) {
didSplit = false
for l in leaves {
if l.leftLeaf.isEmpty == true && l.rightLeaf.isEmpty == true {
// if this Leaf is too big, or 75% chance...
if l.width > maxLeafSize || l.height > maxLeafSize || Int(arc4random_uniform(100)) > 25 {
if (l.split()) {
// if we did split, push the child leafs to the Vector so we can loop into them next
leaves.append(l.leftChild)
leaves.append(l.rightChild)
didSplit = true
}
}
}
}
}
}
func split() -> Bool {
if leftLeaf.isEmpty == true || rightLeaf.isEmpty == true {
return false
}
var splitH = arc4random_uniform(100) > 50 ? true : false
if width > height && Double(width / height) >= 1.25 {
splitH = false
}
if height > width && Double(height / width) >= 1.25 {
splitH = true
}
let max:Int = (splitH ? height : width) - minLeafSize // determine the maximum height or width
if max <= minLeafSize { return false }
let split:Int = Int(arc4random_uniform(UInt32(minLeafSize - max) + UInt32(max)))
if (splitH) {
leftChild = Leaf(X: x, Y: y, W: width, H: split)
rightChild = Leaf(X: x, Y: y + split, W: width, H: height - split)
leftLeaf.append(leftChild)
rightLeaf.append(rightChild)
} else {
leftChild = Leaf(X: x, Y: y, W: split, H: height)
rightChild = Leaf(X: x + split, Y: y, W: width - split, H: height);
leftLeaf.append(leftChild)
rightLeaf.append(rightChild)
}
return true
}
}
It is identical (as far as I can figure) to the ActionScript code in the article. But it is giving me an error. The leftChild and rightChild variables aren't initialized in my init method. When I move the split() -> Bool function into the init method it won't let me use the function, giving me an error "Value of type Leaf has no member split()". Removing the l from the if (l.spit()) line gives me a second error "Use of local variable 'split' before its declaration". The split() function has to be outside the initialization scope.
If I attempt to initialize leftChild and rightChild like so:
init (X:Int, Y:Int, W:Int, H:Int) {
x = Y
y = Y
width = W
height = H
leftChild = Leaf(X: x, Y: y, W: width, H: height)
rightChild = Leaf(X: x, Y: y, W: width, H: height)
}
It creates an infinite loop that eventually causes a crash.
The code should be initializing leftChild and rightChild in the split() -> Bool function but I don't think that's how it works in Swift. You should be able to copy/paste it into a Swift file and get the same errors.
Why is this happening? Is my code poorly written? How can I fix this?
In ActionScript, uninitialised variables are automatically evaluated with the special value undefined; also, in ActionScript, undefined == null, which is why if (leftChild != null || rightChild != null) works.
In Swift, you need to explicitly allow your variables to be nilable. The variables you are worried about need to start off as nil (which they automatically will, if you allow them to, by setting their type to Optional - note the question mark):
var leftChild:Leaf?
var rightChild:Leaf?
The running caseI met a problem in customizing a dynamic update chart. here is my code.
load : function () {
var series = this.series[0];
time2 = setInterval(function () {
var flag = true;
if ($('#pause:checked').length > 0) flag = false;
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
xValue = x;
yValue = y;
series.addPoint([x, y], flag, flag);
console.log(xValue + ", " + yValue);
if(flag){
document.getElementById("currentFrequency").innerHTML = (x + " ");
document.getElementById("currentDb").innerHTML = (y + " ");
document.getElementById("currentFrequency2").innerHTML = (x);
}
}, 100);
}, // -> function load over
The error says: highstock.js:59 Error: attribute d: Expected number, "…0.5325987144169 C 0 20.532598714…".
The way generating the random data is exactly the same way as what was showing in the official demo. The problem is likely to occur when set the interval lower than 1000.
Anyone can figure out what went wrong? thanks a lot.
I need to change size of bubbles(points) by supplying 4th value in data points in Highcharts' 3D scatter chart. I couldn't find any way how to do this. Can anyone help ?
It seems that it is not supported out of the box. Although in this Thread in the Highcharts-Forum, a wrapper is shown that allows a 4th w value to be used as the size of the bubble (see http://jsfiddle.net/uqLfm1k6/1/):
(function (H) {
H.wrap(H.seriesTypes.bubble.prototype, 'getRadii', function (proceed, zMin, zMax, minSize, maxSize) {
var math = Math,
len,
i,
pos,
zData = this.zData,
wData = this.userOptions.data.map( function(e){ return e.w }), // ADDED
radii = [],
options = this.options,
sizeByArea = options.sizeBy !== 'width',
zThreshold = options.zThreshold,
zRange = zMax - zMin,
value,
radius;
// Set the shape type and arguments to be picked up in drawPoints
for (i = 0, len = zData.length; i < len; i++) {
// value = zData[i]; // DELETED
value = this.chart.is3d()? wData[i] : zData[i]; // ADDED
// When sizing by threshold, the absolute value of z determines the size
// of the bubble.
if (options.sizeByAbsoluteValue && value !== null) {
value = Math.abs(value - zThreshold);
zMax = Math.max(zMax - zThreshold, Math.abs(zMin - zThreshold));
zMin = 0;
}
if (value === null) {
radius = null;
// Issue #4419 - if value is less than zMin, push a radius that's always smaller than the minimum size
} else if (value < zMin) {
radius = minSize / 2 - 1;
} else {
// Relative size, a number between 0 and 1
pos = zRange > 0 ? (value - zMin) / zRange : 0.5;
if (sizeByArea && pos >= 0) {
pos = Math.sqrt(pos);
}
radius = math.ceil(minSize + pos * (maxSize - minSize)) / 2;
}
radii.push(radius);
}
this.radii = radii;
});
}(Highcharts));
I have seen many posts on this topic, but it doesn't seem the issue has ever been properly addressed.
We have a large scatter with about 30 points on it (nothing overwhelming). But in certain cases, the dots will be very close together or overlapping (not much we can really do about that, I guess).
The main problem is that we want the data labels visible at all times, and these data labels are overlapping when the points are close to each other.
We have tried allowOverlap: false, but that's not really what we need/want. Our ideal outcome is allowing all datalabels to be displayed on screen inside the scatter while still being able to read each one at all times.
Do we fix this by adjusting the separation of the dots or by adjusting the separation/padding of the datalabels? Any suggestions? Thank you.
I haven't found a working configuration solution of this problem from Highcharts (although I cannot guarantee there isn't one in latest version). However there are some algorithms for acceptable randomization of the labels coordinates that split data labels.
Here are some useful links that could help you with the algorithm:
wordcloud package in R (cloud.R is the file containing the algorithm)
direct labels package in R
And some dummy pseudo code translation in JavaScript of the R code would be:
splitLabels: function() {
// Create an array of x-es and y-es that indicate where your data lie
var xArr = getAllDataX();
var yArr = getAllDataY();
var labelsInfo = {};
this.chartSeries.forEach(function(el) {
var text = el.data.name;
labelsInfo[el.data.id] = {
height: getHeight(text),
width: getWidth(text),
text: text
};
}, this);
var sdx = getStandardDeviation(xArr);
var sdy = getStandardDeviation(yArr);
if(sdx === 0) sdx = 1;
if(sdy === 0) sdy = 1;
var boxes = [];
var xlim = [], ylim = [];
xlim[0] = this.chart.xAxis[0].getExtremes().min;
xlim[1] = this.chart.xAxis[0].getExtremes().max;
ylim[0] = this.chart.yAxis[0].getExtremes().min;
ylim[1] = this.chart.yAxis[0].getExtremes().max;
for (var i = 0; i < data.length; i++) {
var pointX = data[i].x;
var pointY = data[i].y;
if (pointX<xlim[0] || pointY<ylim[0] || pointX>xlim[1] || pointY>ylim[1]) continue;
var theta = Math.random() * 2 * Math.PI,
x1 = data[i].x,
x0 = data[i].x,
y1 = data[i].y,
y0 = data[i].y,
width = labelsInfo[data[i].id].width,
height = labelsInfo[data[i].id].height ,
tstep = Math.abs(xlim[1] - xlim[0]) > Math.abs(ylim[1] - ylim[0]) ? Math.abs(ylim[1] - ylim[0]) / 100 : Math.abs(xlim[1] - xlim[0]) / 100,
rstep = Math.abs(xlim[1] - xlim[0]) > Math.abs(ylim[1] - ylim[0]) ? Math.abs(ylim[1] - ylim[0]) / 100 : Math.abs(xlim[1] - xlim[0]) / 100,
r = 0;
var isOverlapped = true;
while(isOverlapped) {
if((!hasOverlapped(x1-0.5*width, y1-0.5*height, width, height, boxes)
&& x1-0.5*width>xlim[0] && y1-0.5*height>ylim[0] && x1+0.5*width<xlim[1] && y1+0.5*height<ylim[1]) )
{
boxes.push({
leftX: x1-0.5*width,
bottomY: y1-0.5*height,
width: width,
height: height,
icon: false,
id: data[i].id,
name: labelsInfo[data[i].id].text
});
data[i].update({
name: labelsInfo[data[i].id].text,
dataLabels: {
x: (x1 - data[i].x),
y: (data[i].y - y1)
}
}, false);
isOverlapped = false;
} else {
theta = theta+tstep;
r = r + rstep*tstep/(2*Math.PI);
x1 = x0+sdx*r*Math.cos(theta);
y1 = y0+sdy*r*Math.sin(theta);
}
}
}
// You may have to redraw the chart here
},
You can call this function on redraw or optimized to call it less often.
Please note that if you have some big points or shapes or icons indicating where your data items lie you will have to check if any of the proposed solutions does not interfere(overlap) with the icons as well.
You can try to adapt this algorithm:
function StaggerDataLabels(series) {
sc = series.length;
if (sc < 2) return;
for (s = 1; s < sc; s++) {
var s1 = series[s - 1].points,
s2 = series[s].points,
l = s1.length,
diff, h;
for (i = 0; i < l; i++) {
if (s1[i].dataLabel && s2[i].dataLabel) {
diff = s1[i].dataLabel.y - s2[i].dataLabel.y;
h = s1[i].dataLabel.height + 2;
if (isLabelOnLabel(s1[i].dataLabel, s2[i].dataLabel)) {
if (diff < 0) s1[i].dataLabel.translate(s1[i].dataLabel.translateX, s1[i].dataLabel.translateY - (h + diff));
else s2[i].dataLabel.translate(s2[i].dataLabel.translateX, s2[i].dataLabel.translateY - (h - diff));
}
}
}
}
}
//compares two datalabels and returns true if they overlap
function isLabelOnLabel(a, b) {
var al = a.x - (a.width / 2);
var ar = a.x + (a.width / 2);
var bl = b.x - (b.width / 2);
var br = b.x + (b.width / 2);
var at = a.y;
var ab = a.y + a.height;
var bt = b.y;
var bb = b.y + b.height;
if (bl > ar || br < al) {
return false;
} //overlap not possible
if (bt > ab || bb < at) {
return false;
} //overlap not possible
if (bl > al && bl < ar) {
return true;
}
if (br > al && br < ar) {
return true;
}
if (bt > at && bt < ab) {
return true;
}
if (bb > at && bb < ab) {
return true;
}
return false;
}
http://jsfiddle.net/menXU/6/