1
Answer

diagram showing real time info insted of testdata

Cassie Mod

Cassie Mod
8y
321
1
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 >
 
 
Answers (1)
Next Recommended Forum