hi
i created to web pages. SalesData.html which include it view.js and controler.js and SalesDataCountry.html which include it view.js and controler.js .
SalesData.html file present sales of all the countries of my company as you can see here:
it view code contain current code:
sap.ui.jsview("bi_system.SalesDataChart", {
getControllerName : function() {
return "bi_system.SalesDataChart";
},
createContent : function(oController) {
var oModel = new sap.ui.model.odata.ODataModel("http://192.168.10.119:8000/workshop/sessiona/00/SALES_PER_COUNTRY.xsodata", false);
sap.ui.getCore().setModel(oModel); //define a global model, which can be accessed by all controls from all UI areas, by using the setModel method on the SAPUI5 core object. This is useful for simple form applications or demo applications.
//--------------------------------------Defining column chart----------------------------
var dataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [
{ axis : 1, name : 'Country', value : "{Country}" },
{ axis : 2, name : 'Year', value : "{Year}" } ,
],
measures : [
{ name : 'Amount', value : '{Amount}' }
],
data : { path : "/MO_SALES_PER_COUNTRY" }
});
var oTextView = new sap.ui.commons.TextView({
text : 'Please wait, loading data....',
wrapping : false,
width : "100%",
semanticColor: sap.ui.commons.TextViewColor.Default,
design: sap.ui.commons.TextViewDesign.H2,
textAlign:sap.ui.core.TextAlign.Center
});
/*oColumnChart.setXAxis(sap.viz.ui5.types.Axis({ label : sap.viz.ui5.types.Axis_label({
formatString:[['$#,###']]
})}));*/
new sap.viz.ui5.StackedColumn("oChart",{ //defining the properties of the chart .
width : "100%",
height : "600px",
xAxis: {
title: { visible: true, text : "Country" },
},
yAxis: {
title: { visible: true, text : "Amount [$]" }
},
title : { visible : true, text : 'Sales Order - Country & Year' },
dataset : dataset,
noData : oTextView
}).placeAt("content");
//Step 1. Turn off all the user interaction stuff in the chart apart from tooltips.
sap.ui.getCore().byId("oChart").setInteraction(
new sap.viz.ui5.types.controller.Interaction({
selectability: new sap.viz.ui5.types.controller.Interaction_selectability({
mode: sap.viz.ui5.types.controller.Interaction_selectability_mode.none
})
})
);
//Step 2. Attach an event handler for when the user clicks on the chart.
sap.ui.getCore().byId("oChart").attachBrowserEvent("click",chartClickHandler);
//Step 3. Implementation of the event handler.
function chartClickHandler(oEvent) {
if(!$(oEvent.srcElement).closest('.v-m-xAxis').length) return;
var xAxisLabel=$($(oEvent.srcElement).next('.viz-axis-label').children('text')).text();
new sap.ui.commons.Dialog({ title: xAxisLabel+" clicked" }).open();
//this.app.addPage(sap.ui.htmlview("SecondView", "bi_system.SalesDataCountry"));
//this.shell.setApp(this.app);
}
}});
SalesDataCountry.html file present sales of specific country as you can see here:
it view code contain current code:
sap.ui.jsview("bi_system.SalesDataCountry", {
getControllerName : function() {
return "bi_system.SalesDataCountry";
},
createContent : function(oController,filter) {
var oModel = new sap.ui.model.odata.ODataModel("http://192.168.10.119:8000/workshop/sessiona/00/SALES_PER_COUNTRY.xsodata/", false);
var oFilter=new sap.ui.model.Filter("Country",sap.ui.model.FilterOperator.EQ,'Aruba');
sap.ui.getCore().setModel(oModel); //define a global model, which can be accessed by all controls from all UI areas, by using the setModel method on the SAPUI5 core object. This is useful for simple form applications or demo applications.
//--------------------------------------Defining column chart----------------------------
var dataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [
{ axis : 1, name : 'Year', value : "{Year}" },
{ axis : 2, name : 'Country', value : "{Country}" } ,
],
measures : [
{ name : 'Amount', value : '{Amount}' }
],
data : { filters: [oFilter], path : "/MO_SALES_PER_COUNTRY" }
});
var oTextView = new sap.ui.commons.TextView({
text : 'Please wait, loading data....',
wrapping : false,
width : "100%",
semanticColor: sap.ui.commons.TextViewColor.Default,
design: sap.ui.commons.TextViewDesign.H2,
textAlign:sap.ui.core.TextAlign.Center
});
/*oColumnChart.setXAxis(sap.viz.ui5.types.Axis({ label : sap.viz.ui5.types.Axis_label({
formatString:[['$#,###']]
})}));*/
new sap.viz.ui5.StackedColumn("oChart",{ //defining the properties of the chart .
width : "100%",
height : "600px",
xAxis: {
title: { visible: true, text : "Year" },
},
yAxis: {
title: { visible: true, text : "Amount [$]" }
},
title : { visible : true, text : 'Aruba'+ ' Sales Order - Amount & Year' },
dataset : dataset,
noData : oTextView
}).placeAt("content");
//Step 1. Turn off all the user interaction stuff in the chart apart from tooltips.
sap.ui.getCore().byId("oChart").setInteraction(
new sap.viz.ui5.types.controller.Interaction({
selectability: new sap.viz.ui5.types.controller.Interaction_selectability({
mode: sap.viz.ui5.types.controller.Interaction_selectability_mode.none
})
})
);
//Step 2. Attach an event handler for when the user clicks on the chart.
sap.ui.getCore().byId("oChart").attachBrowserEvent("click",chartClickHandler);
//Step 3. Implementation of the event handler.
function chartClickHandler(oEvent) {
if(!$(oEvent.srcElement).closest('.v-m-xAxis').length) return;
var xAxisLabel=$($(oEvent.srcElement).next('.viz-axis-label').children('text')).text();
new sap.ui.commons.Dialog({ title: xAxisLabel+" clicked" }).open();
//window.location.replace("SalesData.html");
}
}
});
I want to enable current functionality: when user press Aruba country in X axis of SalesData.html he will be navigate to SalesDataCountry.html for Aruba country (for example). I'm using chartClickHandler function in SalesData.html.
chartClickHandler(oEvent) {
if(!$(oEvent.srcElement).closest('.v-m-xAxis').length) return;
var xAxisLabel=$($(oEvent.srcElement).next('.viz-axis-label').children('text')).text();
new sap.ui.commons.Dialog({ title: xAxisLabel+" clicked" }).open();
}
How can I use chartClickHandler function to navigate to SalesDataCountry.html which run SalesDataCountry.view.js but with CountryFilter parameter which will put in current command
var oFilter=new sap.ui.model.Filter("Country",sap.ui.model.FilterOperator.EQ,CountryFilter);
so each time SalesDataCountry.html will present sales data for the country that has been chosen?