Remove Default value(NO DATA) from SAPUI5 Chart(Line,Pie,Bar) and put some spinner before geting data from XSODATA service
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
}