Hello Forum,
I'm experiencing an issue regarding Makit Charts on Mobile.
The problem is that is not possible to scroll down the page on mobile if the charts is 100% (width and height) and in both directions landscape and portrait.
The chart's container is sap.m.Page and as explained in the official documentation the scrolling is provided automatically.
I attach my code and both images (desktop and mobile).
Hoping your answers could help me.
Thanks.
jQuery.sap.require("sap.m.MessageBox");
sap.ui.jsview("demo.charts.views.Multichart", { getControllerName : function() { return "demo.charts.views.Multichart"; }, createContent : function(oController) { var page = new sap.m.Page(); var value = new sap.makit.Value(); // var category = new sap.makit.Category(); var category_axis = new sap.makit.CategoryAxis; var series = new sap.makit.Series(); var bubble = new sap.makit.ValueBubble(); category_axis.setDisplayLastLabel(true); page.setTitle("Multi Chart"); value.setExpression("Netwr"); value.setFormat("currency"); value.setDisplayName("Revenue"); // category.setColumn("Gjahr"); // category.setDisplayName("Year"); series.setColumn("Bukrs"); series.setDisplayName("Company"); bubble.setStyle(sap.makit.ValueBubbleStyle.FloatTop), bubble.setShowCategoryText(true); var chart = new sap.makit.Chart({ // category : category, categoryAxis : category_axis, valueAxis : new sap.makit.ValueAxis({}), series : series, values : value, valueBubble : bubble, categoryRegions : [ new sap.makit.Category({ column : "Gjahr", displayName : "Year" })], }); chart.setType(sap.makit.ChartType.Column); chart.setShowTableView(false); chart.setShowRangeSelector(true); chart.setShowTableValue(false); chart.addColumn(new sap.makit.Column({ name : "Gjahr", value : "{Gjahr}" })); chart.addColumn(new sap.makit.Column({ name : "Netwr", value : "{Netwr}", type : "number" })); chart.addColumn(new sap.makit.Column({ name : "Waerk", value : "{Waerk}" })); chart.addColumn(new sap.makit.Column({ name : "Bukrs", value : "{Bukrs}" })); chart.setModel(this.oModel); chart.bindRows("/Chart_DataSet"); chart.attachEvent("tap",function(oEvent){ var isRightMB; var e = oEvent.getParameter("eventObject"); if ("which" in e) // Gecko (Firefox), WebKit (Safari/Chrome) & // Opera isRightMB = e.which == 3; else if ("button" in e) // IE, Opera isRightMB = e.button == 2; if(isRightMB){ var srcObj = oEvent.getSource(); // var srcElem = srcObj.getDomRef(); var temp = document.oncontextmenu; document.oncontextmenu = function (e){ document.oncontextmenu = temp; // reset back to its // original state, so that // other elements still have // context menu return false; }; var msg = oEvent.getSource().getSelectedCategory(); sap.m.MessageBox.show( msg, sap.m.MessageBox.Icon.INFORMATION, "Chart Right Click - Selected Category", [sap.m.MessageBox.Action.OK] ); } }); chart.attachEvent("doubletap",function(oEvent){ var chartObj = oEvent.getSource(); var msg = oEvent.getSource().getSelectedCategory(); sap.m.MessageBox.show( msg, sap.m.MessageBox.Icon.INFORMATION, "Chart Double Tap - Selected Category", [sap.m.MessageBox.Action.OK] ); }); var oButton = oController.generateConfigPopover(chart); var oBar = new sap.m.Bar({ contentLeft : [ new sap.m.Button({ text : "Back", type : sap.m.ButtonType.Back, press : [oController.handleNavButtonPress, oController] }) ], contentMiddle : [ new sap.m.Label({ text : "Multi Chart" }) ], contentRight : [ oButton ] }); page.setCustomHeader(oBar); page.addContent(chart); return page; }
});