diff --git a/ChartGeneratorAISample/ChartGenerator/AIService/ChartsAIService.cs b/ChartGeneratorAISample/ChartGenerator/AIService/ChartsAIService.cs index 259268b..c0bac63 100644 --- a/ChartGeneratorAISample/ChartGenerator/AIService/ChartsAIService.cs +++ b/ChartGeneratorAISample/ChartGenerator/AIService/ChartsAIService.cs @@ -10,7 +10,7 @@ internal class ChartAIService /// /// The EndPoint /// - internal const string endpoint = "https://mobilemaui.openai.azure.com/"; + internal const string endpoint = "https://YOUR_ACCOUNT.openai.azure.com/"; /// /// The Deployment name diff --git a/ChartGeneratorAISample/ChartGenerator/App.xaml.cs b/ChartGeneratorAISample/ChartGenerator/App.xaml.cs index 4afe8d6..20a6be5 100644 --- a/ChartGeneratorAISample/ChartGenerator/App.xaml.cs +++ b/ChartGeneratorAISample/ChartGenerator/App.xaml.cs @@ -1,4 +1,5 @@ -namespace ChartGenerator + +namespace ChartGenerator { public partial class App : Application { @@ -9,7 +10,11 @@ public App() protected override Window CreateWindow(IActivationState? activationState) { +#if WINDOWS || MACCATALYST return new Window(new NavigationPage(new DesktopUI())); +# else + return new Window(new NavigationPage(new MobileUI())); +#endif } } } \ No newline at end of file diff --git a/ChartGeneratorAISample/ChartGenerator/ChartExtensions/CartesianChartExt.xaml.cs b/ChartGeneratorAISample/ChartGenerator/ChartExtensions/CartesianChartExt.xaml.cs index 698ea2e..43c0f08 100644 --- a/ChartGeneratorAISample/ChartGenerator/ChartExtensions/CartesianChartExt.xaml.cs +++ b/ChartGeneratorAISample/ChartGenerator/ChartExtensions/CartesianChartExt.xaml.cs @@ -37,7 +37,6 @@ private void GenerateSeries(ObservableCollection configs) this.Series.Clear(); foreach (var config in configs) { - //CreateSeries(config); CreateSeriesFromTemplate(config); } } @@ -59,57 +58,4 @@ private void CreateSeriesFromTemplate(SeriesConfig seriesConfig) } } } - - private void CreateSeries(SeriesConfig config) - { - ChartSeries series = null; - - switch (config.Type) - { - case ChartEnums.SeriesType.Line: - series = new LineSeries - { - ItemsSource = config.DataSource, - XBindingPath = config.XPath, - YBindingPath = "yvalue", - EnableTooltip = config.Tooltip - }; - break; - - case ChartEnums.SeriesType.Area: - series = new AreaSeries - { - ItemsSource = config.DataSource, - XBindingPath = config.XPath, - YBindingPath = "yvalue", - EnableTooltip = config.Tooltip - }; - break; - - case ChartEnums.SeriesType.Spline: - series = new SplineSeries - { - ItemsSource = config.DataSource, - XBindingPath = config.XPath, - YBindingPath = "yvalue", - EnableTooltip = config.Tooltip - }; - break; - - case ChartEnums.SeriesType.Column: - series = new ColumnSeries - { - ItemsSource = config.DataSource, - XBindingPath = config.XPath, - YBindingPath = "yvalue", - EnableTooltip = config.Tooltip - }; - break; - } - - if (series != null) - { - this.Series.Add(series); - } - } } diff --git a/ChartGeneratorAISample/ChartGenerator/ChartExtensions/CircularChartExt.xaml.cs b/ChartGeneratorAISample/ChartGenerator/ChartExtensions/CircularChartExt.xaml.cs index 05f67b8..ad313ab 100644 --- a/ChartGeneratorAISample/ChartGenerator/ChartExtensions/CircularChartExt.xaml.cs +++ b/ChartGeneratorAISample/ChartGenerator/ChartExtensions/CircularChartExt.xaml.cs @@ -32,7 +32,6 @@ private void GenerateSeries(ObservableCollection configs) this.Series.Clear(); foreach (var config in configs) { - //CreateSeries(config); CreateSeriesFromTemplate(config); } } @@ -54,47 +53,4 @@ private void CreateSeriesFromTemplate(SeriesConfig config) } } } - - private void CreateSeries(SeriesConfig config) - { - ChartSeries series = null; - - switch (config.Type) - { - case ChartEnums.SeriesType.Pie: - series = new PieSeries - { - ItemsSource = config.DataSource, - XBindingPath = config.XPath, - YBindingPath = "yvalue", - EnableTooltip = config.Tooltip - }; - break; - - case ChartEnums.SeriesType.Doughnut: - series = new DoughnutSeries - { - ItemsSource = config.DataSource, - XBindingPath = config.XPath, - YBindingPath = "yvalue", - EnableTooltip = config.Tooltip - }; - break; - - case ChartEnums.SeriesType.RadialBar: - series = new RadialBarSeries - { - ItemsSource = config.DataSource, - XBindingPath = config.XPath, - YBindingPath = "yvalue", - EnableTooltip = config.Tooltip - }; - break; - } - - if (series != null) - { - this.Series.Add(series); - } - } } \ No newline at end of file diff --git a/ChartGeneratorAISample/ChartGenerator/ChartGenerator.csproj b/ChartGeneratorAISample/ChartGenerator/ChartGenerator.csproj index 101bd77..a9a3f1b 100644 --- a/ChartGeneratorAISample/ChartGenerator/ChartGenerator.csproj +++ b/ChartGeneratorAISample/ChartGenerator/ChartGenerator.csproj @@ -62,7 +62,7 @@ - + diff --git a/ChartGeneratorAISample/ChartGenerator/View/ChartView.xaml b/ChartGeneratorAISample/ChartGenerator/View/ChartView.xaml index e787b38..403c16d 100644 --- a/ChartGeneratorAISample/ChartGenerator/View/ChartView.xaml +++ b/ChartGeneratorAISample/ChartGenerator/View/ChartView.xaml @@ -137,14 +137,14 @@ diff --git a/ChartGeneratorAISample/ChartGenerator/View/DesktopUI.xaml b/ChartGeneratorAISample/ChartGenerator/View/DesktopUI.xaml index 14b8832..67cfb16 100644 --- a/ChartGeneratorAISample/ChartGenerator/View/DesktopUI.xaml +++ b/ChartGeneratorAISample/ChartGenerator/View/DesktopUI.xaml @@ -31,12 +31,9 @@ HorizontalOptions="Center" TextColor="Gray" /> - - - - @@ -79,20 +65,8 @@ WidthRequest="40" FontSize="18" Grid.Column="1"> - - + xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"> @@ -34,8 +33,6 @@ - - - diff --git a/ChartGeneratorAISample/ChartGenerator/ViewModel/ChartViewModel.cs b/ChartGeneratorAISample/ChartGenerator/ViewModel/ChartViewModel.cs index 80ab973..dd589ba 100644 --- a/ChartGeneratorAISample/ChartGenerator/ViewModel/ChartViewModel.cs +++ b/ChartGeneratorAISample/ChartGenerator/ViewModel/ChartViewModel.cs @@ -165,14 +165,19 @@ private async void OnCreateButtonClicked() { if (!string.IsNullOrEmpty(EntryText)) { + IsLoading = true; + ShowAssistView = false; + Messages.Clear(); + showHeader = true; + if (ChartAIService.IsCredentialValid) { - IsLoading = true; EnableAssistant = true; await GetDataFromAI(EntryText); } else { + await Task.Delay(500); CreateOfflineChart(EntryText); AssistItem message = new() { Text = "Currently in offline mode...", ShowAssistItemFooter = false }; Messages.Add(message); @@ -189,31 +194,31 @@ internal void CreateOfflineChart(string entryText) if (entryText.Contains("column")) { - response = "{\n \"chartType\": \"cartesian\",\n \"title\": \"Revenue by Region\",\n \"xAxis\": {\n \"type\": \"category\",\n \"title\": \"Region\"\n },\n \"yAxis\": {\n \"title\": \"Revenue\",\n \"type\": \"numerical\",\n \"min\": 0\n },\n \"series\": [\n {\n \"type\": \"column\",\n \"xpath\": \"region\",\n \"dataSource\": [\n { \"xvalue\": \"North America\", \"yvalue\": 120000 },\n { \"xvalue\": \"Europe\", \"yvalue\": 90000 },\n { \"xvalue\": \"Asia\", \"yvalue\": 70000 },\n { \"xvalue\": \"South America\", \"yvalue\": 45000 },\n { \"xvalue\": \"Australia\", \"yvalue\": 30000 }\n ],\n \"tooltip\": true\n }\n ]\n}"; + response = "{\n \"chartType\": \"cartesian\",\n \"title\": \"Revenue by Region\",\n \"ShowLegend\": \"true\", \n \"xAxis\": {\n \"type\": \"category\",\n \"title\": \"Region\"\n },\n \"yAxis\": {\n \"title\": \"Revenue\",\n \"type\": \"numerical\",\n \"min\": 0\n },\n \"series\": [\n {\n \"type\": \"column\",\n \"xpath\": \"region\",\n \"dataSource\": [\n { \"xvalue\": \"North America\", \"yvalue\": 120000 },\n { \"xvalue\": \"Europe\", \"yvalue\": 90000 },\n { \"xvalue\": \"Asia\", \"yvalue\": 70000 },\n { \"xvalue\": \"South America\", \"yvalue\": 45000 },\n { \"xvalue\": \"Australia\", \"yvalue\": 30000 }\n ],\n \"tooltip\": true\n }\n ]\n}"; } else if (entryText.Contains("area")) { - response = "{\n \"chartType\": \"cartesian\",\n \"title\": \"Farm Productivity Over Different Seasons\",\n \"xAxis\": {\n \"type\": \"category\",\n \"title\": \"Seasons\"\n },\n \"yAxis\": {\n \"title\": \"Productivity (tons)\",\n \"type\": \"numerical\",\n \"min\": 0\n, \n \"max\": 200\n },\n \"series\": [\n {\n \"type\": \"area\",\n \"xpath\": \"season\",\n \"dataSource\": [\n { \"xvalue\": \"Spring\", \"yvalue\": 120 },\n { \"xvalue\": \"Summer\", \"yvalue\": 150 },\n { \"xvalue\": \"Autumn\", \"yvalue\": 130 },\n { \"xvalue\": \"Winter\", \"yvalue\": 80 }\n ],\n \"tooltip\": true\n }\n ]\n}"; + response = "{\n \"chartType\": \"cartesian\",\n \"title\": \"Farm Productivity Over Different Seasons\",\n \"ShowLegend\": \"true\",\n \"xAxis\": {\n \"type\": \"category\",\n \"title\": \"Seasons\"\n },\n \"yAxis\": {\n \"title\": \"Productivity (tons)\",\n \"type\": \"numerical\",\n \"min\": 0\n, \n \"max\": 200\n },\n \"series\": [\n {\n \"type\": \"area\",\n \"xpath\": \"season\",\n \"dataSource\": [\n { \"xvalue\": \"Spring\", \"yvalue\": 120 },\n { \"xvalue\": \"Summer\", \"yvalue\": 150 },\n { \"xvalue\": \"Autumn\", \"yvalue\": 130 },\n { \"xvalue\": \"Winter\", \"yvalue\": 80 }\n ],\n \"tooltip\": true\n }\n ]\n}"; } else if (entryText.Contains("pie")) { - response = "{\n \"chartType\": \"circular\",\n \"title\": \"Monthly Sales Data\",\n \"series\": [\n {\n \"type\": \"pie\",\n \"xpath\": \"category\",\n \"dataSource\": [\n { \"xvalue\": \"January\", \"yvalue\": 5000 },\n { \"xvalue\": \"February\", \"yvalue\": 6000 },\n { \"xvalue\": \"March\", \"yvalue\": 7000 },\n { \"xvalue\": \"April\", \"yvalue\": 8000 },\n { \"xvalue\": \"May\", \"yvalue\": 9000 },\n { \"xvalue\": \"June\", \"yvalue\": 10000 },\n { \"xvalue\": \"July\", \"yvalue\": 11000 },\n { \"xvalue\": \"August\", \"yvalue\": 12000 },\n { \"xvalue\": \"September\", \"yvalue\": 13000 },\n { \"xvalue\": \"October\", \"yvalue\": 14000 },\n { \"xvalue\": \"November\", \"yvalue\": 15000 },\n { \"xvalue\": \"December\", \"yvalue\": 16000 }\n ],\n \"tooltip\": true\n }\n ]\n}"; + response = "{\n \"chartType\": \"circular\",\n \"title\": \"Monthly Sales Data\",\n \"ShowLegend\": \"true\",\n \"series\": [\n {\n \"type\": \"pie\",\n \"xpath\": \"category\",\n \"dataSource\": [\n { \"xvalue\": \"January\", \"yvalue\": 5000 },\n { \"xvalue\": \"February\", \"yvalue\": 6000 },\n { \"xvalue\": \"March\", \"yvalue\": 7000 },\n { \"xvalue\": \"April\", \"yvalue\": 8000 },\n { \"xvalue\": \"May\", \"yvalue\": 9000 },\n { \"xvalue\": \"June\", \"yvalue\": 10000 },\n { \"xvalue\": \"July\", \"yvalue\": 11000 },\n { \"xvalue\": \"August\", \"yvalue\": 12000 },\n { \"xvalue\": \"September\", \"yvalue\": 13000 },\n { \"xvalue\": \"October\", \"yvalue\": 14000 },\n { \"xvalue\": \"November\", \"yvalue\": 15000 },\n { \"xvalue\": \"December\", \"yvalue\": 16000 }\n ],\n \"tooltip\": true\n }\n ]\n}"; } else if (entryText.Contains("doughnut")) { - response = "{\n \"chartType\": \"circular\",\n \"title\": \"Task Completion Doughnut Chart\",\n \"series\": [\n {\n \"type\": \"doughnut\",\n \"xpath\": \"xvalue\",\n \"dataSource\": [\n { \"xvalue\": \"Completed\", \"yvalue\": 70 },\n { \"xvalue\": \"In Progress\", \"yvalue\": 20 },\n { \"xvalue\": \"Pending\", \"yvalue\": 10 }\n ],\n \"tooltip\": true\n }\n ],\n \"xAxis\": {\n \"type\": \"category\",\n \"title\": \"Task Status\"\n },\n \"yAxis\": {\n \"title\": \"Percentage\",\n \"type\": \"numerical\",\n \"min\": 0,\n \"max\": 100\n }\n}"; + response = "{\n \"chartType\": \"circular\",\n \"title\": \"Task Completion Doughnut Chart\",\n \"ShowLegend\": \"true\",\n \"series\": [\n {\n \"type\": \"doughnut\",\n \"xpath\": \"xvalue\",\n \"dataSource\": [\n { \"xvalue\": \"Completed\", \"yvalue\": 70 },\n { \"xvalue\": \"In Progress\", \"yvalue\": 20 },\n { \"xvalue\": \"Pending\", \"yvalue\": 10 }\n ],\n \"tooltip\": true\n }\n ],\n \"xAxis\": {\n \"type\": \"category\",\n \"title\": \"Task Status\"\n },\n \"yAxis\": {\n \"title\": \"Percentage\",\n \"type\": \"numerical\",\n \"min\": 0,\n \"max\": 100\n }\n}"; } else if (entryText.Contains("spline")) { - response = "{\n \"chartType\": \"cartesian\",\n \"title\": \"Daily Average Temperature for the Past Week\",\n \"series\": [\n {\n \"type\": \"spline\",\n \"xpath\": \"date\",\n \"dataSource\": [\n { \"xvalue\": \"2023-10-01\", \"yvalue\": 15 },\n { \"xvalue\": \"2023-10-02\", \"yvalue\": 17 },\n { \"xvalue\": \"2023-10-03\", \"yvalue\": 16 },\n { \"xvalue\": \"2023-10-04\", \"yvalue\": 18 },\n { \"xvalue\": \"2023-10-05\", \"yvalue\": 20 },\n { \"xvalue\": \"2023-10-06\", \"yvalue\": 19 },\n { \"xvalue\": \"2023-10-07\", \"yvalue\": 21 }\n ],\n \"tooltip\": true\n }\n ],\n \"xAxis\": {\n \"type\": \"category\",\n \"title\": \"Date\"\n },\n \"yAxis\": {\n \"title\": \"Temperature (°C)\",\n \"type\": \"numerical\",\n \"min\": 0,\n \"max\": 30\n }\n}"; + response = "{\n \"chartType\": \"cartesian\",\n \"title\": \"Daily Average Temperature for the Past Week\",\n \"ShowLegend\": \"true\",\n \"series\": [\n {\n \"type\": \"spline\",\n \"xpath\": \"date\",\n \"dataSource\": [\n { \"xvalue\": \"2023-10-01\", \"yvalue\": 15 },\n { \"xvalue\": \"2023-10-02\", \"yvalue\": 17 },\n { \"xvalue\": \"2023-10-03\", \"yvalue\": 16 },\n { \"xvalue\": \"2023-10-04\", \"yvalue\": 18 },\n { \"xvalue\": \"2023-10-05\", \"yvalue\": 20 },\n { \"xvalue\": \"2023-10-06\", \"yvalue\": 19 },\n { \"xvalue\": \"2023-10-07\", \"yvalue\": 21 }\n ],\n \"tooltip\": true\n }\n ],\n \"xAxis\": {\n \"type\": \"category\",\n \"title\": \"Date\"\n },\n \"yAxis\": {\n \"title\": \"Temperature (°C)\",\n \"type\": \"numerical\",\n \"min\": 0,\n \"max\": 30\n }\n}"; } else if (entryText.Contains("line")) { - response = "\n{\n \"chartType\": \"cartesian\",\n \"title\": \"Product Sales Over Six Months\",\n \"series\": [\n {\n \"type\": \"line\",\n \"xpath\": \"month\",\n \"dataSource\": [\n { \"xvalue\": \"January\", \"yvalue\": 150 },\n { \"xvalue\": \"February\", \"yvalue\": 200 },\n { \"xvalue\": \"March\", \"yvalue\": 175 },\n { \"xvalue\": \"April\", \"yvalue\": 220 },\n { \"xvalue\": \"May\", \"yvalue\": 240 },\n { \"xvalue\": \"June\", \"yvalue\": 210 }\n ],\n \"tooltip\": true\n }\n ],\n \"xAxis\": {\n \"type\": \"category\",\n \"title\": \"Month\"\n },\n \"yAxis\": {\n \"title\": \"Sales (Units)\",\n \"type\": \"numerical\",\n \"min\": 0,\n \"max\": 300\n }\n}\n"; + response = "\n{\n \"chartType\": \"cartesian\",\n \"title\": \"Product Sales Over Six Months\",\n \"ShowLegend\": \"true\",\n \"series\": [\n {\n \"type\": \"line\",\n \"xpath\": \"month\",\n \"dataSource\": [\n { \"xvalue\": \"January\", \"yvalue\": 150 },\n { \"xvalue\": \"February\", \"yvalue\": 200 },\n { \"xvalue\": \"March\", \"yvalue\": 175 },\n { \"xvalue\": \"April\", \"yvalue\": 220 },\n { \"xvalue\": \"May\", \"yvalue\": 240 },\n { \"xvalue\": \"June\", \"yvalue\": 210 }\n ],\n \"tooltip\": true\n }\n ],\n \"xAxis\": {\n \"type\": \"category\",\n \"title\": \"Month\"\n },\n \"yAxis\": {\n \"title\": \"Sales (Units)\",\n \"type\": \"numerical\",\n \"min\": 0,\n \"max\": 300\n }\n}\n"; } else { - response = "{\n \"chartType\": \"cartesian\",\n \"title\": \"Revenue by Region\",\n \"xAxis\": {\n \"type\": \"category\",\n \"title\": \"Region\"\n },\n \"yAxis\": {\n \"title\": \"Revenue\",\n \"type\": \"numerical\",\n \"min\": 0\n },\n \"series\": [\n {\n \"type\": \"column\",\n \"xpath\": \"region\",\n \"dataSource\": [\n { \"xvalue\": \"North America\", \"yvalue\": 120000 },\n { \"xvalue\": \"Europe\", \"yvalue\": 90000 },\n { \"xvalue\": \"Asia\", \"yvalue\": 70000 },\n { \"xvalue\": \"South America\", \"yvalue\": 45000 },\n { \"xvalue\": \"Australia\", \"yvalue\": 30000 }\n ],\n \"tooltip\": true\n }\n ]\n}"; + response = "{\n \"chartType\": \"cartesian\",\n \"title\": \"Revenue by Region\",\n \"ShowLegend\": \"true\",\n \"xAxis\": {\n \"type\": \"category\",\n \"title\": \"Region\"\n },\n \"yAxis\": {\n \"title\": \"Revenue\",\n \"type\": \"numerical\",\n \"min\": 0\n },\n \"series\": [\n {\n \"type\": \"column\",\n \"xpath\": \"region\",\n \"dataSource\": [\n { \"xvalue\": \"North America\", \"yvalue\": 120000 },\n { \"xvalue\": \"Europe\", \"yvalue\": 90000 },\n { \"xvalue\": \"Asia\", \"yvalue\": 70000 },\n { \"xvalue\": \"South America\", \"yvalue\": 45000 },\n { \"xvalue\": \"Australia\", \"yvalue\": 30000 }\n ],\n \"tooltip\": true\n }\n ]\n}"; } DecryptJSON(response, false); diff --git a/README.md b/README.md index 7a51267..c9afc42 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,36 @@ -# AI-Powered-Chart-Creator-from-Natural-Language-with-Syncfusion-.NET-MAUI-Toolkit -Transform natural language inputs into stunning charts using the AI-Powered Chart Creator powered by Syncfusion .NET MAUI Toolkit. Simplify data visualization with cutting-edge technology and seamless integration +# AI Powered Chart Creator from Natural Language with Syncfusion .NET MAUI Toolkit + +In a world where time is of the essence, creating intuitive and visually appealing charts for applications can often become a resource-intensive task. This blog sample introduces a revolutionary approach—leveraging natural language processing (NLP) and AI to generate Syncfusion .NET MAUI charts effortlessly. With just a few words, you can create, modify, and display charts, enabling developers to focus on data insights rather than UI design. + +## Syncfusion .NET MAUI Charts with AI +Syncfusion .NET MAUI Charts are a powerful suite of controls for building cross-platform applications on iOS, Android, macOS, and Windows. By integrating AI-powered natural language processing, this brings an intuitive experience for generating charts with minimal effort. + +### Key Features of Natural Language Chart Generation +- **Natural Input**: Describe your chart in plain language, and AI will generate it for you. +- **Automatic JSON Mapping**: Converts your input into chart configuration JSON for seamless rendering. +- **Cross-Platform Support**: Leverages the .NET MAUI framework to ensure charts work across all major platforms. +- **Dynamic Modifications**: Adjust chart settings, data, or visuals in real time using AI-assisted tools. + +### Why Choose AI-Powered Charting? +- **Ease of Use**: Removes the technical barrier—anyone can create charts with simple descriptions. +- **Efficiency**: Eliminates the need for manual chart configuration and design. +- **Scalability**: Supports various chart types like column, line, pie, doughnut, and spline with a single interface. +- **Flexibility**: Adapts to evolving data needs with AI-driven updates and refinements. + +### How Does It Work? +1. **Input**: Provide a natural language description of the chart, e.g., “Create a line chart for monthly sales.” +2. **AI Processing**: The AI interprets the request and generates a JSON configuration. +3. **Rendering**: The JSON is processed by Syncfusion’s .NET MAUI Charts to display the desired chart. +4. **Real-Time Updates**: Use .NET MAUI AI AssistView to modify or refine the chart dynamically. + +![AI-Powered-Charts-using-Natural-Language-Processing-in-Syncfusion-for- NET-MAUI](https://github.com/user-attachments/assets/424f0c85-dbde-4c80-9cab-e8f75d0d53d9) + + +### Save Time and Enhance Productivity +AI-powered natural language chart generation transforms the way developers and users visualize data. By eliminating the need for manual design and coding, this approach saves time, boosts productivity, and allows users to focus on what truly matters—data-driven insights. + +### Troubleshooting +Path too long exception +If you are facing path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project. + +For a step-by-step procedure, refer to the [Effortlessly Generate Charts with Natural Language Input Using Syncfusion .NET MAUI Toolkit Blog](https://www.syncfusion.com/blogs/post/create-maui-chart-from-natural-language).