1. Home
  2. Forum
  3. WPF
  4. Graphic Creation

Graphic Creation

I would need to create a form that allows me to graphically analyze, by using graphs, the results by comparing different date values.
Every day I register the order situation using, for example, the fields:
- date of the day
- Nro orders
- Amount
- commission amount
- transportation cost
- other fields

my goal would be to give the user the ability to generate graphs by letting them choose the analysis period from the dates displayed in the CheckListbox control.

So I should populate a CheckListBox control from the table where I log the daily sales data.
in the screenShot the control would go to the point shown with the arrow "C"

The fields to be analyzed would be selectable from the combo that in the screenshot is indicated at point "B"
This combo should be populated with the fields "Nro Orders" and / or "Amount" and / or "AmountCommissions" and / or Transport Cost "etc.

The combo highlighted in the screenshot with the "A" point should be populated with the names of the graphical types to be used.

Once the parameters "A", "B" and "C" have been selected, I should be able to view the data, for example, of the "Order Nos", with respect to the dates set in the CheckListBox with the graphic type selected by the "A" combo

Do you think it's possible?
For me it would be an important result that would allow me to solve a big problem.
Can you help me ?

Thank you

Moreno

The form that I have illustrated

Attachment: 20180208_Grafici_561050d.zip

10 Replies
VR Vijayalakshmi Roopkumar Syncfusion Team February 9, 2018 05:34 PM UTC

Hi Misonsan

Thank you for contacting Syncfusion support.

We have checked the reported query and found that your actual requirement is to updated the value according to the different set of categories. We have prepared the simple sample to demonstrate about how to update the value on selecting the different value in CheckListBox and ComboBoxAdv. In our sample, we have updated the value in TextBox based on the selected value in SelectionChanged event of CheckListBox and ComboBoxAdv. Please downlaod the sample for the same from the following location:

Sample: http://www.syncfusion.com/downloads/support/forum/135831/ze/CheckListBox_customization-1351624722 

Regards
Vijayalakshmi V.R. 


MI misonsan February 10, 2018 02:30 PM UTC

Thanks Vijayalakshmi for the example.
It is enlightening to me to handle the first part of the problem, that is, to be able to select the dates, which will form the x-axis component of my chart, and the analysis field that will form the Y-side component of my chart.
In the same way I could select the graph from a combo that contains the name of the available graphs.
At this point I have a couple of questions to answer in order to solve the problem, namely:

Question 1:

After selecting a table, can I process it to populate the selection combo with the field names?
I have vague memories and it seems to me that in Oledb (with access) OpenSchena was used. Is the same for Sql Server? do you have any examples?

Question 2:

The graphs are also identifiable with a name and can then be loaded into a ComboBox to be able to choose the end user in which chart to view the data of the selected fields?

Once the first two fundamental questions have been solved, a crucial factor arises, that is?

Final Question:

Having available the dates on which the data can be visualized (Column X of the graph) and the field of the table representing the Y coordinate of the graph, Can I build in the code behind the graph according to the selected graph model?

VR Vijayalakshmi Roopkumar Syncfusion Team February 13, 2018 12:33 PM UTC


Hi Misonsan

Thank you for the update

Query #1: After selecting a table, can I process it to populate the selection combo with the field names?I have vague memories and it seems to me that in Oledb (with access) OpenSchena was used. Is the same for Sql Server? do you have any examples?

Yes you can populate the selection combo with the field names/ data from the SQL server. Currently, we dont have example to load the data from SQL server.

Query 2: The graphs are also identifiable with a name and can then be loaded into a ComboBox to be able to choose the end user in which chart to view the data of the selected fields?Once the first two fundamental questions have been solved, a crucial factor arises, that is?

Yes, you can able to view the chart based on selected fields of ComboBox in the SelectionChanged event.

Query #3: Having available the dates on which the data can be visualized (Column X of the graph) and the field of the table representing the Y coordinate of the graph, Can I build in the code behind the graph according to the selected graph model?

You can load the desired graph with the available field of the dates. You can fetch details of the fields to represents the X and Y Coordinates of the graph from the Model class.

Regards
Vijayalakshmi V.R. 


MI misonsan February 14, 2018 05:45 PM UTC

Thank you Vijayalakshm for your kind reply
Following some of your example I managed to minut a few lines of code c # and I managed to make the chart you see in the attached screenshot.
I am attaching the XAML code I use and the C # code

I would have to ask for help on a couple of problems.

Problem 1

How can I correctly edit the value on the chart column?
Now it appears truncated

Problem 2

As you can see from the XAML part, the graph is included in a grid.
If edited several times the graph (execution of the method btnComponiGrafico_Click) is not displayed correctly, but is displayed with overlapping writings.
How can I solve the problem ?

 Do you have any examples to create a chart in Code Behind mode?
Maybe even Chart3D
Thank you

Moreno

Part XAML e code behind attached










Attachment: PerSyncfusion_c6bc42f1.zip

MI misonsan February 14, 2018 05:49 PM UTC

I apologize but I had attached two files and I only see 1.
I propose the files in a new zipped folder.
thank you
Moreno

Attachment: errore_Grafico_3e3b0f1a.zip

DS Durgadevi Selvaraj Syncfusion Team February 15, 2018 09:52 AM UTC

Hi Misonsan, 
 
Query 1: How can I correctly edit the value on the chart column?Now it appears truncated 
 
