UpdateValuesAsync

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor

@@ -1,11 +1,13 @@
-<LineChart @ref="lineChart" Width="500" Height="200" />
+<div class="container-fluid overflow-x-auto">
+    <LineChart @ref="lineChart" Width="800" />
+</div>
 
 <div class="mt-5">
-    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
-    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
-    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDataAsync()"> Add Data </Button>
-    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ShowHorizontalLineChartAsync()"> Horizontal Line Chart </Button>
-    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ShowVerticalLineChartAsync()"> Vertical Line Chart </Button>
+    <Button Type="ButtonType.Button" Class="mb-2" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
+    <Button Type="ButtonType.Button" Class="mb-2" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDatasetAsync()" Disabled="@(datasetsCount >= 12)"> Add Dataset </Button>
+    <Button Type="ButtonType.Button" Class="mb-2" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDataAsync()"> Add Data </Button>
+    <Button Type="ButtonType.Button" Class="mb-2" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ShowHorizontalLineChartAsync()"> Horizontal Line Chart </Button>
+    <Button Type="ButtonType.Button" Class="mb-2" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ShowVerticalLineChartAsync()"> Vertical Line Chart </Button>
 </div>
 
 @code {
@@ -22,6 +24,7 @@
     {
         chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
         lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
+        lineChartOptions.Scales.Y!.Max = 250;
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -60,7 +63,7 @@
 
         chartData.Datasets = newDatasets;
 
-        await lineChart.UpdateAsync(chartData, lineChartOptions);
+        await lineChart.UpdateValuesAsync(chartData);
     }
 
     private async Task AddDatasetAsync()

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor

@@ -1,4 +1,6 @@
-<LineChart @ref="lineChart" />
+<div class="container-fluid overflow-x-auto">
+    <LineChart @ref="lineChart" Width="800" />
+</div>
 
 @code {
     private LineChart lineChart = default!;

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor

@@ -1,4 +1,6 @@
-<LineChart @ref="lineChart" Width="800" />
+<div class="container-fluid overflow-x-auto">
+    <LineChart @ref="lineChart" Width="800" />
+</div>
 
 @code {
     private LineChart lineChart = default!;

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_03_Dynamically_add_data.razor

@@ -1,4 +1,6 @@
-<LineChart @ref="lineChart" Width="800" />
+<div class="container-fluid overflow-x-auto">
+    <LineChart @ref="lineChart" Width="800" />
+</div>
 
 <div class="mt-5">
     <Button Color="ButtonColor.Primary" Type="ButtonType.Button" Size="ButtonSize.Small" @onclick="UpdateIndiaNextOverRunsAsync"> India Next Over </Button>

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_04_Datalabels.razor

@@ -1,4 +1,6 @@
-<LineChart @ref="lineChart" Width="800" />
+<div class="container-fluid overflow-x-auto">
+    <LineChart @ref="lineChart" Width="800" />
+</div>
 
 @code {
     private LineChart lineChart = default!;

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor

@@ -1,4 +1,6 @@
-<LineChart @ref="lineChart" Width="500" Height="200" />
+<div class="container-fluid overflow-x-auto">
+    <LineChart @ref="lineChart" Width="800" />
+</div>
 
 <div class="mt-5">
     <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ChangeTicksAlignmentToStart()"> Alignment: start </Button>

blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs

@@ -74,22 +74,43 @@ public async Task ResizeAsync(int width, int height, Unit widthUnit = Unit.Px, U
     }
 
     /// <summary>
-    /// Update chart.
+    /// Update chart by reapplying all chart data and options.
+    /// If animation is enabled, this will animate the datasets from scratch.
     /// </summary>
     /// <param name="chartData"></param>
     /// <param name="chartOptions"></param>
     public virtual async Task UpdateAsync(ChartData chartData, IChartOptions chartOptions)
     {
         if (chartData is not null && chartData.Datasets is not null && chartData.Datasets.Any())
         {
-            var _data = GetChartDataObject(chartData);
+            var data = GetChartDataObject(chartData);
+
+            if (chartType == ChartType.Bar)
+                await JSRuntime.InvokeVoidAsync("window.blazorChart.bar.update", Id, GetChartType(), data, (BarChartOptions)chartOptions);
+            else if (chartType == ChartType.Line)
+                await JSRuntime.InvokeVoidAsync("window.blazorChart.line.update", Id, GetChartType(), data, (LineChartOptions)chartOptions);
+            else
+                await JSRuntime.InvokeVoidAsync("window.blazorChart.update", Id, GetChartType(), data, chartOptions);
+        }
+    }
+
+    /// <summary>
+    /// Update only data labels and values. If animation is enabled, this will animate the datapoints.
+    /// Changes to the options will not be applied.
+    /// </summary>
+    /// <param name="chartData">The updated chart data. Only dataset labels and values will be applied.</param>
+    public virtual async Task UpdateValuesAsync(ChartData chartData)
+    {
+        if (chartData is not null && chartData.Datasets is not null && chartData.Datasets.Any())
+        {
+            var data = GetChartDataObject(chartData);
 
             if (chartType == ChartType.Bar)
-                await JSRuntime.InvokeVoidAsync("window.blazorChart.bar.update", Id, GetChartType(), _data, (BarChartOptions)chartOptions);
+                await JSRuntime.InvokeVoidAsync("window.blazorChart.bar.updateDataValues", Id, data);
             else if (chartType == ChartType.Line)
-                await JSRuntime.InvokeVoidAsync("window.blazorChart.line.update", Id, GetChartType(), _data, (LineChartOptions)chartOptions);
+                await JSRuntime.InvokeVoidAsync("window.blazorChart.line.updateDataValues", Id, data);
             else
-                await JSRuntime.InvokeVoidAsync("window.blazorChart.update", Id, GetChartType(), _data, chartOptions);
+                await JSRuntime.InvokeVoidAsync("window.blazorChart.updateDataValues", Id, data);
         }
     }
 

blazorbootstrap/wwwroot/blazor.bootstrap.js

@@ -845,6 +845,23 @@ window.blazorChart = {
             console.warn(`The chart is not initialized. Initialize it and then call update.`);
         }
     },
+    updateDataValues: (elementId, data) => {
+        let chart = window.blazorChart.line.get(elementId);
+        if (chart) {
+            chart.data.datasets.splice(data.datasets.length);
+
+            for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) {
+                chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data;
+                chart.data.labels = data.labels;
+            }
+
+            for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) {
+                chart.data.datasets.push(data.datasets[datasetIndex]);
+            }
+
+            chart.update();
+        }
+    }
 }
 
 window.blazorChart.bar = {
@@ -957,6 +974,23 @@ window.blazorChart.bar = {
             console.warn(`The chart is not initialized. Initialize it and then call update.`);
         }
     },
