Add dynamic series sample

Author: joadan

docs/BlazorApexCharts.Docs/Components/Features/DynamicSeries/AddSeries.razor

@@ -0,0 +1,73 @@
+<DemoContainer>
+
+    <Button class="m-3" OnClick="AddNewSeries" BackgroundColor="TablerColor.Primary">Add Series</Button>
+
+    <Button class="m-3" OnClick="RemoveSeries" Disabled="@(series.Count <= 1)" BackgroundColor="TablerColor.Danger">Remove Series</Button>
+
+    <ApexChart @ref="chart" TItem="Order"
+               Title="Order Net Value" XAxisType="XAxisType.Datetime">
+
+        @foreach (var serie in series)
+        {
+            <ApexPointSeries TItem="Order"
+                             Items="serie.Orders"
+                             Name="@serie.Name"
+                             XValue="@(e => e.OrderDate)"
+                             YAggregate="@(e => e.Sum(e => e.GrossValue))"
+                             OrderByDescending="e=>e.Y"
+                             SeriesType="SeriesType.Bar" />
+        }
+
+
+
+    </ApexChart>
+</DemoContainer>
+
+@code {
+    private List<MySeries> series = new();
+    private ApexChart<Order> chart;
+    protected override void OnInitialized()
+    {
+
+        series.Add(new MySeries
+            {
+                Name = "Customer",
+                Orders = SampleData.GetRandomOrders()
+            });
+
+        base.OnInitialized();
+    }
+
+    private async Task RemoveSeries()
+    {
+        series.RemoveAt(series.Count-1);
+        await chart?.UpdateSeriesAsync(true);
+    }
+
+
+    private async Task AddNewSeries()
+    {
+        series.Add(new MySeries
+            {
+                Name = "Customer_" + (series.Count() + 1),
+                Orders = SampleData.GetRandomOrders()
+            });
+
+           await chart?.UpdateSeriesAsync(true);
+
+    }
+
+
+
+
+    class MySeries
+    {
+
+        public string Name { get; set; }
+        public List<Order>
+    Orders
+        { get; set; }
+    }
+}
+
+

docs/BlazorApexCharts.Docs/Components/Features/DynamicSeries/DynamicSeries.razor

@@ -0,0 +1,13 @@
+@page "/features/dynamic-series"
+
+<DocExamples Title="Dynamic Series">
+
+
+    <CodeSnippet Title="Add Series" ClassName=@typeof(AddSeries).ToString()>
+        <Snippet>
+            <AddSeries />
+        </Snippet>
+    </CodeSnippet>
+
+
+</DocExamples>

docs/BlazorApexCharts.Docs/Data/SampleData.cs

@@ -58,7 +58,7 @@ public static List<Order> GetRandomOrders()
 
             for (int i = 0; i < rnd.Next(5, 20); i++)
             {
-                orders.Add(new Order { CustomerName = "Odio Corporation", Country = "Sweden", OrderDate = DateTimeOffset.Now.AddDays(-12), GrossValue = rnd.Next(2000, 50000), DiscountPercentage = rnd.Next(10, 50), OrderType = (OrderType)rnd.Next(0, 4) });
+                orders.Add(new Order { CustomerName = "Odio Corporation", Country = "Sweden", OrderDate = DateTimeOffset.Now.AddDays(-1 * i), GrossValue = rnd.Next(2000, 50000), DiscountPercentage = rnd.Next(10, 50), OrderType = (OrderType)rnd.Next(0, 4) });
             }
 
             return orders;

docs/BlazorApexCharts.Docs/Shared/MainNavigation.razor

@@ -150,6 +150,8 @@
                 <NavbarMenuItem Text="Annotations" Href="features/annotations" />
                 <NavbarMenuItem Text="Axis" Href="features/axis" />
                 <NavbarMenuItem Text="Data" Href="features/chart-data" />
+                <NavbarMenuItem Text="Dynamic Series" Href="features/dynamic-series" />
+              
                 <NavbarMenuItem Text="Export" Href="features/export" />
                 <NavbarMenuItem Text="Formatters" Href="features/formatters" />
                 <NavbarMenuItem Text="Group Points" Href="features/group-points" />