NETTutorial10

From Steema Software Reference Wiki
Jump to: navigation, search

Net.png

Contents page
Previous | Next

Tutorial10 - Walk-through ASP.NET examples


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.


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;


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>");
}



PREVIOUS

NEXT


© 1998-2019 Steema Software SL. All rights reserved.