Dynamic ToolTip for Chart with Spread for ASP.Net

Showing a chart with a SpreadSheet has always been in demand. It actually makes data interpretation a lot easier for the end user. Spread provided support for Charts with version 5. Now we have moved to Spread version 7 and charts for Spread have always been improved with each release. In this blog I am going to tell you how we can make our chart a bit interactive with tool tips. Charts are rendered as images within SpreadSheets so we would need to add HTTPHandlers for this to work properly on our web page. Something like:

   <httpHandlers>  
      <add path="FpChart.axd" verb="*" type="FarPoint.Web.Chart.ChartImageHttpHandler"  
      validate="true" />  
   </httpHandlers  

Here in this example I am going to use SpreadChart and not FpChart as a stand alone chart. So the code to add a chart to SpreadSheet is :

FpSpread1.Sheets[0].AddChart(0, 0, typeof(FarPoint.Web.Chart.BarSeries), 600, 600, 50, 50,    FarPoint.Web.Chart.ChartViewType.View3D, true);  

Now the question is how we can enable tool tip for this chart? This is going to be really simple and easy. All we need is to set is Chart's AutoGenerateMapAreaToolTip property to true. This property allows generating information about map area and shows it automatically as tool tip on mouse hover. Along with this we also need to set RenderMapArea property for Spread Chart to true so that the chart 's image map is rendered as output.

   FpSpread1.Sheets[0].Charts[0].RenderMapArea = true;  
   FpSpread1.Sheets[0].Charts[0].AutoGenerateMapAreaToolTip = true;  

I would like to mention about one more important property here for SpreadChart, i.e. HotSpotMode. This property decides the default behavior for System.Web.UI.WebControls.HotSpot objects of Spread Chart when the System.Web.UI.WebControls.HotSpot objects are clicked. Value for this property can be one of the System.Web.UI.WebControls.HotSpotMode enumeration values like : Inactive, PostBack, Navigate and NotSet. By default it is NotSet. Incase of showing tool tip we need to set it as Inactive so that no other action is performed when a region is clicked in chart.

   FpSpread1.Sheets[0].Charts[0].HotSpotMode = HotSpotMode.Inactive;  

The final outcome is similar to one showed in this GIF image. You may also download the sample applications given below for clear demonstration. Download C# Sample Download VB.Net Sample