SAPUI5 Charts questions

Question

I am trying to implement a SAPUI5 chart. I tried using the example in the Demo kit and now want to change it to use my data. I can get the chart to display but have a couple of issues.

1) I am having trouble with the 'name' of the dimensions and measures. From what I have had to do to get the chart to show, it seems as though the name has to match the field name in the 'value'. So for instance, if I have the field 'classProducts' I have this: value: {classProducts}' but of course that isn't much of a descriptive title. When I have had the name: 'XXX' if XXX is anything other than 'classProducts', I get this error:

"Failed to create chart:[50014] - Feed classProducts could not accept more data containers."

From what I have found in documentation, the name is what you want to display in the legend and in the chart. Does anyone have any suggestions as to how to change the name shown to be any text I want?

2) I am using a Column chart and would like to compare a value between two years. I can get both years to display but is there a way to show each column in a different color? For instance, the value for 2013 is yellow and 2014 is blue?

3) Is there any known constraints on the height and width of a chart (minimum sizes)? I would like to make the chart real small, since I have to display a few at a time on the screen. I tried changing the width and height from the Demo Kit's values, but when I changed the values, the chart didn't show at all.

Here is my controller:

        var oVizFrame = myView.byId("idVizFrameColumn");
    var oPopOver = myView.byId("idPopOver");
    var oModel = new JSONModel("ByYear_sum.json");

    var oDataset = new FlattenedDataset({
    dimensions: [{
        name: "Year",
        value: "{Year}"
        }],
    measures: [{
      name: 'classProducts',
      value: '{classProducts}'
    }],
    data: {
          path: "/book"
        }
    });

    oVizFrame.setDataset(oDataset);
    oVizFrame.setModel(oModel);

    oVizFrame.setVizProperties({
        valueAxis: {
            label: {
                formatString: 'u'
            }
        },
        legend: {
            title: {
                visible: false
            }
        },
        title: {
            visible: true,
            text: 'Classified Products'
        }
    });
  var feedValueAxis = new FeedItem({
      'uid': "valueAxis",
      'type': "Measure",
      'values': ["classProducts"]
    }),
    feedCategoryAxis = new FeedItem({
      'uid': "categoryAxis",
      'type': "Dimension",
      'values': ["Year"]
    });

    oVizFrame.addFeed(feedValueAxis);
    oVizFrame.addFeed(feedCategoryAxis);
    oPopOver.connect(oVizFrame.getVizUid());

Here is my sample data (it is a subset of the original data from the Demo Kit but with my field inserted):

{
"book": [{
    "Year": 2001,
    "Profit": 213863.42,
    "Unit Price": 3001.79,
    "Units Available": 35255,
    "Cost": 512189.07,
    "Revenue": 726052.49,
    "classProducts": 904.00,
    "Units Sold": 12548
     }, {
    "Year": 2002,
    "Profit": 224016.45,
    "Unit Price": 2475.09,
    "Units Available": 40748,
    "Cost": 428884.52,
    "Revenue": 652900.98,
    "classProducts": 791.00,
    "Units Sold": 12607
    }]
}

Answer 1

As mentioned, I resolved the issue to question #1. The others have been resolved as I went in a different direction.