WinForms Charts How to Invoke the Chart Wizard at Runtime

Transcription

1 WinForms Charts How to Invoke the Chart Wizard at Runtime As you may already know, most DevExpress WinForms Controls come with extremely powerful and easy-to-use designers that help you customize them within Visual Studio. But it doesn t end there, some of the designers are available independently as well and can be invoked at runtime! The XtraCharts control for WinForms enables you to offer your end-users the same powerful designtime customization options that you have come to enjoy and expect from our products. In this video, you will learn how to invoke the Chart Wizard to customize and create a new data bound chart at runtime. So let s get started 1. I ll start with a new WinForms application. 2. For the purpose of this example, I m going to work with a small list of data. 3. I switch over to code view.

2 4. In the Form1.cs file, I add the following small class. public class CountryInfo public CountryInfo(string name, int population) this.name = name; this.population = population; private string name; public string Name get return name; set name = value; private int population; public int Population get return population; set population = value; 5. Next, I ll create a class-level list object within the Form1 class. List<CountryInfo> list = new List<CountryInfo>(); 6. Inside the form s load event, I ll add the following code to populate the list with some custom data. list.addrange(new CountryInfo[] new CountryInfo("Bahamas", ), new CountryInfo("Bahrain", ), new CountryInfo("Bangladesh", ), new CountryInfo("Barbados", ), new CountryInfo("Brunei", ), new CountryInfo("Bulgaria", ) ); 7. I switch back to design-view. 8. Here I want to add a button onto the form that when clicked will invoke the Chart Wizard and allow the end-user to customize and create a new chart at runtime. 9. From the Toolbox, I drag and drop a SimpleButton onto the form.

3 10. I set its Text property to Create New Chart. 11. I double-click on the button to create a handler for its Click Event. 12. Before going any further, I need to add references to the DevExpress.XtraCharts and DevExpress.XtraCharts.Wizard namespaces. 13. I go back to the event handler. 14. First, I create a ChartControl object. 15. I set its DataSource property to list 16. This is the custom list of data I created earlier. 17. Next, I create a new ChartWizard and specify the chart instance for which this wizard will be created. 18. I ll call its ShowDialog method to display the wizard. 19. Finally, I need to add the code to display the actual chart when the wizard has completed. 20. For this, I create a new form. 21. I ll use the Controls.Add method to add the chart control to its Controls Collection. 22. Additionally, I set the chart s Dock property to DockStyle.Fill so that it fills the entire client area. 23. And the Show method of the form object is called to display the form. 24. And that s it! ChartControl chart = new ChartControl(); chart.datasource = list; ChartWizard cwiz = new ChartWizard(chart); cwiz.showdialog(); Form form = new Form(); form.controls.add(chart); chart.dock = DockStyle.Fill; form.show();

4 25. I run the application to see the results. 26. I click on the Create New Chart button and the DevExpress Chart Wizard is invoked. 27. You can see all the chart types available to the end-user. 28. For the purposes of this example, I ll select the Bar chart. 29. Now I need to configure the chart and how it is going to display the data. 30. From the Construction group on the left, I click on the Series link. 31. This brings up the Series Editor on the right. 32. Since I don t need two series for this demo, I ll select the second one and click on Remove. 33. I switch to the Data page. 34. I click on the Series Binding tab to specify the Argument and Value fields for the chart.

5 35. I set Argument property to the Name field. 36. The Value property is set to the Population field. 37. And that s it! 38. I can go on and further customize all the visual aspects of my chart, but to keep this video simple, I ll finish here. 39. I click Finish to complete the wizard. 40. You can see a new chart created based on the settings I specified using the Chart Wizard at runtime! For more information, please refer to the XtraCharts Documentation ( Thanks for watching and thank you for choosing DevExpress!