Generate chart from Sfdatagrid

Gents,

I would like to explore more on how to use charts like Pie and datas are coming from the Sfdatagrid.

are there any available example for us to explore?

thank you,

19 Replies 1 reply marked as answer

YP Yuvaraj Palanisamy Syncfusion Team March 19, 2021 10:33 AM UTC

Hi Mark Jayvee, 
 
Greetings from Syncfusion. 
 
We have achieved your requirement “to explore the chart from SfDatagrid” with the help of SfDataGrid and Chart control. Also, we have attached the sample for your reference. Please find the sample from the below link. 
 
  
Output: 


 
Regards, 
Yuvaraj. 



MJ Mark Jayvee April 7, 2021 10:49 PM UTC

Thank you,

How can I export the multiple chart into Word/Excel/pdf with the sfdatagrid?

What I want to do is to create a word or excel or pdf report where the 1st part will be the charts and the second part will be the sfdatagrid.



 


YP Yuvaraj Palanisamy Syncfusion Team April 8, 2021 01:41 PM UTC

Hi Mark Jayvee, 
 
We have already documented for the same “Export chart and datagrid in the same PDF page”. Please find the KB document below. 
 
 
For more details, please refer the below UG link. 
 
 
Regards, 
Yuvaraj. 



MJ Mark Jayvee April 12, 2021 08:27 AM UTC

Thank you for the response.

For example in my sfdatagrid, I have different columns as shown.

Created By     Modified By          Item 1               Properties

Mark               Zed                         Apple               Red
Mark               Zed                         Apple               Red
Joseph            Claire                      Orange             Orange
Luke               Mark                       Grape               Green

Some item I want to satisfy,
1. What I want now is to create a pie chart an example of 
  • Created By Vs Item 1.
  • Item 1 Vs Properties
2. Chart should appear in the Panel, I have a toolStripButton2 and when I click it, the chart(item 1) will display in the datavisualisation tab control as shown in the attached.
3. Having all the charts in the panel, will this be possible to export in 1 sheet of A4?If yes, please provide an example.


Attachment: datavisualisation_c77219ac.7z


YP Yuvaraj Palanisamy Syncfusion Team April 13, 2021 02:35 PM UTC

Hi Mark, 
 
We have achieved your requirement and also, we have attached the sample for your reference. 
·       Create two different charts with same datagrid item collection for two different items like (Created By Vs Item 1 & Item 1 Vs Properties) 
·       When we click button, to show two different charts in same panel. 
·       And export these two charts in same pdf sheet. 
 
Please find the sample from the below link. 
 
  
For more information, please refer the below link. 
 
 
 
Regards, 
Yuvaraj. 



MJ Mark Jayvee April 14, 2021 12:46 AM UTC

thank you for the response.

I can't run the sample due to the following error.

see the attached file.

Attachment: error_4bdbd4ca.7z


YP Yuvaraj Palanisamy Syncfusion Team April 14, 2021 07:40 AM UTC

Hi Mark,  
 
Sorry for the inconvenience caused. 
 
We have attached the modified sample for your reference. Please find the sample from the below link. 
 
 
Regards, 
Yuvaraj. 



MJ Mark Jayvee April 14, 2021 08:54 AM UTC

Thank you for the response. 

I can't export to pdf due to compression.base can't be update. Please see the attached snip.

Attachment: compressionerror_5bb045a6.7z


YP Yuvaraj Palanisamy Syncfusion Team April 14, 2021 01:50 PM UTC

Hi Mark,  
 
Due to different version of Syncfusion.Pdf.WinForms and Syncfusion.Compression.base, the reported problem has been raised. To resolve this by updating the same version of Syncfusion packages in your application.  
 
Please download and install the package for Syncfusion.Compression.Base. Please get the package from the below link. 
 
Regards, 
Yuvaraj. 



MJ Mark Jayvee April 15, 2021 10:04 AM UTC

Thank you. can you make an example instead of using observablecollection. could you please use DataTable instead?

with regards to the sfdatagrid. I noticed that it has been created thru
 ObservableCollection data = new ObservableCollection();
            Random random = new Random();

            data.Add(new DataGridData("Mark", "Zed", "Apple", "Red"));
            data.Add(new DataGridData("Mark", "Zed", "Apple", "Red"));
            data.Add(new DataGridData("Joesph", "Claire", "Orange", "Orange"));
            data.Add(new DataGridData("Luck", "Mark", "Graps", "Green"));
sfDataGrid.DataSource = data;

