Sync with Kendo UI Professional

docs-aspnet-core/_config.yml

@@ -76,6 +76,8 @@ navigation:
         position: 1
      "html-helpers/data-management/grid":
         title: "Grid"
+     "html-helpers/data-management/grid/features":
+        title: "Features"
      "html-helpers/data-management/pivotgrid":
         title: "PivotGrid"
      "html-helpers/editors":
@@ -86,9 +88,12 @@ navigation:
      "html-helpers/charts":
         title: "Charts"
         position: 3
+     "html-helpers/charts/chart-types":
+        title: "Chart Types"
+        position: 2
      "html-helpers/charts/treemap":
         title: "TreeMap"
-        position: 2
+        position: 3
      "html-helpers/gauges":
         title: "Gauges"
         position: 4

docs-aspnet-core/html-helpers/charts/chart-types/area-charts.md

@@ -0,0 +1,78 @@
+---
+title: Area Charts
+page_title: Area Charts | Kendo UI Charts HtmlHelper for ASP.NET Core
+description: "Learn how to define Kendo UI Area Charts."
+slug: areacharts_aspnetcore_htmlhelper
+---
+
+# Area Charts
+
+The [Kendo UI Area Chart HtmlHelper for ASP.NET Core](https://demos.telerik.com/aspnet-core/area-charts/index) is suitable for displaying quantitative data by using continuous lines passing through points defined by the values of their items. The portion of the graph beneath the lines is filled with a particular color for each series. The different colors in an Area Chart are useful for emphasizing changes in values coming from several sets of similar data.
+
+## Configuration
+
+Use `Area` and `VerticalArea` to define the Kendo UI Area Charts.
+
+### Axes
+
+Axes are configured through `CategoryAxis` and `ValueAxis`. Multiple value axes are supported.
+
+###### Example
+
+    @(Html.Kendo().Chart()
+        .Name("chart")
+        .Title("Internet Users")
+        .Legend(legend => legend
+            .Position(ChartLegendPosition.Bottom)
+        )
+        .SeriesDefaults(seriesDefaults =>
+            seriesDefaults.Area()
+        )
+        .Series(series =>
+        {
+            series.Area(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World");
+            series.Area(new double[] { 67.96, 68.93, 75, 74, 78 }).Name("United States");
+        })
+        .CategoryAxis(axis => axis
+            .Categories(2005, 2006, 2007, 2008, 2009)
+        )
+        .ValueAxis(axis => axis
+            .Labels(labels => labels.Format("{0}%"))
+        )
+    )
+
+
+This configuration results in the Area Chart below.
+
+**Figure 1: A sample Area Chart**
+
+![Area Chart](/html-helpers/charts/chart-types/chart-area.png)
+
+### Line Styles
+
+Kendo UI Area Charts support the rendering of lines between the points with different styles. The supported styles can be set via the [`line.style`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.line#series.line.style) option and are:
+
+* Normal—This is the default style. It produces a straight line between data points.
+* Step—The style renders the connection between data points through vertical and horizontal lines. It is suitable for indicating that the value is constant between the changes.
+* Smooth—This style causes the Area Chart to display a fitted curve through data points. It is suitable when the data requires to be displayed with a curve, or when you wish to connect the points with smooth instead of straight lines.
+
+**Figure 2: A step-line Area Chart**
+
+![Step Line Chart](/html-helpers/charts/chart-types/chart-step-area.png)
+
+**Figure 3: A smooth-line Area Chart**
+
+![Smooth Line Chart](/html-helpers/charts/chart-types/chart-smooth-area.png)
+
+## See Also
+
+Other articles on Kendo UI Charts and chart types:
+
+* [Overview of the Kendo UI Chart Html Helper for ASP.NET Core ]({% slug htmlhelpers_charts_aspnetcore %})
+* [Bubble Charts]({% slug bubblecharts_aspnetcore_htmlhelper %})
+* [BoxPlot Charts]({% slug boxplotcharts_aspnetcore_htmlhelper %})
+* [Bar Charts]({% slug barcharts_aspnetcore_htmlhelper %})
+* [Pie Charts]({% slug piecharts_aspnetcore_htmlhelper %})
+* [Stock Charts]({% slug overview_stockcharthelper_aspnetcore %})
+* [TreeMap]({% slug overview_treemaphelper_aspnetcore %})
+* [Chart JavaScript API Reference](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart)

docs-aspnet-core/html-helpers/charts/chart-types/bar-charts.md

@@ -0,0 +1,80 @@
+---
+title: Bar Charts
+page_title: Bar Charts | Kendo UI Charts HtmlHelper for ASP.NET Core
+description: "Learn how to set the properties of Kendo UI Bar Charts HtmlHelper for ASP.NET Core."
+slug: barcharts_aspnetcore_htmlhelper
+---
+
+# Bar Charts
+
+The [Kendo UI Bar Chart HtmlHelper for ASP.NET Core](https://demos.telerik.com/aspnet-core/bar-charts/index) displays data via horizontal or vertical bars whose lengths vary according to their value. Bar Charts are suitable for displaying a comparison between several sets of data. For example, for showing a summary of unique and total site visitors over a certain period of time.
+
+The [Kendo UI Bullet Chart HtmlHelper for ASP.NET Core](https://demos.telerik.com/aspnet-core/bullet-charts/index) is a variation of a Kendo UI Bar Chart. You can use it as a replacement for dashboard gauges and meters. The bullet graph compares a given quantitative measure, such as temperature, against qualitative ranges, such as warm, hot, mild, cool, chilly, cold, etc., and a symbol marker that encodes the comparative measure, such as the max temperature a year ago.
+
+The [Kendo UI Range Bar Chart HtmlHelper for ASP.NET Core](https://demos.telerik.com/aspnet-core/range-bar-charts/index) is yet another variation of the Kendo UI Bar Chart. It displays data as bars where each bar represents a value range that spans between its minimum and maximum levels. A Range Bar type has floating bars unlike the standard Kendo UI Bar Chart that has anchored bars to its `x`-axis.
+
+## Configuration
+
+### Column Chart
+
+The [Kendo UI Column Chart for ASP.NET Core](https://demos.telerik.com/aspnet-core/bar-charts/column) is rendered when the `Series` is `Column`.
+
+###### Example
+
+    @(Html.Kendo().Chart()
+        .Name("chart")
+        .Title("Kendo Chart Example")
+        .Legend(legend => legend
+            .Position(ChartLegendPosition.Bottom)
+        )
+        .Series(series =>
+        {
+            series.Column(new double[] { 200, 450, 300, 125 }).Name("Example Series");
+        })
+        .CategoryAxis(axis => axis
+            .Categories(2000, 2001, 2002, 2003)
+        )
+    )
+
+
+**Figure 1: A sample Column Chart with categories**
+
+![Column Chart with categories](/html-helpers/charts/chart-types/chart-column-categories.png)
+
+### Bar Chart
+
+Setting the `Series` object to `"Bar"` renders horizontal bars, as demonstrated in the example below.
+
+###### Example
+
+    @(Html.Kendo().Chart()
+       .Name("chart")
+       .Title("Kendo Chart Example")
+       .Legend(legend => legend
+           .Position(ChartLegendPosition.Bottom)
+       )
+       .Series(series =>
+       {
+           series.Bar(new double[] { 200, 450, 300, 125 }).Name("Example Series");
+       })
+       .CategoryAxis(axis => axis
+           .Categories(2000, 2001, 2002, 2003)
+       )
+    )
+
+**Figure 2: A sample Bar Chart**
+
+![Bar Chart](/html-helpers/charts/chart-types/chart-bar.png)
+
+## See Also
+
+Other articles on Kendo UI Charts and chart types:
+
+* [Overview of the Kendo UI Chart Html Helper for ASP.NET Core ]({% slug htmlhelpers_charts_aspnetcore %})
+* [Area Charts]({% slug areacharts_aspnetcore_htmlhelper %})
+* [Bubble Charts]({% slug bubblecharts_aspnetcore_htmlhelper %})
+* [BoxPlot Charts]({% slug boxplotcharts_aspnetcore_htmlhelper %})
+* [Pie Charts]({% slug piecharts_aspnetcore_htmlhelper %})
+* [Stock Charts]({% slug overview_stockcharthelper_aspnetcore %})
+* [TreeMap]({% slug overview_treemaphelper_aspnetcore %})
+* [Chart JavaScript API Reference](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart)

docs-aspnet-core/html-helpers/charts/chart-types/boxplot-charts.md

@@ -0,0 +1,95 @@
+---
+title: Box Plot Charts
+page_title: Box Plot Charts | Kendo UI Charts HtmlHelper for ASP.NET Core
+description: "Learn how to create a Kendo UI Box Plot Chart for ASP.NET Core and configure its options."
+slug: boxplotcharts_aspnetcore_htmlhelper
+---
+
+# Box Plot Charts
+
+The [Kendo UI Box Plot Chart HtmlHelper for ASP.NET Core](https://demos.telerik.com/aspnet-core/box-plot-charts/index) is useful for displaying variation in statistical samples of data. The Box Plot Chart uses seven values—first and third quartile (q1 and q3), median (that is the second quartile), upper and lower value (inner fences), mean and outliers. The advantage of this type of series is that it displays detailed information about a set of data in a small space.
+
+If you are not familiar with the usage and terminology of the box plots and want to understand it better, check the [Wikipedia page on box plots](https://en.wikipedia.org/wiki/Box_plot).
+
+## Configuration
+
+Use the `BoxPlot` series type to create a Kendo UI Box Plot Chart.
+
+When binding the Box Plot Chart, there are seven special properties of the `Series` object that you should set in order to display the chart successfully—`q1` (first quartile), `q3Field` (third quartile), `lower`, `upper`, `median` (second quartile), `mean`, `outliers`. The first five are required, while `mean` and `outliers` are optional. All properties have to point to numeric fields in the DataSource, with the exception of `outliers` which has to point to a field that contains an array of numbers. The example below shows the result of such a configuration
+
+###### Example
+
+      @(Html.Kendo().Chart()
+            .Name("chart")
+            .Title("Monthly Mean Temperatures (°F)")
+            .Legend(legend => legend.Visible(false))
+            .Series(series => series
+                .BoxPlot(new System.Collections.ArrayList() {
+                    new { lower= 26.2, q1= 38.3 , median= 51.0, q3= 61.45, upper= 68.9, mean= 49.0, outliers= new [] {18.3, 20, 70, 72, 5}} ,
+                    new { lower= 26.4, q1= 38.125, median= 46.8 , q3= 60.425, upper= 66.8, mean= 47.3, outliers= new [] {18, 69, 71.3,  71.5}},
+                    new { lower= 31.6, q1= 41.725, median= 52.35, q3= 62.175, upper= 70.8, mean= 52.3, outliers= new [] {14, 16.4, 74}},
+                    new { lower= 34.4, q1= 39.375, median= 49.9 , q3= 61.425, upper= 69.2, mean= 50.3, outliers= new [] {16, 18, 72, 72.5}} ,
+                    new { lower= 29.9, q1= 38.35, median= 50.4, q3= 60.875, upper= 69.7, mean= 49.9, outliers= new [] {19, 20, 76, 78}},
+                    new { lower= 22.3, q1= 36.875, median= 48.9 , q3= 62.65 , upper= 70.3, mean= 49.0, outliers= new [] {16.5, 17, 74, 75,  78}},
+                    new { lower= 32.3, q1= 39.5, median= 54.1, q3= 61.175, upper= 67.3, mean= 50.8, outliers= new [] {13, 14, 15, 74.3,   75.2, 76}},
+                    new { lower= 28.5, q1= 36.075, median= 50.5 , q3= 64.2, upper= 70.4, mean= 49.6, outliers= new [] {18, 22, 73.4, 75}},
+                    new { lower= 33.6, q1= 40.65, median= 49.55, q3= 62.8, upper= 69.2, mean= 51.1, outliers= new [] {17, 73}},
+                    new { lower= 33.6, q1= 38.6, median= 47.9, q3= 60.825, upper= 67.0, mean= 49.7, outliers= new [] {12, 13.5, 16, 73,   74.6, 77}},
+                    new { lower= 31.9, q1= 36.425, median= 49.3, q3= 61.825, upper= 69.7, mean= 49.4, outliers= new [] {17, 76}},
+                    new { lower= 34.0, q1= 41.225, median= 51.15, q3= 62.4, upper= 68.8, mean= 51.6, outliers= new [] {14.6, 17.3, 72.3,  74}}
+                })
+            )
+            .CategoryAxis(categoryAxis => categoryAxis
+                .Categories(new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" })
+                .MajorGridLines(majorGridLines => majorGridLines.Visible(false))
+            )
+      )
+
+### Orientation
+
+The Box Plot Chart orientation can be changed by setting the series type to `VerticalBoxPlot`.
+
+###### Example
+
+      @(Html.Kendo().Chart()
+         .Name("chart")
+         .Title("Monthly Mean Temperatures (°F)")
+         .Legend(legend => legend.Visible(false))
+         .Series(series => series
+             .VerticalBoxPlot(new System.Collections.ArrayList() {
+                 new { lower= 26.2, q1= 38.3 , median= 51.0, q3= 61.45, upper= 68.9, mean= 49.0, outliers= new [] {18.3, 20, 70, 72, 5}},
+                 new { lower= 26.4, q1= 38.125, median= 46.8 , q3= 60.425, upper= 66.8, mean= 47.3, outliers= new [] {18, 69, 71.3, 71.5}},
+                 new { lower= 31.6, q1= 41.725, median= 52.35, q3= 62.175, upper= 70.8, mean= 52.3, outliers= new [] {14, 16.4, 74}},
+                 new { lower= 34.4, q1= 39.375, median= 49.9 , q3= 61.425, upper= 69.2, mean= 50.3, outliers= new [] {16, 18, 72, 72.5}},
+                 new { lower= 29.9, q1= 38.35, median= 50.4, q3= 60.875, upper= 69.7, mean= 49.9, outliers= new [] {19, 20, 76, 78}},
+                 new { lower= 22.3, q1= 36.875, median= 48.9 , q3= 62.65 , upper= 70.3, mean= 49.0, outliers= new [] {16.5, 17, 74, 75, 78}},
+                 new { lower= 32.3, q1= 39.5, median= 54.1, q3= 61.175, upper= 67.3, mean= 50.8, outliers= new [] {13, 14, 15, 74.3, 75.2, 76}},
+                 new { lower= 28.5, q1= 36.075, median= 50.5 , q3= 64.2, upper= 70.4, mean= 49.6, outliers= new [] {18, 22, 73.4, 75}},
+                 new { lower= 33.6, q1= 40.65, median= 49.55, q3= 62.8, upper= 69.2, mean= 51.1, outliers= new [] {17, 73}},
+                 new { lower= 33.6, q1= 38.6, median= 47.9, q3= 60.825, upper= 67.0, mean= 49.7, outliers= new [] {12, 13.5, 16, 73, 74.6, 77}},
+                 new { lower= 31.9, q1= 36.425, median= 49.3, q3= 61.825, upper= 69.7, mean= 49.4, outliers= new [] {17, 76}},
+                 new { lower= 34.0, q1= 41.225, median= 51.15, q3= 62.4, upper= 68.8, mean= 51.6, outliers= new [] {14.6, 17.3, 72.3, 74}}
+             })
+         )
+         .CategoryAxis(categoryAxis => categoryAxis
+             .Categories(new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" })
+             .MajorGridLines(majorGridLines => majorGridLines.Visible(false))
+         )
+      )
+
+### Customizing Outliers
+
+Outliers are values that appear outside of the range closed by the lower and upper values (inner fences). There are two types of outliers in a box plot based on their distance from the inner fences—mild and extreme. The Box Plot Chart renders them by default as crosses (mild) and circles (extreme). To let you configure them separately, the Chart has two configuration options—[`series.outliers`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.outliers) for mild outliers and [`series.extremes`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.extremes) for extreme outliers. You can use them to customize the outliers.
+
+## See Also
+
+Other articles on Kendo UI Charts and chart types:
+
+* [Overview of the Kendo UI Chart Html Helper for ASP.NET Core ]({% slug htmlhelpers_charts_aspnetcore %})
+* [Area Charts]({% slug areacharts_aspnetcore_htmlhelper %})
+* [Bubble Charts]({% slug bubblecharts_aspnetcore_htmlhelper %})
+* [Bar Charts]({% slug barcharts_aspnetcore_htmlhelper %})
+* [Pie Charts]({% slug piecharts_aspnetcore_htmlhelper %})
+* [Stock Charts]({% slug overview_stockcharthelper_aspnetcore %})
+* [TreeMap]({% slug overview_treemaphelper_aspnetcore %})
+* [Chart JavaScript API Reference](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart)

docs-aspnet-core/html-helpers/charts/chart-types/bubble-charts.md

@@ -0,0 +1,63 @@
+---
+title: Bubble Charts
+page_title: Bubble Charts | Kendo UI Charts HtmlHelpers for ASP.NET Core
+description: "Learn how to create a Kendo UI Bubble Chart for ASP.NET Core to visualize data points and how to set its properties."
+slug: bubblecharts_aspnetcore_htmlhelper
+---
+
+# Bubble Charts
+
+The [Kendo UI Bubble Chart HtmlHelper](https://demos.telerik.com/aspnet-core/bubble-charts/index) displays data as points with coordinates and sizes defined by the value of their items. It is similar to the [Kendo UI Scatter Charts HtmlHelper](https://demos.telerik.com/aspnet-core/scatter-charts/index), in which the data points are replaced with bubbles. This allows a Bubble Chart to display three-dimensional data—two values for the items' coordinates and one for their size. A Bubble Chart is useful for visualizing different scientific relationships, e.g. economic or social. The X-axis of the Bubble Charts is numerical and does not require items.
+
+## Basic Usage
+
+### Suitability
+
+Kendo UI Bubble Charts are well suited for displaying dozens to hundreds of values. They come in handy especially when you wish to visualize size values, differing by several orders of magnitude. As the size value is represented by a circle area, it is a best practice to plot positive values.
+
+### Negative Values
+
+By default, negative values are not displayed. Yet, if you wish to show these, their area is going to be calculated as if their value was positive. The point label displays their actual value and they are also going to have a different color. This behavior is controlled by using the `negativeValues.visible` and `negativeValues.color` options that are applicable to each series.
+
+## Getting Started
+
+### Create the Bubble Chart
+
+The example below visualizes several data points.
+
+###### Example
+
+    @(Html.Kendo().Chart()
+        .Name("chart")    
+        .Series(series =>
+        {
+            series.Bubble(new dynamic[] {
+            new {
+              x =  10,
+              y = 12000,
+              size = 0.1
+            }, new {
+              x = 24,
+              y =  62000,
+              size =  0.25
+            } 
+            }).Name("Sales");
+        })
+    )
+
+**Figure 1: A sample Bubble Chart**
+
+ ![Bubble Chart](/html-helpers/charts/chart-types/chart-bubble.png)
+
+## See Also
+
+ Other articles on Kendo UI Charts and chart types:
+
+* [Overview of the Kendo UI Chart Html Helper for ASP.NET Core ]({% slug htmlhelpers_charts_aspnetcore %})
+* [Area Charts]({% slug areacharts_aspnetcore_htmlhelper %})
+* [BoxPlot Charts]({% slug boxplotcharts_aspnetcore_htmlhelper %})
+* [Bar Charts]({% slug barcharts_aspnetcore_htmlhelper %})
+* [Pie Charts]({% slug piecharts_aspnetcore_htmlhelper %})
+* [Stock Charts]({% slug overview_stockcharthelper_aspnetcore %})
+* [TreeMap]({% slug overview_treemaphelper_aspnetcore %})
+* [Chart JavaScript API Reference](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart)