to set json data on Comparison Micro

[former_member187272]

hi experts

How we can set data on micro chart with json data,i would like change 56 on image with data from json data

Thanks

[saivellanki · Accepted solution]

Hi Shahid,

Will this help? Plunker

Regards,

Sai Vellanki.

[former_member187272 · Accepted solution]

sap.ui.jsview("view.controllersTile", {

  /** Specifies the Controller belonging to this View.

  * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.

  * @memberOf cddemoapp.launchpage

  */

  getControllerName : function() {

  return"";

  },

  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

  * Since the Controller is given to this method, its event handlers can be attached right away.

  * @memberOf cddemoapp.launchpage

  */

  createContent : function(oController) {

var oBulletChart = new  sap.suite.ui.commons.DynamicContainer({ 

            tiles : [ 

                        new sap.suite.ui.commons.GenericTile({ 

                            header : 'Manual Override ', 

                           // subheader : 'Close Status', 

                            size : sap.suite.ui.commons.InfoTileSize.L , 

                            frameType : sap.suite.ui.commons.FrameType.TwoByOne, 

//                            backgroundImage : 'https://36.media.tumblr.com/4c1c24d32d29fe4d2667102a67b07d05/tumblr_nfeoirox8O1qi1d8wo3_500.png', 

                            headerImage : '', 

                            press : function(){alert();},

                            tileContent : [ 

                                new sap.suite.ui.commons.TileContent({ 

                                    footer : 'AUTOMATED:2069', 

                                    content : [ 

                                new sap.suite.ui.commons.ComparisonChart({ 

                                                    data : [ 

                                                            new sap.suite.ui.commons.ComparisonData({ 

                                                                title : 'Override', 

                                                                value :  56, 

                                                                color : 'Critical'

                                                                }) 

                                                            ] 

                                                    }) 

                                                ]

                                })

                            ] 

                        })

                    ] 

        }); 

return(oBulletChart);

  }

});

sai it is the code i am using

[saivellanki · Accepted solution]

Hi Shahid,

Changed to JS view. I used your code, check this sample: Plunker

Regards,

Sai Vellanki.

[former_member187272 · Accepted solution]

when i create new project and paste the code its works.But my existing project not working..

Thanks Sai..

[saivellanki · Accepted solution]

Shahid,

What was the issue, any errors on console?

Regards,

Sai Vellanki.

[former_member187272 · Accepted solution]

can we move coding at firstPage.controller.js   to view.js?

[saivellanki · Accepted solution]

Any specific reason to do that? Usually model initialization will be done in controller only.

Regards,

Sai Vellanki.

[former_member187272 · Accepted solution]

Same variable(model) i have used at  different part of project,i have changed the variable name and checked but no effect..

[saivellanki · Accepted solution]

Shahid,

Give a name to your model. I changed the code using named model, check the sample: Plunker

Regards,

Sai Vellanki.

[former_member187272 · Accepted solution]

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

        model.setData(aData);

        sap.ui.getCore().setModel(model, "ComparisonModel");

I think u have change this portion in code ,i tried this but no result

[former_member187272 · Accepted solution]

Sai it started working but not showing Numbers on chart

[saivellanki · Accepted solution]

Did you give the model name while binding to properties in view? Check the view code once in the sample that I provided. Also make sure you have this in your HTML.

data-sap-ui-xx-bindingSyntax="complex"

Regards,

Sai Vellanki.

[former_member187272 · Accepted solution]

i have

1. data-sap-ui-xx-bindingSyntax="complex"

  it in HTML

Thanks

[former_member187272 · Accepted solution]

it is my view.js

