WinForms Charts How to Determine the Chart Element underneath. the Mouse Cursor and Display Series Point s Data in a Tooltip

Transcription

1 WinForms Charts How to Determine the Chart Element underneath the Mouse Cursor and Display Series Point s Data in a Tooltip As a developer, sometimes you need to make your application more interactive. This doesn t always involve adding extra features, but more like extending existing ones. So you have an application where you are using the DevExpress Chart Control to visualize some data. This does the job, but perhaps it would be easier to read and identify its elements as well as the Series points if they were displayed as the user hovered over them. In this video, you ll learn how to identify the chart element located under the mouse cursor and also display the series point s data in a tooltip. So let s get started 1. Starting from a new WinForms Application, I add a Chart Control onto the form. 2. The Chart Wizard is invoked automatically. 3. I switch over to the Series page and remove the two automatically generated series. 4. I will be creating one later from code. 5. I click Finish to close the wizard. 6. I select the empty chart control and set its Dock property to Fill. 7. For the purpose of this example, I m going to work with a small list of data. 8. I right-click on the form and switch to code view.

2 9. 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; 10. Within the Form s Load Event, I create a list object. 11. Then, I manually populate it with some sample data and bind it to the Chart Control. List<CountryInfo> list = new List<CountryInfo>(); list.addrange(new CountryInfo[] new CountryInfo("Bahamas", ), new CountryInfo("Bahrain", ), new CountryInfo("Bangladesh", ), new CountryInfo("Barbados", ), new CountryInfo("Brunei", ), new CountryInfo("Bulgaria", ) ); Series series1 = new Series("New Series", ViewType.Bar); series1.argumentdatamember = "Name"; series1.valuedatamembers[0] = "Population"; chartcontrol1.series.add(series1); chartcontrol1.datasource = list; 12. Notice that I need to create a reference to the DevExpress.XtraCharts namespace. 13. I switch to design view.

3 14. From the Toolbox, I drag and drop a textedit control onto the form and dock it to the bottom. 15. I will be using this to display the element name located under the mouse cursor. 16. To do this, I select the ChartControl and create a handler for its MouseMove event. 17. This event is triggered when the mouse cursor is moved over the control. 18. Here, I create a new CalcHitInfo object to calculate the hit information for the point which the mouse pointer is currently hovering over. 19. Then I call the HitTest property of the ChartHitInfo object and set the Text property of the textedit control to display the element name. ChartHitInfo hi = chartcontrol1.calchitinfo(new System.Drawing.Point(e.X, e.y)); textedit1.text = hi.hittest.tostring(); 20. And that s it! 21. I run the application to see the results. 22. You can see that as I hover over each part of the chart control, the name of that element is displayed in the textbox docked at the bottom of the application. 23. But if you recall, I also wanted to display the value of each series point in a tooltip as the mouse is hovered over them. 24. I close the application and return to Visual Studio. 25. I switch to design view. 26. From the Toolbox, I ll drag and drop a ToolTipController onto the form. 27. This will be used to display the tooltip at runtime. 28. Next, I select the grid and create a handler for its ObjectHotTracked event. 29. This event is raised before a chart s element is hot-tracked. 30. First, I ll create a SeriesPoint object and initialize it to the event s AdditionalObject property.

4 31. This property provides access to the object which is in some way related to the object being hit. 32. In this case, it is the SeriesPoint object. 33. Next, if the point is not null, I ll create a new instance of the CountryInfo class. 34. If you recall, that is the class I created at the beginning of this video. 35. I ll assign the Population value of the current point to a new string. 36. Then the tooltip is displayed using its ShowHint method and passing on the string as a parameter. 37. Now, if the cursor is not hovering over a SeriesPoint, then the point is null. 38. In this case, I ll create an else statement and hide the tooltip. SeriesPoint point = e.additionalobject as SeriesPoint; if (point!= null) CountryInfo cinfo = (CountryInfo)point.Tag; string s = "Country\'s Population = " + cinfo.population.tostring(); tooltipcontroller1.showhint(s); else tooltipcontroller1.hidehint(); 39. And I m done! 40. I run the application again.

5 41. This time you can see that as I hover over each bar, the series value is displayed in a tooltip underneath the mouse cursor. For more information, please refer to the XtraCharts Documentation ( Thanks for watching and as always, thank you for choosing DevExpress!