at the moment sfdatagrid have been generated thru 
DataTable table = new DataTable();

            DataColumn colcreatedby = table.Columns.Add("Created By", typeof(string));
            DataColumn colmodifiedby = table.Columns.Add("Modified By", typeof(string));
            DataColumn colitem = table.Columns.Add("Item", typeof(string));
            DataColumn colparameter = table.Columns.Add("Parameter", typeof(string));

when I call my form to display my chart I got an error (null values) at  series.Points.Add(record.createdby, 1) and a null value at var record = (item as RecordEntry).Data as DataGridData;

using your example,

 public graph(RecordsList data)
        {
           // _format = format;
            InitializeComponent();
            ChartSeries series = new ChartSeries("Line Series", ChartSeriesType.Pie);


            foreach (var item in data)
            { 
                
                var record = (item as RecordEntry).Data as DataGridData;
                var pointsCount = series.Points.Count;

                if (series.Points.Count == 0)
                {
                    series.Points.Add(record.createdby, 1);
                }


YP Yuvaraj Palanisamy Syncfusion Team April 16, 2021 10:36 AM UTC

Hi Mark, 

We have prepared the sample as per your requirement “DataTable data instead of ObservableCollection”. And we have modified the chart datapoint as per the DataTable collection. Please find the code example below. 

CodeSnippet: [Form1.cs] 
DataTable table = new DataTable(); 

DataColumn colcreatedby = table.Columns.Add("Created By", typeof(string)); 
DataColumn colmodifiedby = table.Columns.Add("Modified By", typeof(string)); 
DataColumn colitem = table.Columns.Add("Item", typeof(string)); 
DataColumn colparameter = table.Columns.Add("Parameter", typeof(string)); 

table.Rows.Add("Mark", "Zed", "Apple", "Red"); 
table.Rows.Add("Mark", "Zed", "Apple", "Red"); 
table.Rows.Add("Joesph", "Claire", "Orange", "Orange"); 
table.Rows.Add("Luck", "Mark", "Graps", "Green"); 
data = table; 

sfDataGrid.DataSource = data; 

[LiveChart.cs] 
ChartSeries series = new ChartSeries("Line Series", ChartSeriesType.Pie); 
foreach(var item in data) 
           
                object[] record = ((item as RecordEntry).Data as DataRowView).Row.ItemArray; 
                string createdby = record[0] as string;         // Createdby is first column 
                var pointsCount = series.Points.Count; 

                if (series.Points.Count == 0) 
               
                    series.Points.Add(createdby, 1); 
               
                else 
               
                    bool isDataPointupdate = false; 
                    for (int i = 0; i < pointsCount; i++) 
                   
                        if (series.Points[i].Category == createdby) 
                       
                            series.Points[i].YValues[0] += 1; 
                            isDataPointupdate = true; 
                       
                   

                    if(!isDataPointupdate) 
                    
                        series.Points.Add(createdby, 1); 
                   
               
           

this.chart1.Series.Add(series); 

Also, we have attached the modified sample for your reference. Please find the sample from the below link. 

 
For more details, please refer the below link. 

Regards, 
Yuvaraj 



MJ Mark Jayvee April 19, 2021 09:54 AM UTC

Thank you for the response. It is a big help.

Here is another situation. I added a checkbox as shown,

so when I generate my chart it will count all the items. Considering the code below. It counts everything individually. Say total count here =5. What I want if possible is to consider the Id and I am expecting total count = 3. 

Id          Created By     Modified By          Item 1               Properties          Selection(checkbox)

  1              Mark               Zed                         Apple               Red
  1            Mark               Zed                         Apple               Red
  2            Joseph            Claire                      Orange             Orange
  3             Luke               Mark                       Grape               Green
  3             Luke               Mark                        Grape               Green

ChartSeries series1 = new ChartSeries("Line Series", ChartSeriesType.Pie);
            foreach (var item in data)
            {
                object[] record = ((item as RecordEntry).Data as DataRowView).Row.ItemArray;
                string recordItem = record[2] as string; // Item is third column
                var pointsCount = series.Points.Count;

                if (series1.Points.Count == 0)
                {
                    series1.Points.Add(recordItem, 1);
                }
                else
                {
                    bool isDataPointupdate = false;
                    for (int i = 0; i < pointsCount; i++)
                    {
                        if (series1.Points[i].Category == recordItem)
                        {
                            series1.Points[i].YValues[0] += 1;
                            isDataPointupdate = true;
                        }
                    }

                    if (!isDataPointupdate)
                    {
                        series1.Points.Add(recordItem, 1);
                    }
                }
            }

            this.chart2.Series.Add(series1);


YP Yuvaraj Palanisamy Syncfusion Team April 20, 2021 01:39 PM UTC

Hi Mark, 
 
We have achieved your requirement “Add Id in DataTable column and consider this Id, the total data count is 3” with the help of below Linq query. Please find the code example below. 
 
CodeSnippet: 
 
table = new DataTable(); 
DataColumn colid = table.Columns.Add("Id", typeof(int)); 
 
 
var SortedDataList = dataTable.AsEnumerable() 
    .GroupBy(x => x.Field<int>("Id")) 
    .Select(y => y.First()) 
    .ToList(); 
             
foreach (var item in SortedDataList) 
{ 
    series.Points.Add(item.ItemArray[1] as string, 1); 
} 
             
this.chart1.Series.Add(series); 
 
Also, we have attached the modified sample for your reference. Please find the sample from the below link. 
 
 
Regards, 
Yuvaraj. 


Marked as answer

MJ Mark Jayvee April 21, 2021 11:38 AM UTC

Thank you for the response. I notice that the code will eliminate the duplicate so the graph will shows all the count = 1 for each item.

Sorry I think I gave a wrong description and data to try out. below is the actual Ids and Name I have in the sfdatagrid.

in summary, the corrected expected count removing the duplicate ids

Luke = 11
Mark = 1
John = 2

the table show, which will gave wrong count because of duplicate ids

Luke = 29
Mark = 1
John = 2
Ids Created By
155137 Luke
155137 Luke
155156 Luke
155179 Luke
155179 Luke
155179 Luke
155179 Luke
155200 Luke
155216 Luke
155216 Luke
155216 Luke
155216 Luke
155325 Luke
155325 Luke
155325 Luke
155325 Luke
155376 Luke
155376 Luke
155402 Luke
155402 Luke
155431 Mark
155474 Luke
155474 Luke
155474 Luke
166071 Luke
166071 Luke
166071 Luke
166108 Luke
166108 Luke
166108 Luke
166271 John
166309 John

thank you



MJ Mark Jayvee April 23, 2021 10:29 AM UTC

Thank you for the response. I notice that the code will eliminate the duplicate so the graph will shows all the count = 1 for each item.

Sorry I think I gave a wrong description and data to try out. below is the actual Ids and Name I have in the sfdatagrid.

in summary, the corrected expected count removing the duplicate ids

Luke = 11
Mark = 1
John = 2

IdsCreated By
155137Luke
155137Luke
155156Luke
155179Luke
155179Luke
155179Luke
155179Luke
155200Luke
155216Luke
155216Luke
155216Luke
155216Luke
155325Luke
155325Luke
155325Luke
155325Luke
155376Luke
155376Luke
155402Luke
155402Luke
155431Mark
155474Luke
155474Luke
155474Luke
166071Luke
166071Luke
166071Luke
166108Luke
166108Luke
166108Luke
166271John
166309John

thank you



MJ Mark Jayvee April 25, 2021 10:03 AM UTC

Gents finally I found a work around for my requirements. Please mark this closed.



YP Yuvaraj Palanisamy Syncfusion Team April 26, 2021 12:31 PM UTC

Hi Mark,  
 
Thank you for your update. We are glad to know that the issue has been resolved. 
 
Regards, 
Yuvaraj 



MJ Mark Jayvee June 13, 2021 05:17 AM UTC

I implemented this into my project but got a problem like every time I click the button it doesn't clear and redraw the chart. Instead it keeps the original chart and draw new. That is why it looks double.

Is it possible to click a button and showing just 1 chart?

please see the attached. It shows 2 chart when I press the button 2x, It shows 4 when I press 4x. and if I press 100x then chart shows 100x.

Attachment: Pictures_dacdde02.7z


YP Yuvaraj Palanisamy Syncfusion Team June 14, 2021 12:15 PM UTC

Hi Mark, 
 
We have checked your query and we would like to inform that the reported problem resolved by clearing the ChartSeries as like in the below code example.

 
CodeSnippet: 
public LiveChart(RecordsList data, DataTable dataTable) 
 { 
     InitializeComponent(); 
 
     this.chart1.Series.Clear(); 
 
     . . . 
 
} 
 
Also, we have attached the sample for your reference. Please find the sample from the below link. 
 
  
Please let us know if you have any concern. 

Regards,
 
Yuvaraj. 


Loader.
Up arrow icon