I'm trying to change high charts legend labels symbols to rectangle. I tried some references but i'm getting square on top of default symbol. What I need is this Legend labels with just rectangle
You had almost the solution. You need to create your own symbol using the SVG renderer like that:
// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.rectangle = function (x, y, w, h) {
return ['M', x, y, 'L', x + w*2, y, 'L', x+w*2, y + h,'L', x, y + h, 'z'];
};
if (Highcharts.VMLRenderer) {
Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross;
}
You can learn more about SVG Paths here
Fiddle
Related
This is the image i get..
I have set the left side of red line vertically as the region of interest. Trained a model to detect licence plate where boxes contains the detected object coordinates within ROI. The bounding box appears even before the entire object is within the region of interest. I want the bounding box to appear only after the entire object is within the ROI. This is my code for the bounding box.
x, y, w, h = boxes1[i]
label = ""
color = (0, 0, 255)
cv2.rectangle(frame, (x, y), (x + w, y + h), color, 2)
Draw the rectangle only if x + w is at the left side of the red line.
red_line_x = 200 # for example
x, y, w, h = boxes1[i]
if (x + w) < red_line_x:
color = (0, 0, 255)
cv2.rectangle(frame, (x, y), (x + w, y + h), color, 2)
I used surface.DrawTexturedRectRotated() to make filled circle but it rotates from center and i want to make it rotate from left.
I tried to rotate it but it makes full circle when its 180 degrees
function draw.FilledCircle( x, y, w, h, ang, color )
for i=1,ang do
draw.NoTexture()
surface.SetDrawColor( color or color_white )
surface.DrawTexturedRectRotated( x,y, w, h, i )
end
end
How do i make it to be rotated from left?
If you want a function that allows you to create pie-chart-like filled circle by specifying the ang parameter, your best bet is probably surface.DrawPoly( table vertices ). You should be able to use it like so:
function draw.FilledCircle(x, y, r, ang, color) --x, y being center of the circle, r being radius
local verts = {{x = x, y = y}} --add center point
for i = 0, ang do
local xx = x + math.cos(math.rad(i)) * r
local yy = y - math.sin(math.rad(i)) * r
table.insert(verts, {x = xx, y = yy})
end
--the resulting table is a list of counter-clockwise vertices
--surface.DrawPoly() needs clockwise list
verts = table.Reverse(verts) --should do the job
surface.SetDrawColor(color or color_white)
draw.NoTexture()
surface.DrawPoly(verts)
end
I have put surface.SetDrawColor() before draw.NoTexture() as this example suggests it.
You may want to use for i = 0, ang, angleStep do instead to reduce the number of vertices, therefore reducing hardware load, however that is viable only for small circles (like the one in your example) so the angle step should be some function of radius to account for every situation. Also, additional computing needs to be done to allow for angles that do not divide by the angle step with remainder of zero.
--after the for loop
if ang % angleStep then
local xx = x + math.cos(math.rad(ang)) * r
local yy = y - math.sin(math.rad(ang)) * r
table.insert(verts, {x = xx, y = yy})
end
As for the texturing, this will be very different from rectangle if your texture is anything else than solid color, but a swift look at the library did not reveal any better way to achieve this.
We have a highcharts chart displaying bars for Pass, Honor, Fail in a course. The chart shows the percentage of students for each as a vertical bar.
I would like to have an indicator above the bar that the particular student being viewed fit. So for example if the student received a Pass for the course there would be some indicator/graphic above the Pass bar. See image as an example
It can be done using Highcharts.SVGRenderer
1.Custom path using renderer.path() method (eg. arrow):
arrow = chart.renderer.path([
'M', x, y,
'L', x - size, y - size,
'L', x - size / 3, y - size,
'L', x - size / 3, y - 3 * size,
'L', x + size / 3, y - 3 * size,
'L', x + size / 3, y - size,
'L', x + size, y - size,
'z'
]).attr({
fill: 'orange',
stroke: '#000',
'stroke-width': 1
}).add().toFront();
Demo:
https://jsfiddle.net/BlackLabel/aor76xtn/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
2.Image using renderer.image() method:
arrow = chart.renderer.image(
'https://www.highcharts.com/samples/graphics/sun.png',
x - size / 2,
y - size,
size,
size
).add().toFront();
Demo:
https://jsfiddle.net/BlackLabel/upyx3z0m/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image
I have this image and need to coordinates of the starting point and ending point of the head(until the neck).
I use the below code to crop the image but get the below error :-
import cv2
img = cv2.imread("/Users/pr/images/dog.jpg")
print img.shape
crop_img = img[400:500, 500:400] # Crop from x, y, w, h -> 100, 200, 300, 400
# NOTE: its img[y: y + h, x: x + w] and *not* img[x: x + w, y: y + h]
cv2.imshow("cropped", crop_img)
cv2.waitKey(0)
Error:-
OpenCV Error: Assertion failed (size.width>0 && size.height>0) in imshow, file /Users/travis/build/skvark/opencv-python/opencv/modules/highgui/src/window.cpp, line 325
Question:-
How can I find the coordinates of region of interest items?
If you want pick rectangle: x = 100, y =200, w = 300, h = 400, you should use code:
crop_img = img[200:600, 100:300]
and if you want cut dog's head you need:
crop_img = img[0:230, 250:550]
If you are trying to find the pixel co-ordinate of image that has to be used in the img[] you can simply use ms paint to find the pixel location. for example
img[y1:y2, x1:x2], here to find the values of x1,x2,y1 and y2 you can open the image in ms paint and place you cursor on the location where you need the co-ordinates. Paint will display the co-ordinates of that pixel at the bottom left corner of you mspaint window. consider this location as (x,y).
Screenshot of using MSpaint for getting pixel location.
Let's say I am doing temperature graph for 2 cities. I want to have minimum and maximum temperature for each month and average month temperature in one bar.
I have found (and changed a bit) an example which works perfectly for one city (jsfiddle here). That's the result I want.
Stackoverflow wants me to put some code here because of jsfiddle,
but I really don't know if it is good idea to paste here allt that
long JS code
However I need it for two (or more) cities for each month. For now, I have this (jsfiddle here), but the average points are not placed inside of bars, instead the appear somewhere in the middle.
Is there a way how to have multiple cities with average points placed inside of each bar ? I don't know what I am missing.
Thanks in advance.
Not a perfect solution, but should be good starting point:
(function(H) {
H.wrap(H.seriesTypes.columnrange.prototype, 'drawPoints', function(p) {
var s = this,
chart = s.chart,
xAxis = s.xAxis,
yAxis = s.yAxis,
path, x, y,
r = chart.renderer,
radius = s.barW / 2;
p.call(this);
H.each(this.points, function(p) {
if(p.options.avg) {
y = yAxis.toPixels(p.options.avg * (-1), true);
x = p.plotX + s.columnMetrics.offset + radius;
path = [
'M', x - radius, y - radius,
'L', x + radius, y - radius,
'L', x + radius, y + radius,
'L', x - radius, y + radius,
'Z'
];
if(p.avgShape) {
p.avgShape.attr({
d: path
});
} else {
p.avgShape = r.path(path).attr({
fill: s.options.avgColor
}).add(s.group);
}
}
});
});
})(Highcharts)
Demo: http://jsfiddle.net/r6fha9he/3/
One hacky thing to mention - values are multiplied by *(-1), because toPixels() won't recognize inverted chart, and I would like to avoid using axis.translate(). The same is not necessary for non-inverted chart. In case you are more interested in translate, search source code for:
/**
* Translate from axis value to pixel position on the chart, or back
*
*/
translate: function (val, backwards, cvsCoord, old, handleLog, pointPlacement) {