Need dimensions value on in VIZ bar Chart dataselect event.

[Former Member]

Hi All

How can I get the dimension value in VIZ bar Chart on dataselect event.

Clicked on PCV_Warning bar then I need PCV_Warning text in alert message.

I have used following code for BAR generation.

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

                        dimensions : [

                            {

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

                                name : 'EventID',

                                value : "{EventID}"

                            }

                         ],

                        measures : [

                            {

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

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

                            }

                        ],

                        data : { path : "/Rowset/Row" }       

                    });

                    oChart1= new sap.viz.ui5.Bar(

                    {

                        width : "600px",

                        height : "350px",

                        plotArea : {

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

                        },

                        title : {

                            visible : true,

                            text : 'Bar Chart'

                        },

                                            selectData : [ function(oEvent) {

                                              alert('hi'+oEvent.getSource());

                                             }, this ],

                        dataset : oDataset1

                    });

Thanks in advance

Sudipto

[Former Member · Accepted solution]

Hi Sudipta,

Yes, You can retrieve the dimension value on click of Bar Chart. Please find the code details below.

Modified Code:-

                    oChart1= new sap.viz.ui5.Bar(

                    {

                        width : "600px",

                        height : "350px",

                        plotArea : {

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

                        },

                        title : {

                            visible : true,

                            text : 'Bar Chart'

                        },

                        selectData : function(oEvent) {

                                 var yAxisIndex = (oEvent.getParameter("data")[0]).data[0].ctx.path.dii_a1;

                                 // Put your model name in place of "YOUR_CHART_DATA_MODEL"

                                 // In alert you will get your result and use that value according to your requirement

                                 alert(YOUR_CHART_DATA_MODEL.getProperty("/Rowset/Row/"+yAxisIndex+"/EventID"));                                                           

                        },

                        dataset : oDataset1

                    });

Best Regards,

Bibhas Das

[fabian_luft · Accepted solution]

Hi Bibhas,

I wanted to realize some sort of forward navigation using and your approach seems to be able making this happen. But I don't know how to get the actual value. The first step in your selectData is clear to me and I have no problems retrieving the yAxisIndex. In the second step you want me to take the chart data model. Is this the underlying oDataModel or are you referring to the charts dataset? I tried it with both but I wasn't able to access the property.

It would be great if you could give me some assistance on this topic.

Kind regards,

Fabian

[Former Member · Accepted solution]

Hi Sudipta,

Your solution helped me a lot.

But Can you please tell me how to get the "measure name ( 'NumofInstances')" when I click on chart?

Thank You.

Regards,

Seshu

[Former Member · Accepted solution]

Hi Bibhas, how do i display the bar chart ? i have run out idea, anyone can help me?

Below is the code in detail.controller.xml

onInit: function() {

                                this.oInitialLoadFinishedDeferred = jQuery.Deferred();

                                var oVizFrame = this.getView().byId("idVizFrameBar");

                                var oPopOver = this.getView().byId("idPopOver");

                                var oModel = new sap.ui.model.json.JSONModel({

                                                SOItems: [

                                                                {

                                                                                ITEM: "Tablet",

                                                                                QUANTITY: 2067.45,

                                                                                VALUE: 7373.99,

                                                                                COLOR : "red"

                                                                },

                                                                {

                                                                                ITEM: "Desktop",

                                                                                QUANTITY: 3110.93,

                                                                                VALUE: 9920.91,

                                                                                COLOR : "green"

                                                                },

                                                                {

                                                                                ITEM: "Mouse",

                                                                                QUANTITY: 3003.97,

                                                                                VALUE: 2058.64,

                                                                                COLOR : "blue"

                                                                },

                                                                {

                                                                                ITEM: "Modem",

                                                                                QUANTITY: 6721.61,

                                                                                VALUE: 9149.65,

                                                                                COLOR : "purple"

                                                                },

                                                                {

                                                                                ITEM: "Printer",

                                                                                QUANTITY: 9636.25,

                                                                                VALUE: 3752.46,

                                                                                COLOR : "orange"

                                                                },

                                                                {

                                                                                ITEM: "Ink",

                                                                                QUANTITY: 9169.62,

                                                                                VALUE: 9221.43,

                                                                                COLOR : "yellow"

                                                                }

                                ]

                                });

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

                                                dimensions: [{

                                                                axis: 1,

                                                                name: "Item",

                                                                value: "{Item}"

            }],

                                                measures: [{

                                                                                name: "Quantity",

                                                                                value: "{Quantity}"

            },

                                                                {

                                                                                name: "Value",

                                                                                value: "{Value}"

                                                }],

                                                data: {

                                                                path: "/SOItems"

                                                }

                                });

                                oVizFrame.setDataset(oDataset);

                                oVizFrame.setModel(oModel);

                                var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({

                                                                "uid": "valueAxis",

                                                                "type": "Measure",

                                                                "values": "{Quantity}"

                                                }),

                                                feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({

                                                                "uid": "categoryAxis",

                                                                "type": "Dimension",

                                                                "values": "{Item}"

                                                }),

                                                feedColor = new sap.viz.ui5.controls.common.feeds.FeedItem({

"uid": "color",

"type": "Measure",

"values": "{Value}"

            });

                                oVizFrame.setVizProperties({

                                                valueAxis: {

                                                                label: {

                                                                                formatString: "u"

                                                                }

                                                },

                                                plotArea: {

                                                                dataLabel: {

                                                                                visible: true,

                                                                                colorPalette:"{#00FF00,#FFC200,#FF0000}"

                                                                }

                                                },

                                                legend: {

                                                                title: {

                                                                                visible: false

                                                                }

                                                },

                                                title: {

                                                                visible: true,

                                                                text: "Value by Quantity and Item"

                                                }

                                });

                                oVizFrame.addFeed(feedValueAxis);

                                oVizFrame.addFeed(feedCategoryAxis);

                                oVizFrame.addFeed(feedColor);

                                oPopOver.connect(oVizFrame.getVizUid());

                                oVizFrame.placeAt("content");