DashBoard With Multiple charts

View:
<mvc:View xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout"
xmlns:m="sap.suite.ui.commons"
xmlns:viz.data="sap.viz.ui5.data" xmlns:mvc="sap.ui.core.mvc" xmlns:f="sap.ui.layout.form"
xmlns="sap.m" xmlns:viz="sap.viz.ui5.controls" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
controllerName="Dashboard_usingPythonServ.controller.s1" xmlns:html="http://www.w3.org/1999/xhtml">
<App id="AppId">
<Page title="DashBoard" showHeader="true" class="sapUiSizeCompact">


<!-- <Panel expandable="false" expanded="false" class="hdr"
headerText="Selection Parameters">  -->
<Toolbar>
<Label text="Region: "/>
<Select forceSelection="false" width="10%" id="region" items="{path: 'Region>/'}" change="onRegion">
<core:Item key="{Region>region}" text="{Region>region}" />
</Select>
<ToolbarSpacer/>
<Label text="State: "/>
<Select  width="10%" forceSelection="false" id="state" items="{path: 'State>/'}" change="onSelectState">
<core:Item key="{State>state}" text="{State>state}" />
</Select>
<ToolbarSpacer/>
<Label text="DateTime: "/>
<Select width="10%" showSecondaryValues= "true" forceSelection="false" id="date" items="{path: 'Date>/'}" change="onSelectDate">
<core:Item key="{Date>date} {Date>time}" text="{Date>date} {Date>time}" addtionalText="{Date>time}" />
</Select>
<ToolbarSpacer/>
<Label text="CustomerName: "/>
<Select  width="10%" forceSelection="false" id="year"
items="{path: 'Model_fYear>/'}">
<core:Item key="{Model_fYear>customer_name}" text="{Model_fYear>customer_name}" />
</Select>
<ToolbarSpacer/>
<Label text="Date:"/>
<Text id="date2" />
</Toolbar>
<!-- </Panel> -->
<!-- <content> -->
<!-- <f:Form id="CalibrationForm" editable="true" class="myCustomButton">
<f:layout>
<f:ResponsiveGridLayout labelSpanXL="4"
labelSpanL="4" labelSpanM="4" labelSpanS="12" adjustLabelSpan="true"
emptySpanXL="4" emptySpanL="5" emptySpanM="5" emptySpanS="4"
columnsXL="4"  columnsL="4" columnsM="4" singleContainerFullSize="false" />
</f:layout>
<f:formContainers>
<f:FormContainer class="fmLayout">
<f:formElements>
<f:FormElement label="Date" required="true">
<f:fields>
<Text id="date2"/>
</f:fields>
</f:FormElement>
<f:FormElement label="Region" required="true">
<f:fields>
<Select forceSelection="false"  id="region" items="{path: 'Region>/'}" change="onRegion">

<core:Item key="{Region>region}" text="{Region>region}" />
</Select>
</f:fields>
</f:FormElement>
</f:formElements>
<f:formElements>
</f:formElements>
</f:FormContainer>

<f:FormContainer>
<f:formElements>
<f:FormElement label="State" required="true">
<f:fields>
<Select  forceSelection="false" id="state" items="{path: 'State>/'}" change="onSelectState">
<core:Item key="{State>state}" text="{State>state}" />
</Select>
</f:fields>
</f:FormElement>
</f:formElements>
<f:formElements>
</f:formElements>
</f:FormContainer>

<f:FormContainer>
<f:formElements>
<f:FormElement label="CustmerName" required="true">
<f:fields>
<Select  forceSelection="false" id="year"
items="{path: 'Model_fYear>/'}">
<core:Item key="{Model_fYear>customer_name}" text="{Model_fYear>customer_name}" />
</Select>
</f:fields>
</f:FormElement>
</f:formElements>
<f:formElements>
</f:formElements>
</f:FormContainer>

<f:FormContainer>
<f:formElements>
<f:FormElement label="DateTime" required="true">
<f:fields>
<Select showSecondaryValues= "true" forceSelection="false" id="date" items="{path: 'Date>/'}" change="onSelectDate">

