Specify or calculate size of plot area

[Sven Zeisberg]

Hi,

I'm trying to draw a technical line chart which complies with an ANSI standard. You can see an example of the chart in the picture.

The main challenge for me is to get the proportions between the two axises correct. One step on the logarithmic x axis (e.g. 1000 - 2000) should have the same width as 20 db height on the y axis (e.g. (0,1000) and (20,2000) are the corners of a perfect square). 

Is there any way to influence the size of the plot area itself instead of the size of the whole widget? Or can I somehow calculate the "information padding" which is caused by the information surrounding the plot area? 
Or is there any other way to achieve this than to calculate the size

Thanks for helping!

[Lavanya Anaimuthu]

Hi Sven,

We have validated your query, and we suspect that your requirement is to maintain the same pixel range in both the x and y axes. Could you please confirm if this is your requirement?

If this is not your requirement, we kindly request you to share more detailed information about your requirement along with expected output screenshots/screen recordings. This will help us assist you better.

Regards,

Lavanya A.

[Sven Zeisberg]

For the data range the ANSI standard defines the pixel range of the x-axis and the y-axis are not exactly the same.

The definition in the standard is that one unit on the logarithmic x-axis (e.g. 125 to 250 Hz, 250 Hz to 500 Hz or 4000 to 8000 Hz as shown above ) has the same pixel range as 20 db on the numeric y-axis.
I have marked it in the picture above: the pixel range on the x-axis from 4000 Hz to 8000 Hz should be the same as the pixel range on the y-axis from -10db to 10 db.

When you look at the initial picture, you can see that I have a bit more than 6 logarithmic units on the x-axis, while I have exactly 6 units on the y-axis.

Maybe I can somehow convince the PO that we cannot achieve absolute accuracy, but I'd like to come as near to it as possible.

Sorry ... I know it is not easy to understand. Actually it took me quite some time to understand the standards requirements myself. 🙈

[Yuvaraj Gajaraj]

Hi Sven,

There is no inbuilt feature. As you mentioned that having the same interval count on both axis and keeping the chart with the same height and width will achieve the same pixel range between the interval on both axes in the chart.

If you have any further questions, please don't hesitate to reach out to us.

Regards,

Yuvaraj.

[Sven Zeisberg]

Unfortunately I don't have the same interval count on both axis. It's 8 units in y direction and a bit more than 8 units in x direction. 

But still, if I had the same amount of units on both axises, I don't think that I can draw conclusion from the widget's size to the plot areas size as there is quite some information surrounding the container (axis labels, grid labels, ...).
:-(  

Maybe it would be a useful feature for some developers, if one could get the plot areas size in future. 

[Yuvaraj Gajaraj]

Hi Sven,

We are validating your query at our end and we will update further details tomorrow. We appreciate your patience until then.

Regards,

Yuvaraj.

[Yuvaraj Gajaraj]

Hi Sven,

You can find the size of the plot area using the onActualRangeChanged and onRendererCreated callbacks. In the onActualRangeChanged callback, you can get the visible minimum and maximum values of the x and y axes. Then, you can convert the visible minimum and maximum values to corresponding pixel values using the pointToPixel method in ChartseriesContoller, which is assigned in the onRendererCreated callback. We have shared the code snippet below for your reference.

Code snippet:

late ChartSeriesController seriesController;

VisibleRange? xAxisDetails;

VisibleRange? yAxisDetails;

SfCartesianChart(

onActualRangeChanged: (args) {

if (args.orientation == AxisOrientation.vertical) {

yAxisDetails = VisibleRange(args.visibleMin, args.visibleMax);

} else {

xAxisDetails = VisibleRange(args.visibleMin, args.visibleMax);

Offset leftTop = seriesController.pointToPixel(

CartesianChartPoint(xAxisDetails!.min, yAxisDetails!.max));

Offset rightBottom = seriesController.pointToPixel(

CartesianChartPoint(xAxisDetails!.max, yAxisDetails!.min));

Rect plotAreaRect = Rect.fromLTRB(

leftTop.dx, leftTop.dy, rightBottom.dx, rightBottom.dy);

}

},

series: <ChartSeries<ChartSampleData, num>>[

LineSeries<ChartSampleData, num>(

onRendererCreated: (controller) {

seriesController = controller;

},

),

],

),

class VisibleRange {

final num min;

final num max;

VisibleRange(this.min, this.max);

}

Regards,

Yuvaraj.