i have this chart
enter image description here
and i want the pixel or columns in that chart total is 36 pixel in X axis, how to do that??
this is my code
let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.labels.template.disabled = true;
dateAxis.strictMinMax = true;
dateAxis.max = moment("23:59", "HH:mm").toDate().getTime();
i use dateAxis on x Axis
i have tried, but i haven't found the right method yet
Related
CartesianGrid allows me to set the verticalPoints and horizontalPoints to be shown.
Unfortunately, these values are in pixel values on the chart, not in the coordiantes of the x and y domains.
I must be missing something. I have an x-axis and a y-axis. How can I map a value in those domains into positions on the chart?
So, given some constants defining the chart:
const chartWidth = 600; // width set on our chart object
const xAxisLeftMargin = 10; // margins set on our chart object
const xAxisRightMargin = 20;
const xPadding = 0; // padding set on both sides of xAxis
const yAxisWidth = 120; // total widths of all yAxes
we can use d3 to create an xScale, like this:
const leftX = 0 + yAxisWidth + xAxisLeftMargin + xPadding;
const rightX = chartWidth - xPadding - xAxisRightMargin;
// note that rightX assumes there are no axes on the right hand side
const xScale = d3.scaleLinear().domain(xDomain).range([leftX, rightX]);
Then assuming we have an array of verticalPoints:
const verticalPoints: number[] = [];
we just add values in the xDomain like this:
verticalPoints.push(xScale(value))
and we can render our vertical lines on the x-axis with the CartesianGrid like this:
<CartesianGrid stroke="#d5d5d5" verticalPoints={verticalPoints} />
Hi All I have a scatterplot and simply need to add a label to show the median of all values on the x axis. Everything I have tried gives me the value for each point on the x axis.
ggscatter(df, x = "wt", y = "mpg",
add = "reg.line",
conf.int = TRUE,
add.params = list(color = "blue", fill = "lightgray"))+
stat_cor(method = "pearson", label.x = 3, label.y = 30)+
stat_summary(fun.data = function(x) data.frame(y=30, label =
paste("Median=",median(x))), geom="text")
How do I get the stat_summary function to calculate all values on the x axis?
(note this must be simple; sorry I just cant figure it out!).
Result is a single label for the median of each axis
I'm writing a function in matlab to zoom or shrink an image using bicubic interpolation. However, my function resizes an image along both rows and columns. What if I want to enlarge the image along the rows only, or along the columns only? This is my code so far
function pic_new = zoom_image(pic, zoom_value)
actualSize = size(pic);
newSize = max(floor(zoom_value.*actualSize(1:2)),1);
newX = ((1:newSize(2))-0.5)./zoom_value+0.5; %# New image pixel X coordinates
newY = ((1:newSize(1))-0.5)./zoom_value+0.5;
oldClass = class(pic); %# Original image type
pic = double(pic); %# Convert image to double precision for interpolation
if numel(actualSize) == 2
pic_new = interp2(pic,newX,newY(:),'cubic');
end
pic_new = cast(pic_new,oldClass);
end
Updated: I was able to resize the image both along rows and columns. However, it doesn't work right
This is the original image: https://imagizer.imageshack.us/v2/895x383q90/r/903/4jM76I.png
This is the image after being enlarge 2.5 along rows and shrunk 1.3 along columns: https://imagizer.imageshack.us/v2/323x465q90/r/673/EHIaoB.png
Why is there such a black box in the result image?
Updated 2: This is how I did: in the command window type
>> img = imread('pic.pgm');
>> newImage = zoom_image(img, 2.5, 1/1.3);
>> imshow(newImage)
Using imresize it can be easily achieved
pic_new = imresize( pic, newSize, 'bicubic' );
Where newSize is the new size of the image (height and width). The new aspect ratio can be arbitrary and does not have to be the same as the aspect ratio of the new image.
For example, shrinking an image by 1/2 along the rows and leaving number of columns unchanged:
[nCol nRows] = size( pic(:,:,1) );
pic_new = imresize( pic, [nCols round( nRows/2 ) ], 'bicubic' );
Try editing your function to have a separate zoom for rows and columns, a la
function pic_new = zoomfunc(pic, zoom_valueX, zoom_valueY)
actualSize = size(pic);
newSize = max(floor([zoom_valueY zoom_valueX].*actualSize(1:2)),1);
newX = ((1:newSize(2))-0.5)./zoom_valueX+0.5; %# New image pixel X coordinates
newY = ((1:newSize(1))-0.5)./zoom_valueY+0.5;
oldClass = class(pic); %# Original image type
pic = double(pic); %# Convert image to double precision for interpolation
if numel(actualSize) == 2
pic_new = interp2(pic,newX,newY(:),'cubic');
end
pic_new = cast(pic_new,oldClass);
end
What I would like to do is plot an image of a graph (from say a pdf file or a scanned image). Next, I would like to overlay an axis on the graph in the image, and then plot data on that axis (over the image).
Using imtool, I know the coordinates of the graph in the image (x range = ~52-355 pixels, and y range = 23(top) - 262(bottom) pixels in this case).
This is what I have tried:
I = imread('C:\MATLAB\R2014a\help\images\ref\ftrans2_fig.png');
I = squeeze(uint8(mean(I,3)));
figure, imshow(I)
[rows, cols] = size(I);
x_data = (-1 : .01 : +1)';
y_data = 1 - x_data.^2;
h1 = axes('Position',([52, 23, 355-52, 262-23] ./ [cols, rows, cols, rows] ));
set(h1, 'Color', 'none')
hold on
plot(x_data, y_data, '-rx')
Question: Knowing the pixel coordinates of the graph in the image, how do I determine the proper position of the axis in the figure, (my code fails to account for the actual size of the figure box, the gray border around the image). I have to do this for several images and sets of data, so I would like an automated method, assuming I find the coordinates of the graphs in the image ahead of time.
Thanks for your reply! (1st time posting, please be kind)
You may be able to solve your problem by forcing the image onto the same axis as the plot. Try this:
I = imread('C:\MATLAB\R2014a\help\images\ref\ftrans2_fig.png');
I = squeeze(uint8(mean(I,3)));
[rows, cols] = size(I);
x_data = (-1 : .01 : +1)';
y_data = 1 - x_data.^2;
h1 = axes('Position',([52, 23, 355-52, 262-23] ./ [cols, rows, cols, rows] ));
set(h1, 'Color', 'none')
hold on
image(I, 'Parent', h1);
plot(h1, x_data, y_data, '-rx')
That should at ensure that the plot axis and the image axis have the same origin, as they will be one and the same. You may need to adjust your sizing code. Let me know if that doesn't do it for you.
Good Luck!
I think I have it figured out.
It would have been easier if I could use:
figure, h1=imshow(I)
get(h1,'Position')
but that results in "The name 'Position' is not an accessible property for an instance of class 'image'."
Instead, this appears to work:
I = imread('C:\MATLAB\R2014a\help\images\ref\ftrans2_fig.png');
I = squeeze(uint8(mean(I,3)));
in_mag = 300;
figure, imshow(I, 'Border', 'tight', 'InitialMagnification', in_mag)
[rows, cols] = size(I);
x_data = (-1 : .01 : +1)';
y_data = 1 - x_data.^2;
% Coord of graph in image pixels
x_0 = 50; x_max = 354; y_0 = 262; y_max = 23;
h1 = axes('Position',([x_0, rows-y_0, x_max-x_0, y_0-y_max] ...
./ [cols, rows, cols, rows] ));
set(h1,'Color','none')
hold on
plot(x_data, y_data, '-rx')
ylim([0,1.4])
set(gca,'YColor', [0 0 1], 'XColor', [0 0 1])
However, if anybody has a better idea, I would be very happy to explore it!
Thanks
I usually place my axis ticks on the svg using this:
d3.svg.axis().scale(xScale(width)).ticks(4)
Is it possible to get these tick values and their svg coordinates so I can use a custom axis outside the svg using d3.svg.axis() ?
Yes, xScale.ticks(4) should give you the actual tick points as values, and you can pipe those back through your xScale to the the X position. You can also just pull the tick points back from the generated elements after you apply the axis to an actual element:
var svg = d3.select("svg");
var scale = d3.scale.linear()
.range([20, 280])
.domain([0, 100])
var axis = d3.svg.axis().scale(scale).orient("bottom").ticks(9);
// grab the "scale" used by the axis, call .ticks()
// passing the value we have for .ticks()
console.log("all the points", axis.scale().ticks(axis.ticks()[0]));
// note, we actually select 11 points not 9, "closest guess"
// paint the axis and then find its ticks
svg.call(axis).selectAll(".tick").each(function(data) {
var tick = d3.select(this);
// pull the transform data out of the tick
var transform = d3.transform(tick.attr("transform")).translate;
// passed in "data" is the value of the tick, transform[0] holds the X value
console.log("each tick", data, transform);
});
jsbin
In d3 v4 I ended up just parsing the rendered x values from the tick nodes
function parseX(transformText) {
let m = transformText.match(/translate\(([0-9\.]*)/);
let x = m[1];
if (x) {
return parseFloat(x);
}
}