Related
I have two series and their intersection point. I want to have an oval (ellipse) on a chart with center in intersection. Oval radiuses should be set in terms of axis units to show area of interest for each axis.
Highcharts.chart('container', {
series: [
// first series
{
name: 'IPR',
data: [[0, 30.5],[18.5, 25.4],[30, 19.4],[38, 9.7],[42, 0.02]]
},
// second series
{
name: 'VLP',
data: [[2, 0.5],[7, 1],[14, 6],[21, 22],[29, 29.6],[40, 30.3],[50, 27.2]]
},
// intersection
{
name: 'Operating point',
data: [
[22.42, 23.35]
]
}
],
})
How can I programmatically draw an oval in intersection and make zoom work?
You can use Renderer.createElement to create other SVG elements in Highcharts:
this.renderer.createElement('ellipse').attr({
cx: 60,
cy: 60,
rx: 50,
ry: 25,
'stroke-width': 2,
stroke: 'red',
fill: 'yellow',
zIndex: 3
}).add();
For translating to axis units use toPixels as #Anton Rybalko suggested.
Live demo: http://jsfiddle.net/kkulig/ds6aj5yp/
API references:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#createElement
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse
https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels
The SVG Renderer is not really a great answer.
The polygon feature should be used (with many points, which you can generate offline in a backend, or analytically in the front end):
series: [{
name: 'Target',
type: 'polygon',
data: [[153, 42], [149, 46], [149, 55], [152, 60], [159, 70], [170, 77], [180, 70],
[180, 60], [173, 52], [166, 45]],
color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get(),
enableMouseTracking: false
}
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/polygon/
To draw a circle, line etc SVGRenderer can be used. But there is no method to draw an ellipse. However rect() with rounded corners can be used.
Following code can be used to draw an ellipse in point (100, 200) px, horizontal radius 20 px and vertical radius 10 px:
chart.renderer.rect(100, 100, 20, 10, '50%')
.attr({
'stroke-width': 1,
'stroke': 'green',
'fill': 'yellow',
zIndex: 0
})
.add();
To specify x, y and radiuses in terms of axis untits Axis.toPixels() can be used. If we need to convert point (22.42, 23.35) to pixels it can be done like:
var x = chart.xAxis[0].toPixels(22.42),
y = chart.yAxis[0].toPixels(23.35)
So function to draw an ellipse would be:
var drawEllipse = function(chart, x, y, xr, yr) {
var x1 = chart.xAxis[0].toPixels(x-xr)
var x2 = chart.xAxis[0].toPixels(x+xr)
var y1 = chart.yAxis[0].toPixels(y-yr)
var y2 = chart.yAxis[0].toPixels(y+yr)
$('.' + rectClass).remove()
chart.renderer.rect(x1, y2, x2 - x1, y1 - y2, '50%')
.attr({
'stroke-width': 1,
'stroke': 'green',
'fill': 'yellow',
'zIndex': 0
})
.add();
};
Finnaly redraw event can be used to redraw ellipse after zoom:
$(function() {
var drawEllipse = function(chart, x, y, xr, yr) {
// get pixel coordinates of rect
var x1 = chart.xAxis[0].toPixels(x-xr)
var x2 = chart.xAxis[0].toPixels(x+xr)
var y1 = chart.yAxis[0].toPixels(y-yr)
var y2 = chart.yAxis[0].toPixels(y+yr)
// remove previous ellipse
var rectClass = 'operating-point-ellipse'
$('.' + rectClass).remove()
// draw ellipse using rect()
chart.renderer.rect(x1, y2, x2 - x1, y1 - y2, '50%')
.attr({
'stroke-width': 1,
'stroke': 'green',
'fill': 'green',
'fill-opacity': 0.2,
'zIndex': 0
})
.addClass(rectClass)
.add();
};
$('#container').highcharts({
chart: {
events: {
redraw: function() {
drawEllipse(this, 22.42, 23.35, 6, 3);
},
load: function() {
drawEllipse(this, 22.42, 23.35, 6, 3);
}
}
},
//...
});
});
See full code on jsFiddle: http://jsfiddle.net/arybalko/rcct2r0b/
I'm struggling to implement a little things on canvas with KineticJS.
I want to create a circle + a line which form a group (plane).
The next step is to allow the group to rotate around itself with a button that appears when you click on the group.
My issue is that when I click on the rotate button, it does not rotate near the button but elsewhere. Have a look :
My rotation atm : http://hpics.li/b46b73a
I want the rotate button to be near the end of the line. Not far away..
I tried to implement it on jsfiddle but I'm kinda new and I didn't manage to put it correctly , if you could help me on that, I would be thankful !
http://jsfiddle.net/49nn0ydh/1/
function radians (degrees) {return degrees * (Math.PI/180)}
function degrees (radians) {return radians * (180/Math.PI)}
function angle (cx, cy, px, py) {var x = cx - px; var y = cy - py; return Math.atan2 (-y, -x)}
function distance (p1x, p1y, p2x, p2y) {return Math.sqrt (Math.pow ((p2x - p1x), 2) + Math.pow ((p2y - p1y), 2))}
jQuery (function(){
var stage = new Kinetic.Stage ({container: 'kineticDiv', width: 1200, height:600})
var layer = new Kinetic.Layer(); stage.add (layer)
// group avion1
var groupPlane1 = new Kinetic.Group ({
x: 150, y: 150,
draggable:true
}); layer.add (groupPlane1)
// avion 1
var plane1 = new Kinetic.Circle({
radius: 10,
stroke: "darkgreen",
strokeWidth: 3,
}); groupPlane1.add(plane1);
var trackPlane1 = new Kinetic.Line({
points: [10, 0, 110, 0],
stroke: "darkgreen",
strokeWidth: 2
}); groupPlane1.add(trackPlane1);
groupPlane1.on('click', function() {
controlGroup.show();
});
groupPlane1.setOffset (plane1.getWidth() * plane1.getScale().x / 2, plane1.getHeight() * plane1.getScale().y / 2)
var controlGroup = new Kinetic.Group ({
x: groupPlane1.getPosition().x + 120,
y: groupPlane1.getPosition().y ,
opacity: 1, draggable: true,
}); layer.add (controlGroup)
var signRect2 = new Kinetic.Rect({
x:-8,y: -6,
width: 20,
height: 20,
fill: 'white',
opacity:0
});
controlGroup.add(signRect2);
var sign = new Kinetic.Path({
x: -10, y: -10,
data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
scale: {x:0.5, y:0.5}, fill: 'black'
}); controlGroup.add (sign)
controlGroup.setDragBoundFunc (function (pos) {
var groupPos = groupPlane1.getPosition();
var rotation = degrees (angle (groupPos.x, groupPos.y, pos.x, pos.y));
var dis = distance (groupPos.x, groupPos.y, pos.x, pos.y);
groupPlane1.setRotationDeg (rotation);
layer.draw()
return pos
})
controlGroup.on ('dragend', function() {
controlGroup.hide();
layer.draw()
})
controlGroup.hide();
layer.draw()
})
You can adjust the rotation point by setting the offsetX and offsetY of the group.
I have made a Bezier Shape in kinetic js with control points on it vertices. the code allows the user to drag the starting, ending and control points thereby modifying the shape of the curve like shown below.
The link to the js fiddle containing the above code is http://jsfiddle.net/Lucy1/da90vct4/2/
Code for the anchor points is
var room = new Kinetic.Shape({
x: 0,
y: 0,
width: 100,
height: 100,
stroke: "black",
fill: 'ivory',
drawFunc: function (context) {
var x = this.x();
var y = this.y();
var w = this.width();
var h = this.height();
var trX = anchorTR.x();
var trY = anchorTR.y();
var brX = anchorBR.x();
var brY = anchorBR.y();
var blX = anchorBL.x();
var blY = anchorBL.y();
var tlX = anchorTL.x();
var tlY = anchorTL.y();
context.beginPath();
context.moveTo(tlX, tlY);
// top
context.bezierCurveTo(x + w / 3, y, x + w * 2 / 3, y, trX, trY);
// right
context.bezierCurveTo(x + w, y + h / 3, x + w, y + h * 2 / 3, brX, brY);
// bottom
context.bezierCurveTo(x + w * 2 / 3, y + h, x + w / 3, y + h, blX, blY);
// left
context.bezierCurveTo(x, y + h * 2 / 3, x, y + h / 3, tlX, tlY);
context.closePath();
context.fillStrokeShape(this);
}
});
g.add(room);
var anchorTR = new Kinetic.Circle({
x: 100,
y: 0,
radius: 8,
fill: "green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorTR);
var anchorBR = new Kinetic.Circle({
x: 100,
y: 100,
radius: 8,
fill: "green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorBR);
var anchorBL = new Kinetic.Circle({
x: 0,
y: 100,
radius: 8,
fill: "green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorBL);
var anchorTL = new Kinetic.Circle({
x: 0,
y: 0,
radius: 8,
fill: "green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorTL);
layer.draw();
Currently i'm defining multiple kinetic circles for the anchor points and multiple variables for positioning the anchor points.I'm trying to optimize the code in such a way that i can reuse the code multiple times without using loops but not being able to..Please help..
You can make the code reusable by encapsulating it into functions and adding some references.
Put the code that creates a group & room into a function and return the new room from that function.
Put the code that creates an anchor into a function and return the new anchor from that function.
Attach references to a room's anchors to the room node itself.
Here's a refactoring of the code and a Demo: http://jsfiddle.net/m1erickson/opsy1pn9/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var room1=makeRoom(50,50,50,50);
var room2=makeRoom(150,150,50,50);
function makeRoom(x,y,w,h){
var g=new Kinetic.Group({x:x,y:y,draggable:true});
layer.add(g);
var room=new Kinetic.Shape({
x:0,
y:0,
width:w,
height:h,
stroke:"blue",
fill: 'red',
drawFunc: function(context) {
var x=this.x();
var y=this.y();
var w=this.width();
var h=this.height();
var tlX=this.anchorTL.x();
var tlY=this.anchorTL.y();
context.beginPath();
context.moveTo(tlX,tlY);
// top
context.bezierCurveTo(x+w/3,y, x+w*2/3,y, this.anchorTR.x(),this.anchorTR.y());
// right
context.bezierCurveTo(x+w,y+h/3, x+w,y+h*2/3, this.anchorBR.x(),this.anchorBR.y());
// bottom
context.bezierCurveTo(x+w*2/3,y+h, x+w/3,y+h, this.anchorBL.x(),this.anchorBL.y());
// left
context.bezierCurveTo(x,y+h*2/3, x,y+h/3, tlX,tlY);
context.closePath();
context.fillStrokeShape(this);
}
});
g.add(room);
room.anchorTR=makeAnchor(w,0,g);
room.anchorBR=makeAnchor(w,h,g);
room.anchorBL=makeAnchor(0,h,g);
room.anchorTL=makeAnchor(0,0,g);
layer.draw();
}
function makeAnchor(x,y,group){
var anchor=new Kinetic.Circle({
x:x,
y:y,
radius:8,
fill:"green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
group.add(anchor);
anchor.moveToTop();
return(anchor);
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Drag green circle to change red rect</h4>
<div id="container"></div>
</body>
</html>
What is the actual relation between points attribute and x,y coordinates of a Line object?
Say I want to draw a line from 10,10 to 100,10:
var line = new Kinetic.Line({
points: [10,10,100,10],
stroke: 'black',
strokeWidth: 3
});
Result is here: http://jsfiddle.net/4Y6MG/
But if I add x and y coordinates to the Line constructor the line is shifted:
var line = new Kinetic.Line({
points: [10,10,100,10],
stroke: 'black',
strokeWidth: 3,
x: 10,
y: 10
});
http://jsfiddle.net/qyfD2/1/
Why does it happen? I set x and y to be the same as the first values of points, that is I want the line to start at 10,10 precisely. Why does it move?
I know I'm missing something very basic here but I've just started playing with this canvas stuff.
For KineticJS your points array is internally altered by adding the current x or y to each value in the array:
points: [ 10+x, 10+y, 100+x ,10+y ],
Adding more than 2 v-axes to Google line chart makes the ones on the right overlap.
Use Sample code function for repro in https://code.google.com/apis/ajax/playground/?type=visualization#line_chart
Sample code:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
data.addColumn('number', 'Blanket 2');
data.addRow(["A", 1, 1, 0.5]);
data.addRow(["B", 2, 0.5, 1]);
data.addRow(["C", 4, 1, 0.5]);
data.addRow(["D", 8, 0.5, 1]);
data.addRow(["E", 7, 1, 0.5]);
data.addRow(["F", 7, 0.5, 1]);
data.addRow(["G", 8, 1, 0.5]);
data.addRow(["H", 4, 0.5, 1]);
data.addRow(["I", 2, 1, 0.5]);
data.addRow(["J", 3.5, 0.5, 1]);
data.addRow(["K", 3, 1, 0.5]);
data.addRow(["L", 3.5, 0.5, 1]);
data.addRow(["M", 1, 1, 0.5]);
data.addRow(["N", 1, 0.5, 1]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",width: 500, height: 400,
vAxes: {0: {logScale: false},
1: {logScale: false, maxValue: 10},
2:{logScale:false}},
series:{
0:{targetAxisIndex:0},
1:{targetAxisIndex:1},
2:{targetAxisIndex:2}}}
);
}
Is there a workaround for this?
As I said in my comment: One possibility is to use textPosition: 'out' for one axis and textPosition: 'in' for the other. In that case you get numbers which are not overlapping.
There is one risky option: to change DOM elements 'manually'. Axis labels have following tag and properties in DOM (x and y values are different):
<text text-anchor="start" x="452" y="327.7" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">0,40</text>
Axis labels bellow x-axis have property text-anchor 'middle', labels left of chart have value 'end', those on the right side and legend marks have value 'start'. Those which are overlapping have the same x value, y is different. So, half of them have to be moved right (x value changed):
...
var labels = document.querySelectorAll('text[text-anchor=start]');
// find limits of same x
var xMin = -1, xMax = -1;
for (var i = 1; i < labels.length; i++) {
if (labels[i - 1].attributes[1].value == labels[i].attributes[1].value) {
if (xMin == -1 ) xMin = i - 1;
xMax = i;
}
}
if (xMax != -1) {
// change just half of them
for (var i = xMin + (xMax - xMin + 1)/2; i <= xMax; i++) {
var value = parseInt(labels[i].attributes[1].value);
labels[i].attributes[1].value = value + 35;
}
}
...
This is just for exercise, I wouldn't use it because it will fail the first time google decide to change text-anchor to something else or something change in the label sequence or someone decide to put 2 axes to the left side...
See example at jsbin