Remove Default value(NO DATA) from SAPUI5 Chart(Line,Pie,Bar) and put some spinner before geting data from XSODATA service

[Former Member]

Hi,

Write a java script function in your sapui5 application and put the below code for getting line chart.

function lineChartTest(){

                        var stock=sap.ui.getCore().byId("stock").getValue();

                        var exchange=sap.ui.getCore().byId("exchange").getValue();

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

                        sap.ui.getCore().setModel(oModelChartt);

                        jQuery.ajax({

                                url: ' Put your XSODATA URL Here'

                                dataType: "json",

                               beforeSend: function() {

                                    $('#loader').show();        //This method will call before your request go to server.

                                 },

                                 complete: function(){     //This method would call after completion of  your request.

                                    $('#loader').hide();     //Create a div and assign a id to that div

                                 },

                                success: function(data, textStatus, jqXHR) { // callback called when data is received

                                    if (data.length == 0) {

                                        window.alert(textStatus+jqXHR);

                                    } else {

                                        oModelChartt.setData(data); // fill the received data into the JSONModel

                                    }

                                },

                                error: function(jqXHR, textStatus, errorThrown) {

                                    $('#errorMsg').show();

                                }

                            });

                            var dataset = new sap.viz.ui5.data.FlattenedDataset(

                                    {

                                        dimensions : [ {

                                            axis : 1,

                                            name : 'Year',

                                            value : "{YEAR_INT}"

                                        },

                                        {

                                            axis : 1,

                                            name : 'Week',

                                            value : "{WEEK_INT}"

                                        } ],

                                        measures : [ {

                                            name : 'PriceHigh',

                                            value : '{PRICEHIGH}'

                                        } ],

                                        data : {

                                            path : "/d/results",

                                        }

                                    });

                            var oTextView = new sap.ui.commons.TextView({      /* This Code will be using for remove Default value.You can replace                                                                                                                                                    'NO Data'  value  with your custom message. */

                                text : 'Please wait, loading data',

                                wrapping : false,

                                semanticColor: sap.ui.commons.TextViewColor.Negative,

                                textAlign:sap.ui.core.TextAlign.Center

                                });

                            var chart = new sap.viz.ui5.Line(

                                    {

                                        width : "800px",

                                        height : "400px",

                                         plotArea : {

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

                                                },

                                        title : {

                                            visible :false,

                                            text : 'Stock Data'

                                        },

                                        dataset : dataset,

                                       noData :  oTextView   // just assign your custom message to  noData property

                                    });

                                chart.setModel(oModelChartt);

                                chart.placeAt("linechart","only");  //only property will help you to append chart with refreshed value

}