Tutorial10 - Walk-through ASP.NET examples

Tutorial 10 - Walk-through ASP Examples
Contents

Web Form Examples

See the TeeChartForNET Virtual Share installed with TeeChart for a working example of WebForm and other ASP.NET examples written in C#.NET and VB.NET.

Web Form Examples

How to create a dynamic WebChart

Create a new WebForm application on your server and make sure that it runs correctly with nothing on the form.

From the Steema ToolBox tab, select a WebChart object and drag it across the WebForm.

Select the new WebChart1 object and in the Properties Window navigate to the TempChart property and change it from File to Session. This will mean that all temporary charts generated by the WebChart will be stored in a session variable rather than in a temporary folder (see Tutorial 9 for further details).

In order to recover the temporary charts from the session variable, we will add in a new Form with some simple code in it. Right click on your ASP.NET project and add in a new WebForm, naming it GetChart.aspx. Now make sure the Page_Load event looks like this:

private void Page_Load(object sender, System.EventArgs e) 
{ 
     string chartName=Request.QueryString["Chart"];               
     if (Session[chartName]!=null)              
    {                  
        System.IO.MemoryStream chartStream = new System.IO.MemoryStream();              
        chartStream=((System.IO.MemoryStream)Session[chartName];                  
        Response.OutputStream.Write(chartStream.ToArray(),0,(int)chartStream.Length);                  
        chartStream.Close();                  
        Session.Remove(chartName);              
    }  
} 

Now we can move on to producing some basic HotSpot functionality; in the Form_Load event of our original WebForm, we can add in code similar to the following:

private void Page_Load(object sender, System.EventArgs e) 
{ 
     //Let's work with the Chart object for convenience 
     Steema.TeeChart.Chart Chart1 = WebChart1.Chart; 
 
     //Add in a series and fill it 
     Chart1.Aspect.View3D = false; 
     Steema.TeeChart.Styles.Bubble bubble1 = new Steema.TeeChart.Styles.Bubble(Chart1); 
     bubble1.FillSampleValues(); 
 
     //Add a SeriesToolTip to the Chart 
     Steema.TeeChart.Tools.SeriesHotspot seriesHotSpot1 = new Steema.TeeChart.Tools.SeriesHotspot(Chart1); 
     //Steema.TeeChart.Styles.MapAction.Mark is the default value 
     seriesHotSpot1.MapAction = Steema.TeeChart.Styles.MapAction.Mark; 
} 

Executing this code and moving the mouse over the bubbles will show you the values of the series marks, in this case, the YValues.

To add zoom functionality to the Chart, all we need to do is to add in a zoomtool and some simple code to control the zoom states:

 
private void Page_Load(object sender, System.EventArgs e) 
{ 
     //Let's work with the Chart object for convenience 
     Steema.TeeChart.Chart Chart1 = WebChart1.Chart; 
 
     //Add in a series and fill it 
     Chart1.Aspect.View3D = false; 
     Steema.TeeChart.Styles.Bubble bubble1 = new Steema.TeeChart.Styles.Bubble(Chart1); 
     bubble1.FillSampleValues(); 
 
     //Add a SeriesToolTip to the Chart 
     Steema.TeeChart.Tools.SeriesHotspot seriesHotSpot1 = new Steema.TeeChart.Tools.SeriesHotspot(Chart1); 
     //Steema.TeeChart.Styles.MapAction.Mark is the default value 
     seriesHotSpot1.MapAction = Steema.TeeChart.Styles.MapAction.Mark; 
 
     //Add a ZoomTool to the Chart 
     Steema.TeeChart.Tools.ZoomTool zoomTool1 = new Steema.TeeChart.Tools.ZoomTool(Chart1); 
 
     // *************** Code for zoom support *************** 
     //check whether zoom request is being sent 
     CheckZoom(WebChart1); 
} 
 
private void CheckZoom(WebChart wChart) 
{ 
     ArrayList zoomedState=(ArrayList)Session[wChart.ID+"Zoomed"]; 
     zoomedState=((Steema.TeeChart.Tools.ZoomTool)wChart.Chart.Tools[0]).SetCurrentZoom(Request,zoomedState); 
     if (zoomedState==null) 
        Session.Remove(wChart.ID+"Zoomed"); 
     else 
        Session.Add(wChart.ID+"Zoomed",zoomedState); 
} 

We now have an interactive chart which responds to mouseover and mouseclick events. The SeriesHotSpot, in this case associated with a bubble series, will display the value of the Series Marks when the mouse is moved over it. However, via the MapAction property, we can customize the behavior of the SeriesHotSpot when the mouse is moved over it. For example, we may want a click on one of the bubbles to take us to a specified URL; this is perfectly possible by setting the MapAction property to URL, linking up the SeriesHotSpot event and specifying the URL in it:

Within the Page_Load event:

seriesHotSpot1.MapAction = Steema.TeeChart.Styles.MapAction.URL; 
seriesHotSpot1.GetHTMLMap += new Steema.TeeChart.Tools.SeriesHotspotEventHandler(seriesHotSpot1_GetHTMLMap); 
 

And the GetHTMLMap method:

private void seriesHotSpot1_GetHTMLMap(Steema.TeeChart.Tools.SeriesHotspot sender, Steema.TeeChart.Tools.SeriesHotspotEventArgs e)  
{ 
     e.PointPolygon.Title = "Go to the Steema web"; 
     e.PointPolygon.HREF = "http://www.steema.com"; 
     e.PointPolygon.Attributes = "target='_blank'"; 
} 

Setting the MapAction property to Script effectively allows you define any behavior you like. TeeChart provides you some useful built in scripts which can be called via the HelperScripts enum. For example, to open an image file when the mouse was over one of the bubble series points we would add the following code:

Within the Page_Load event:

seriesHotSpot1.MapAction = Steema.TeeChart.Styles.MapAction.Script; 
seriesHotSpot1.HelperScript = Steema.TeeChart.Tools.HotspotHelperScripts.Annotation; 

The second line here ensures that the relevant JavaScript is added to the client browser.

And the GetHTMLMap method:

private void seriesHotSpot1_GetHTMLMap(Steema.TeeChart.Tools.SeriesHotspot sender, Steema.TeeChart.Tools.SeriesHotspotEventArgs e)  
{ 
     e.PointPolygon.Attributes=String.Format(Steema.TeeChart.Texts.HelperScriptAnnotation, "<IMG SRC=Images/myimage.jpg>"); 
} 

To customize the behavior even further would simply mean designing your own JavaScript routines, adding them to the client browser and then calling them by adding them and their parameters to e.PointPolygon.Attributes.