Announcement

**Isomorphic** · 1 Jul 2016, 10:51

That formatter is not called for Date/Time values, as we discuss here. See the paragraph that starts, "The format of the Date labels is fixed by FacetChart. "

You'll instead need to make the appropriate calls to change the Date/Time format (discussed in the link).

**carlossierra** · 1 Jul 2016, 12:57

Thanks Isomorphic. This is what I was looking for. Specifically, I added a call to setLabelCollapseMode(LabelCollapseMode.TIME) to do the trick in my particular case.

Now, IMHO, I don't think the result is as good as it could be, because even though I have a chart that has data for a two year period (with 368 data points in total), only 1 label ('2014') is showing for the whole period. In cases like this, the chart could afford to show many more labels, and still look good, without labels overlapping, but also without sacrificing legibility. Please see the attached screenshot:

Is there any other alternative I can use to get the desired result (show all data points, and as many labels as can fit "gracefully" in the available space, but without sacrificing legibility too much)?

As always, thanks for your help!

Attached Files

**Isomorphic** · 1 Jul 2016, 13:17

The previous response was just directing you to the javadoc for setLabelCollapseMode() because that's where we explain that the x-axis formatter doesn't run for Dates or Times. There's no need for you to actually call it unless you want that mode to be active. As discussed there, if you want to change the formatting of your Dates or Times, you can call APIs such as setNormalTimeDisplayFormatter() or setShortTimeDisplayFormatter(), as appropriate.

We will add a cross link in the docs for setXAxisValueFormatter() that mentions this requirement.

**carlossierra** · 1 Jul 2016, 16:27

Hi Isomorphic. So, if I understand correctly, setXAxisValueFormatter() won't have any effect when the X axis contains Date values. But if I supply other non-Date values, it should be used to enable label modification?

Because if this is the case, it still isn't working for me. Please see this updated case, where I don't use well formatted dates in the chart data supplied for the X axis, and then when I try use setXAxisValueFormatter() to generate the desired labels, it still won't trigger ValueFormatter and my values stay unmodified:

TestCases.java

Code:

public class TestCases implements EntryPoint {  
      
    public void onModuleLoad() {  
        FacetChart chart = new FacetChart();  
        chart.setWidth(600);  
        chart.setHeight(400);  
        chart.setChartType(ChartType.COLUMN);  
        chart.setStacked(true);  
        chart.setValueTitle("Percent");  
        chart.setBorder("1px solid black");  
        chart.setShowTitle(false);  
        chart.setShowChartRect(true); 
        chart.setShowValueOnHover(true);
  
        Facet areaFacet = new Facet();  
        areaFacet.setValues(new FacetValue("1", "North America"));  
        areaFacet.setId("area");  
        Facet metricFacet = new Facet();  
        metricFacet.setValues(new FacetValue("percent", "Percent"),  
                              new FacetValue("events", "Events"),  
                              new FacetValue("throughput", "Throughput"));  
        metricFacet.setInlinedValues(true);  
        metricFacet.setId("metric");  
  
        chart.setFacets(new Facet("xAxis"), areaFacet, metricFacet);  
        chart.setExtraAxisMetrics("events", "throughput");  
        MetricSettings metricSettingsEvents = new MetricSettings();  
        metricSettingsEvents.setChartType(ChartType.LINE);  
        metricSettingsEvents.setMultiFacet(true);  
        metricSettingsEvents.setShowDataPoints(true);  
        metricSettingsEvents.setValueTitle("Events");
        metricSettingsEvents.setShowValueOnHover(true);
        MetricSettings metricSettingsThroughput = new MetricSettings();  
        metricSettingsThroughput.setChartType(ChartType.AREA);  
        metricSettingsThroughput.setMultiFacet(true);  
        metricSettingsThroughput.setShowDataPoints(true);  
        metricSettingsThroughput.setValueTitle("Throughput");  
        metricSettingsThroughput.setShowValueOnHover(true);
        chart.setExtraAxisSettings(metricSettingsEvents, metricSettingsThroughput);  
  
        chart.setData(ThreePlusAxesChartData.getData());  
  
        chart.setXAxisValueFormatter(new ValueFormatter(){
            @Override
            public String format(Object value) {
                StringBuffer axisLabel = new StringBuffer((String) value);
                axisLabel.append(" of 2012");
                return axisLabel.toString();
            }
            
        });
        
        HStack layout = new HStack();  
        layout.addMember(chart);  
        layout.draw();  
    }
}

ThreePlusAxesChartData.java

Code:

public class ThreePlusAxesChartData extends Record {  
  
    public ThreePlusAxesChartData(String area, String xAxis, float percent, int events, int throughput) {  
        setAttribute("area", area);  
        setAttribute("xAxis", xAxis);  
        setAttribute("percent", percent);  
        setAttribute("events", events);  
        setAttribute("throughput", throughput);  
    }  
  