sap.ui.jsview("view.controllersTile1", {

  /** Specifies the Controller belonging to this View.

   * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.

   * @memberOf routingdemo.App

   */

  getControllerName: function() {

    return "view.controllersTile1";

  },

  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

   * Since the Controller is given to this method, its event handlers can be attached right away.

   * @memberOf routingdemo.App

   */

  createContent: function(oController) {

    this.setHeight("100%");

    var oTemplate = new sap.suite.ui.commons.ComparisonData({

      title: "{AmountType}",

      value: "{AmountSum}",

      color: {

        path: 'AmountSum',

        formatter: function(v) {

          if (v > 2000) {

            return "Critical";

          } else{

            return "Good";

          }

          return parseInt(v);

        }

      }

    });

    var oChart = new sap.suite.ui.commons.ComparisonChart();

    oChart.bindAggregation("data", {

      path: "ComparisonModel>/",

      template: oTemplate

    });

    var oBulletChart = new sap.suite.ui.commons.DynamicContainer({

      tiles: [

        new sap.suite.ui.commons.GenericTile({

          header: 'Manual Override ',

          // subheader : 'Close Status',

          size: sap.suite.ui.commons.InfoTileSize.L,

          frameType: sap.suite.ui.commons.FrameType.TwoByOne,

          //                            backgroundImage : 'https://36.media.tumblr.com/4c1c24d32d29fe4d2667102a67b07d05/tumblr_nfeoirox8O1qi1d8wo3_500.png',

          headerImage: '',

          press: function() {

            alert();

          },

          tileContent: [

            new sap.suite.ui.commons.TileContent({

              //footer: 'AUTOMATED:2069',

              content: [oChart]

            })

          ]

        }).addStyleClass("myCustomTile")

      ]

    });

    return (oBulletChart);

  }

});

My controller.js

sap.ui.controller("view.controllersTile1", {

/**

* Called when a controller is instantiated and its View controls (if available) are already created.

* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.

* @memberOf table_v01.Main

*/

  onInit: function() {

var aData = [{

          "ContractNumber": "0000010000850",

          "AmountType": "REP",

          "AmountSum": 3460

        }, {

          "ContractNumber": "0000010000850",

          "AmountType": "INT",

          "AmountSum": 341

        }, {

          "ContractNumber": "0000010000850",

          "AmountType": "FEE",

          "AmountSum": 1560

        }];

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

        model.setData(aData);

        sap.ui.getCore().setModel(model,"ComparisonModel");

  }

});

[saivellanki · Accepted solution]

Shahid,

There you go, you have to bind the model name to your property values as well.

sap.suite.ui.commons.ComparisonData({
      title: "{ComparisonModel>AmountType}",
      value: "{ComparisonModel>AmountSum}",
      color: {
        path: 'ComparisonModel>AmountSum',
        formatter: function(v) {
          if (v > 2000) {
            return "Critical";
          } else{
            return "Good";
          }
          return parseInt(v);
        }
      }
    })

Regards,

Sai Vellanki.

[former_member187272 · Accepted solution]

Hi Sai

Now I like to set data from json model for footer of tile also

new sap.suite.ui.commons.TileContent({

              footer: 'AUTOMATED:2069',

              content: [oChart]

            })

How can we do?

Thanks &Regards

[saivellanki · Accepted solution]

Hi Shahid,

What should be the value and does it come from same model?

Regards,

Sai Vellanki.

[former_member187272 · Accepted solution]

Hi sai,

Yes,the value should come from same model,I like to display Total at this place

Thanks...

[saivellanki · Accepted solution]

Hi Shahid,

Plunk Edited, check the sample: Plunker

Regards,

Sai Vellanki.

[vijay_kumar49]

Please check this example code. It may be useful : JS Bin - Collaborative JavaScript Debugging

Kindly let me know if you need any more information

[Former Member]

Hi Shahid,

Have you used a comparison chart?

If so you could bind the value

<GenericTile
header=""
subheader=""
size="S"
press="press">
<tileContent>
<TileContent">
<content>
<ComparisonChart size="S" scale="M">
  <data>
<ComparisonData title="Override" value="{value}" color="Critical"/>
  </data>
  </ComparisonChart>
</content>
</TileContent>
</tileContent>
</GenericTile>

Regards,

Naren L Naik

[former_member187272]

Hi

can u share Java script controller code for this

Thanks