TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Cassie Mod
NA
488
70.5k
diagram showing real time info insted of testdata
Jan 25 2016 9:09 AM
HI,
Ive got the following partialview and index.html
Now i use kendo to get a diagram (with test data called --> data). How can i change data to the real column of the partialview? ( i actually got more partial views, but when i got the answer i can use that on all the partial views). thnx guys
partialview:
@using TelerikMvcApp1.Models
@model ProgramCollectorDataFilesStatus
@(Html.Kendo().Grid<CollectorStatus>()
.Name("CollectorGrid")
.Columns(columns =>
{
columns.Bound(c => c.CollectorID).Groupable(true);
columns.Bound(c => c.LastStart);
columns.Bound(c => c.LastChecked);
columns.Bound(c => c.ServiceRunning);
columns.Bound(c => c.LastBatchID);
columns.Bound(c => c.BatchCompleted);
columns.Bound(c => c.BatchErrorID);
})
.Filterable()
.Sortable()
.Groupable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
)
.BindTo(Model.CollectorStatus)
)
index.html:
@using System.Web.Mvc.Html
@using TelerikMvcApp1.Controllers
@using TelerikMvcApp1.Models
@model ProgramCollectorDataFilesStatus
@{
ViewBag.Title = "Home Page";
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Batch Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jszip.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<br/>
<div class="container">
<div class="row">
<div class="col-lg-12 col-xs-12 col-sm-12 col-md-12">
<h3>Date last run</h3>
@Html.Partial("_ProgramStatus")
</div>
<div class="row">
<div class="col-lg-12 col-xs-12 col-sm-12 col-md-12">
<h3>Collector statistics</h3>
@Html.Partial("_CollectorStatus")
</div>
<div class="col-lg-12 col-xs-12 col-sm-12 col-md-12">
<h3>Collector statistics</h3>
@Html.Partial("_DataFilesStatus")
</div>
<br/>
<div class="col-lg-2 col-xs-2 col-sm-2 col-md-2">
<p>
<div class="demo-section k-content export-app wide hidden-on-narrow">
<div class="demo-section content-wrapper wide">
<div class="demo-section charts-wrapper wide">
<div id="collectorstatistics"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-xs-4 col-sm-4 col-md-4">
<p>
<div class="demo-section k-content export-app wide hidden-on-narrow">
<div class="demo-section content-wrapper wide">
<div class="demo-section charts-wrapper wide">
<div id="collectorscompleted"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-xs-2 col-sm-2 col-md-2">
<p>
<div class="demo-section k-content export-app wide hidden-on-narrow">
<div class="demo-section content-wrapper wide">
<div class="demo-section charts-wrapper wide">
<div id="datafilesstatistics"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-xs-4 col-sm-4 col-md-4">
<p>
<div class="demo-section k-content export-app wide hidden-on-narrow">
<div class="demo-section content-wrapper wide">
<div class="demo-section charts-wrapper wide">
<div id="datafilescompleted"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-----<< ### SCRIPT ### >>------->
<script>
$(document).ready(function() {
var datacollectors = [{
"source": "Approved",
"percentage": 237
}, {
"source": "Rejected",
"percentage": 112
}];
var datadatafiles = [{
"source": "Approved",
"percentage": 200
}, {
"source": "Rejected",
"percentage": 400
}];
$("#collectorstatistics").kendoChart({
legend: {
position: "bottom"
},
dataSource: {
data: datacollectors
},
series: [{
type: "donut",
field: "percentage",
categoryField: "source"
}],
chartArea: {
background: "none"
},
tooltip: {
visible: true,
template: "${ category } - ${ value } applications"
}
});
$("#datafilesstatistics").kendoChart({
legend: {
position: "bottom"
},
dataSource: {
data: datadatafiles
},
series: [{
type: "donut",
field: "percentage",
categoryField: "source"
}],
chartArea: {
background: "none"
},
tooltip: {
visible: true,
template: "${ category } - ${ value } applications"
}
});
$("#collectorscompleted").kendoChart({
legend: {
visible: false
},
seriesDefaults: {
type: "column"
},
series: [{
name: "Users Reached",
data: [340, 894, 1345, 1012, 3043, 2013 ]
}, {
name: "Applications",
data: [50, 80, 120, 203, 324, 297]
}],
valueAxis: {
labels: {
visible: false
},
line: {
visible: false
},
majorGridLines: {
visible: false
}
},
categoryAxis: {
categories: [2002, 2003, 2004, 2005, 2006, 2007],
line: {
visible: false
},
majorGridLines: {
visible: false
}
},
chartArea: {
background: "none"
},
tooltip: {
visible: true,
format: "{0}",
template: "#= series.name #: #= value #"
}
});
$("#datafilescompleted").kendoChart({
legend: {
visible: false
},
seriesDefaults: {
type: "column"
},
series: [{
name: "Users Reached",
data: [340, 894, 1345, 1012, 3043, 2013]
}, {
name: "Applications",
data: [50, 80, 120, 203, 324, 297]
}],
valueAxis: {
labels: {
visible: false
},
line: {
visible: false
},
majorGridLines: {
visible: false
}
},
categoryAxis: {
categories: [2002, 2003, 2004, 2005, 2006, 2007],
line: {
visible: false
},
majorGridLines: {
visible: false
}
},
chartArea: {
background: "none"
},
tooltip: {
visible: true,
format: "{0}",
template: "#= series.name #: #= value #"
}
});
});
</script>
<!-----<< ### STYLE ### >>------->
<style>
#collectorstatistics,
#datafilesstatistics,
#collectorscompleted,
#datafilescompleted,
#referrals {
display: inline-block;
width: 80%;
height: 240px;
vertical-align: top;
}
#referrals {
width: 24%;
height: 250px;
}
</style>
</body >
</html >
Reply
Answers (
1
)
How to integrate PayPal in Asp.Net
at no single company can R.