<core:Item key="{Date>date} {Date>time}" text="{Date>date} {Date>time}" addtionalText="{Date>time}" />
</Select>
</f:fields>
</f:FormElement>
</f:formElements>
<f:formElements>
</f:formElements>
</f:FormContainer>
<f:FormContainer>
<f:formElements>
<f:FormElement label="DateTime" required="true">
<f:fields>
<Select forceSelection="false" id="date1" items="{path: 'Date>/'}" change="onSelectDate">

<core:Item key="{Date>date}" text="{Date>date}"/>
</Select>
</f:fields>
</f:FormElement>
</f:formElements>
<f:formElements>
</f:formElements>
</f:FormContainer>
                       


                         <f:FormContainer>
<f:formElements>
<f:FormElement required="true">
<f:fields>
<Text id="date3" />
</f:fields>
</f:FormElement>
</f:formElements>
<f:formElements>
</f:formElements>
</f:FormContainer>

</f:formContainers>
</f:Form>

</Panel>
 -->

<f:Form id="FormToolbar" ariaLabelledBy="Title1" class="sapUiSizeCompact ">
<f:layout>
<f:ResponsiveGridLayout adjustLabelSpan="false"
emptySpanXL="0" emptySpanL="0" emptySpanM="0" emptySpanS="0"
columnsXL="2" columnsL="2" columnsM="2" singleContainerFullSize="true" />
</f:layout>
<f:formContainers>
<f:FormContainer ariaLabelledBy="Title2">
<f:formElements>
<f:FormElement>
<Panel class="panel1">
<l:HorizontalLayout width="100%"
class="sapUiContentPadding equalColumns">
<HBox height="100px" width="120px" alignItems="Center"
justifyContent="Center">
<Text text="Quantity:" />

<Label text="" id="qu" design="Bold" />

</HBox>

<HBox height="100px" width="120px" alignItems="Center"
justifyContent="Center">
<Text text="Amount: "/>
<Label text="" id="amu" design="Bold" />
<!-- <Text id="amu" text="Amount" design="Bold"/> -->
</HBox>
</l:HorizontalLayout>


<!-- Pie Chart -->
<!-- <l:Splitter width="100%" height="100%">
<l:contentAreas>
<ChartContainer
id="chartContainer"
showFullScreen="true"
showPersonalization="false"
autoAdjustHeight="false"
personalizationPress="attachPersonalizationPress"
contentChange="attachContentChange"
title="Revenue">
<dimensionSelectors>
<Button text="Amount"/>
<Button text="Amount"/>
<Select id="idoSelect1" change="handleSelectionChange">
<core:Item key="0" text="Sales by Product"/>
<core:Item key="1" text="Sales by Country"/>
</Select>
</dimensionSelectors>
</ChartContainer>
</l:contentAreas>
</l:Splitter> -->
<!--  <Toolbar>
<Button text="Amount"/>
</Toolbar> -->
<viz:VizFrame id="idVizFrame1" uiConfig="{applicationSet:'fiori'}"
vizType='pie' width="100%" height="625px" legendVisible="true" visible="true">


<viz:dataset>
<viz.data:FlattenedDataset data="{G>/data}">
<viz.data:dimensions>
<viz.data:DimensionDefinition
name="Region" value="{G>region}" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition
name="Amount" value="{G>amount}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>

<viz:feeds>
<viz.feeds:FeedItem uid="size" type="Measure"
values="Amount" />
<viz.feeds:FeedItem uid="color" type="Dimension"
values="Region" />
</viz:feeds>
</viz:VizFrame>
</Panel>
</f:FormElement>
</f:formElements>
</f:FormContainer>
<!-- Bar Chart -->
<f:FormContainer ariaLabelledBy="Title3">
<f:formElements>
<f:FormElement>
<Panel id="idpiechart2" class="panel1">
<viz:VizFrame id="idVizFramedas6" deselectData="fnSelect"
selectData="fnSelect" vizType="dual_bar" legendVisible="true" visible="true"
uiConfig="{applicationSet:'fiori'}" width="100%" height="770px">
<viz:dataset>
    <viz.data:FlattenedDataset data="{G>/data}">
        <viz.data:dimensions>
            <viz.data:DimensionDefinition name="State" value="{G>state}" />
        </viz.data:dimensions>
        <viz.data:measures>
             <viz.data:MeasureDefinition group="1" name="Amount" value="{G>amount}" />
             <viz.data:MeasureDefinition group="1" name="Quantity" value="{G>quantity}" />
        </viz.data:measures>
    </viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
   <viz.feeds:FeedItem id="value1" uid="valueAxis" type="Measure" values="Amount" />
   <viz.feeds:FeedItem id="value2" uid="valueAxis2" type="Measure" values="Quantity" />
   <viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="State" />
