From 2f4b3b9cd7375bc7f8fb70ae955ba0962badd5f1 Mon Sep 17 00:00:00 2001 From: Apostolos Giatsidis Date: Mon, 17 Jan 2022 20:03:15 +0200 Subject: [PATCH 1/5] docs(chart): remove images --- components/chart/data-bind.md | 25 ------------------- components/chart/date-axis.md | 4 --- .../chart/labels-template-and-format.md | 11 +------- components/chart/overview.md | 5 ---- components/chart/rendering-modes.md | 8 ++---- components/chart/stacked-series.md | 12 --------- 6 files changed, 3 insertions(+), 62 deletions(-) diff --git a/components/chart/data-bind.md b/components/chart/data-bind.md index 43b504ad40..37ab16fad0 100644 --- a/components/chart/data-bind.md +++ b/components/chart/data-bind.md @@ -79,10 +79,6 @@ Independent data } ```` ->caption The result from the code snippet above - -![](images/independent-series-binding.png) - ## Attach Series Items to Their Categories You can provide a `List` to the `Data` property of a series that contains both its data points, and its x-axis categories. Then, set the series: @@ -128,10 +124,6 @@ One model for all the chart data } ```` ->caption The result from the code snippet above - -![](images/bind-chart-to-single-collection.png) - >caption Unique categories are added independently. ````CSHTML @@ -167,10 +159,6 @@ Separate fields for series categories } ```` ->caption The result from the code snippet above - -![](images/unique-categories.png) - >tip You can define [multiple x-axes](multiple-axes) to avoid this behavior and have each series populate its own x-axis. >caption If category values match, they will be combined @@ -211,10 +199,6 @@ Combining matching standalone categories } ```` ->caption The result from the code snippet above - -![](images/matching-categories.png) - ## Mixed Data Source You can choose where to take the categories and series data from, and combine both approaches to a solution that fits the existing data models and data retrieval logic that you have. @@ -263,10 +247,6 @@ Mixed data binding } ```` ->caption The result from the code snippet above - -![](images/mixed-data-sources-1.png) - >caption Populate categories from model, and some series from standalone data. Standalone categories are ignored. ````CSHTML @@ -309,11 +289,6 @@ Standalone categories are ignored when there is category data binding to a model } ```` ->caption The result from the code snippet above - -![](images/standalone-categories-ignored-if-bound-from-series.png) - - ## Numerical Charts 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. diff --git a/components/chart/date-axis.md b/components/chart/date-axis.md index 8983fce67c..ad8122e73f 100644 --- a/components/chart/date-axis.md +++ b/components/chart/date-axis.md @@ -71,10 +71,6 @@ Grouping by month, aggregates } ```` ->caption The result from the code snippet above - -![](images/date-axis.png) - ### Advanced Features #### Automatic Fitting diff --git a/components/chart/labels-template-and-format.md b/components/chart/labels-template-and-format.md index b7f9bac137..8b87d0c178 100644 --- a/components/chart/labels-template-and-format.md +++ b/components/chart/labels-template-and-format.md @@ -76,10 +76,6 @@ Standard number format strings } ```` ->caption The result from the code snippet above - -![](images/label-format-strings-basics.png) - ## Templates To set a template for the corresponding label, use the `Template` property in the corresponding Label inner tag of the element you want to customize, for example, under `ChartSeriesLabels` or under `ChartValueAxisLabels`. @@ -262,11 +258,6 @@ Conditional label display } ```` ->caption The result from the code above: - -![](images/hide-label-conditionally.png) - - ## See Also - * [Live Demos: Chart](https://demos.telerik.com/blazor-ui/chart/index) + * [Live Demos: Chart](https://demos.telerik.com/blazor-ui/chart/index) \ No newline at end of file diff --git a/components/chart/overview.md b/components/chart/overview.md index c9f36f13bc..a20c772a02 100644 --- a/components/chart/overview.md +++ b/components/chart/overview.md @@ -71,11 +71,6 @@ Basic chart and common settings/elements } ```` ->caption The result from the code snippet above - -![](images/overview-chart.png) - - ## Chart Elements @[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings) diff --git a/components/chart/rendering-modes.md b/components/chart/rendering-modes.md index e6dee9c0c4..01573c55aa 100644 --- a/components/chart/rendering-modes.md +++ b/components/chart/rendering-modes.md @@ -27,9 +27,7 @@ Using vector graphics ensures that: Since `SVG` is the default rendering mode of the Chart, you don't need to explicitly define it. ->caption Bar Chart rendered as SVG. The result from the snippet below. - -![](images/svg-chart-example.png) +>caption Bar Chart rendered as SVG. ````CSHTML @* SVG Bar Chart *@ @@ -73,9 +71,7 @@ On the downside, rendering to a fixed resolution bitmap results in: * Blurry images on zoom. * Poorer print quality. ->caption Bar Chart rendered as Canvas. The result from the snippet below. - -![](images/canvas-chart-example.png) +>caption Bar Chart rendered as Canvas. ````CSHTML @* Canvas Bar Chart *@ diff --git a/components/chart/stacked-series.md b/components/chart/stacked-series.md index 73cec8431d..b56f69dfe0 100644 --- a/components/chart/stacked-series.md +++ b/components/chart/stacked-series.md @@ -62,10 +62,6 @@ Basic stacking of series } ```` ->caption The result from the code snippet above - -![](images/stacked-series.png) - ## Named Stack You can choose which series to cluster together through the `Group` property of the `ChartSeriesStack` tag. If you set it to one series, it automatically enables stacking, so if you want to put one or more series in a separate group, you must provide a group name for each series. @@ -106,10 +102,6 @@ Stack clustering in groups } ```` ->caption The result from the code snippet above - -![](images/named-stacks.png) - ## Stack 100% You can also have each stack fill up the entire chart - its total value will be 100%. This is often useful when contribution of values within stacks is more meaningful than the amounts themselves. @@ -154,10 +146,6 @@ Stack to 100% } ```` ->caption The result from the code snippet above - -![](images/stack-100-groups.png) - ## See Also * [Live Demos: Chart](https://demos.telerik.com/blazor-ui/chart/index) From 4a2fe75f132f39292f00e2923d67d9a95944db93 Mon Sep 17 00:00:00 2001 From: Apostolos Giatsidis Date: Tue, 18 Jan 2022 14:08:00 +0200 Subject: [PATCH 2/5] docs(chart): remove images --- _contentTemplates/chart/link-to-basics.md | 7 ------- components/chart/multiple-axes.md | 8 -------- components/chart/tooltip/overview.md | 16 ---------------- components/chart/tooltip/shared.md | 6 ------ components/chart/types/area.md | 6 ------ components/chart/types/bar.md | 4 ---- components/chart/types/bubble.md | 8 -------- components/chart/types/candlestick.md | 4 ---- components/chart/types/column.md | 4 ---- components/chart/types/donut.md | 4 ---- components/chart/types/heatmap.md | 4 ---- components/chart/types/line.md | 4 ---- components/chart/types/pie.md | 6 ------ components/chart/types/radar-column.md | 5 ----- components/chart/types/scatter.md | 4 ---- components/chart/types/scatterline.md | 4 ---- 16 files changed, 94 deletions(-) diff --git a/_contentTemplates/chart/link-to-basics.md b/_contentTemplates/chart/link-to-basics.md index 13e5fdf31d..05adea04be 100644 --- a/_contentTemplates/chart/link-to-basics.md +++ b/_contentTemplates/chart/link-to-basics.md @@ -53,10 +53,6 @@ Colors per series item } ```` ->caption The result from the code snippet above - -![](images/color-field-bar-column-chart.png) - #end #gap-and-spacing @@ -120,9 +116,6 @@ You can render the lines between the points with different styles. The supported * `Smooth`—This style causes the 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. Not supported with [stacked]({%slug components/chart/stack%}) series with missing values. ->caption Comparison between the line styles - -![](images/line-chart-step-and-smooth.png) #end #opacity-area-bubble diff --git a/components/chart/multiple-axes.md b/components/chart/multiple-axes.md index f812b94cd5..6a10de25f1 100644 --- a/components/chart/multiple-axes.md +++ b/components/chart/multiple-axes.md @@ -501,10 +501,6 @@ The general approach is to set an axis crossing point that has a very large valu } ```` ->caption The result from the code snippet above - -![](images/x-axis-labels-at-bottom.png) - ### Move Value Axis to the Right @@ -574,10 +570,6 @@ This approach can work for both numerical and categorical axes. The example belo } ```` ->caption The result from the code snippet above - -![Move the second value axis to the right](images/chart-crossing-value-axis-to-the-right.png) - ## See Also diff --git a/components/chart/tooltip/overview.md b/components/chart/tooltip/overview.md index 418985a912..8fbae7c9b5 100644 --- a/components/chart/tooltip/overview.md +++ b/components/chart/tooltip/overview.md @@ -59,10 +59,6 @@ To enable tooltips for the data points of each individual series: } ```` ->caption The result from the code snippet above - -![single series tooltip](images/tooltip-basic-config.png) - ## Common Tooltip @@ -109,10 +105,6 @@ To enable the same tooltip for all series: } ```` ->caption The result from the code snippet above - -![common tooltip settings for all series](images/tooltip-common-example.gif) - ## Customization @@ -186,10 +178,6 @@ You can customize the appearance of the individual series tooltip by using: ```` ->caption The result from the code snippet above - -![tooltip parameter customization example](images/tooltip-customized-example.png) - #### Common Tooltip Settings @@ -271,10 +259,6 @@ The available series data point information in the `context` is: } ```` ->caption The result from the code snippet above - -![tooltip template example](images/tooltip-template-example.png) - ## See Also diff --git a/components/chart/tooltip/shared.md b/components/chart/tooltip/shared.md index da3e7dfa6d..aea2c94bcb 100644 --- a/components/chart/tooltip/shared.md +++ b/components/chart/tooltip/shared.md @@ -59,9 +59,6 @@ To enable the shared tooltip: public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; } ```` ->caption The result from the code snippet above - -![shared tooltip example](images/shared-tooltip-basic.png) ## Customization @@ -145,9 +142,6 @@ Each `Point` contains the following data: public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; } ```` ->caption The result from the code snippet above - -![shared tooltip template example](images/shared-tooltip-template.png) ## See also diff --git a/components/chart/types/area.md b/components/chart/types/area.md index afaeb74c83..c4121ce181 100644 --- a/components/chart/types/area.md +++ b/components/chart/types/area.md @@ -15,12 +15,6 @@ The Blazo An Area chart emphasizes the volume of money, data or any other unit that the given series has encompassed. When backgrounds are semi-transparent, it lets the user clearly see where different sets of data overlap. ->caption Area chart. Results from the first code snippet below - -![](images/basic-area-chart.png) - -@[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) - #### To create an area chart: 1. add a `ChartSeries` to the `ChartSeriesItems` collection diff --git a/components/chart/types/bar.md b/components/chart/types/bar.md index 9b0469ac29..4af3f8d49d 100644 --- a/components/chart/types/bar.md +++ b/components/chart/types/bar.md @@ -12,10 +12,6 @@ position: 0 The Blazor Bar chart displays data as horizontal bars whose lengths vary according to their value. You can use a Bar chart to show a comparison between several sets of data (for example, summaries of sales data for different time periods). Each series is automatically colored differently for easier reading. ->caption Bar chart. Results from the first code snippet below - -![](images/basic-bar-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) #### To create a bar chart: diff --git a/components/chart/types/bubble.md b/components/chart/types/bubble.md index ba650de180..e73c4e141f 100644 --- a/components/chart/types/bubble.md +++ b/components/chart/types/bubble.md @@ -14,10 +14,6 @@ The Bla A Bubble chart is useful for visualizing different scientific relationships (e.g, economical, social, etc.). This chart type's x-axis is also numerical and does not require items. ->caption Bubble chart. Results from the first code snippet below - -![](images/basic-bubble-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) #### To create a bubble chart: @@ -151,10 +147,6 @@ The size field should, generally, have positive values as it correlates to the p } ```` ->caption The result from the code snippet above - -![](images/bubble-chart-negative-values.png) - @[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings) diff --git a/components/chart/types/candlestick.md b/components/chart/types/candlestick.md index f46c6bac04..297cbec802 100644 --- a/components/chart/types/candlestick.md +++ b/components/chart/types/candlestick.md @@ -12,10 +12,6 @@ position: 0 The Candlestick chart shows data for the movement of the price of a financial unit. It consists of a bar (the candle), representing the open and close values, and vertical lines, the candlesticks, which illustrate the highest and lowest values. ->caption Candlestick chart. Results from the first code snippet below - -![](images/basic-candlestick-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) #### To create a candlestick chart: diff --git a/components/chart/types/column.md b/components/chart/types/column.md index ae740df8f5..69fd999620 100644 --- a/components/chart/types/column.md +++ b/components/chart/types/column.md @@ -12,10 +12,6 @@ position: 0 The Blazor Column chart displays data as vertical bars whose heights vary according to their value. You can use a Column chart to show a comparison between several sets of data (for example, summaries of sales data for different time periods). Each series is automatically colored differently for easier reading. ->caption Column chart. Results from the first code snippet below - -![](images/basic-column-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) @[template](/_contentTemplates/date-inputs/format-placeholders.md#format-placeholder) diff --git a/components/chart/types/donut.md b/components/chart/types/donut.md index f0939ecf29..b14959ebb6 100644 --- a/components/chart/types/donut.md +++ b/components/chart/types/donut.md @@ -12,10 +12,6 @@ position: 0 The Blazor Donut chart displays the data as sectors from a two-dimensional circle and is therefore useful for displaying data as parts of a whole. Unlike a pie chart, it can have multiple series in the same chart. There is a hole in the middle of the circle, hence the name of the chart. ->caption Donut chart. Results from the first code snippet below - -![](images/basic-donut-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) #### To create a donut chart: diff --git a/components/chart/types/heatmap.md b/components/chart/types/heatmap.md index 7c4eaec408..45b4603d87 100644 --- a/components/chart/types/heatmap.md +++ b/components/chart/types/heatmap.md @@ -23,10 +23,6 @@ The Blazor H * [ColorField](#colorfield) * [Customize Chart Elements - Nested Tags Settings](#customize-chart-elements--nested-tags-settings) ->caption Heatmap chart. Results from the first code snippet below - -![](images/basic-heatmap-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) #### To create a Heatmap chart: diff --git a/components/chart/types/line.md b/components/chart/types/line.md index 9ec16b0d84..3a43028e21 100644 --- a/components/chart/types/line.md +++ b/components/chart/types/line.md @@ -12,10 +12,6 @@ position: 0 The Blazor Line chart displays data as continuous lines that pass through points defined by the values of their items. It is useful for rendering a trend over time and comparing several sets of similar data. ->caption Line chart. Results from the first code snippet below - -![](images/basic-line-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) #### To create a line chart: diff --git a/components/chart/types/pie.md b/components/chart/types/pie.md index f5f78582a2..3b9876d3ad 100644 --- a/components/chart/types/pie.md +++ b/components/chart/types/pie.md @@ -14,8 +14,6 @@ The Blazor >caption Pie chart. Results from the first code snippet below -![](images/basic-pie-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) #### To create a pie chart: @@ -131,10 +129,6 @@ Set color to the pie chart items } ```` ->caption The result from the code snippet above - -![](images/custom-color-in-segments.png) - ### Exploded Segment You can have some of the segments of the pie separated from the rest of the circle with a small margin. This helps bring attention to them as outliers or as important bits that the viewer should focus on. diff --git a/components/chart/types/radar-column.md b/components/chart/types/radar-column.md index dacf881b06..272df88da5 100644 --- a/components/chart/types/radar-column.md +++ b/components/chart/types/radar-column.md @@ -14,11 +14,6 @@ The Bl Scatter charts are useful for showing the relation between different sets of data, for example scientific (experimental) results. ->caption Scatter chart. Results from the first code snippet below - -![](images/basic-scatter-chart.png) - @[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) #### To create a scatter chart: diff --git a/components/chart/types/scatterline.md b/components/chart/types/scatterline.md index 71cbb8048d..0dcc8bd16a 100644 --- a/components/chart/types/scatterline.md +++ b/components/chart/types/scatterline.md @@ -14,10 +14,6 @@ The Blazo An Area chart emphasizes the volume of money, data or any other unit that the given series has encompassed. When backgrounds are semi-transparent, it lets the user clearly see where different sets of data overlap. +@[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first) + #### To create an area chart: 1. add a `ChartSeries` to the `ChartSeriesItems` collection