FacetChart multiple ValueAttributes

Smart GWT Technical Q&A
1

Hello,

I have been working on this for hours and haven’t been able to figure it out. I am probably missing something completely obvious.

What I’m trying to do:
I have a ListGrid populated with historical statistics from a database. The first column (attribute) is a Date object. The columns after that are integer stats such as # of entries, # of accesses, etc. Each row is a “snapshot” of the database stats at a given time.

I want to create a line chart using FacetChart that does the following:
Take the value of the first column (time) and charts a line for each following column on the same chart. So for every row in my ListGrid, I will have a point that maps the Date object to various stats. This way I can see entries over time verses accesses over time vs puts over time, etc. in the same chart.

Here is what I am doing currently (semi-pseudocode):

FacetChart statsFacetChart = new FacetChart();
statsFacetChart.setFacets(new Facet(DATE_ATTRIBUTE,"Date"), new Facet(ENTRY_ATTRIBUTE, "Entries") ...[all my other stats columns]...);

statsFacetChart.setValueProperty(DATE_ATTRIBUTE); // This isn't quite right...

statsFacetChart.setChartType(ChartType.LINE);
statsFacetChart.setTitle("Historical Statistics");

I can successfully graph one attribute over time (such as # of entries) when I set the only facet as the DATE_ATTRIBUTE and the ValueProperty to the ENTRY_ATTRIBUTE. However, since I can only set one ValueAttribute, I don’t know how to have additional line graphs in the same chart with other stats.

I am fairly comfortable with FacetCharts in general and have used them successfully in other parts of my project (Pie charts are super handy in SmartGWT!), but can’t for the life of me figure out how to accomplish this task.

Thanks for any input, and feel free to ask for clarifications.

-Alex

2

Hi Alex,

The valueProperty is the numeric value that is plotted, the first facet becomes the X axis labels and the second becomes a legend.

So you want to rearrange your data a bit - provide one record per data point, your first facet is the dates, the second facet is a list of the different lines (each with a different color in the legend) that you want to see.

In JSON, this might look like:

// first line:
{ date:"Monday", series:"Entries", value:5 },
{ date:"Tuesday", series:"Entries", value:6 },
// second line:
{ date:"Monday", series:"Accesses", value:3 },
{ date:"Tuesday", series:"Accesses", value:1 },
...
3

Ah, I see, that makes sense. I have restructured my data source to match your example, and it’s almost working.

The last question I have: you say that the second Facet should be a list of the various properties I would like to graph. How does one make a Facet that is a list? My initial thought was to use

Facet.setValues(new FacetValue(ATTRIBUTE1), new FacetValue(ATTRIBUTE2)...)

and set that as the second facet in my chart, but that doesn’t seem to be quite right. How should I pack my legend list into a Facet?

Thanks so much!

4

You’ve got it right, the second facet has a list of facetValues and each facetValue becomes one line and one entry in the legend.

5

Ah, got it all working. For those who stumble across this thread trying to do something similar, this is how I got everything working.

Creating the FacetChart:

FacetChart statsChart = new FacetChart();
Facet dateFacet = new Facet(DATE_ATTRIBUTE);
		
Facet legendFacet = new Facet(DATA_TYPE_ATTRIBUTE);
		legendFacet.setValues(
			new FacetValue(ENTRY_COUNT_ATTRIBUTE, "Entries"),
			new FacetValue(PUT_COUNT_ATTRIBUTE, "Puts"),
                        etc....
		);
		
statsChart.setFacets(dateFacet,legendFacet);
statsChart.setValueProperty(VALUE_ATTRIBUTE);
statsChart.setChartType(ChartType.LINE);
statsChart.setData(statsRecordList);

Creating the Data Source:

RecordList statsRecordList = new RecordList();
for(StatStorageItemType record:listOfStatStorageItems){
	Record entryRecord = new Record();
	entryRecord.setAttribute(DATE_ATTRIBUTE, record.getDate());
	entryRecord.setAttribute(DATA_TYPE_ATTRIBUTE, ENTRY_COUNT_ATTRIBUTE);
	entryRecord.setAttribute(VALUE_ATTRIBUTE, record.getEntryCount());
	statsRecordList.add(entryRecord);

	Record putRecord = new Record();
	putRecord.setAttribute(DATE_ATTRIBUTE, record.getDate()); // Since this is the same, they will show up in the same place on the chart
	putRecord.setAttribute(DATA_TYPE_ATTRIBUTE, PUT_COUNT_ATTRIBUTE);
	putRecord.setAttribute(VALUE_ATTRIBUTE, record.getPutCount());
	statsRecordList.add(putRecord);
	
	etc...
}

All of the CAPITALIZED items are string constants I declared elsewhere.

By doing this, I am able to have a chart with multiple lines for the different attributes, by date. Thanks for your help!

6

Glad to hear it, and thanks for posting your final source.

7

Hello,

How would I get a DataSource to return the data to be graphed?
So binding a datasource to a facetgraph.

Thanks,
Evan