Friday, 16 November 2018

SAPUI5 ONE LINE CHART JS


VIEW.JS
sap.ui.jsview("chart2.chart2", {


getControllerName : function() {
return "chart2.chart2";
},


createContent : function(oController) {


var Vbox = new sap.m.VBox({
id:"vbox1",

items:[
       new sap.m.Label({
       id:"lb0",
       text:" 1995 no profit"
       }), 
     
       new sap.m.Label({
       id:"lb1",
       text:" 1996 is profit "
       }), 
]
});
var oModel = new sap.ui.model.json.JSONModel({

businessData : [

{Year :"1995",revenue:410.87,profit:-141.25, population:34789000},

{Year :"1996",revenue:338.29,profit:133.82, population:1339724852},

{Year :"1997",revenue:487.66,profit:348.76, population:65350000},

{Year :"1998",revenue:470.23,profit:217.29, population:81799600},

{Year :"1999",revenue:170.93,profit:117.00, population:1210193422},

{Year :"2000",revenue:905.08,profit:609.16, population:313490000}

]

});

  // A Dataset defines how the model data is mapped to the chart

var oDataset = new sap.viz.ui5.data.FlattenedDataset({

// a Bar Chart requires exactly one dimension (x-axis)

dimensions : [

{

axis : 1, // must be one for the x-axis, 2 for y-axis

name : 'Year',

value : "{Year}"

}

],

// it can show multiple measures, each results in a new set of bars in a new color

measures : [

// measure 1

{

name : 'Profit', // 'name' is used as label in the Legend

value : '{profit}' // 'value' defines the binding for the displayed value

}



],

// 'data' is used to bind the whole data collection that is to be displayed in the chart

data : {

path : "/businessData"

}

});

  // create a Bar chart

  // you also might use Combination, Line, StackedColumn100, StackedColumn or Column

  // for Donut and Pie please remove one of the two measures in the above Dataset.

var oChart = new sap.viz.ui5.Line({

width : "80%",

height : "400px",

plotArea : {

//'colorPalette' : d3.scale.category20().range()

},

title : {

visible : true,

text : 'Profit and Revenue By Country'

},

dataset : oDataset

});

  // attach the model to the chart and display it

oChart.setModel(oModel);
var Vboxa = new sap.m.VBox({
id:"vbox2",

items:[
Vbox,oChart
     
       ]
});

  return new sap.m.Page({
title: "Title",
content: [
Vboxa
]
});
}


});

OUTPUT

No comments:

Post a Comment

test ganaral binding(testing )

  /home/user/projects/project1/webapp/model/record.json: {     "text" : "outer text" ,     "myrecorsd" : [    ...