    public static ThreePlusAxesChartData[] getData() {  
        return new ThreePlusAxesChartData[] {  
            new ThreePlusAxesChartData("1", "13 Sept", 0.55f, 8751, 20),  
            new ThreePlusAxesChartData("2", "13 Sept", 0.32f, 3210, 24),  
            new ThreePlusAxesChartData("3", "13 Sept", 0.21f, 2071, 28),  
            new ThreePlusAxesChartData("1", "14 Sept", 0.49f, 6367, 30),  
            new ThreePlusAxesChartData("2", "14 Sept", 0.41f, 3771, 36),  
            new ThreePlusAxesChartData("3", "14 Sept", 0.22f, 2166, 39),  
            new ThreePlusAxesChartData("1", "15 Sept", 0.7f, 6011, 41),  
            new ThreePlusAxesChartData("2", "15 Sept", 0.19f, 1950, 45),  
            new ThreePlusAxesChartData("3", "15 Sept", 0.25f, 2375, 48),  
            new ThreePlusAxesChartData("1", "16 Sept", 0.47f, 9234, 51),  
            new ThreePlusAxesChartData("2", "16 Sept", 0.25f, 4321, 55),  
            new ThreePlusAxesChartData("3", "16 Sept", 0.3f, 909, 59),  
            new ThreePlusAxesChartData("1", "17 Sept", 0.3f, 6144, 54),  
            new ThreePlusAxesChartData("2", "17 Sept", 0.44f, 4077, 50),  
            new ThreePlusAxesChartData("3", "17 Sept", 0.06f, 1477, 52),  
            new ThreePlusAxesChartData("1", "18 Sept", 0.7f, 8502, 48),  
            new ThreePlusAxesChartData("2", "18 Sept", 0.29f, 3061, 44),  
            new ThreePlusAxesChartData("3", "18 Sept", 0.22f, 2955, 42),  
            new ThreePlusAxesChartData("1", "19 Sept", 0.45f, 7020, 53),  
            new ThreePlusAxesChartData("2", "19 Sept", 0.22f, 3040, 59),  
            new ThreePlusAxesChartData("3", "19 Sept", 0.31f, 2177, 53),  
            new ThreePlusAxesChartData("1", "20 Sept", 0.69f, 6712, 48),  
            new ThreePlusAxesChartData("2", "20 Sept", 0.21f, 4981, 42),  
            new ThreePlusAxesChartData("3", "20 Sept", 0.12f, 1234, 45),  
            new ThreePlusAxesChartData("1", "21 Sept", 0.6f, 9321, 48),  
            new ThreePlusAxesChartData("2", "21 Sept", 0.29f, 6532, 49),  
            new ThreePlusAxesChartData("3", "21 Sept", 0.35f, 6622, 45),  
            new ThreePlusAxesChartData("1", "22 Sept", 0.37f, 8389, 48),  
            new ThreePlusAxesChartData("2", "22 Sept", 0.35f, 5104, 51),  
            new ThreePlusAxesChartData("3", "22 Sept", 0.3f, 5111, 55),  
            new ThreePlusAxesChartData("1", "23 Sept", 0.4f, 7555, 49),  
            new ThreePlusAxesChartData("2", "23 Sept", 0.34f, 2345, 52),  
            new ThreePlusAxesChartData("3", "23 Sept", 0.16f, 3456, 57),  
            new ThreePlusAxesChartData("1", "24 Sept", 0.62f, 9567, 60),  
            new ThreePlusAxesChartData("2", "24 Sept", 0.12f, 5678, 55),  
            new ThreePlusAxesChartData("3", "24 Sept", 0.37f, 6789, 51)  
        };  
    }  
}

In this case, the result is still a chart with unmodified X axis labels.

Thanks!!

**Isomorphic** · 2 Jul 2016, 05:08

The confusion here is that as the javadoc for setXAxisValueFormatter() explains, it only controls formatting of gradation labels on the x-axis. In many cases, including your sample code, there is no gradation scale on the x-axis. The labels there are actually exactly the facet values - originally the "date" facet and then renamed as the "xAxis" facet.

That is, the labels are in 1-to-1 correspondence with the associated facet values. A gradation scale is only built where there isn't such a 1-to-1 correspondence, as in the case of the y-axis of your sample, or for "bar" charts (which have horizontal bars) or scatter charts. There's probably not much value in trying to "format" these facet values since they're strings in both of your samples, but you can actually generate a separate "formatted" title for each facet id if you like. To do that, you'd have to do something like:

Code:

Facet xAxisFacet = new Facet("xAxis");
xAxisFacet.setValues(new FacetValue("13 Sept", "Mike"),
                     new FacetValue("14 Sept", "John"),
                     new FacetValue("15 Sept", "Jack"),
                     new FacetValue("16 Sept", "Eric"),
                     new FacetValue("17 Sept", "Pete"),
                     new FacetValue("18 Sept", "Hank"),
                     new FacetValue("19 Sept", "Phil"),
                     new FacetValue("20 Sept", "Mark"),
                     new FacetValue("21 Sept", "Jake"),
                     new FacetValue("22 Sept", "Ezra"),
                     new FacetValue("23 Sept", "Todd"),
                     new FacetValue("24 Sept", "Bill"));

for a hardcoded remapping, or the following to apply a "format":

Code:

ThreePlusAxesChartData[] data0 = ThreePlusAxesChartData.getData();
Set<String> xAxisFacetValueIds = new HashSet<String>();
List<FacetValue> xAxisFacetValues = new ArrayList<FacetValue>();
for(int i = 0; i < data0.length; i++) {
    String xAxisFacetValueId = data0[i].getAttribute("xAxis");
    if (!xAxisFacetValueIds.contains(xAxisFacetValueId)) {
        xAxisFacetValueIds.add(xAxisFacetValueId);
        String xAxisFacetValueTitle = "*** " + xAxisFacetValueId + " ***";
        xAxisFacetValues.add(new FacetValue(xAxisFacetValueId, xAxisFacetValueTitle));
    }
}
Facet xAxisFacet = new Facet("xAxis");
xAxisFacet.setValues(xAxisFacetValues.toArray(new FacetValue[0]));

**carlossierra** · 5 Jul 2016, 05:40

Thanks Isomorphic. That explains things better.

Announcement

setXAxisValueFormatter not working on FacetChart

Comment

Comment

Comment

Comment

Comment

Comment