Data visualization is essential in modern application development, and TeeChart NET for MAUI has established itself as one of the most recognized libraries among developers. This powerful tool, offered by Steema Software, allows for seamless and effective integration of charts into .NET MAUI applications, making it easier to create visually appealing dashboards and reports.
Blazor Integration in MAUI
Recently, Microsoft has expanded MAUI’s capabilities by allowing the creation of Blazor applications within this environment. This means that developers can now enjoy the best of both worlds: the native development experience of MAUI and the ease of creating web interfaces with Blazor. In this context, TeeChart has evolved to also offer support in Blazor applications, opening up new possibilities for creating dynamic and responsive applications.
What is TeeChart NET for MAUI?
TeeChart NET for MAUI is a versatile charting library that allows for the creation of a wide range of charts, from simple to complex. With its easy integration into MAUI applications, developers can visualize real-time data, facilitating informed decision-making. The library includes different types of charts, such as line, bar, and pie charts, and is highly customizable to meet the specific needs of each project.
Example of Use in Blazor
For those interested in starting to work with TeeChart in Blazor applications, we’ve prepared a basic and complete example. In the following GitHub link, you can find a sample project demonstrating how to integrate TeeChart into a MAUI application with Blazor: TeeChart Example in Blazor.
Creating the Chart
Below is a code snippet that shows how to create a bar chart:
<code>public void CreateChart(int width, int height)
{
tChart = new TChart();
Steema.TeeChart.Styles.Bar mBar = new Steema.TeeChart.Styles.Bar();
tChart.Header.Text = "Gráfico de Temperaturas";
tChart.Width = width;
tChart.Height = height;
tChart.Legend.Visible = false;
if (tChart.Series.Count == 0)
tChart.Series.Add(mBar);
mBar.Clear();
mBar.Marks.Transparent = true;
mBar.BarWidthPercent = 20;
double[] xValues = new double[0];
double[] yValues = new double[0];
PrepareData(ref xValues, ref yValues);
mBar.Add(xValues, yValues);
tChart.Axes.Left.Title.Text = "ºC";
tChart.Axes.Left.Increment = 10;
}
</code>
Generating an SVG
In addition, you can generate an SVG to display the chart easily:
<code>public void UpdateSVG()
{
// Crear el gráfico SVG
MemoryStream ms = new MemoryStream();
tChart.Export.Image.SVG.Width = tChart.Width;
tChart.Export.Image.SVG.Height = tChart.Height;
tChart.Export.Image.SVG.Save(ms);
ms.Position = 0;
StreamReader reader = new StreamReader(ms);
string result = "<svg width=\"" + tChart.Width + "\"px height=\"" + tChart.Height + "px\">" + reader.ReadToEnd() + "</svg>";
result = result.Replace("\r\n", "");
chartImage = "<div><p>" + result + "</p></div>";
StateHasChanged();
}
</code>
Integration with JavaScript
Finally, if you want to make the chart interactive, you can convert it to JavaScript code:
<code>public async void UpdateJS(int width, int height)
{
// Crear gráfico en JavaScript
string chartName = "aChart";
tChart.Export.Image.JScript.ChartName = chartName;
MemoryStream ms = new MemoryStream();
tChart.Export.Image.JScript.Width = width;
tChart.Export.Image.JScript.Height = height;
tChart.Export.Image.JScript.CanvasName = canvasName;
tChart.Export.Image.JScript.DoFullPage = false; // inline, sin etiquetas <html>
tChart.Export.Image.JScript.CustomCode = new string[] { "loadExtras(" + chartName + ")", "resize(" + chartName + ");" };
tChart.Export.Image.JScript.Save(ms);
ms.Position = 0;
StreamReader reader = new StreamReader(ms);
string result = "var " + chartName + "; " + reader.ReadToEnd();
chartJS = result;
string aKey = aUtils.KeyCode; // Pasar la clave única actual para CSP.
await JS.InvokeVoidAsync("loadChart", chartJS, aKey);
StateHasChanged();
}
</code>
Conclusion
The combination of TeeChart NET for MAUI and the new ability to create Blazor applications opens a range of possibilities for developers. With the ease of use and power offered by TeeChart, it is now easier than ever to create data-rich and visually striking applications. We invite you to explore the example on GitHub and start implementing charts in your Blazor applications today. Feel free to share your experiences and questions with the community!
Top comments (0)