Skip to content

Commit 0759e01

Browse files
gvreddy04gvreddy04
committed
PolarArea and Radar chat demos update
1 parent 2867894 commit 0759e01

2 files changed

Lines changed: 64 additions & 39 deletions

File tree

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PolarAreaChart/PolarAreaChartDocumentation.razor‎

Lines changed: 32 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,41 @@
11
@attribute [Route(pageUrl)]
22
@layout DemosMainLayout
33

4-
<PageHeroSection PageUrl="@pageUrl"
5-
Title="@title"
6-
Heading="@heading"
7-
Description="@description"
8-
ImageUrl="@imageUrl" />
4+
<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />
5+
6+
<PageHero Title="@pageTitle">
7+
<SubTitleTemplate>
8+
@((MarkupString)pageDescription)
9+
</SubTitleTemplate>
10+
</PageHero>
11+
12+
<DocsLink Href="@RouteConstants.Docs_PolarAreaChart" />
913

1014
<Prerequisites PageUrl="@pageUrl" />
1115

12-
<Section Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
13-
<div class="mb-3">
14-
In the following example, a categorical 12-color palette is used.
15-
</div>
16-
<BlazorBootstrap.Callout Heading="TIP" Color="CalloutColor.Success">
17-
For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
18-
These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
19-
</BlazorBootstrap.Callout>
20-
<Demo Type="typeof(PolarAreaChart_Demo_01_Examples)" Tabs="true" />
16+
<Section Class="p-0" Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
17+
<Block>
18+
The <strong>Polar Area Chart</strong> component visualizes each data value as a segment with equal angles but varying radius, making it ideal for comparing values across categories in a circular layout.
19+
<br /><br />
20+
<strong>How to use:</strong>
21+
<ul>
22+
<li>Add the <code>PolarAreaChart</code> component to your page and set its dimensions (e.g., <code>Width="600"</code>).</li>
23+
<li>Prepare your chart data by specifying <code>Labels</code> for each category and one or more <code>Datasets</code> with values and background colors.</li>
24+
<li>Configure chart options such as <code>Responsive</code> and <code>Title</code> using the <code>PolarAreaChartOptions</code> object.</li>
25+
<li>Initialize the chart in <code>OnAfterRenderAsync</code> by calling <code>polarAreaChart.InitializeAsync(chartData, polarAreaChartOptions)</code>.</li>
26+
<li>Use the demo's interactive buttons to randomize data, add datasets, or add new data points dynamically and see the chart update in real time.</li>
27+
<li>Refer to the demo code below for practical examples of data preparation, dynamic updates, and chart customization.</li>
28+
</ul>
29+
This demo demonstrates how to set up a Polar Area Chart, bind your data, and interactively update the chart to fit your application's needs.
30+
</Block>
31+
<Demo Type="typeof(PolarAreaChart_Demo_01_Examples)" Tabs="true" />
32+
</Section>
2133

2234
@code {
23-
private const string pageUrl = "/charts/polar-area-chart";
24-
private const string title = "Blazor Polar Area Chart";
25-
private const string heading = "Blazor Polar Area Chart";
26-
private const string description = "A Blazor polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.";
27-
private const string imageUrl = "https://i.imgur.com/MSFDsSo.png";
35+
private const string pageUrl = RouteConstants.Demos_PolarAreaChart;
36+
private const string pageTitle = "PolarArea Chart";
37+
private const string pageDescription = "Explore interactive Blazor PolarArea Chart examples with source code. Learn how to visualize categorical data, customize chart appearance, and enhance your Blazor applications using the PolarAreaChart component. Try live demos and discover practical usage scenarios.";
38+
private const string metaTitle = "Blazor PolarArea Chart Examples & Interactive Demos";
39+
private const string metaDescription = "Explore interactive Blazor PolarArea Chart examples with source code. Learn how to visualize categorical data, customize chart appearance, and enhance your Blazor applications using the PolarArea Chart component. Try live demos and discover practical usage scenarios.";
40+
private const string imageUrl = "https://i.imgur.com/8b7jH0D.png"; // TODO: Update with the actual image URL for the Line Chart demo
2841
}

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/RadarChart/RadarChartDocumentation.razor‎

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,41 @@
11
@attribute [Route(pageUrl)]
22
@layout DemosMainLayout
33

