You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: components/chart/data-bind.md
+162Lines changed: 162 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,6 +19,29 @@ There are two key ways to bind data to the chart series and axes:
19
19
20
20
You can, of course, [mix these approaches](#mixed-data-source).
21
21
22
+
## Series Types
23
+
24
+
There are three main types of chart in terms of the data they require for their x-axis:
25
+
26
+
***Categorical** - series like Area, Line, Column require a set of categories to match the data points values against. Those categories can be shared among different series, or unique. The categories are usually strings, but can also be [dates]({%slug components/chart/date-axis%}). While there are X and Y axes, the x-axis is not a progression of numerical values - spacing between all x-axis items is equal and they show the text of the category.
27
+
***Numerical** - series like Bubble, Scatter and Scatter Line represent two numerical values for the X and Y axes. They do not use categories on the x-axis and thus each data point is independent. This makes it easier to bind each series to a separate collection of data that can have different number of items in it, because plotting the data points is not dependent on string categories, but on numeric values that will be plotted and spaced according to their values.
28
+
***Axis-free** - series like Pie and Donut do not have a x-axis at all. They use categories to build a list of items for each series and show those categories in the legend, as opposed to the series name that is usually shown by the other chart types.
29
+
30
+
With this in mind, the information below is applicable for all chart types, but the finer points are mostly relevant to categorical charts.
31
+
32
+
## Mixing Series
33
+
34
+
You can use only series with the same general layout in a single chart. You cannot mix numerical with categorical x-axes in the same chart. For example:
35
+
36
+
* Line, Area and Column series can be used together.
37
+
* Line, Area and Bar series can be used together. To rotate the layout of the chart according to the way Bar charts render, the bar series must be declared first. Otherwise, a column layout will be used.
38
+
* Bar and Column charts have a different layout and the rendering will depend on the first declared series.
39
+
* Scatter and ScatterLine series can be used together.
40
+
* Bubble charts cannot be used with other chart types because they have a very distinct layout due to the Size dimension.
41
+
* Pie and Donut charts will render only one series per chart and so only one can be used at a time.
42
+
43
+
44
+
22
45
## Independent Series Binding
23
46
24
47
In the simplest case, you provide two collections to the chart:
@@ -287,6 +310,145 @@ Standalone categories are ignored when there is category data binding to a model
Numerical charts do not use categories and you do not need to consider how the x-axis is shared between the series and whether several data points will be in the same zone. You can provide a model for each series that contains the necessary information (x-value, y-value, and any other value that may be needed, such as size for bubble charts) and they will be plotted independently.
317
+
318
+
If one series has more data points than another, you will not get empty items on the x-axis, all data points are plotted according to general mathematical rules on the axes.
319
+
320
+
This means that it is often suitable to provide each series with its own collection of data, and these collections can often use the same model. You can still data bind the entire chart to a single collection, or use any of the approaches above.
321
+
322
+
>caption Series with a different number of items can be easily used in numerical charts
323
+
324
+
````CSHTML
325
+
326
+
@* Standalone collections of the same model type are used for the different series without consideration for matching categories *@
327
+
328
+
<TelerikChart>
329
+
<ChartTitle Text="Unrecoverable Errors Per Minute vs. Signal Level"></ChartTitle>
0 commit comments