Skip to content

Commit d61317a

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 7c1fcdf commit d61317a

File tree

6 files changed

+421
-87
lines changed

6 files changed

+421
-87
lines changed

‎docs-aspnet/html-helpers/charts/how-to/binding-to-singalr.md‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎docs-aspnet/html-helpers/charts/how-to/create-dynamic-series.md‎

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎docs-aspnet/html-helpers/charts/how-to/use-chart-in-ajax-grid-column.md‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎docs-aspnet/knowledge-base/chart-bind-to-dynamic-series.md‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
---
2+
title: Bind Chart to Dynamic Series
3+
description: Learn how to bind a Telerik UI for {{ site.framework }} Chart to dynamic series.
4+
type: how-to
5+
page_title: Binding a Chart to dynamic series
6+
previous_url: html-helpers/charts/how-to/create-dynamic-series
7+
slug: chart-bind-to-dynamic-series
8+
tags: chart, databound, dynamic, series
9+
res_type: kb
10+
---
11+
12+
# Description
13+
How can I bind a Telerik UI for {{ site.framework }} Chart to dynamic series?
14+
15+
# Example
16+
```HtmlHelper
17+
@model TelerikAspNetCoreApp4.Models.MyViewModel
18+
19+
@(Html.Kendo().Chart()
20+
.Name("Chart")
21+
.Series(series => {
22+
foreach (var def in Model.Series) {
23+
series.Column(def.Data).Name(def.Name).Stack(def.Stack);
24+
}
25+
})
26+
.CategoryAxis(axis => axis
27+
.Categories(new string[] { "A", "B", "C" })
28+
)
29+
)
30+
```
31+
32+
```Controller
33+
public class HomeController : Controller
34+
{
35+
public ActionResult Index()
36+
{
37+
var model = new MyViewModel();
38+
model.Categories.AddRange(new string[] { "A", "B", "C" });
39+
40+
model.Series.Add(new MySeriesData()
41+
{
42+
Name = "Foo",
43+
Stack = "A",
44+
Data = new decimal[] { 1, 2, 3 }
45+
});
46+
47+
model.Series.Add(new MySeriesData()
48+
{
49+
Name = "Bar",
50+
Stack = "A",
51+
Data = new decimal[] { 2, 3, 4 }
52+
});
53+
54+
model.Series.Add(new MySeriesData()
55+
{
56+
Name = "Baz",
57+
Stack = "B",
58+
Data = new decimal[] { 10, 20, 30 }
59+
});
60+
61+
return View(model);
62+
}
63+
}
64+
```
65+
66+
{% if site.core %}
67+
```TagHelper
68+
@addTagHelper *, Kendo.Mvc
69+
@{
70+
var categories = new string[] { "A", "B", "C" };
71+
}
72+
73+
@model TelerikAspNetCoreApp4.Models.MyViewModel
74+
75+
<kendo-chart name="chart">
76+
<category-axis>
77+
<category-axis-item name="series-axis">
78+
<line visible="false" />
79+
</category-axis-item>
80+
<category-axis-item name="label-axis" categories="categories">
81+
</category-axis-item>
82+
</category-axis>
83+
<series>
84+
@foreach (var def in Model.Series)
85+
{
86+
<series-item type="ChartSeriesType.Column"
87+
name="@def.Name"
88+
stack="@def.Stack"
89+
data="@def.Data">
90+
<labels background="transparent" visible="true">
91+
</labels>
92+
</series-item>
93+
}
94+
</series>
95+
</kendo-chart>
96+
97+
```
98+
{% endif %}
99+
100+
To see the full examples, refer to the GitHub repository of the [sample project on dynamic series](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ChartDynamicSeries).
101+
102+
## More {{ site.framework }} Chart Resources
103+
104+
* [{{ site.framework }} Chart Documentation]({%slug htmlhelpers_charts_aspnetcore%})
105+
106+
* [{{ site.framework }} Chart Demos](https://demos.telerik.com/{{ site.platform }}/charts/index)
107+
108+
{% if site.core %}
109+
* [{{ site.framework }} Chart Product Page](https://www.telerik.com/aspnet-core-ui/charts)
110+
111+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
112+
113+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
114+
115+
{% else %}
116+
* [{{ site.framework }} Chart Product Page](https://www.telerik.com/aspnet-mvc/charts)
117+
118+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})
119+
120+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc)
121+
{% endif %}
122+
123+
## See Also
124+
125+
* [Client-Side API Reference of the Chart for {{ site.framework }}](https://docs.telerik.com/kendo-ui/api/javascript/ui/chart)
126+
* [Server-Side API Reference of the Chart for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/chart)
127+
{% if site.core %}
128+
* [Server-Side TagHelper API Reference of the Chart for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/taghelpers/chart)
129+
{% endif %}
130+
* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%})
131+
* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)

