Skip to content

Commit 5d32ff1

Browse files
author
User Jenkins
committed
Sync with Kendo UI Professional
1 parent e948ca8 commit 5d32ff1

21 files changed

+761
-9
lines changed

‎docs-aspnet/html-helpers/charts/bar-chart/date-axis.md‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
---
2+
title: Date Axis
3+
page_title: Date Axis
4+
description: "Learn how to set the Date Axis of Telerik UI Bar Charts HtmlHelper for {{ site.framework }}."
5+
slug: barcharts_date_axis
6+
---
7+
8+
# Date Axis
9+
10+
You can scale the date axis of your ASP.NET Core Bar Chart to get a better visualization of the seasonal data in your app. This can be done by modifying:
11+
12+
* The base date unit of the x-axis through the CategoryAxis.BaseUnit method, which takes seconds, minutes, hours, days, week, months and years.
13+
* The default aggregates of the series through the Series.Aggregate property, which takes max, min, sum, avg and count.
14+
15+
This implementation provides the opportunity to represent the data for the Bar Chart in by different categories and aggregates. Choose the best visualization for the needs of your application, set the category and/or aggregations and observe the result.
16+
17+
The following implementation demonstrates the code needed for setting the Date Axis for Bar Chart:
18+
19+
```View
20+
@model IEnumerable<Kendo.Mvc.Examples.Models.DatePoint>
21+
22+
<div class="configurator">
23+
<div class="header">Configurator</div>
24+
<div class="box-col">
25+
<h4>Base date unit</h4>
26+
<ul class="options">
27+
<li>
28+
<input id="baseUnitAuto" name="baseUnit"
29+
type="radio" value="" autocomplete="off" />
30+
<label for="baseUnitAuto">Automatic (default)</label>
31+
</li>
32+
<li>
33+
<input id="baseUnitYears" name="baseUnit"
34+
type="radio" value="years" autocomplete="off" />
35+
<label for="baseUnitYears">Years</label>
36+
</li>
37+
<li>
38+
<input id="baseUnitMonths" name="baseUnit"
39+
type="radio" value="months" autocomplete="off" />
40+
<label for="baseUnitMonths">Months</label>
41+
</li>
42+
<li>
43+
<input id="baseUnitWeeks" name="baseUnit"
44+
type="radio" value="weeks" checked="checked" autocomplete="off" />
45+
<label for="baseUnitWeeks">Weeks</label>
46+
</li>
47+
<li>
48+
<input id="baseUnitDays" name="baseUnit"
49+
type="radio" value="days" autocomplete="off" />
50+
<label for="baseUnitDays">Days</label>
51+
</li>
52+
</ul>
53+
</div>
54+
<div class="box-col">
55+
<h4>Aggregate function</h4>
56+
<ul class="options">
57+
<li>
58+
<input id="aggregateMax" name="aggregate"
59+
type="radio" value="max" autocomplete="off" />
60+
<label for="aggregateMax">Max (default)</label>
61+
</li>
62+
<li>
63+
<input id="aggregateMin" name="aggregate"
64+
type="radio" value="min" autocomplete="off" />
65+
<label for="aggregateMin">Min</label>
66+
</li>
67+
<li>
68+
<input id="aggregateSum" name="aggregate"
69+
type="radio" value="sum" autocomplete="off" />
70+
<label for="aggregateSum">Sum</label>
71+
</li>
72+
<li>
73+
<input id="aggregateAvg" name="aggregate"
74+
type="radio" value="avg" checked="checked" autocomplete="off" />
75+
<label for="aggregateAvg">Avg</label>
76+
</li>
77+
<li>
78+
<input id="aggregateCount" name="aggregate"
79+
type="radio" value="count" autocomplete="off" />
80+
<label for="aggregateCount">Count</label>
81+
</li>
82+
</ul>
83+
</div>
84+
</div>
85+
86+
<div class="demo-section k-content wide">
87+
@(Html.Kendo().Chart(Model)
88+
.Name("chart")
89+
.Series(series =>
90+
{
91+
series
92+
.Column(model => model.Value, categoryExpression: model => model.Date)
93+
.Aggregate(ChartSeriesAggregate.Avg);
94+
})
95+
.CategoryAxis(axis => axis
96+
.Date()
97+
.BaseUnit(ChartAxisBaseUnit.Weeks)
98+
.MajorGridLines(lines => lines.Visible(false))
99+
)
100+
.ValueAxis(axis => axis
101+
.Numeric()
102+
.Line(line => line.Visible(false))
103+
)
104+
)
105+
</div>
106+
107+
<script>
108+
$(document).ready( function () {
109+
$(".configurator").bind("change", refresh);
110+
});
111+
112+
function refresh() {
113+
var chart = $("#chart").data("kendoChart"),
114+
series = chart.options.series,
115+
categoryAxis = chart.options.categoryAxis,
116+
baseUnitInputs = $("input:radio[name=baseUnit]"),
117+
aggregateInputs = $("input:radio[name=aggregate]");
118+
119+
for (var i = 0, length = series.length; i < length; i++) {
120+
series[i].aggregate = aggregateInputs.filter(":checked").val();
121+
}
122+
123+
categoryAxis.baseUnit = baseUnitInputs.filter(":checked").val();
124+
125+
chart.refresh();
126+
}
127+
</script>
128+
```
129+
130+
* [Demo page of the Date Axis for Bar Chart](https://demos.telerik.com/{{ site.platform }}/bar-charts/date-axis)
131+
132+
## See Also
133+
* [Basic Usage of Bar Charts for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/bar-charts)
134+
* [Stacked and Grouped Charts for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/bar-charts/grouped-stacked-bar)

‎docs-aspnet/html-helpers/charts/bar-chart/gap-spacing.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
title: Gap and Spacing
3+
page_title: Gap and Spacing
4+
description: "Learn how to set Gap and Spacing of Telerik UI Bar Charts HtmlHelper for {{ site.framework }}."
5+
slug: barcharts_gap_and_spacing
6+
---
7+
8+
# Gap and Spacing
9+
10+
The Bar Chart component allows you to control the distance between its categories as well as between series points within a category. This can be done through the series.gap and series.spacing client-side settings of the Chart.
11+
12+
The following implementation demonstrates the code needed for setting Gap and Spacing for Bar Chart:
13+
14+
```View
15+
<div class="configurator">
16+
<div class="header">Configurator</div>
17+
<div class="box-col">
18+
<h4>Gap</h4>
19+
<ul class="options">
20+
<li>
21+
<input id="gap" type="number" value="1.5" step="0.1" style="width: 80px;" />
22+
<button id="getGap" class="k-button">Set gap</button>
23+
</li>
24+
</ul>
25+
</div>
26+
<div class="box-col">
27+
<h4>Spacing</h4>
28+
<ul class="options">
29+
<li>
30+
<input id="spacing" type="number" value="0.4" step="0.1" style="width: 80px;" />
31+
<button id="getSpacing" class="k-button">Set spacing</button>
32+
</li>
33+
</ul>
34+
</div>
35+
</div>
36+
37+
<div class="demo-section k-content wide">
38+
@(Html.Kendo().Chart()
39+
.Name("chart")
40+
.Title("Internet Users")
41+
.Legend(legend => legend.Position(ChartLegendPosition.Bottom))
42+
.Series(series =>
43+
{
44+
series.Column(new double[] { 67.96, 61.93, 75, 71, 78 }).Name("United States");
45+
series.Column(new double[] { 15.7, 11, 20, 25, 36.6 }).Name("World");
46+
})
47+
.CategoryAxis(axis => axis
48+
.Categories("2005", "2006", "2007", "2008", "2009")
49+
)
50+
.ValueAxis(axis => axis
51+
.Numeric().Labels(labels => labels.Format("{0}%"))
52+
)
53+
.Tooltip(tooltip => tooltip
54+
.Visible(true)
55+
.Format("{0}%")
56+
)
57+
)
58+
</div>
59+
60+
<script>
61+
$(document).ready( function () {
62+
var chart = $("#chart").data("kendoChart"),
63+
firstSeries = chart.options.series;
64+
65+
$("#getGap").click(function () {
66+
firstSeries[0].gap = parseFloat($("#gap").val(), 10);
67+
chart.redraw();
68+
});
69+
70+
$("#getSpacing").click(function () {
71+
firstSeries[0].spacing = parseFloat($("#spacing").val(), 10);
72+
chart.redraw();
73+
});
74+
75+
if (kendo.ui.NumericTextBox) {
76+
$("#gap").kendoNumericTextBox();
77+
$("#spacing").kendoNumericTextBox();
78+
}
79+
});
80+
</script>
81+
```
82+
83+
Overview of Gap and Spacing implementation for Bar Chart:
84+
85+
![Gap and Spacing](images/gapAndSpacing.png)
86+
87+
* [Demo page of the Gap and Spacing for Bar Chart](https://demos.telerik.com/{{ site.platform }}/bar-charts/gap-spacing)
88+
89+
## See Also
90+
* [Basic Usage of Bar Charts for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/bar-charts)
91+
* [Stacked and Grouped Charts for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/bar-charts/grouped-stacked-bar)

‎docs-aspnet/html-helpers/charts/bar-chart/grouped-stacked-bar.md‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
---
2+
title: Stacked And Grouped Bar Chart
3+
page_title: Stacked And Grouped Bar Chart
4+
description: "Learn how to use the Stacked and Grouped Bars of Telerik UI Bar Charts HtmlHelper for {{ site.framework }}."
5+
slug: barcharts_aspnetcore_htmlhelper_stacked_and_grouped_bars
6+
---
7+
8+
# Stacked And Grouped Bar Charts
9+
10+
Usually, the data series in a stacked column or bar chart have one stack per category. There are scenarios in which you might want to arrange your data so that the chart appears to have more than one stack per category.
11+
12+
In this demo, you can see how to group stacked columns to display the World population compared by age and sex in a specific period of time by setting the Stack() method, which sets the name of the stack that the series belong to:
13+
14+
series.Column(new int[] { 1100941, 1139797, 1172929, 1184435, 1184654 }).Name("0-19").Stack("Female");
15+
16+
* [Demo page for Stacked and Grouped Bar Chart](https://demos.telerik.com/{{ site.platform }}/bar-charts/grouped-stacked-bar)
17+
18+
The following implementation demonstrates the code needed for setting the Stacked and Grouped Bar Chart:
19+
20+
```View
21+
@(Html.Kendo().Chart()
22+
.Name("chart")
23+
.Title("World population by age group and sex")
24+
.Legend(legend => legend
25+
.Visible(false)
26+
)
27+
.Series(series =>
28+
{
29+
series
30+
.Column(new int[] { 854622, 925844, 984930, 1044982, 1100941, 1139797, 1172929, 1184435, 1184654 })
31+
.Name("0-19").Stack("Female");
32+
33+
series
34+
.Column(new int[] { 490550, 555695, 627763, 718568, 810169, 883051, 942151, 1001395, 1058439 })
35+
.Name("20-39").Stack("Female");
36+
37+
series
38+
.Column(new int[] { 379788, 411217, 447201, 484739, 395533, 435485, 499861, 569114, 655066 })
39+
.Name("40-64").Stack("Female");
40+
41+
series
42+
.Column(new int[] { 97894, 113287, 128808, 137459, 152171, 170262, 191015, 210767, 226956 })
43+
.Name("65-79").Stack("Female");
44+
45+
series
46+
.Column(new int[] { 16358, 18576, 24586, 30352, 36724, 42939, 46413, 54984, 66029 })
47+
.Name("80+").Stack("Female");
48+
49+
series
50+
.Column(new int[] { 900268, 972205, 1031421, 1094547, 1155600, 1202766, 1244870, 1263637, 1268165 })
51+
.Name("0-19").Stack("Male");
52+
53+
series
54+
.Column(new int[] { 509133, 579487, 655494, 749511, 844496, 916479, 973694, 1036548, 1099507 })
55+
.Name("20-39").Stack("Male");
56+
57+
series
58+
.Column(new int[] { 364179, 401396, 440844, 479798, 390590, 430666, 495030, 564169, 646563 })
59+
.Name("40-64").Stack("Male");
60+
61+
series
62+
.Column(new int[] { 74208, 86516, 98956, 107352, 120614, 138868, 158387, 177078, 192156 })
63+
.Name("65-79").Stack("Male");
64+
65+
series
66+
.Column(new int[] { 9187, 10752, 13007, 15983, 19442, 23020, 25868, 31462, 39223 })
67+
.Name("80+").Stack("Male");
68+
})
69+
.SeriesColors(
70+
"#cd1533", "#d43851", "#dc5c71", "#e47f8f", "#eba1ad",
71+
"#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"
72+
)
73+
.CategoryAxis(axis => axis
74+
.Categories("1970", "1975", "1980", "1985", "1990", "1995", "2000", "2005", "2010")
75+
.MajorGridLines(lines => lines.Visible(false))
76+
)
77+
.ValueAxis(axis => axis
78+
.Numeric()
79+
.Labels(labels =>
80+
labels.Template("#= kendo.format('{0:N0}', value / 1000) # M")
81+
)
82+
.Line(line => line.Visible(false))
83+
)
84+
.Tooltip(tooltip => tooltip
85+
.Visible(true)
86+
.Template("#= series.stack.group #s, age #= series.name #")
87+
)
88+
)
89+
```
90+
91+
Overview of the Stacked and Grouped Bars:
92+
93+
![Stacked and Grouped Bars](images/stackedAndGroupedBars.png)
94+
95+
## See Also
96+
* [Basic Usage of Bar Charts {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/bar-charts)
97+
* [Stacked Bar Charts for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/bar-charts/stacked-bar)

0 commit comments

Comments
 (0)