</viz:feeds>
</viz:VizFrame>
</Panel>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
<Panel id="idpiechart3" class="panel1">


<viz:VizFrame id="idVizFrameLine" uiConfig="{applicationSet:'fiori'}"
vizType='dual_line' width="100%"
legendVisible="true" visible="true">
<viz:dataset>
<viz.data:FlattenedDataset data="{G>/data}">
<viz.data:dimensions>
<viz.data:DimensionDefinition
name="Date" value="{G>date}" />
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition
name="Amount" value="{G>amount}" />
<viz.data:MeasureDefinition
name="Quantity" value="{G>quantity}" />
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>

<viz:feeds>
<viz.feeds:FeedItem id='valueAxisFeed1'
uid="valueAxis" type="Measure" values="Amount" />
<viz.feeds:FeedItem id='valueAxisFeed2'
uid="valueAxis2" type="Measure" values="Quantity" />

<viz.feeds:FeedItem id='categoryAxisFeed1'
uid="categoryAxis" type="Dimension" values="Date" />
</viz:feeds>
</viz:VizFrame>
</Panel>
</Page>
</App>

</mvc:View>



Controller:

var DashB;
sap.ui.define(
[ 'jquery.sap.global', 'sap/m/GroupHeaderListItem',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel',
'sap/viz/ui5/data/FlattenedDataset',
"Dashboard_usingPythonServ/format/CustomFormat",

],
function(jQuery, GroupHeaderListItem, Controller, JSONModel,
FlattenedDataset,CustomFormat,Filter) {
"use strict";
var that;
var oView;
var masterArrObj=[];
var uniqueArray;
var oLabel;

var ListController = Controller
.extend(
"Dashboard_usingPythonServ.controller.s1",
{

onInit : function() {
var oView = this.getView();
var ap;
// this.arr=arr;
DashB= this;
var oLabel = this.getView().byId('date2');
          var result = this.GetClock();
          oLabel.setText(result);
          var that = this;
          setInterval(function() {
            var result = that.GetClock();
            oLabel.setText(result);
            DashB.getView().byId("idVizFrame1").getModel("G").refresh(true);
            /*DashB.getView().byId("idVizFramedas6").getModel("G").refresh();
            DashB.getView().byId("idVizFramedas6").setModel(DashB.oModel,"G").refresh(true);
            console.log("####",DashB.oModel)
            DashB.getView().byId('idVizFrameLine').getModel("G").refresh();*/
         
          //  console.log("$$$$$",DashB.PieModel);
         
         
          }, 1000);
//var result=DashB.GetClock();
//var OLabel=DashB.getView().byId('date2');
//OLabel.setText(result);
            //DashB.setInterval();
DashB.initCustomFormat();
$.ajax({
url: 'http://142.93.216.68:5000/get_data',
method: 'GET',
success: DashB.mySuccessHandler, error: DashB.myErrorHandler
});
},
/*setInterval:function(){
OLabel=DashB.getView().byId('date2');
setInterval(function(){
var result=DashB.GetClock();
var OLabel=DashB.getView().byId('date2');
OLabel.setText(result);},1000);


},*/

GetClock : function(oEvent) {
/*var tday = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
        var tmonth = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");*/
var ap;
var today= new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; // January
// is
// 0!
var yyyy = today.getFullYear();
var hour = today.getHours();
var Minutes = today.getMinutes();
var Seconds = today.getSeconds();
  if (hour === 0) {
            ap = " AM";
            nhour = 12;
          } else if (hour < 12) {
            ap = " AM";
          } else if (hour == 12) {
            ap = " PM";
          } else if (hour > 12) {
            ap = " PM";
            hour -= 12;
          }
          if (yyyy < 1000) yyyy += 1900;
          if (Minutes<= 9) Minutes = "0" + Minutes;
          if (Seconds <= 9) Seconds = "0" + Seconds;
          var result = "" + dd + " -" + mm + " -" + yyyy + " " + hour + ":" + Minutes + ":" + Seconds + ap + "";
          return result;
       
       
          },




  /*var oLabel = this.getView().byId("date2");
          var result = DashB.GetClock();
          oLabel.setText(result);
          var that = this;
          setInterval(function() {
            var result = DashB.GetClock();
            oLabel.setText(result);
            }, 1000);
     
        GetClock: function() {

            var tday = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
            var tmonth = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
            var d = new Date();
            var nday = d.getDay(),
              nmonth = d.getMonth(),
              ndate = d.getDate(),
              nyear = d.getYear(),
              nhour = d.getHours(),
              nmin = d.getMinutes(),
              nsec = d.getSeconds(),
              ap;
            if (nhour === 0) {
              ap = " AM";
              nhour = 12;
            } else if (nhour < 12) {
              ap = " AM";
            } else if (nhour == 12) {
              ap = " PM";
            } else if (nhour > 12) {
              ap = " PM";
              nhour -= 12;
            }
            if (nyear < 1000) nyear += 1900;
            if (nmin <= 9) nmin = "0" + nmin;
            if (nsec <= 9) nsec = "0" + nsec;
            var result = "" + tday[nday] + ", " + tmonth[nmonth] + " " + ndate + ", " + nyear + " " + nhour + ":" + nmin + ":" + nsec + ap + "";
            return result;
          }
},*/

     

mySuccessHandler:function(data,response){
//debugger;
masterArrObj = data;
/**************************Summation of quantity**********************************************/
var array=data.data;
var sum=0;
var sum1=0;
for(var i=0; i < array.length; i++){
sum += parseInt(array[i].quantity)
sum1+= parseInt(array[i].amount)
}    
DashB.getView().byId('qu').setText(sum);
DashB.getView().byId('amu').setText(sum1);
/***************************************END******************************************************/
/***************************Model binding for combo box********************/
var output1 = DashB.getUniqueValue1(data.data);
DashB.states =new JSONModel;
DashB.states.setData(output1);
DashB.getView().byId('state').setModel(DashB.states,"State");


var output = DashB.getUniqueValue(data.data);
DashB.regions = new JSONModel();
DashB.regions.setData(output);
DashB.getView().byId('region').setModel(DashB.regions,"Region");

debugger;
DashB.dT = new JSONModel();
DashB.dT.setData(data.data);
console.log("$$$$$$$@@@@@@@",DashB.dT);
DashB.getView().byId('date').setModel(DashB.dT,"Date");

DashB.dT = new JSONModel();
DashB.dT.setData(data.data);
DashB.getView().byId('year').setModel(DashB.dT,"Model_fYear");



/***************************END******************************************************************/
},getUniqueValue : function(array){
var flags = [], output = [], l = array.length, i;
for( i=0; i<l; i++) {
    if( flags[array[i].region]) continue;
    flags[array[i].region] = true;
    output.push({"region": array[i].region});
}
return output;
},
getUniqueValue1:function(array){
var flags = [], output1 = [], l = array.length, i;
for( i=0; i<l; i++) {
    if( flags[array[i].state]) continue;
    flags[array[i].state] = true;
    output1.push({"state": array[i].state});
}

return output1;
},
myErrorHandler:function(data,response){
debugger
},
initCustomFormat : function(){
debugger;
CustomFormat.registerCustomFormat();
},

onAfterRendering:function(){
debugger;
$.ajax({
url: 'http://142.93.216.68:5000/get_data',
method: 'GET',
success: function(data,response){
debugger
/***************************************Bar Chart BInding******************/
DashB.oModel= new sap.ui.model.json.JSONModel(data);
DashB.getView().byId("idVizFramedas6").setModel(DashB.oModel,"G");
//CHart1
var oVizFrame= DashB.getView().byId("idVizFramedas6");
oVizFrame.setVizProperties({
title:{
text : "Dual_Bar Chart"
},
legendGroup : {
layout : {
position : "bottom"
}
},

plotArea:
{
'secondaryScale':

{
colorPalette : d3.scale.category20().range(),
drawingEffect: "glossy",
'fixedRange': true,
}
},
plotArea: {
colorPalette : d3.scale.category20().range(),
drawingEffect: "glossy",
dataLabel:{
visible : true,
formatString:CustomFormat.FIORI_LABEL_SHORTFORMAT_2,
unitFormatType : "FinancialUnits"
},
gridline:{
size: 2,
type:""
},
valueAxis: {
colorPalette : d3.scale.category20().range(),
drawingEffect: "glossy",
label: {
formatString: CustomFormat.FIORI_LABEL_SHORTFORMAT_10,
unitFormatType : "FinancialUnits"
},
title: {

visible: true,
formatString:CustomFormat.FIORI_LABEL_SHORTFORMAT_2,
unitFormatType : "FinancialUnits"
}
},
valueAxis2: {
colorPalette : d3.scale.category20().range(),
drawingEffect: "glossy",

label: {
formatString: CustomFormat.FIORI_LABEL_SHORTFORMAT_10
},
title: {
formatString:CustomFormat.FIORI_LABEL_SHORTFORMAT_2,
visible: true,
unitFormatType : "FinancialUnits"
}
},
},
});
var scales = [
{
'feed': 'color',
'palette': ['#3e85f2','#179b36','#ed9f31']
}
];
oVizFrame.setVizScales(scales);
DashB.getView().byId("idVizFramedas6").setModel(DashB.oModel,"G");
/*************************************END of Bar Chart****************/


/*******************************************PIE Chart*******************/
DashB.PieModel= new sap.ui.model.json.JSONModel({"G":data});
// /DashB.PieModel.setData(data);
console.log("#####",DashB.PieModel);
DashB.getView().byId("idVizFrame1").setModel(DashB.PieModel,"G");

//CHart1

debugger;
var oVizFrame1= DashB.getView().byId("idVizFrame1");
DashB.getView().byId("idVizFrame1").setModel(DashB.PieModel,"G");
var oVizFrame1 = DashB.oVizFrame = DashB.getView().byId("idVizFrame1");
oVizFrame1.setVizProperties({
title:{
text : "PIE Chart"
},
legendGroup : {
layout : {
position : "right"
}
},
dataLabel:{
visible:true,
formatString:CustomFormat.FIORI_PERCENTAGE_FORMAT_2,
unitFormatType:"amount"
}


});

// oVizFrame1.setModel(DashB.PieModel);

DashB.getView().byId("idVizFrame1").setModel(DashB.PieModel,"G");

DashB.PieModel= new sap.ui.model.json.JSONModel();
DashB.PieModel.setData(data);
DashB.getView().byId("idVizFrame1").setModel(DashB.PieModel,"G");



/****************************End of Pie Chart**********************/

/**********************************LINE CHART************************/
DashB.lineModel= new sap.ui.model.json.JSONModel(data);
DashB.getView().byId("idVizFrameLine").setModel(DashB.lineModel,"G");
//CHart1
var oVizFrame3= DashB.getView().byId("idVizFrameLine");
//   DashB.getView().byId("idVizFramedas6").setHeight('0%');
oVizFrame3.setVizProperties({
title:{
text : "Line Chart"
},
legendGroup : {
layout : {
position : "bottom"
}
},
plotArea: {
colorPalette : d3.scale.category20().range(),
drawingEffect: "glossy",
dataLabel:{
visible : true,
formatString:CustomFormat.FIORI_LABEL_SHORTFORMAT_2,
unitFormatType : "FinancialUnits"
},
gridline:{
size: 2,
type:""
},
valueAxis: {
label: {
formatString: CustomFormat.FIORI_LABEL_SHORTFORMAT_10
},
title: {
visible: true
}
},
},
});
var scales = [
{
'feed': 'color',
'palette': ['#3e85f2','#179b36','#ed9f31']
}
];
oVizFrame3.setVizScales(scales);

DashB.getView().byId("idVizFrameLine").setModel(DashB.lineModel,"G");

/***********************************END of Line chart***********************************/

},
error:function(error){

}
});
},
onRegion:function(oEvent){
DashB.PieModel= new sap.ui.model.json.JSONModel();
DashB.PieModel.setData({data:{}});
DashB.getView().byId("idVizFrame1").setModel(DashB.PieModel,"G");
var region=oEvent.getParameter('selectedItem').getKey();
var amount=0
var quantity=0
var arr = masterArrObj.data;
for(var i=0;i<arr.length;i++){

                                    if(arr[i].region == region){

                                                    amount +=  parseInt(arr[i].amount);

                                                    quantity += parseInt(arr[i].quantity);

                                    }

                    }

                                arr.data = {

                                                                data: []

                                };
                                console.log("!@!@!@!@!@!!@",arr.data);
                                var json = {};
                                json.region=region.toString();
                                json.amount =amount.toString();
                                json.quantity=quantity.toString();
                                //console.log("!!!!!!",json)
                                arr.data.data.push(json);
                                ;
                                var oJsonList = new sap.ui.model.json.JSONModel();
                                oJsonList.setData(arr.data)
                               // console.log("###33333###",oJsonList);
                                DashB.getView().byId('idVizFrame1').setModel(oJsonList,"G");
                                DashB.getView().byId('idVizFrame1').getModel("G").refresh(true);

                             
                               
                             

                                                                                                                             

                 //            console.log("Amount",amount,"Quantity",quantity);
                             
/*var region=oEvent.getParameter('selectedItem').getKey();

//console.log("Master data",masterArrObj.data, "Key ", region,"value",region);
var amount = 0;
var quantity=0;
var arr = masterArrObj.data;
var data=[];
for(var i=0;i<arr.length;i++){
if(arr[i].region == region){

amount +=  parseInt(arr[i].amount);
quantity += parseInt(arr[i].quantity)

}
}
data.push({
amount:amount,
qty:quantity,
});

DashB.PieModel= new sap.ui.model.json.JSONModel({"G":data});
DashB.getView().byId("idVizFrame1").setModel(DashB.PieModel,"G");
console.log("@@@@",DashB.PieModel);
//DashB.PieModel.setData({G});
//DashB.PieModel.setData({data:vStatus});
DashB.getView().byId("idVizFrame1").setModel(DashB.PieModel,"G");
//console.log("@@@@",DashB.PieModel);
// var json=new sap.ui.model.json.JSONModel();
//json.setData(vStatus);
//DashB.getView().byId("idVizFrame1").setModel(json,"G");


//console.log("@@@@",json);

//console.log("amount",amount,"quanity",quantity);
var oPmodel=new JSONModel();
Pmodel.push({
amt:amount,
qty:quantity
})
DashB.getView().byId("idVizFrame1").setModel(oPmodel,"G");

console.log("@@@",oPmodel);


//console.log("@@@@@@@@@@",arr)
//console.log("######",DashB.PieModel);

//console.log("Amount",amount,"Quantity",quantity);
*/
},
onSelectState:function(oEvent){
DashB.oModel= new sap.ui.model.json.JSONModel({data:{}});
DashB.getView().byId("idVizFramedas6").setModel(DashB.oModel,"G");
var state=oEvent.getParameter('selectedItem').getKey();
var arr = masterArrObj.data;
var amount=0;
var quantity=0;
for(var i=0;i<arr.length;i++){
if(arr[i].state === state){
amount=arr[i].amount;
quantity=arr[i].quantity;
}
arr.data = {

                                            data: []

};
var json = {};
  json.state=state.toString();
                              json.amount =amount.toString();
                              json.quantity=quantity.toString();
                              arr.data.data.push(json)
                              var oJsonstate= new sap.ui.model.json.JSONModel();
                              oJsonstate.setData(arr.data)
                               console.log("###33333###",oJsonstate);
                                DashB.getView().byId('idVizFramedas6').setModel(oJsonstate,"G");
                                DashB.getView().byId('idVizFramedas6').getModel("G").refresh(true);
//console.log("$$$$$$$",arr[i].state)
}


//console.log("amt",amt1,"qty",qty1);
},
onSelectDate:function(oEvent){
DashB.lineModel= new sap.ui.model.json.JSONModel({data:{}});
DashB.getView().byId("idVizFrameLine").setModel(DashB.lineModel,"G");
var date=oEvent.getParameter('selectedItem').getKey();
//console.log("&&&&&&&&",date);
var arr = masterArrObj.data;
var amount=0;
var quantity=0;

//console.log("@@@@@@",arr.length);
for(var i=0;i<arr.length;i++){
var newdate=arr[i].date+" "+arr[i].time;
// console.log("----->",arr[i].date,"-------->",date,"newdate--->",newdate);
if(newdate === date ){
//console.log("inside if--->")
amount=arr[i].amount;
quantity=arr[i].quantity;
}
 

}

arr.data={
data:[]
};
var json={}
json.date=date.toString();
//json.newdate=newdate.toString();
json.amount =amount.toString();
json.quantity=quantity.toString();
                              arr.data.data.push(json)
//                              / console.log("$$$$$$$$$",json);
                              var oJsondatetime= new sap.ui.model.json.JSONModel();
                              oJsondatetime.setData(arr.data)
                               //console.log("###33333###",oJsondatetime);
                                DashB.getView().byId('idVizFrameLine').setModel(oJsondatetime,"G");
                                DashB.getView().byId('idVizFrameLine').getModel("G").refresh(true);

}


});
});

