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,
SIGN IN To post a reply.
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.
Attachment: datavisualisation_c77219ac.7z
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.
Sample: https://www.syncfusion.com/downloads/support/forum/163629/ze/MultiplePieChartSample1348363422
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.
Attachment: error_4bdbd4ca.7z
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.
Sample: https://www.syncfusion.com/downloads/support/forum/163629/ze/PieChart_ExportSample1495150044
Regards,
Yuvaraj.
MJ
Mark Jayvee
April 14, 2021 08:54 AM UTC
Thank you for the response.
Attachment: compressionerror_5bb045a6.7z
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
| 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 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.
Attachment: Pictures_dacdde02.7z
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.
Sample: https://www.syncfusion.com/downloads/support/forum/163629/ze/DataTable_ColumnChart-232161406
Please let us know if you have any concern.
Regards,
Yuvaraj.
SIGN IN To post a reply.
- 19 Replies
- 2 Participants
- Marked answer
-
MJ Mark Jayvee
- Mar 18, 2021 08:51 AM UTC
- Jun 14, 2021 12:15 PM UTC