Auto-Generate Visuals with Syncfusion® .NET MAUI Toolkit 

Creating visually gorgeous and practical chart UIs might be time-consuming. This weblog introduces an modern method for auto-generating charts utilizing Syncfusion^® .NET MAUI Toolkit. With only a JSON enter, you may dynamically create, bind, and show charts and even export them to codecs like PDF or PowerPoint.

Let’s discover how this software saves time, enhances productiveness, and simplifies chart-building.

Why auto-generated charts?

Creating knowledgeable chart UI usually entails important design and coding effort. Nevertheless, the app we’ll develop provides:

• Ease of use: Builders and customers can deal with their knowledge as a substitute of spending hours on UI design.
• Time-saving: Charts are generated dynamically from JSON enter, minimizing guide effort.
• Flexibility: The app helps a number of chart sorts and effortlessly adapts to totally different knowledge buildings.

With these options, this app is a game-changer for anybody seeking to rapidly visualize knowledge with out compromising high quality.

Overview of the applying

The chart generator app consists of:

• A TextBox for user-provided JSON enter.
• A Button to set off the chart technology course of.
• Syncfusion^® Charts (SfCartesianChart and SfCircularChart) for knowledge visualization.

The way it works?

• The consumer must enter the JSON into the TextBox.
• The app converts the JSON into a category construction.
• The category is then dynamically sure to the chart.
• The suitable chart kind (Cartesian or Round) is displayed based mostly on the information kind.

Establishing the mission

Including the .NET MAUI Toolkit to the mission

To simplify the event course of, we’ll use the Syncfusion.Maui.Toolkit bundle. This toolkit offers a variety of utilities, controls, and helpers to reinforce the capabilities of .NET MAUI apps. It’s designed to avoid wasting effort and time by providing ready-to-use options, together with chart elements.

Set up the bundle utilizing the next command:

dotnet add bundle Syncfusion.Maui.Toolkit

Creating the consumer interface

Outline a easy and intuitive UI in your XAML web page utilizing the next code instance.

<VerticalStackLayout Spacing="5" Grid.Column="0"
      Margin="0,20,0,0" 
      VerticalOptions="FillAndExpand"
      HorizontalOptions="FillAndExpand">
    <Label Textual content="Chart Generator" 
                       FontSize="32" Grid.Row="0"
                       HorizontalOptions="Begin" 
                       FontFamily="Lucida Sans Unicode"/>
    
    <Editor AutoSize="TextChanges" 
                        x:Identify="entry"  
                        MinimumHeightRequest="100"
                        HeightRequest="400"
                        MaximumHeightRequest="600"
                        Grid.Row="1"  
                        Background="White"
                        PlaceholderColor="#9582C2"
                        VerticalOptions="Fill" 
                        HorizontalOptions="FillAndExpand" 
                        VerticalTextAlignment="Middle"
                        Textual content="{Binding EntryText}"
                        Placeholder="Your JSON enter goes right here..."/>

    <Button x:Identify="createButton"  
                        IsEnabled="True" 
                        Grid.Row="2"  
                        CornerRadius="15" 
                        Textual content="Create"  
                        VerticalOptions="Middle" 
                        HorizontalOptions="Finish" 
                        Background="#6750A4"
                        Command="{Binding CreateButtonClicked}"/>
</VerticalStackLayout>

Now, outline a view mannequin for the above UI.

public class ChartViewModel : INotifyPropertyChanged
{
    public occasion PropertyChangedEventHandler? PropertyChanged;

    personal string? entryText;
    personal ContentView? chart;

    public string? EntryText
    {
        get => entryText;
        set
        {
            entryText = worth;
            OnPropertyChanged(nameof(EntryText));
        }
    }

    public ContentView? Chart
    {
        get => chart;
        set
        {
            chart = worth;
            OnPropertyChanged(nameof(Chart));
        }
    }

    public ChartConfig ChartData
    {
        get => chartData;
        set
        {
            chartData = worth;
            OnPropertyChanged(nameof(ChartData));
        }
    }

    public ICommand ButtonClicked { get; }
    public ICommand CreateButtonClicked { get; }

    public ChartViewModel()
    {
        ButtonClicked = new Command<string>(OnButtonClicked);
        CreateButtonClicked = new Command(OnCreateButtonClicked);
    }

    personal void OnButtonClicked(string buttonText)
    {
        EntryText = ReturnOfflineEditorText(buttonText);
    }

    personal async void OnCreateButtonClicked()
    {
        //Descript JSON goes right here. 
    }

    inside string ReturnOfflineEditorText(string entryText)
    {
        string response = string.Empty;

        if (entryText.Accommodates("line"))
        {
            return response // Modify response with dummy predefined JSON
        }

        return response;
    }
}

Discuss with the next picture.

Now, outline a category to deserialize the information from JSON.