+    updateDataValues: (elementId, data) => {
+        let chart = window.blazorChart.line.get(elementId);
+        if (chart) {
+            chart.data.datasets.splice(data.datasets.length);
+
+            for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) {
+                chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data;
+                chart.data.labels = data.labels;
+            }
+
+            for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) {
+                chart.data.datasets.push(data.datasets[datasetIndex]);
+            }
+
+            chart.update();
+        }
+    }
 }
 
 window.blazorChart.doughnut = {
@@ -1075,6 +1109,23 @@ window.blazorChart.doughnut = {
             console.warn(`The chart is not initialized. Initialize it and then call update.`);
         }
     },
+    updateDataValues: (elementId, data) => {
+        let chart = window.blazorChart.line.get(elementId);
+        if (chart) {
+            chart.data.datasets.splice(data.datasets.length);
+
+            for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) {
+                chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data;
+                chart.data.labels = data.labels;
+            }
+
+            for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) {
+                chart.data.datasets.push(data.datasets[datasetIndex]);
+            }
+
+            chart.update();
+        }
+    }
 }
 
 window.blazorChart.line = {
@@ -1227,6 +1278,23 @@ window.blazorChart.line = {
             console.warn(`The chart is not initialized. Initialize it and then call update.`);
         }
     },
+    updateDataValues: (elementId, data) => {
+        let chart = window.blazorChart.line.get(elementId);
+        if (chart) {
+            chart.data.datasets.splice(data.datasets.length);
+
+            for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) {
+                chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data;
+                chart.data.labels = data.labels;
+            }
+
+            for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) {
+                chart.data.datasets.push(data.datasets[datasetIndex]);
+            }
+
+            chart.update();
+        }
+    }
 }
 
 window.blazorChart.pie = {
@@ -1345,6 +1413,23 @@ window.blazorChart.pie = {
             console.warn(`The chart is not initialized. Initialize it and then call update.`);
         }
     },
+    updateDataValues: (elementId, data) => {
+        let chart = window.blazorChart.line.get(elementId);
+        if (chart) {
+            chart.data.datasets.splice(data.datasets.length);
+
+            for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) {
+                chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data;
+                chart.data.labels = data.labels;
+            }
+
+            for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) {
+                chart.data.datasets.push(data.datasets[datasetIndex]);
+            }
+
+            chart.update();
+        }
+    }
 }
 
 window.blazorChart.polarArea = {
@@ -1464,6 +1549,23 @@ window.blazorChart.polarArea = {
             console.warn(`The chart is not initialized. Initialize it and then call update.`);
         }
     },
+    updateDataValues: (elementId, data) => {
+        let chart = window.blazorChart.line.get(elementId);
+        if (chart) {
+            chart.data.datasets.splice(data.datasets.length);
+
+            for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) {
+                chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data;
+                chart.data.labels = data.labels;
+            }
+
+            for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) {
+                chart.data.datasets.push(data.datasets[datasetIndex]);
+            }
+
+            chart.update();
+        }
+    }
 }
 
 window.blazorChart.radar = {
@@ -1582,6 +1684,23 @@ window.blazorChart.radar = {
             console.warn(`The chart is not initialized. Initialize it and then call update.`);
         }
     },
+    updateDataValues: (elementId, data) => {
+        let chart = window.blazorChart.line.get(elementId);
+        if (chart) {
+            chart.data.datasets.splice(data.datasets.length);
+
+            for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) {
+                chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data;
+                chart.data.labels = data.labels;
+            }
+
+            for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) {
+                chart.data.datasets.push(data.datasets[datasetIndex]);
+            }
+
+            chart.update();
+        }
+    }
 }
 
 window.blazorChart.scatter = {
@@ -1700,4 +1819,21 @@ window.blazorChart.scatter = {
             console.warn(`The chart is not initialized. Initialize it and then call update.`);
         }
     },
+    updateDataValues: (elementId, data) => {
+        let chart = window.blazorChart.line.get(elementId);
+        if (chart) {
+            chart.data.datasets.splice(data.datasets.length);
+
+            for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) {
+                chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data;
+                chart.data.labels = data.labels;
+            }
+
+            for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) {
+                chart.data.datasets.push(data.datasets[datasetIndex]);
+            }
+
+            chart.update();
+        }
+    }
 }