How to achieve this type of graph with values

[Former Member]

Hi,

What is the type of UI element should be used along with mobile library to achieve requirement like below image and set values in the chart.Please share sample code.

Regards,

Koti Reddy

[Former Member · Accepted solution]

Hi,

Using a custome control in XML View is similar to use of Standard controls in XML Views . Here is short snippet to use :

Say, if you have a custom defined like this :

//This is a custom Input control which enables focusout event .

jQuery.sap.declare("customcontrols.CustomInput");

sap.m.Input.extend("customcontrols.CustomInput", { // inherit Input definition

  metadata : {

  events : {

  "focusout" : {}

  // new event definition focusout

  }

  },

  // focus out event handler

  onfocusout : function(evt) {

  this.fireFocusout();

  },

  renderer : {}

// Standard renderer method is not overridden

});

//Include the namespace in the XML View and use the control. In this case, it is cc namespace

You can use this custom control like this in XML View :

Include the namespace in the XML View and use the control. In this case, it is cc namespace

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"

  xmlns:commons="sap.ui.commons" xmlns="sap.m" xmlns:layout="sap.ui.layout"

  xmlns:cc="customcontrols" controllerName="ux3.Details" xmlns:html="http://www.w3.org/1999/xhtml">

<layout:VerticalLayout >

     <cc:CustomInput id="creditAmount" width="100%">

     </cc:CustomInput>

</layout:VerticalLayout>

Regards

Mayank Jain

[Former Member · Accepted solution]

Hi ,

I am trying to achieve this from xml view. From Dennis posted JSBin code, I am facing difficulty to converty below JS View code to XML View code. Please share how to use template scenario in XML View approach for below code.

var oCtrl = new CircularElementCollection({

    elements: {

      path: '/',

      template: new CircularElement({

        color: '{color}',

        value: '{value}'

      })

    }

  });

Regards,

Koti Reddy

[Qualiture · Accepted solution]

I can't test it since I don't have access to JSBin right now, but let's say the custom controls are defined as :

com.business.app.custom.CircularElementCollection

com.business.app.custom.CircularElement

then in your XML view you define the namespace:

xmlns:cc="com.business.app.custom"

and you call the custom control in this way:

<cc:CircularElementCollection elements="{/}">
    <cc:elements>
        <cc:CircularElement color="{color}" value="{value}" />
    </cc:elements>
</cc:CircularElementCollection>

[Former Member · Accepted solution]

Thank You Robin!!

It is working fine.

Regards,

Koti Reddy

[former_member182862]

Hi Koti

You may need to create custom controls like this.

Example

-D

[Former Member]

Hi Dennis,

Please help me with XML View code as I am facing difficulty to convert similar to your example in XML View.

Regards,

Koti Reddy

[former_member182862]

HI Koti

I never use XML in my projects.

Can someone help?

Thanks

-D

[Qualiture]

Really? You will experience eternal bliss, unicorns and rainbows once you start using XML views

But it is as simple as points out below; the custom control remains in Javascript, just add it in a separate class file. Referencing the control is then indeed done just as you would a standard control

[Former Member]

Hi Dennis,

I used CSS Files as you mentioned as per JSBin but I got this kind of charts . Please share your recommendations to get circular chart.

I see two possibilities to get circular element.

1.Modifying CSS Class - I think below class gives circular element , so it may not need modification.

.CircularElement {

  border-radius: 50%;

  opacity: 0.7;

}

2. I see CSS Generation code in JS Bin which trigger circular element Map.Here how to pass border-radius to render it in cirular form.

function cssGenerator(css) {

       return 'style="' + Object.getOwnPropertyNames(css).map(function(k) {

        return k + ': ' + css[k];

        }).join('; ') + '"';

    }

      oRm.write('<div');

      oRm.writeControlData(oControl);

      oRm.addClass('CircularElement');

      oRm.writeClasses();

      var r = oControl.getRadius();

      var t = oControl.getThickness();

      var c = oControl.getColor();

      oRm.write(' ' + cssGenerator({

        width: r,

        height: r,

        border: t + ' solid ' + c

      }));

I got below type of elements as output.

Regards,

Koti Reddy

[former_member182862]

Sorry Koti

I do not understand your question. My JSBin already shows you have to create the circular element.

Thanks

-D

[Former Member]

I used same code and CSS Data but somehow It is displaying square shapes rather than circles.

I will look into this .

[former_member182862]

Which browser are you using?

-D

[Former Member]

I tested it in Chrome, IE,Mozialla but result is same everywhere.

Regards,

Koti Reddy

[Former Member]

CSS File moved into different folder than which I called/referred from index.html due to drag n drop functionality of eclipse unknowingly thats why circles didn't come.

Now I am able to see circular charts.

Thank You Dennis!!