You can resolve this problem by setting LabelPosition as Outer to the chart adornment as like in below code, 
 
Code Snippet[C#] 
ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() 
{ 
                AdornmentsPosition = AdornmentsPosition.Top, 
                LabelPosition = AdornmentsLabelPosition.Outer, 
                ShowLabel = true, 
                HighlightOnSelection = true, 
}; 
 
You can also refer our UG documentation link to know more about positioning adornment, 
 
Query 2:How to set Label format(dd/mm/yyyy) to chart axis 
 
This can be done with the help of LabelFormat property of chart axis as shown in below code, 
 
Code Snippet[C#] 
   CategoryAxis xAxis = new CategoryAxis(); 
    sampleChart.PrimaryAxis = xAxis; 
     xAxis.LabelFormat = "dd/MM/yyyy"; 
 
Please find the output screenshot for above solutions, 
 
 
Query 3: If edited several times the graph (execution of the method btnComponiGrafico_Click) is not displayed correctly, but is displayed with overlapping writings.How can I solve the problem ? 
 
We have analyzed this problem and since we didn’t get full codes from your update to reproduce this issue. However, we have prepared a sample based on provided information and it can be downloaded from below link, 
 
Could you please provide us some more details about this problem or if possible, we request to provide a sample which contains this issue? So that, it would be more helpful for us to provide a solution based on that. 
 
Query 4: Do you have any examples to create a chart in Code Behind mode?
Maybe even Chart3D 
 
We have an UG documentation to create a chart and 3Dchart in code behind and you can refer the guidelines from below links, 
 
 
Also, please find the reference sample for 3D chart from below link, 
 
Please let us know if you have any concerns. 
 
Regards,  
Durgadevi S 


MI misonsan February 16, 2018 04:16 PM UTC

Thanks Durgadevi for the attention to my problem.
Attached I send a test project with the problem reported.
There are other problems listed in the attached screenshots.
Good weekend.
Moreno

Attachment: TestGraficoSyncfusion_1_a2c9d1f3.zip

DS Durgadevi Selvaraj Syncfusion Team February 19, 2018 12:28 PM UTC

Hi Misonsan, 
 
Query 1: Graph types are not displayed, even they are loaded into the ChartList, 
 
In your sample, we have noted that you are using ObservableCollection based on the class “TipoGrafici” as ItemsSource of the ComboBoxAdv control. But, “DisplayMemberPath” and “SelectedValuePath” which you have been set is not present as properties of the class “TipoGrafici”. Due to this, items has not been displayed in the drop down of the control. Now, we have modified the sample by changing the DisplayMemberPath as “NameGrafico” and “SelectedValuePath” as “NameGraficoEdit” which is available in the “TipoGrafici” and it can be downloaded from the below location.  
Query 2 :Even if the data are correctly evaluated, at least it seems to me, the data of the ItemsSource. 
 
We have analyzed this problem in your sample and you have set XBindingPath and YBindingPath for series with wrong property value (i.e., which is actually not present in your ItemsSource) so that the chart data has not been displayed properly. We have modified the provided sample by setting proper BindingPath  value to the series(which is available in your ItemsSource) and its working fine now. 
 
Please refer the output screenshot for the above, 
 
 
You can refer our UG documentation link to know more about setting data source to the series, 
 
Query 3:if I press the “Dial” button several times, the graph in the grid displayed in dirty way. 
 
In the provided sample, you have added SfChart to the grid for every button click. So, the chart gets added again and again in the grid and looks bad. To avoid it, clear the previously added SfChart and add again as like in below code, 
 
  
Code Snippet[C#] 
private void EditoGraficoColumn() 
{ 
                  grid.Children.Clear(); 
                      // Create a SfChart 
                      SfChart sampleChart = new SfChart(); 
                       
                      //Add the legend to the chart 
                      sampleChart.Legend = new ChartLegend(); 
 
                      // Add the axes to the chart 
                      CategoryAxis xAxis = new CategoryAxis(); 
                       
                    xAxis.LabelFormat = "dd/MM/yyyy"; 
                    sampleChart.PrimaryAxis = xAxis; 
 
                    NumericalAxis yAxis = new NumericalAxis(); 
                    sampleChart.SecondaryAxis = yAxis;                
 
                      ColumnSeries series1 = new ColumnSeries(); 
                      series1.ItemsSource = GiornataList; 
                      series1.XBindingPath = "XValue"; 
                      series1.YBindingPath = "YValue1";                
                      sampleChart.Series.Add(series1); 
                       
                      //Add the chart to grid. 
                      grid.Children.Add(sampleChart); 
} 
 
 
Please find the modified sample for above query 2 and query 3 from below location, 
Sample: http://www.syncfusion.com/downloads/support/forum/135831/ze/Modified_Chart_Sample2091895842.zip 
Please let us know if you need any further assistance on this. 
 
Regards, 
Durgadevi S 
  
  
  


MI misonsan February 20, 2018 10:02 AM UTC

good day Durgadevi
Thanks for the reply.
Everything works magically and I managed to give a professional touch to the form.
You are a qualified and courteous professional.
Good day
Moreno

DS Durgadevi Selvaraj Syncfusion Team February 20, 2018 11:05 AM UTC

Hi Misonsan, 
Thanks for your appreciation and we are glad to know that your problem has been resolved. 
Please get back to us if you need any further assistance on this. 
Regards,   
Durgadevi S 


Loader.
Up arrow icon