public class ChartConfig : INotifyPropertyChanged
{
    personal ChartEnums.ChartTypeEnum chartType;
    personal string title;
    personal Axes xAxis;
    personal Axes yAxis;
    personal ObservableCollection<SeriesConfig> collection;

    public ChartEnums.ChartTypeEnum ChartType
    {
        get => chartType;
        set
        {
            if (chartType != worth)
            {
                chartType = worth;
                OnPropertyChanged();
            }
        }
    }

    public string Title
    {
        get => title;
        set
        {
            if (title != worth)
            {
                title = worth;
                OnPropertyChanged();
            }
        }
    }

    public Axes XAxis
    {
        get => xAxis;
        set
        {
            if (xAxis != worth)
            {
                xAxis = worth;
                OnPropertyChanged();
            }
        }
    }

    public Axes YAxis
    {
        get => yAxis;
        set
        {
            if (yAxis != worth)
            {
                yAxis = worth;
                OnPropertyChanged();
            }
        }
    }

    public ObservableCollection<SeriesConfig> Collection
    {
        get => collection;
        set
        {
            if (collection != worth)
            {
                collection = worth;
                OnPropertyChanged();
            }
        }
    }

    public occasion PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class Axes : INotifyPropertyChanged
{
    personal string? title;
    personal double? min;
    personal double? max;

    public string? Title
    {
        get => title;
        set
        {
            if (title != worth)
            {
                title = worth;
                OnPropertyChanged();
            }
        }
    }

    public ChartEnums.AxisType Kind
    {
        get;
        set;
    }

    public double? Min
    {
        get => min;
        set
        {
            if (min != worth)
            {
                min = worth;
                OnPropertyChanged();
            }
        }
    }

    public double? Max
    {
        get => max;
        set
        {
            if (max != worth)
            {
                max = worth;
                OnPropertyChanged();
            }
        }
    }

    public occasion PropertyChangedEventHandler? PropertyChanged;

    protected digital void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Let’s outline a category for collection deserialization. Discuss with the next code instance.

public class SeriesConfig
{
    public ChartEnums.SeriesType Kind 
    {
        get; set;
    }

    public string XPath
    {
        get; set;
    }

    public ObservableCollection<DataModel> DataSource 
    {
        get; set;
    }

    public bool Tooltip
    {
        get; set;
    }
}

public class DataModel
{
    public string xvalue
    {
        get; set;
    }

    public double yvalue
    {
        get; set;
    }

    public DateTime? date
    {
        get; set;
    }

    public double? xval
    {
        get; set;
    }
}

Discuss with the next code instance to predefine collection templates.

<DataTemplate x:Key="lineSeriesTemplate">
    <chart:LineSeries ItemsSource="{Binding DataSource}"
                      XBindingPath="xvalue"
                      YBindingPath="yvalue"
                      EnableTooltip="{Binding Tooltip}"
                      Label="{Binding Kind}"
                      StrokeWidth="2.5"
                      ShowMarkers="True"
                      Fill="#1E90FF"
                      EnableAnimation="True">
        <chart:LineSeries.MarkerSettings>
            <chart:ChartMarkerSettings Fill="SkyBlue" 
                                       Stroke="RoyalBlue" 
                                       StrokeWidth="2" />
        </chart:LineSeries.MarkerSettings>
    </chart:LineSeries>
</DataTemplate>
. . .
<DataTemplate x:Key="pieSeriesTemplate">
    <chart:PieSeries ItemsSource="{Binding DataSource}"
                     XBindingPath="xvalue"
                     YBindingPath="yvalue"
                     EnableTooltip="{Binding Tooltip}"
                     PaletteBrushes="{StaticResource PaletteBrushesCollection}"
                     EnableAnimation="True">
    </chart:PieSeries>
</DataTemplate>
. . .
<DataTemplate x:Key="areaSeriesTemplate">
    <chart:AreaSeries ItemsSource="{Binding DataSource}"
                      XBindingPath="xvalue"
                      YBindingPath="yvalue"
                      Opacity=".8"
                      Label="{Binding Kind}"
                      EnableTooltip="{Binding Tooltip}"
                      EnableAnimation="True">
        <chart:AreaSeries.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <GradientStop Colour="#7FCEC5" Offset="0.0" />
                <GradientStop Colour="LightSeaGreen" Offset="1.0" />
            </LinearGradientBrush>
        </chart:AreaSeries.Fill>
    </chart:AreaSeries>
</DataTemplate>
. . .

Now, prolong the Cartesian Chart and carry out binding with the deserialized class. Discuss with the next code instance.

public partial class CartesianChartExt : SfCartesianChart
{
    public CartesianChartExt()
    {
        InitializeComponent();
    }

    public static readonly BindableProperty SourceProperty = BindableProperty.Create(nameof(Supply), typeof(ObservableCollection<SeriesConfig>), typeof(CartesianChartExt), null, BindingMode.Default, null, OnPropertyChanged);
    public ObservableCollection<SeriesConfig> Supply
    {
        get => (ObservableCollection<SeriesConfig>)GetValue(SourceProperty);
        set => SetValue(SourceProperty, worth);
    }

    personal static void OnPropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (Equals(oldValue, newValue))
        {
            return;
        }

        if (bindable is CartesianChartExt chart)
        {
            chart.GenerateSeries(newValue as ObservableCollection<SeriesConfig>);
        }
    }

    personal void GenerateSeries(ObservableCollection<SeriesConfig> configs)
    {
        if (configs != null)
        {
            this.Collection.Clear();
            foreach (var config in configs)
            {
                //CreateSeries(config);
                CreateSeriesFromTemplate(config);
            }
        }
    }

    personal void CreateSeriesFromTemplate(SeriesConfig seriesConfig)
    {
        var templateSelector = (SeriesTemplateSelector)Assets["seriesTemplateSelector"];
        var template = templateSelector.SelectTemplate(seriesConfig, null);

        if (template != null)
        {
            ChartSeries collection = (ChartSeries)template.CreateContent();

            if (collection != null)
            {
                collection.BindingContext = seriesConfig;
                this.Collection.Add(collection);
            }
        }
    }

    personal void CreateSeries(SeriesConfig config)
    {
        ChartSeries collection = null;

        swap (config.Kind)
        {
            case ChartEnums.SeriesType.Line:
                collection = new LineSeries
                {
                    ItemsSource = config.DataSource,
                    XBindingPath = config.XPath,
                    YBindingPath = "yvalue",
                    EnableTooltip = config.Tooltip
                };
                break;

            case ChartEnums.SeriesType.Space:
                collection = new AreaSeries
                {
                    ItemsSource = config.DataSource,
                    XBindingPath = config.XPath,
                    YBindingPath = "yvalue",
                    EnableTooltip = config.Tooltip
                };
                break;

            case ChartEnums.SeriesType.Spline:
                collection = new SplineSeries
                {
                    ItemsSource = config.DataSource,
                    XBindingPath = config.XPath,
                    YBindingPath = "yvalue",
                    EnableTooltip = config.Tooltip
                };
                break;

            case ChartEnums.SeriesType.Column:
                collection = new ColumnSeries
                {
                    ItemsSource = config.DataSource,
                    XBindingPath = config.XPath,
                    YBindingPath = "yvalue",
                    EnableTooltip = config.Tooltip
                };
                break;
        }

        if (collection != null)
        {
            this.Collection.Add(collection);
        }
    }
}

Equally, yow will discover the .NET MAUI Round Chart configuration right here.

Deserialize JSON to a category

Now, use the System.Textual content.Json bundle to parse the JSON enter right into a structured class.

inside void DecryptJSON(string jsonData)
 {
     strive
     {
         var chartData = JsonConvert.DeserializeObject<ChartConfig>(jsonData);

         ChartData = chartData!;
     }
     catch (JsonException ex)
     {
         EntryText = "Invalid JSON, Attempt Once more";
     }
 }
. . .
personal async void OnCreateButtonClicked()
{
    if (!string.IsNullOrEmpty(EntryText))
    {
        DecryptJSON(EntryText);

        Software.Present.MainPage.Navigation.PushAsync(new ChartView(this));
    }
    else
    {
        EntryText = "Invalid JSON, Attempt Once more";
    }
}

Right here’s an instance of the JSON enter we use within the app.

{
  "chartType": "round",
  "title": "Month-to-month Gross sales Knowledge",
  "collection": [
    {
      "type": "pie",
      "xpath": "category",
      "dataSource": [
        { "xvalue": "January", "yvalue": 5000 },
        { "xvalue": "February", "yvalue": 6000 },
        { "xvalue": "March", "yvalue": 7000 },
      ],
    }
  ]
}

Discuss with the next picture.

Now, the app will generate a chart based mostly on the JSON enter.

Discuss with the next output GIF picture.

GitHub reference

For extra particulars, consult with the auto-generating charts from JSON with Syncfusion^® .NET MAUI Toolkit GitHub demo. 

Keep tuned

Should you discover offering JSON enter difficult or really feel uncomfortable framing it appropriately, we’ve got nice information for you! Keep tuned for our subsequent weblog, the place we’ll display the right way to create charts from pure language utilizing an AI engine.

With this upcoming function, you may describe your knowledge in plain language, and the app will deal with the remainder—making chart creation much more intuitive and easy.

Conclusion

Thanks for studying! This auto-chart generator app streamlines the method of making, visualizing, and exporting charts in .NET MAUI. By leveraging Syncfusion^® .NET MAUI Toolkit, you may generate professional-quality charts with just some clicks.

Whether or not you’re a developer seeking to save time or a consumer needing fast insights, this app covers you. Attempt it out and expertise the comfort of auto-generating gorgeous charts!

Should you want help, please don’t hesitate to contact us through our help discussion board, help portal, or suggestions portal. We’re all the time keen that will help you!