Ok, I'm a horrible copy/paste person. Here is the kendo chart that is showing up only as the loading icon....
@using GIS.Portal.Pulse.Performance.Models
@using GIS.Types.Pulse.Performance
@model WeeklyReportModel
<script>
$(document).ready(function () {
kendo.ui.progress($("#ProgressPipelineSummaryChart"), true);
});
function PipelineSummaryChartRender() {
kendo.ui.progress($("#ProgressPipelineSummaryChart"), false);
}
</script>
<div style="position: relative;">
@(Html.Kendo().Chart<GIS.Types.Pulse.Performance.PipelineSummary>
()
.Name("PipelineSummaryChart")
.Title("% Complete by Activity for All Pipeline Segments ")
.DataSource(ds =>
{
ds.Read(read => read.Action("JsonPipelineSummary", "WeeklyReport", new { id = Model.WeeklyReport.ProjectID, mapCenterlineID = 0, reportDate = Model.WeeklyReport.WeekEnding }));
}
)
.Legend(legend => legend
.Visible(false)
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Bar().Stack(true)
)
.PlotArea(plotArea => plotArea.Margin(0, 35, 0, 0))
.Series(series =>
{
series.Bar(model => model.PercentComplete).ColorField("StatusColor").Labels(labels => labels.Template("#= kendo.format('{0:n2}%', dataItem.PercentComplete)#\n#= kendo.format('{0:n0}', dataItem.MapFeatureLength)# ft").Visible(true));
})
.CategoryAxis(axis => axis
.Categories(model => model.Name)
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0:n0}%"))
.Line(line => line.Visible(false))
.Max(100)
.MajorGridLines(lines => lines.Visible(true))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= kendo.format('{0:n2}%', dataItem.PercentComplete)# (#= kendo.format('{0:n0}', dataItem.MapFeatureLength)# of #= kendo.format('{0:n0}', dataItem.TotalLength)# feet)")
)
.Events(e => { e.Render("PipelineSummaryChartRender"); })
)
<div id="ProgressPipelineSummaryChart"></div>
</div>
