Uniform scaling of both X- and Y-axis

24 views
Skip to first unread message

Alban Hertroys

unread,
Jun 18, 2014, 10:07:43 AM6/18/14
to google-visua...@googlegroups.com
We have a case for a chart where both the X-axis and the Y-axis are dimensions in mm. The graph describes a measured contour.

It would be helpful to our users if both axis would scale uniformly, meaning that any distance measured on one axis should be the same on the other axis. Grid lines would be equally spaced on both axis, etc.
For example, if the distance between major grid lines on the Y-axis is 50mm, then it should also be 50mm on the X-axis. The grid should be a grid of squares of 50x50 mm, not rectangles of 50x50 mm (or any other ratio).

Is this possible, and if so, how to achieve this?

Note: I would prefer if the graph in its entirety would still automatically scale to the amount of space available.

Andrew Gallant

unread,
Jun 18, 2014, 1:42:11 PM6/18/14
to google-visua...@googlegroups.com
The only way to make this happen is to manually set your chart options to match your data.  The simplest example is with a square grid.  To make the grid square, given the height and width for the chart, you would need to set the chartArea.height and chartArea.width options to create a square.  This can be done by either assigning numbers (pixel dimensions) or by assigning percent strings (percent of total chart height/width, as appropriate).  As an example:

var dimension = parseInt(chartHeight * 0.8); // set dimensions of the square to be 80% of the chart's height

in chart options:

chartArea: {
    height: dimension,
    width: dimension
}


You would then need to set the hAxis.viewWindow.min/max and vAxis.viewWindow.min/max options to make sure that both axes are showing the same range of values; they don't have to show the exact same values, just the same range (eg, x-axis max - min = y-axis max - min) so the scale remains the same, eg:

hAxis: {
    viewWindow: {
        min: 0,
        max: 500
    }
},
vAxis: {
    viewWindow: {
        min: 1000,
        max: 1500
    }
}


This can be extended to allow for non-square grids as well, you just need to keep the axis proportions the same as the chartArea proportions.

Alban Hertroys

unread,
Jun 19, 2014, 8:15:29 AM6/19/14
to google-visua...@googlegroups.com


Thanks, that worked.
 
Reply all
Reply to author
Forward
0 new messages