FacetChart: Controlling x-axis labels on Scatter Charts

[pci-abarbaro]

Greetings,

We are using SGWT Enterprise Edition and have a need to control the labels displayed on the x-axis of a Scattered Chart. Specifically, we need to be able to

• Set the start (minimum) value of the Y-axis
• Set the end (maximum) value of the Y-axis
• Set the spacing (delta) for the x-axis label marks (aka tick-marks)

We have used your sample from the SGWT EE showcase to illustrate the issue. The only change we did was to make the chart size smaller (using setHeight, setWidth). This emulates our business case because we have a screen where we have a page that displays numerous charts next to each other in a grid arrangement (10 rows x 5 columns or so). We would like the following chart to show with the following properties

• Xmin = 0 - using setXAxisStartValue
• Xmax = 9 - using setXAxisEndValue
• Ymin = 0 - using setAxisStartValue
• Ymax = 1.5 - using setAxisEndValue
• x-axis label marks at 0, 1, 2, 3, ..., 8,, 9 (i.e. spacing of 1) - we could not find a way to achieve this
• y-axis label marks at 0, 0.25, 0.5, ..., 1.25, 1.5 (i.e. spacing of 0.25) - we could not find a way to achieve this

As you can see in the picture below, there is sufficient space to display the chart with our requirements but we cannot force the framework to do what we need. In other words, the framework is deciding how to space the x-axis and y-axis labels. We have tried at length with the various API options to no avail (setMinLabelGap).

We have the exact same situation with scatter charts where the x-axis is a date/time and we would like to guarantee that the x-axis labels are placed at arbitrary points (for example every 1 hour or every 2 hours), but again the framework always ends up choosing where to put the labels, and this greatly reduces the presentation quality for our users.

[pci-abarbaro]

Attached are the source files for the case also.
Thanks!

[Isomorphic]

Your test code makes no attempt at all to set x or y axis start or end values. You weren't clear: are you having difficulties with these properties?

As far as gradations, the FacetChart is designed to generate gradations based on placing one gradation every so many pixels. Only a fixed-sized chart could possibly allow specific gradations to be specified; we don't have any such feature because generally, in a web application, a fixed-sized chart would be a very bad idea (consider mobile, if nothing else). Specific gradations would also prevent adapting to data changes, switching visualizations, and other features, so it would severely degrade the usability of the chart.

If you have some kind of corner case where fixed-sized charts make sense, we could add features to enable more control over gradations - this could take the form of:

1. just an API to force a certain set of gradations (with all the drawbacks discussed above)

2. APIs to influence gradations. For example, right now 0.25 would never be automatically chosen as a gradation increment. We could provide an API similar to facetChart.logGradations which would allow you to specify preferred increments in a magnitude-independent way

3. there is already an internal "pixelsPerGradation" property that affects spacing. We could make this settable, and make it settable independently per axis

We'd advise going for 2 & 3 - less work and doesn't severely downgrade the chart. All of these options would fall under Feature Sponsorship.

[pci-abarbaro]

Thanks for the prompt response! Agreed, some clarification is needed.

We had no problem setting x or y axis start end values. The main challenge is setting the X and Y gradation marks. Below is a real-life example from our application, with notes. We don't see this as a corner case, since we're displaying hourly data for a 1-day period, and would like to control on which hours the gradation marks shows. As explained in the screenshot, we have ways of responding to the size of the screen and determining the interval for the gradation marks. This is a fairly common construct.

Of the 3 options you recommended, we would like to have #1 - an API to force a certain set of gradations.

Thanks for your help!

[Isomorphic]

Repeating charts is a good reason for matching start/end values on axes.

As far as controlling gradations, we're still not sure why you'd choose #1 (specify each gradation) over #2 and #3. Again #2 and #3 together are likely to be less expensive for you, and more general purpose. You won't need code to adjust gradations on the fly if the user is allowed to, for example, zoom into one chart or a group of charts. But it's up to you of course.

For your requirement of formatting date values just so, the existing setX/YAxisValueFormatter() API looks like it should handle this requirement. Please try this out now, so that if you need something further here, you can call it out as a specific requirement in your sponsorship.

As per the Feature Sponsorship page we linked you to, the next step is to use the Contact page to kick off the estimate process. This would be a 6.0 feature at the earliest (and you'll need to move quickly for that). Reference this thread, and be sure to note that:

1. you want to manually individual specify gradations

2. you need this for date-valued axes

3. try to think through any features that either must continue to work or need not work when you are controlling gradations. For example, we already explained that switching visualization can't work, but what about multi-series, zoom, logarithmic scales, multi-axis charts, etc?