I'm trying to show the "kendo.ui.progress" or just an image over the div before the chart loads the data. I have up too 10 charts on my dashboard at one time so there is a lag between each of them loading and it looks werid with just a blank graph. I'm getting the data from a webservice and I've tried adding an loading-image class to the charts div but nothing I have tried has worked. Can anyone help me out.
this is an example of one of my charts:
this is an example of one of my charts:
var
dsOrderHis =
null
;
$(document).ready(
function
()
{
args.startDate = startDate;
args.endDate = endDate;
args.filterBy = filterBy;
args.userIds = userIds;
dsOrderHis =
new
kendo.data.DataSource(
{ transport: { read: { cache:
false
,
url: appUrl +
"/Services/ArgosyDashBoardService.svc/orderHistory"
,
dataType:
"json"
, contentType:
"application/json; charset=utf-8"
, type:
"POST"
},
parameterMap:
function
(options, operation) {
return
JSON.stringify(args) } },
schema: { data:
"OrderHistoryResult"
},
change:
function
() {
var
dataCount = $(
"#LoadOrderHistoryDiv"
).data(
"kendoChart"
).dataSource.view().length;
if
(dataCount <= 0) { setTimeout(
"LoadOrderHistoryHideSvg();"
, 400) }
else
{
$(
"#LoadOrderHistoryDiv svg"
).each(
function
() { $(
this
).fadeIn() });
setTimeout(
"LoadOrderHistoryAddIcon();"
, 100) } }
});
$(
'#LoadOrderHistoryDiv'
).kendoChart({
theme: currentTheme,
title: { text:
'Order: History'
},
dataSource: dsOrderHis, legend: { position:
"bottom"
},
series: [{ type:
"line"
, field:
"YAxis"
}],
categoryAxis: { field:
"XAxisLabel"
, labels: { rotation: 42} },
tooltip: { visible:
true
, template:
" #= value # orders placed in #= category # ."
, padding: 9 },
legend: { visible:
false
} })
});
//used for data changes
function
LoadOrderHistory()
{
var
chart = $(
"#LoadOrderHistoryDiv"
).data(
"kendoChart"
);
args.startDate = startDate;
args.endDate = endDate;
args.filterBy = filterBy;
args.userIds = userIds;
kendo.ui.progress($(
"#LoadOrderHistoryDiv"
),
true
);
chart.dataSource.read()
}