Bind Chart to SignalR
Description
How can I bind a Telerik UI for ASP.NET Core Chart to SignalR?
Example
@(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))
)
)
<script src="https://cdn.jsdelivr.net/npm/signalr@2.4.3/jquery.signalR.min.js"></script>
<script>
var hubUrl = "https://demos.telerik.com/kendo-ui/service/signalr/hubs";
var connection = $.hubConnection(hubUrl, { useDefaultPath: false });
var hub = connection.createHubProxy("productHub");
var hubStart = connection.start({ jsonp: true });
</script>
<style>
.footer:first-of-type {
display: none !important;
}
</style>
For the complete implementation refer to the GitHub repo with the sample project of a SignalR-bound Chart.