The PowerPoint framework is a feature rich .NET PowerPoint class library that can be used by developers to create, read, edit and convert PowerPoint files to PDF and images programmatically without Office or interop dependencies. Using this library, you can edit or change the data in an existing PowerPoint chart in C# and VB.NET. Steps to edit or change the data in an existing chart in PowerPoint Presentation document Create a new C# console application project. Install the Syncfusion.Presentation.WinForms NuGet package as a reference to your .NET Framework applications from NuGet.org Include the following namespace in the Program.cs file. C# using Syncfusion.Presentation; using Syncfusion.OfficeChart; VB Imports Syncfusion.Presentation Imports Syncfusion.OfficeChart Use the following code example to edit or change the data in an existing chart in PowerPoint Presentation document. C# //Opens a Presentation IPresentation pptxDoc = Presentation.Open(@"Sample.pptx"); //Adds a slide to the Presentation ISlide slide = pptxDoc.Slides[0]; //Gets the chart in slide IPresentationChart chart = slide.Shapes[0] as IPresentationChart; //Modifies chart data - Row1 chart.ChartData.SetValue(1, 2, "Jan"); chart.ChartData.SetValue(1, 3, "Feb"); chart.ChartData.SetValue(1, 4, "March"); //Modifies chart data - Row2 chart.ChartData.SetValue(2, 1, 2010); chart.ChartData.SetValue(2, 2, 90); chart.ChartData.SetValue(2, 3, 80); chart.ChartData.SetValue(2, 4, 70); //Refreshes the chart chart.Refresh(); //Saves the Presentation pptxDoc.Save("Output.pptx"); //Closes the Presentation pptxDoc.Close(); VB 'Opens a Presentation Dim pptxDoc As IPresentation = Presentation.Open("Sample.pptx") 'Adds a slide to the Presentation Dim slide As ISlide = pptxDoc.Slides(0) 'Gets the chart in slide Dim chart As IPresentationChart = TryCast(slide.Shapes(0), IPresentationChart) 'Modifies chart data - Row1 chart.ChartData.SetValue(1, 2, "Jan") chart.ChartData.SetValue(1, 3, "Feb") chart.ChartData.SetValue(1, 4, "March") 'Modifies chart data - Row2 chart.ChartData.SetValue(2, 1, 2010) chart.ChartData.SetValue(2, 2, 90) chart.ChartData.SetValue(2, 3, 80) chart.ChartData.SetValue(2, 4, 70) 'Refreshes the chart chart.Refresh() 'Saves the Presentation pptxDoc.Save("output.pptx") 'Closes the Presentation pptxDoc.Close() A complete working sample to edit or change the data in an existing chart in PowerPoint Presentation document using C# can be downloaded from here. Input Presentation document with chart as follows: By executing the program, you will get the output Word document as follows. Take a moment to peruse the documentation, where you can find basic PowerPoint Presentation document processing options along with features like animation, slide transitions, shapes, smart art, protect the Presentation documents, and most importantly PDF conversion and Image conversions with code examples. Explore more about the rich set of Syncfusion PowerPoint Framework features. See Also: Working with charts using various operations Note:Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, include a license key in your projects. Refer to the link to learn about generating and registering a Syncfusion license key in your application to use the components without trail message.
The following steps explain how to add data to the SQLite database and bind that data to the Flutter SfCartesianChart widget. Step 1: Add the following dependencies in the pubspec.yaml file and get the packages. dependencies: flutter: sdk: flutter // To process with the Syncfusion charts. syncfusion_flutter_charts: ^19.1.59 // To process with the sqlite db. sqflite: ^2.0.0+3 // To provide the path to store the data in the device. path_provider: ^2.0.1 Step 2: Create the new file model.dart and create the SalesData model class to process the chart’s x and y values and define the table name of SQLite and the column names to be processed with the SQLite in the separate variables. class SalesData { //SQLite table name. static const tblSales = 'salestable'; // x and y columns of the table. static const salesXValue = 'xValue'; static const salesYValue = 'yValue'; SalesData({this.xValue, this.yValue}); num? xValue; num? yValue; } Step 3: Since in SQLite database records are stored as a collection of map objects, declare the named constructor fromMap for initializing an instance from a given map object. And with toMap function, we will convert sales object to the corresponding map object. SalesData.fromMap(Map<String, dynamic> map) { xValue = map[salesXValue]; yValue = map[salesYValue]; } Map<String, dynamic> toMap() { var map = <String, dynamic>{salesXValue: xValue, salesYValue: yValue}; return map; } Step 4: Create the new file helper to handle the SQLite database-related operations by creating the class DataBaseHelper class. class DataBaseHelper { static const _databaseName = 'Sales.db'; static const _databaseVersion = 1; //Singleton class DataBaseHelper._(); static final DataBaseHelper instance = DataBaseHelper._(); DataBase? _database; Future<DataBase> get database async { if (_database != null) return _database!; _database = await _initDataBase(); return _database!; } } Define the database name, database version and declare a final property instance of the type DataBaseHelper. Also declare a public property named _database, which returns the DataBase instance. If _database is not initialized _initDataBase function will be called. Step 5: Define the _initDataBase method as like the below in which the data directory is initialized with getApplicationDocumentsDirectory function, which is from path_provider package. This function returns the location where the database is stored, which is handled by the path_provider package. To connect and return the database reference openDataBase function is called. _initDataBase() async { Directory dataDirectory = await getApplicationDocumentsDirectory(); String dbPath = join(dataDirectory.path, _databaseName); return await openDataBase(dbPath, version: _databaseVersion, onCreate: _onCreateDB); } Step 6: If there is no database with the given database path, we have to create the database. That’s what we have done with onCreate property. Future _onCreateDB(DataBase db, int version) async { //create table query await db.execute(''' CREATE TABLE ${SalesData.tblSales} ( ${SalesData.salesXValue} REAL NOT NULL, ${SalesData.salesYValue} REAL NOT NULL ) '''); } Step 7: Now, the table is created from the above, so define the methods to add and fetch the data from the SQLite by defining the add(), getSales() methods as below. // To insert data into the SQLite. void add(SalesData sales) async { var dbClient = await database; // Insert query to insert data into the database dbClient.insert(SalesData.tblSales, sales.toMap()); } // To fetch data from the SQLite. Future<List<SalesData>> getSales() async { var dbClient = await database; List<Map> maps = await dbClient.query(SalesData.tblSales, columns: ['${SalesData.salesXValue}', '${SalesData.salesYValue}']); // Adding the fetched data to the list to bind to the chart. List<SalesData> students = []; if (maps.length > 0) { for (int i = 0; i < maps.length; i++) { students.add(SalesData.fromMap(maps[i] as Map<String, dynamic>)); } } return students; } // To delete data from the database table which is in the given id. void delete(int id) async { var dbClient = await database; dbClient.execute('delete from salestable where xValue = $id'); } Now combing whole in our main file to process the operations with the SQLite database with SfCartesianChart widget. Step 8: Declare the chart key and chart data as below, final chartKey = GlobalKey<ChartState>(); List<SalesData> salesData = <SalesData>[]; Step 9: Define the SfCartesianChart widget with the required properties as below. SfCartesianChart(series: <SplineSeries<SalesData, num>>[ SplineSeries<SalesData, num>( animationDuration: 0, dataSource: salesData, xValueMapper: (SalesData sales, _) => sales.xValue, yValueMapper: (SalesData sales, _) => sales.yValue, name: 'Sales') ] ) Step 10: Define the two buttons for performing the adding and deleting the data in the onPressed callback from the SQLite and the same in the Cartesian chart. ElevatedButton( onPressed: () async { // Adding data to the database dbHelper.add( SalesData(xValue: count, yValue: getRandomInt(10, 20))); // Fetching the data from the database salesData = await dbHelper.getSales(); // Calling the chart state to redraw the chart chartKey.currentState!.setState(() {}); count++; }, child: Text('Add') ), ElevatedButton( onPressed: () async { // To fetch the data from the database salesData = await dbHelper.getSales(); if (salesData.isNotEmpty) { data = salesData.last; // Delete the last data from the database dbHelper.delete( salesData[salesData.indexOf(data)].xValue!.toInt()); // Get data after deleting the database salesData = await dbHelper.getSales(); // Calling the chart state after deleting the data to redraw with the new data. chartKey.currentState!.setState(() {}); count--; } }, child: Text('Delete') ) After adding data to the database and fetch data from it by calling getSales method and call the chart state method to redraw the chart with the newly fetched data from the database. Thus, we have bind that data to the SfCartesianChart widget using the SQLite database. View the sample in GitHub.
Xamarin.Forms Charts provides support to add the chart inside the ListView control. You can add the chart in the ListView with the help of the ItemTemplate property as shown in the following code sample. [XAML] … <ListView x:Name="listView" ItemsSource="{Binding SeriesItems}" RowHeight="200" > <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout > <chart:SfChart VerticalOptions="FillAndExpand" Series="{Binding Series}" > <chart:SfChart.Title> <chart:ChartTitle Text="{Binding ChartTitle}" FontAttributes="Bold" TextColor="Aqua"/> </chart:SfChart.Title> <chart:SfChart.PrimaryAxis> <chart:CategoryAxis/> </chart:SfChart.PrimaryAxis> <chart:SfChart.SecondaryAxis> <chart:NumericalAxis /> </chart:SfChart.SecondaryAxis> </chart:SfChart> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> [C#] public class ViewModel { public ObservableCollection<SeriesViewModel> SeriesItems { get; set; } public ViewModel() { SeriesItems = new ObservableCollection<SeriesViewModel>(); SeriesViewModel model = new SeriesViewModel(); SeriesItems.Add(new SeriesViewModel() { ChartTitle = "ColumnChart", Series = new ChartSeriesCollection(){ new ColumnSeries(){ ItemsSource=model.Data2 } }, }); …. SeriesItems.Add(new SeriesViewModel() { ChartTitle = "PieChart", Series = new ChartSeriesCollection(){ new PieSeries(){ ItemsSource=model.Data1 } }, }); } } [C#] public class SeriesViewModel { public SeriesViewModel() { Data1 = new ObservableCollection<Model>(); Data2 = new ObservableCollection<Model>(); Data3 = new ObservableCollection<Model>(); Data1.Add(new Model("Jan", 10)); .. Data1.Add(new Model("May", 10)); Data2.Add(new Model("EEE", 20)); … Data2.Add(new Model("IT", 14)); Data3.Add(new Model("Benz", 13)); … Data3.Add(new Model("Jaguar", 19)); } public ObservableCollection<Model> Data1 { get; set; } public ObservableCollection<Model> Data2 { get; set; } public ObservableCollection<Model> Data3 { get; set; } public string ChartTitle { get; set; } public ChartSeriesCollection Series { get; set; } } [C#] public class Model { public Model(string x, double y) { XValue = x; YValue = y; } public string XValue { get; set; } public double YValue { get; set; } } Output View the complete sample in GitHub. See alsoHow to populate the Json data to Xamarin.Forms ChartsHow to bind the SQLite Database to the Xamarin.Forms ChartsHow to bind series from MVVM pattern in Xamarin.Forms ChartsHow to localize the labels in Xamarin.Forms Charts
This article describes how to bind an array collection to chart series. Array collection can be bound to chart series by mapping the array name and its index to the XBindingPath and YBindingPath properties of the series as demonstrated in the following code snippet. C# public class Model { public double X { get; set; } public double[] Y { get; set; } } public class ViewModel { public ObservableCollection<Model> Data { get; set; } public ViewModel() { Data = new ObservableCollection<Model>(); Data.Add(new Model { X = 1, Y = new double[] { 4, 10 } }); Data.Add(new Model { X = 2, Y = new double[] { 8, 15 } }); Data.Add(new Model { X = 3, Y = new double[] { 12, 20 } }); Data.Add(new Model { X = 4, Y = new double[] { 16, 25 } }); } } XAML <chart:SfChart> … <chart:SfChart.BindingContext> <local:ViewModel/> </chart:SfChart.BindingContext> <chart:SfChart.Series> <chart:ColumnSeries x:Name="ChartSeries" ItemsSource="{Binding Data}" XBindingPath="X" YBindingPath="Y[0]"/> </chart:SfChart.Series> </chart:SfChart> C# ColumnSeries series = new ColumnSeries() { XBindingPath = "X", YBindingPath = "Y[0]", ItemsSource = new ViewModel().Data }; ChartControl.Series.Add(series); Output
The JSON data used for binding with the chart should be an array of objects, containing properties for x value and y value of chart series in each object. The structure of the required JSON data is described as follows. JS In the above code example, the variable chartData contains the JSON data for the Chart. The field xValue represents data used for binding to the x value of series and yValue represents data used for binding to the y value of series. Instead of xValue and yValue, any name can also be used for the fields. The following code example illustrates binding the JSON data with the Chart. JS The following screenshot displays the chart bound with JSON data source. Figure: Chart bounded to data source JS Playground sample link: Data binding
Essential ASP.NET MVC Chart supports remote data binding, that is binding data in the server with chart, using DataSource property. The url from where the data has to be retrieved from, must be assigned to the “URL” property of DataSource object in series. The properties XName and YName of the series should be assigned to the fields in data source representing the x and y values of the series respectively. The property Query of the series should be assigned a string that represents Essential JavaScript query object for querying the data retrieved from remote url. Refer Query for more information about Essential JavaScript query object. The following code example demonstrates binding Chart to oData service. CSHTML @(Html.EJ().Chart("container") .Series(ser => { //Binding remote url to chart data source ser.DataSource(service => service.URL("http://mvc.syncfusion.com/Services/Northwnd.svc/")); ser.XName("ShipCity"); ser.YName("Freight"); //Using query object to query the retrieved data in client side ser.Query("ej.Query().from('Orders').take(6)").Add(); }) ) Screenshot The output for the above code example binding chart with oData service is as follows. Figure SEQ Figure \* ARABIC 1: Output Sample Link: Remote Data ConclusionI hope you enjoyed learning about how to bind remote data to ASP.NET MVC Chart.You can refer to our ASP.NET MVC Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC Chart example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Essential Chart supports remote data binding that is binding data in the server with chart, using Essential DataManager. Refer Data Manager for information about using Essential DataManager for JavaScript. The data manager object should be assigned to the dataSource property of series. The properties xName and yName of the series should be assigned to the fields in data source representing the x and y values of the series respectively. The query property of the series should be assigned to a query object for querying the data returned by the data manager. The following code example demonstrates binding Chart to oData service. JS <script type="text/javascript"> $(function () { //Assigning URL to data manager var dataManger = new ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/" }); // Object to query the data retrieved by data manager var query = ej.Query().from("Orders").take(6); $("#container").ejChart({ series: [{ //Assigning data manager as data source to chart dataSource: dataManger, xName: "ShipCity", yName: "Freight", query: query , }], }); }); </script> Screenshot The output for the above code example binding chart with oData service is as follows: Figure SEQ Figure \* ARABIC 1: Output JS Playground sample link: Remote dataConclusionI hope you enjoyed learning about how to compare JavaScript DropDownList vs Combobox vs Autocomplete vs MultiSelect.You can refer to our JavaScript Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Chart example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Essential Chart supports remote data binding (binding data in server with chart) by using Essential JavaScript DataManager. Refer to the Data Manager for information about using Essential DataManager for JavaScript. The data manager object is assigned to the dataSource property of chart series in client-side during chart load event. The properties xName and yName of the series are assigned to the fields in data source representing the x and y values of the series respectively. The property query of series is assigned to a query object for querying the data returned by data manager. The following cod example explains how to bind Chart to oData service. ASP <ej:Chart ID="container" OnClientLoad="ChartLoad" runat="server"> <Series> <ej:Series Name="Sales"> </ej:Series> </Series> </ej:Chart> <script type="text/javascript"> //Assigning URL to data manager var dataManger = new ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/" }); // Object to query the data retrieved by data manager var query = ej.Query().from("Orders").take(6); //Load event of chart function ChartLoad(sender) { var chart = sender; //Assigning data manager as data source to chart chart.model.series[0].dataSource = dataManger; chart.model.series[0].xName = "ShipCity"; chart.model.series[0].yName = "Freight"; chart.model.series[0].query = query; chart.redraw(); } </script> The following screenshot displays the output for the above code example. You can refer to the online sample for remote data binding in the following link Remote DataNote:A new version of Essential Studio for ASP.NET is available. Versions prior to the release of Essential Studio 2014, Volume 2 will now be referred to as a classic versions.The new ASP.NET suite is powered by Essential Studio for JavaScript providing client-side rendering of HTML 5-JavaScript controls, offering better performance, and better support for touch interactivity. The new version includes all the features of the old version, so migration is easy.The Classic controls can be used in existing projects; however, if you are starting a new project, we recommend using the latest version of Essential Studio for ASP.NET. Although Syncfusion will continue to support all Classic Versions, we are happy to assist you in migrating to the newest edition.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below.You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