CustomFormat.js:

sap.ui.define([
       'sap/viz/ui5/format/ChartFormatter',
       'sap/viz/ui5/api/env/Format'
   ], function(ChartFormatter,Format) {
    return {
        FIORI_LABEL_SHORTFORMAT_10 : "__UI5__ShortIntegerMaxFraction10",
        FIORI_LABEL_FORMAT_2 : "__UI5__FloatMaxFraction2",
        FIORI_LABEL_SHORTFORMAT_2 : "__UI5__ShortIntegerMaxFraction2",
        FIORI_PERCENTAGE_FORMAT_2 : "__UI5__PercentageMaxFraction2",
        MFS1 : "month_s1",
        MFS2 : "month_s2",
        MFS3 : "month_s3",
        MFS4 : "month_s4",
        MDFS1 : "month_day_s1",
        MDFS2 : "month_day_s5",
        MDFS3 : "month_day_s6",
        YFS0 : "year_s0",
        YFS1 : "year_s1",
        YFS2 : "year_s2",
        chartFormatter : null,
        registerCustomFormat: function() {
        debugger;
            var chartFormatter = this.chartFormatter = ChartFormatter.getInstance();
            chartFormatter.registerCustomFormatter(this.FIORI_LABEL_SHORTFORMAT_10,
                function(value) {
            debugger;
                    var fixedInteger = sap.ui.core.format.NumberFormat.getIntegerInstance({
                        style: "short",
                        maxFractionDigits: 10
                    });
                    return fixedInteger.format(value);
            });
            chartFormatter.registerCustomFormatter(this.FIORI_LABEL_FORMAT_2,
                function(value) {
                    var fixedFloat = sap.ui.core.format.NumberFormat.getFloatInstance({
                        style: 'Standard',
                        maxFractionDigits: 2
                    });
                    return fixedFloat.format(value);
            });
            chartFormatter.registerCustomFormatter(this.FIORI_LABEL_SHORTFORMAT_2,
                function(value) {
                    var fixedInteger = sap.ui.core.format.NumberFormat.getIntegerInstance({
                        style: "short",
                        maxFractionDigits: 2
                    });
                    return fixedInteger.format(value);
            });
            chartFormatter.registerCustomFormatter(this.FIORI_PERCENTAGE_FORMAT_2,
                function(amt) {
            var amt = amt/100
            var amt2=amt*100
           
                var percentage = sap.ui.core.format.NumberFormat.getPercentInstance({
                    style: 'standard',
                    maxFractionDigits: 2
                });
                return percentage.format(amt2);
             
            });
            function registerTime(key, formatString){
                chartFormatter.registerCustomFormatter(key, function(value) {
                    var dateFormatter = sap.ui.core.format.DateFormat.getDateTimeInstance({
                                    pattern: formatString});
                    return dateFormatter.format(value);
                });
            };
            var patterns = {"month_s1" : "M", "month_s2" : "MM", "month_s3" : "MMM", "month_s4" : "MMMM",
                    "month_day_s1" : 'MM/dd', "month_day_s5" : 'MMM d', "month_day_s6" : 'MMMM d',
                    "year_s0" : 'yy', "year_s1" : 'yyy', "year_s2" : 'yyyy', "YearMonthDay" : "MM/dd/yy"};
            for ( var key in patterns) {
                if (patterns.hasOwnProperty(key)) {
                    registerTime(key,patterns[key]);
                }
            };
            Format.numericFormatter(chartFormatter);
        }
    }

});

Output:









Post a Comment

Previous Post Next Post