Stacked Column combined with Line - sapui5

Question

We need to display a stacked column chart combined with a line chart and would like to stick to the VizFrame control offered by UI5. Is there a way to achieve this? It's not listed in the samples (https://sapui5.netweaver.ondemand.com/sdk/explored.html#/entity/sap.viz.ui5.controls.VizFrame/samples) but maybe there is a way to do it anyway.
EDIT
The data we need to display comes in the following format:
var data = [
{week: 1, stacked1: 10, stacked2: 20, stacked3: 30, line: 100},
{week: 2, stacked1: 12, stacked2: 13, stacked3: 14, line: 40},
{week: 3, stacked1: 14, stacked2: 25, stacked3: 26, line: 20},
{week: 4, stacked1: 15, stacked2: 24, stacked3: 33, line: 52}
];
So the idea is to have weeks on the x-axis, a stacked bar for the values stacked1, stacked2 and stacked3 as well as a value point for the line.

Answer 1

I think you want to use setVizType("stacked_combination") [or vizType: "stacked_combination"] on the VizFrame. You can see all the type on the getVizType() VizFrame doumentation. Here is a simple example where I extended the VizFrame and added two functions to display a Line Stacked Column Chart:
sap.viz.ui5.controls.VizFrame.extend("jonova.ui5.chart.JuVizFrame", {
renderer: { },
setLineStackedBar: function() {
var oModel = new sap.ui.model.json.JSONModel(
[{Product:"Total", Date: 2000, Available: 100},
{Product:"Total", Date: 2001, Available: 100},
{Product:"P1", Date: 2000, Utilized: 30},
{Product:"P1", Date: 2001, Utilized: 20},
{Product:"P2", Date: 2000, Utilized: 40},
{Product:"P2", Date: 2001, Utilized: 60}]);
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{name: 'Date', value: '{Date}'},
{name: 'Product', value: '{Product}'}],
measures: [{name: 'Available', value: '{Available}'},
{name: 'Utilized', value: '{Utilized}' }],
data: {path: "/"}});
var oFeeds = [new sap.viz.ui5.controls.common.feeds.FeedItem({uid: "valueAxis", type: "Measure", values: ["Utilized", "Available"]}),
new sap.viz.ui5.controls.common.feeds.FeedItem({uid: "categoryAxis", type: "Dimension", values: ["Date"]}),
new sap.viz.ui5.controls.common.feeds.FeedItem({uid: "color", type: "Dimension", values: ["Product"]})];
this.setChart("stacked_combination", oDataset, oModel, oFeeds);
},
setChart: function(aVizType, aDataset, aModel, aFeeds) {
this.setVizType(aVizType);
this.setDataset(aDataset);
this.setModel(aModel);
for( var i=0, len=aFeeds.length; i<len; i++) this.addFeed(aFeeds[i]);
},
});