New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Bind Chart to SignalR
Environment
| Product | Telerik UI for ASP.NET Core Chart |
| Product Version | Created with version 2024.4.1112 |
Description
How can I bind the Chart to a SignalR DataSource?
Solution
Razor
<script src="https://cdn.jsdelivr.net/npm/signalr@2.4.3/jquery.signalR.min.js"></script>
@(Html.Kendo().Notification()
.Name("notification")
.Width("100%")
.Position(position => position.Top(0).Left(0))
)
@(Html.Kendo().Chart<TelerikAspNetCoreApp3.Models.ProductViewModel>()
.Name("chart")
.Legend(false)
.DataSource(dataSource => dataSource
.SignalR()
.AutoSync(true)
.Events(events => events.Push(@<text>
function(e) {
var notification = $("#notification").data("kendoNotification");
notification.success(e.type);
}
</text>))
.Sort(s => s.Add("CreatedAt").Descending())
.Transport(tr => tr
.Promise("hubStart")
.Hub("hub")
.Client(c => c
.Read("read")
.Create("create")
.Update("update")
.Destroy("destroy"))
.Server(s => s
.Read("read")
.Create("create")
.Update("update")
.Destroy("destroy"))
)
.Schema(schema => schema
.Model(model =>
{
model.Id("ID");
model.Field("ID", typeof(string)).Editable(false);
model.Field("CreatedAt", typeof(DateTime));
model.Field("UnitPrice", typeof(int));
}
))
)
.Series(series =>
{
series.Line(
model => model.UnitPrice,
categoryExpression: model => model.ProductName
);
})
.Transitions(false)
.CategoryAxis(axis =>
axis.Labels(labels => labels.Rotation(-90))
)
)For the complete implementation, refer to the ASP.NET MVC application in the UI for ASP.NET MVC Examples repository. You can use this as a starting point to configure the same behavior in an ASP.NET Core project.