‎docs-aspnet/knowledge-base/chart-bind-to-signalr.md‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
---
2+
title: Bind Chart to SignalR
3+
description: Learn how to bind a Telerik UI for {{ site.framework }} Chart to SignalR.
4+
type: how-to
5+
page_title: Binding a Chart to SignalR
6+
previous_url: html-helpers/charts/how-to/binding-to-singalr
7+
slug: chart-bind-to-signalr
8+
tags: chart, databound, signalr
9+
res_type: kb
10+
---
11+
12+
# Description
13+
How can I bind a Telerik UI for {{ site.framework }} Chart to SignalR?
14+
15+
# Example
16+
```HtmlHelper
17+
@(Html.Kendo().Notification()
18+
.Name("notification")
19+
.Width("100%")
20+
.Position(position => position.Top(0).Left(0))
21+
)
22+
@(Html.Kendo().Chart<TelerikAspNetCoreApp3.Models.ProductViewModel>()
23+
.Name("chart")
24+
.Legend(false)
25+
.DataSource(dataSource => dataSource
26+
.SignalR()
27+
.AutoSync(true)
28+
.Events(events => events.Push(@<text>
29+
function(e) {
30+
var notification = $("#notification").data("kendoNotification");
31+
notification.success(e.type);
32+
}
33+
</text>))
34+
.Sort(s => s.Add("CreatedAt").Descending())
35+
.Transport(tr => tr
36+
.Promise("hubStart")
37+
.Hub("hub")
38+
.Client(c => c
39+
.Read("read")
40+
.Create("create")
41+
.Update("update")
42+
.Destroy("destroy"))
43+
.Server(s => s
44+
.Read("read")
45+
.Create("create")
46+
.Update("update")
47+
.Destroy("destroy"))
48+
)
49+
.Schema(schema => schema
50+
.Model(model =>
51+
{
52+
model.Id("ID");
53+
model.Field("ID", typeof(string)).Editable(false);
54+
model.Field("CreatedAt", typeof(DateTime));
55+
model.Field("UnitPrice", typeof(int));
56+
}
57+
))
58+
)
59+
.Series(series =>
60+
{
61+
series.Line(
62+
model => model.UnitPrice,
63+
categoryExpression: model => model.ProductName
64+
);
65+
})
66+
.Transitions(false)
67+
.CategoryAxis(axis =>
68+
axis.Labels(labels => labels.Rotation(-90))
69+
)
70+
)
71+
```
72+
73+
```JavaScript
74+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.signalR.min.js"></script>
75+
76+
<script>
77+
var hubUrl = "https://demos.telerik.com/kendo-ui/service/signalr/hubs";
78+
var connection = $.hubConnection(hubUrl, { useDefaultPath: false });
79+
var hub = connection.createHubProxy("productHub");
80+
var hubStart = connection.start({ jsonp: true });
81+
</script>
82+
```
83+
```Styles
84+
<style>
85+
.footer:first-of-type {
86+
display: none !important;
87+
}
88+
</style>
89+
```
90+
91+
For the complete implementation refer to the GitHub repo with the [sample project of a SignalR-bound Chart](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ChartSignalR).
92+
93+
## More {{ site.framework }} Chart Resources
94+
95+
* [{{ site.framework }} Chart Documentation]({%slug htmlhelpers_charts_aspnetcore%})
96+
97+
* [{{ site.framework }} Chart Demos](https://demos.telerik.com/{{ site.platform }}/charts/index)
98+
99+
{% if site.core %}
100+
* [{{ site.framework }} Chart Product Page](https://www.telerik.com/aspnet-core-ui/charts)
101+
102+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
103+
104+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
105+
106+
{% else %}
107+
* [{{ site.framework }} Chart Product Page](https://www.telerik.com/aspnet-mvc/charts)
108+
109+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})
110+
111+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc)
112+
{% endif %}
113+
114+
## See Also
115+
116+
* [Client-Side API Reference of the Chart for {{ site.framework }}](https://docs.telerik.com/kendo-ui/api/javascript/ui/chart)
117+
* [Server-Side API Reference of the Chart for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/chart)
118+
{% if site.core %}
119+
* [Server-Side TagHelper API Reference of the Chart for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/taghelpers/chart)
120+
{% endif %}
121+
* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%})
122+
* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)

0 commit comments

Comments
 (0)