4-
<PageHeroSection PageUrl="@pageUrl"
5-
Title="@title"
6-
Heading="@heading"
7-
Description="@description"
8-
ImageUrl="@imageUrl" />
4+
<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />
95

10-
<Prerequisites PageUrl="@pageUrl" />
6+
<PageHero Title="@pageTitle">
7+
<SubTitleTemplate>
8+
@((MarkupString)pageDescription)
9+
</SubTitleTemplate>
10+
</PageHero>
11+
12+
<DocsLink Href="@RouteConstants.Docs_RadarChart" />
1113

12-
<Section Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
13-
<div class="mb-3">
14-
In the following example, a categorical 12-color palette is used.
15-
</div>
16-
<BlazorBootstrap.Callout Heading="TIP" Color="CalloutColor.Success">
17-
For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
18-
These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
19-
</BlazorBootstrap.Callout>
14+
<Prerequisites PageUrl="@pageUrl" />
2015

21-
<Demo Type="typeof(RadarChart_Demo_01_Examples)" Tabs="true" />
16+
<Section Class="p-0" Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
17+
<Block>
18+
The <strong>Radar Chart</strong> component visualizes multivariate data with each variable represented on axes starting from the same point, making it ideal for comparing multiple groups across several categories.
19+
<br /><br />
20+
<strong>How to use:</strong>
21+
<ul>
22+
<li>Add the <code>RadarChart</code> component to your page and set its dimensions (e.g., <code>Width="600"</code>).</li>
23+
<li>Prepare your chart data by specifying <code>Labels</code> for each axis and one or more <code>Datasets</code> with values and styling options.</li>
24+
<li>Configure chart options such as <code>Responsive</code> using the <code>RadarChartOptions</code> object.</li>
25+
<li>Initialize the chart in <code>OnAfterRenderAsync</code> by calling <code>radarChart.InitializeAsync(chartData, radarChartOptions)</code>.</li>
26+
<li>Use the demo's interactive buttons to randomize data, add datasets, or add new data points dynamically and see the chart update in real time.</li>
27+
<li>Refer to the demo code below for practical examples of data preparation, dynamic updates, and chart customization.</li>
28+
</ul>
29+
This demo demonstrates how to set up a Radar Chart, bind your data, and interactively update the chart to fit your application's needs.
30+
</Block>
31+
<Demo Type="typeof(RadarChart_Demo_01_Examples)" Tabs="true" />
32+
</Section>
2233

2334
@code {
24-
private const string pageUrl = "/charts/radar-chart";
25-
private const string title = "Blazor Radar Chart";
26-
private const string heading = "Blazor Radar Chart";
27-
private const string description = "A Blazor Bootstrap radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.";
28-
private const string imageUrl = "https://i.imgur.com/MSFDsSo.png";
35+
private const string pageUrl = RouteConstants.Demos_RadarChart;
36+
private const string pageTitle = "PolarArea Chart";
37+
private const string pageDescription = "Explore interactive Blazor Radar Chart examples with source code. Learn how to visualize categorical data, customize chart appearance, and enhance your Blazor applications using the Radar Chart component. Try live demos and discover practical usage scenarios.";
38+
private const string metaTitle = "Blazor Radar Chart Examples & Interactive Demos";
39+
private const string metaDescription = "Explore interactive Blazor Radar Chart examples with source code. Learn how to visualize categorical data, customize chart appearance, and enhance your Blazor applications using the Radar Chart component. Try live demos and discover practical usage scenarios.";
40+
private const string imageUrl = "https://i.imgur.com/8b7jH0D.png"; // TODO: Update with the actual image URL for the Line Chart demo
2941
}

0 commit comments

Comments
 (0)