Hello All,
I am trying to implement makit CombinationChart using XML view. Currently I am facing some issues.
Find below the code for xml view as well as controller
Please help me in finding the issue.
XML View Code.
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:m="sap.makit"
controllerName="makit_xml.dualAxis" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Title">
<content>
<m:CombinationChart id="CombChart" width="100%" height="70%" showRangeSelector="true" legendPosition="bottom">
<categoryRegions>
<m:Category
column="yearCategory" displayName="Year">
</m:Category>
</categoryRegions>
<layers>
<m:Layer id="layer1" type="Line">
<series>
<m:Series
column="productSeries" displayName="Product Revenue" format="currency">
</m:Series>
</series>
<values>
<m:Value expression="revenueValue" format="currency" >
</m:Value>
</values>
</m:Layer>
<m:Layer id="layer2" type="Line" drawOnSecondaryAxis="true">
<series>
<m:Series
column="profitSeries">
</m:Series>
</series>
<values>
<m:Value expression="profitValue" format="rounded2">
</m:Value>
</values>
</m:Layer>
</layers>
</m:CombinationChart>
</content>
</Page>
</core:View>
Controller Code.
| onInit: function() { | ||||
| var testData = { | ||||
| mycollection : [ | ||||
| { year : 2008, product : "Prod 1", revenue : 900000, profit : 120000 }, | ||||
| { year : 2008, product : "Prod 2", revenue : 700000, profit : 100000 }, | ||||
| { year : 2008, product : "Prod 3", revenue : 800000, profit : 70000 }, | ||||
| { year : 2009, product : "Prod 1", revenue : 1000000, profit : 128000 }, | ||||
| { year : 2009, product : "Prod 2", revenue : 900000, profit : 115000 }, | ||||
| { year : 2009, product : "Prod 3", revenue : 1080000, profit : 120000 }, | ||||
| { year : 2010, product : "Prod 1", revenue : 1100000, profit : 95000 }, | ||||
| { year : 2010, product : "Prod 2", revenue : 1200000, profit : 130000 }, | ||||
| { year : 2010, product : "Prod 3", revenue : 1000000, profit : 110000 } | ||||
| ] | ||||
| }; |
| var jsonModel = new sap.ui.model.json.JSONModel(testData); | ||
| //this.getView().setModel(jsonModel); |
| console.log("data", jsonModel); |
| var chart = this.getView().byId("CombChart"); | ||
| console.log("chart:", chart); |
| /* | var oChartLayer1 = new sap.makit.Layer({ | ||
| type : sap.makit.ChartType.Line, | |||
| series : new sap.makit.Series({ column : "productSeries", displayName : "Product Revenue", format : "currency" }), | |||
| values : [new sap.makit.Value({ expression : "revenueValue", format : "currency" })] | |||
| });*/ |
| oChartLayer1 = this.getView().byId("layer1"); | ||
| console.log("chart 1:", oChartLayer1); | ||
| oChartLayer1.addColumn(new sap.makit.Column({name:"yearCategory", value:"{year}"})); | ||
| oChartLayer1.addColumn(new sap.makit.Column({name:"productSeries", value:"{product}"})); | ||
| oChartLayer1.addColumn(new sap.makit.Column({name:"revenueValue", value:"{revenue}", type:"number"})); | ||
| oChartLayer1.setModel(jsonModel); | ||
| oChartLayer1.bindRows("/mycollection"); |
| /* | var oChartLayer2 = new sap.makit.Layer({ | ||
| type : sap.makit.ChartType.Line, | |||
| drawOnSecondaryAxis : true , | |||
| series : new sap.makit.Series({ column : "profitSeries" }), | |||
| values : [new sap.makit.Value({ expression : "profitValue", format : "rounded2" })], | |||
| });*/ | |||
| oChartLayer2 = this.getView().byId("layer2"); | |||
| console.log("chart 1:", oChartLayer2); | |||
| oChartLayer2.addColumn(new sap.makit.Column({name:"yearCategory", value:"{year}"})); | |||
| oChartLayer2.addColumn(new sap.makit.Column({name:"profitSeries", value:"{product}"})); | |||
| oChartLayer2.addColumn(new sap.makit.Column({name:"profitValue", value:"{profit}", type:"number"})); | |||
| oChartLayer2.setModel(jsonModel); | |||
| oChartLayer2.bindRows("/mycollection"); | |||
} | |||
} |
Thanks and regards, Abhishek Bajaj | ||