SAPUI5 Combination Chart data and chart formatting - charts

Question

I would like to create a SAPUI5 combination chart - a column chart with a line for a particular category for each month that will compare one year to another. There are about 11 possible categories that the user can choose but the chart would only show one category's information at a time.
It would be similar to the following for one category:
I can create the chart to show data but I am having trouble converting it to use the data based on a category. I would think I can do what I want but I think the issue is in how my data is supplied.
This is my json (I am showing two categories in the data for example - I would like to be able to apply a filter for the category the user chooses):
{
"bullet": [{
"field":"Products Classified",
"months":[{
"month":"1",
"current":"17",
"previous":"140"
} ,{
"month":"2",
"current":"37",
"previous":"66"
},{
"month":"3",
"current":"60",
"previous":"66"
},{
"month":"4",
"current":"41",
"previous":"121"
}]
}, {
"field":"Products Not Classified",
"months":[{
"month":"1",
"current":"7",
"previous":"25"
} ,{
"month":"2",
"current":"50",
"previous":"78"
},{
"month":"3",
"current":"55",
"previous":"56"
},{
"month":"4",
"current":"45",
"previous":"60"
}]
}]
}
Here is part of my controller....
var oModel = new JSONModel("ByYear_sum.json");
sap.ui.model.FilterOperator.EQ, filterText);
var oDataset = new FlattenedDataset({
dimensions: [{
name: "Month",
value: "{month}"
}],
measures: [{
name: "Start Year",
value: "{current}"
},{
name: "End Year",
value: "{previous}"
}],
data: {
path: "/bullet"
filters: [oFilter]
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
oVizFrame.setVizProperties({
plotArea: {
dataLabel: {
visible: true,
formatString: '#,##0'
}
},
valueAxis: {
title: {
visible: false
}
},
legend: {
title: {
visible: false
}
},
title: {
visible: true,
text: 'Year Comparison'
}
});
var feedValueAxis = new FeedItem({
'uid': "valueAxis",
'type': "Measure",
'values': ["Start Year", "End Year"]
}),
feedCategoryAxis = new FeedItem({
'uid': "categoryAxis",
'type': "Dimension",
'values': ["Month"]
});
The value of filterText would be used to show the chart information for the chosen category (for example Products classified or Products Not classified).
I tried putting /months/ in front of the values (for example "{/months/previous}") to get to the values for the category (i.e. Products classified) but it doesn't seem to find the data properly (I get no data).
I would also like to display the text value of the month, not the number, how can I apply a formatter to the value?
My example chart shows year numbers....The years being compared come from user input, I currently cannot figure out how to get the values of the years chosen to show - I had to put 'Start Year' and 'End Year'. Is there a way to make the legend and popover show the year values (so dynamic based on user input)? Everything I tried gave me errors and wouldn't display the chart - I think because the feeds needed to match the same text and when I tried using a value it couldn't match.

Answer 1

I was finally able to get this to work, with some guidance from others.
1) In the title, I was able to set and update the title properties when the user chose a different filter.
2) The path was incorrect as well....it should have been /bullet/0/months - the '0' changes depending on the filter. I just had to get the index of the category chosen and use that for the path.
3) I changed my data to return the month abbreviation, instead of the number.
4) I was finally able to get the years to show both in the legend and the popup if you click a data point. In the FlattenedDataSet definition, I put a variable name in that is passed in when creating the FlattenedDataSet - so example: name was name: sYr, where sYr was passed in and the value of the year. In the FeedItem creation, the values look like: 'values': [sYr, eYr] I thought I had tried these, but it seemed to work with all the other changes that were made. I just had to create new FlattenedDataSet and FeedItems (and remove the old FeedItems) and update the chart with the new values.