Interactivity (Chart Controls)
Depending on the Chart control you are using, you can use different features and techniques to make your Chart control interactive.
Interactivity in ASP.NET
In the Chart control for ASP.NET, you can use client-side image maps for a richer user experience in the interactivity of your charts. To enable image maps, set the IsMapEnabled property to True.
Then, you can do one or more of the following:
Specify the map area properties in a specific element of the Chart control. You can do this in most elements, such as Axis, Series, DataPoint, Annotation, StripLine, LegendCellColumn, LegendItem, and LegendCell.
In each of these elements, use the Tooltip and Url properties. They correspond to the alt and href attributes in the HTML MAP tag. To specify additional map area attributes, use the MapAreaAttributes property. To specify multiple attributes, separate them with spaces. For example, you can specify the following code in this property to register a client-side script that displays another chart as a pop-up tooltip:
onmouseover=\"DisplayTooltip(' <img src=DetailedChart.aspx />');\"Note that script above requires that the Chart control in DetailedChart.aspx uses binary streaming as the render type. For more information, see Chart Image Rendering.
Manually define map areas in your chart control using the MapAreas collection property (a collection of MapArea objects).
You can define in each MapArea object the shape, coordinates, URL, and tooltip of the map area. They correspond to the following respective attributes in the HTML MAP tag: shape, coord, href, and alt.
To specify additional map area attributes that do not have a corresponding property in the MapArea object, specify it in the MapAreaAttributes property.
Use the PostBackValue property in MapArea or any of the Chart control elements mentioned above to define a post back value to ImageMapEventHandler, and then retrieve the post back value via the PostBackValue property when the event is triggered.
Note
You can use applicable keywords in all these attributes. For more information, see Keywords.
The following code toggles a legend cell's image between selected and cleared every time the user clicks on the legend cell.
Imports System.Web.UI.DataVisualization.Charting
...
' Set the legend cell to an image showing selection cleared
Chart1.Legends(0).CustomItems(0).Cells(0).Image = "./cleared.png"
Chart1.Legends(0).CustomItems(0).Cells(0).PostBackValue = "item 1"
' Add an ImageMapEventHandler to the Chart.Click event
Me.Chart1.Click += New ImageMapEventHandler(Me.Chart1_Click)
...
' Change the selection image when the user clicks on the legend cell
Private Sub Chart1_Click(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ImageMapEventArgs)
If e.PostBackValue = "item 1" Then
Dim cell As LegendCell = Chart1.Legends(0).CustomItems(0).Cells(0)
cell.Image = (cell.Image = "./cleared.png") ? "./selected.png" : "./cleared.png"
End If
End Sub
using System.Web.UI.DataVisualization.Charting;
...
// Set the legend cell to an image showing selection cleared
Chart1.Legends[0].CustomItems[0].Cells[0].Image = "./cleared.png";
Chart1.Legends[0].CustomItems[0].Cells[0].PostBackValue = "item 1";
// Add an ImageMapEventHandler to the Chart.Click event
this.Chart1.Click += new ImageMapEventHandler(this.Chart1_Click);
...
// Change the selection image when the user clicks on the legend cell
private void Chart1_Click(object sender, System.Web.UI.WebControls.ImageMapEventArgs e)
{
if (e.PostBackValue == "item 1")
{
LegendCell cell = Chart1.Legends[0].CustomItems[0].Cells[0];
cell.Image = (cell.Image == "./cleared.png") ? "./selected.png" : "./cleared.png";
}
}
Interactivity in Windows Forms
In the Chart control for Windows Forms, you use mouse events and the HitTest method to enable chart interactivity. You can also use cursors, scrolling, and zooming. For more information, see Cursors, Zooming, and Scrolling.
The following example code uses the OnMouseMove event to highlight a data point when the cursor moves over it.
Me.Chart1.MouseMove += New System.Windows.Forms.MouseEventHandler(Me.Chart1_MouseMove)
...
Private Sub Chart1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs)
' Call HitTest
Dim result As HitTestResult = Chart1.HitTest(e.X,e.Y)
' Reset Data Point Attributes
Dim point As DataPoint
For Each point In Chart1.Series(0).Points
poInteger.BackSecondaryColor = Color.Black
poInteger.BackHatchStyle = ChartHatchStyle.None
poInteger.BorderWidth = 1
Next
' If the mouse if over a data point
If result.ChartElementType = ChartElementType.DataPoint Then
' Find selected data point
Dim point As DataPoint = Chart1.Series(0).Points(result.PointIndex)
' Change the appearance of the data point
poInteger.BackSecondaryColor = Color.White
poInteger.BackHatchStyle = ChartHatchStyle.Percent25
poInteger.BorderWidth = 2
Else
' Set default cursor
Me.Cursor = Cursors.Default
End If
End Sub
this.Chart1.MouseMove += new System.Windows.Forms.MouseEventHandler(this.Chart1_MouseMove);
...
private void Chart1_MouseMove(object sender, System.Windows.Forms.MouseEventArgs e)
{
// Call HitTest
HitTestResult result = Chart1.HitTest( e.X, e.Y );
// Reset Data Point Attributes
foreach( DataPoint point in Chart1.Series[0].Points )
{
point.BackSecondaryColor = Color.Black;
point.BackHatchStyle = ChartHatchStyle.None;
point.BorderWidth = 1;
}
// If the mouse if over a data point
if(result.ChartElementType == ChartElementType.DataPoint)
{
// Find selected data point
DataPoint point = Chart1.Series[0].Points[result.PointIndex];
// Change the appearance of the data point
point.BackSecondaryColor = Color.White;
point.BackHatchStyle = ChartHatchStyle.Percent25;
point.BorderWidth = 2;
}
else
{
// Set default cursor
this.Cursor = Cursors.Default;
}
}
See Also
Reference
System.Windows.Forms.DataVisualization.Charting
System.Web.UI.DataVisualization.Charting