Facet Chart with multiple chart types

[Chris82]

1. SNAPSHOT_v9.1d_2013-09-03/EVAL Deployment
I'm using 4.1d Eval Enterprise for testing right now (since zooming is only in that) otherwise my team has a license for and uses 4.0p Enterprise

2. Firefox 23.0.1


Hi, I would like to use facet charts to show a chart that has 4 series on it. 3 would be ChartType.Area and the fourth ChartType.Line. I've seen in the examples that something similar can be done using multi-axis (although I have yet to be able to get this to work with my data). Ideally it would be all on the same axis. I've attached a screenshot to show what I'm hoping to accomplish. Is it possible to specify different chart types per facet/series?

If not how can I do this using multiple axes? In all the examples there are equal amount of series per axes (i.e. if axis 1 has 3 series then axis 2 has 3 series). In my case the first would have 3 and the 2nd would have just 1.

Any help or suggestions are appreciated.

Thanks,
Chris

[Isomorphic]

Re: your version, zooming is in 4.0 as well.

There's not currently a way to use different visual elements for different data series without also introducing a separate axis.

However, in your screenshot, it looks like the line that you want might always be a constant value. In that case, you could add it as a separate element, not part of the data set, as shown in this sample.

[Chris82]

Thank you for your suggestion. It just so happens that in the example its a straight line, there is another chart I have where it is not. So, I'd like to be able to add it as a facet rather than a DrawItem. If the only way is with a second axis then that is what I'll do.

Is it possible to have 3 facets on one axis and then 1 on a second axis? As I mentioned, the examples all have the same amount of facets per axis. When I try to implement multi-axis that is the problem I run into, I end up with facet chart trying to draw 3 series on each axis.

Thanks,
Chris

[Isomorphic]

What do you mean by "trying to draw 3 series on each axis" - in what way does the chart "try" something? If you provide no data for 2nd and 3rd series on the second axis, you should just see nothing for those series.

[Chris82]

Sorry, that was a little vague. Hopefully the below code snippet and screen shot will help. The code is what I'm using to create the facets. The screen shot is the resultant facet chart. When I try to add another axis all of a sudden 8 facets show up: 4 on each axis. Rather than 3 on the first axis and 1 on the second. I'm probably setting it up properly with the inlined values, but I haven't figured out whats wrong yet.

The data is inlined in each record and takes the below format.
TIME | ACTUAL | FORECAST | OPTIMIZED | RATING

i.e. for the first record:
00:00 | 20.98 | 0.0 | 0.0 | 50.0

private void configureFacets(FacetChart fChart) {
	Facet xAxis = new Facet();
	xAxis.setId("TIMESTAMP");
	xAxis.setTitle("TIME");

	Facet allSeries = new Facet();
	allSeries.setId("SERIES");
	allSeries.setTitle("Series");
	allSeries.setInlinedValues(true);
		
	FacetValue actualVal = new FacetValue("ACTUAL", "Actual");
	FacetValue forecastVal = new FacetValue("FORECAST", "Forecast");
		FacetValue optimizeVal = new FacetValue("OPTMIZED", "Optimized");
		FacetValue ratingVal = new FacetValue("RATING", "Rating");
		
	allSeries.setValues(ratingVal, actualVal, forecastVal, optimizeVal);

	fChart.setExtraAxisMetrics("RATING");
	MetricSettings metricSettings = new MetricSettings();
	metricSettings.setChartType(ChartType.LINE);
	metricSettings.setShowDataPoints(false);
	fChart.setExtraAxisSettings(metricSettings);
	fChart.setFacets(xAxis, allSeries);
}

Thanks,
Chris

[Isomorphic]

Do you have a dataset we can use to actually run this? We would have expected those extra legend entries to be automatically removed if there's no data for those series. You also have a weird artifact at the color boundary in the area chart that we'd like to take a look at.

[Chris82]

That chart has 288 points. I've shrunk my data set size to 24 points and that is what's posted here. Hopefully that makes reproducing/testing easier. There is also a new screenshot representing that data. If you need the data in a different format or something please let me know.

Thanks,
Chris

00:00,21.1860554,0,0,75
01:00,19.66016636,0,0,75
02:00,18.09032154,0,0,75
03:00,16.89203163,0,0,75
04:00,15.75523604,0,0,75
05:00,15.37807799,0,0,75
06:00,15.51579283,0,0,75
07:00,15.58243102,0,0,75
08:00,14.18292812,0,0,75
09:00,16.92732232,0,0,75
10:00,19.64769769,0,0,75
11:00,23.71126166,0,0,75
12:00,26.51523766,0,0,75
13:00,27.33980595,0,0,75
14:00,28.19253358,0,0,75
15:00,29.22775231,0,0,75
16:00,29.59738909,0,0,75
17:00,30.32597096,0,0,75
18:00,0,31.26895469,0,75
19:00,0,29.98896053,0,75
20:00,0,29.10843936,0,75
21:00,0,30.29070612,0,75
22:00,0,28.63748468,0,75
23:00,0,25.83193122,0,75

