Skip to Content
0
Former Member
Dec 18, 2013 at 08:52 AM

makit chart

40 Views

Hi,

i'm trying to draw a chart with makit. i just pasted the example and.... i can't see anything. Here's my page, and this is the site:

Documentation/AdvancedTopics/Mobile/MaKit – SAPUI5 Wiki (TIP CORE User Interface)

from chrome developer tools i don't see any troubles.

please help me, i'm a beginner 😊

Thanks!

Lorenzo

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"

id="sap-ui-bootstrap"

data-sap-ui-libs="sap.m, sap.makit"

data-sap-ui-theme="sap_mvi">

</script>

<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

<script>

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

}),

});

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 }

]

};

var jsonModel = new sap.ui.model.json.JSONModel();

jsonModel.setData(testData);

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");

oChart.placeAt("content");

</script>

</head>

<body class="sapUiBody" role="application">

<div id="content"></div>

</body>

</html>