on 08-15-2013 8:17 PM
Hi All
This is my first time exploring UI5 toolkit.All i am trying to do is create a simple chart using makit in UI5.
I am providing the hardcoded data and not connecting to any odata gateway waht so ever.
Still while trying to do a web app preview i am getting the error "
Can some one please help.
Regards
Shweta
Which resource failed to load? If you don't already know, and if you use Chrome, then you can check out the 'Network' tab in Developer Tools. The resource that failed to load will be in red. In Chrome, even the console shows the name of the resource along with the error.
Knowing "which" resource failed to load will help quickly resolve your problem!
Still having problems? Please post more details about what failed to load.
Regards,
Pritin
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Pritin
The above issue was resolved.I am still not able to see anything on the screen when i am trying to run the index.html.I am using the following code in the view.js
sap.ui.jsview("charts.ChartsDemo", {
getControllerName : function() {
return "charts.ChartsDemo";
},
createContent : function(oController) {
this.setHeight("100%");
var bckGrndDesign = sap.m.PageBackgroundDesign.List;
var jsonModel = new sap.ui.model.json.JSONModel();
var testData = {
mycollection : [
{ year : 2008, product : "Prod 1", revenue : 900000 },
{ year : 2008, product : "Prod 2", revenue : 700000 },
{ year : 2009, product : "Prod 1", revenue : 100000 },
{ year : 2009, product : "Prod 2", revenue : 900000 },
{ year : 2010, product : "Prod 1", revenue : 110000 },
{ year : 2010, product : "Prod 2", revenue : 120000 }
]
};
jsonModel.setData(testData);
var oChart = new sap.makit.Chart({
height: "50%", width: "100%",
category : new sap.makit.Category({ column : "yearCategory" }),
series : new sap.makit.Series({ column : "productSeries" }),
values : [new sap.makit.Value({ expression : "revenueValue", format : "currency" })]
});
oChart.addColumn(new sap.makit.Column({name:"yearCategory", value:"{year}"}));
oChart.addColumn(new sap.makit.Column({name:"productSeries", value:"{product}"}));
oChart.addColumn(new sap.makit.Column({name:"revenueValue", value:"{revenue}", type:"number"}));
oChart.setModel(jsonModel);
oChart.bindRows("mycollection");
return new sap.m.Page({
title: "Charts",
showHeader : true,
enableScrolling : true,
backgroundDesign : bckGrndDesign,
content: [oChart
]
});
}
});
Hi Shweta,
For this, you have to import two packages,
1. sap.m
2. sap.makit
How to import packages : - You just have to write two things in your index.html file like this,
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.m,sap.makit"
data-sap-ui-theme="sap_goldreflection" >
</script>
Also some changes you have to make in your code.
I am giving you the working code, which you can use.
var jsonModel = new sap.ui.model.json.JSONModel();
var testData = {
mycollection : [
{ year : 2008, product : "Prod 1", revenue : 900000 },
{ year : 2008, product : "Prod 2", revenue : 700000 },
{ year : 2009, product : "Prod 1", revenue : 100000 },
{ year : 2009, product : "Prod 2", revenue : 900000 },
{ year : 2010, product : "Prod 1", revenue : 110000 },
{ year : 2010, product : "Prod 2", revenue : 120000 }
]
};
jsonModel.setData(testData);
var oChart = new sap.makit.Chart({
width : "100%", height : "80%",
category : new sap.makit.Category({ column : "yearCategory" }),
series : new sap.makit.Series({ column : "productSeries" }),
values : [new sap.makit.Value({ expression : "revenueValue", format : "currency" })],
categoryAxis : new sap.makit.CategoryAxis({ displayLastLabel: true }),
valueBubble : new sap.makit.ValueBubble({
style: sap.makit.ValueBubbleStyle.FloatTop,
showCategoryText: true
}),
});
oChart.addColumn(new sap.makit.Column({name:"yearCategory", value:"{year}"}));
oChart.addColumn(new sap.makit.Column({name:"productSeries", value:"{product}"}));
oChart.addColumn(new sap.makit.Column({name:"revenueValue", value:"{revenue}", type:"number"}));
oChart.setModel(jsonModel);
oChart.bindRows("/mycollection");
return oChart ;
Hope this helps.
Thanks
User | Count |
---|---|
88 | |
23 | |
11 | |
9 | |
8 | |
5 | |
5 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.