[Isomorphic]

Instead of 0, where there is really *no data at all*, use null in the actual Records passed to the chart. 0 is not the same as no data, and it explains why the two area shapes come down to zero instead of just being adjacent, and why there are still legend entries.

[Chris82]

Changing the 0's to nulls didn't do much (all of those 0's meant there was no data). Now they overlap each other even more. Is there a setting on the chart object to not show null values?

Is this what you meant to do?

Thanks,
Chris

00:00,21.1860554,null,null,75
01:00,19.66016636,null,null,75
02:00,18.09032154,null,null,75
03:00,16.89203163,null,null,75
04:00,15.75523604,null,null,75
05:00,15.37807799,null,null,75
06:00,15.51579283,null,null,75
07:00,15.58243102,null,null,75
08:00,14.18292812,null,null,75
09:00,16.92732232,null,null,75
10:00,19.64769769,null,null,75
11:00,23.71126166,null,null,75
12:00,26.51523766,null,null,75
13:00,27.33980595,null,null,75
14:00,28.19253358,null,null,75
15:00,29.22775231,null,null,75
16:00,29.59738909,null,null,75
17:00,30.32597096,null,null,75
18:00,null,31.26895469,null,75
19:00,null,29.98896053,null,75
20:00,null,29.10843936,null,75
21:00,null,30.29070612,null,75
22:00,null,28.63748468,null,75
23:00,null,25.83193122,null,75

[Isomorphic]

We'll check on that odd overlap issue, there shouldn't be a slanted line there.

On the legend items you don't want, a better solution is actually to use metricSettings.multiFacet:false.

[Chris82]

Thank you for checking on the overlap issue.

As far as the extra legend items, I've tried setting the multiFacet value to false but they did not go away.

-Chris

MetricSettings metricSettings = new MetricSettings();
metricSettings.setChartType(ChartType.LINE);
metricSettings.setShowDataPoints(false);
metricSettings.setMultiFacet(false);

[Chris82]

Is there any update on the overlap issue?

Thanks,
Chris

[Isomorphic]

We're still looking at both the overlap and extra legend items issues. The overlap issue is likely to be a bugfix where you won't need to change your code (stick to the strategy of supplying nulls, which is correct).

[Isomorphic]

We fixed the issues with the way area shapes are drawn when there are nulls in the data (the "overlap issue") and the issue where legend items would appear even if a data series was all nulls.

However in doing so, we noticed some issues in your code:

1. The allSeries Facet needs to be made the metric facet by setting the id property to "metric". Without this, FacetChart interprets the allSeries Facet as the legend facet and drew the legend assuming that there would be a RATING value for each combination of timestamp on the data label facet and { RATING, ACTUAL, FORECAST, OPTIMIZED } on the legend facet.

-        allSeries.setId("SERIES");
+        allSeries.setId("metric");

2. The extraAxisMetrics needs to include three of the metrics, with the fourth metric drawn using the main value axis. For example:

-        fChart.setExtraAxisMetrics("RATING");
-        MetricSettings metricSettings = new MetricSettings();
-        metricSettings.setChartType(ChartType.LINE);
-        metricSettings.setShowDataPoints(false);
-        metricSettings.setMultiFacet(false);
-        fChart.setExtraAxisSettings(metricSettings);
+        fChart.setValueProperty("RATING");
+        fChart.setChartType(ChartType.LINE);
+        fChart.setShowDataPoints(false);
+        fChart.setExtraAxisMetrics("ACTUAL", "FORECAST", "OPTIMIZED");
+
+        MetricSettings actualSettings = new MetricSettings();
+        actualSettings.setChartType(ChartType.AREA);
+        actualSettings.setShowDataPoints(false);
+
+        MetricSettings forecastSettings = new MetricSettings();
+        forecastSettings.setChartType(ChartType.AREA);
+        forecastSettings.setShowDataPoints(false);
+
+        MetricSettings optimizedSettings = new MetricSettings();
+        optimizedSettings.setChartType(ChartType.AREA);
+        optimizedSettings.setShowDataPoints(false);
+
+        fChart.setExtraAxisSettings(actualSettings, forecastSettings, optimizedSettings);

[Chris82]

I tried the new build as well as the code you posted and both work as expected. Thank you for all the help.

-Chris