Difference between revisions of "XamarinAndroidTutorial6"

From Steema Software Reference Wiki
Jump to: navigation, search
(Choose Axes for a Series)
(Connecting Series)
 
(13 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
|- valign="TOP"
 
|- valign="TOP"
 
|
 
|
[[Image:XamarinAndroidHeaderLogo.gif]]
+
[[Image:net_android.png|200px]]
| align="RIGHT" | <font size="2">  [[Xamarin.AndroidTutorials|Contents page]]<br />[[Xamarin.AndroidTutorial5|Previous]] | [[Xamarin.AndroidTutorial7|Next]]
+
| align="RIGHT" | <font size="2">  [[XamarinAndroidTutorials|Contents page]]<br />[[XamarinAndroidTutorial5|Previous]] | [[XamarinAndroidTutorial7|Next]]
  
 
</font>
 
</font>
 
| width="20" |
 
| width="20" |
 
|}
 
|}
 
+
{{DISPLAYTITLE:<span style="position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);">{{FULLPAGENAME}}</span>}}
 +
= Tutorial 6 - Working with Series =
 
__TOC__
 
__TOC__
 
<br>
 
<br>
 
+
== Series Types<br /> ==
== Tutorial6 - Working with Series ==
+
 
+
=== Series Types<br /> ===
+
  
 
The TChart Series class is the common ancestor for all Series types. When using the TeeChart online help to obtain help on any Series Type, follow the link to the Series class located in the list of inherited types and then click on Series members where a list of all inherited properties and methods will be included.  
 
The TChart Series class is the common ancestor for all Series types. When using the TeeChart online help to obtain help on any Series Type, follow the link to the Series class located in the list of inherited types and then click on Series members where a list of all inherited properties and methods will be included.  
====Series Class structure====
+
===Series Class structure===
 
As a little background on the structure of the TeeChart Type Library, here is an explanation of the Series classes and interfaces. The diagram below shows the relationship between TeeChart Series classes. All classes derive from the generic "Series" class and thus share "Series" properties and methods. Several abstract Classes derive from Series (Custom3DSeries, CustomBarSeries and CircledSeries), these are highlighted in grey and their interfaces are not directly accessible for programming, their characteristics are inherited by their descendant Series types. All derived Series (in orange) are accessible in the TeeChart gallery for inclusion in your Chart. TeeChart Series, derived in this way, allow programmable access to the inherited properties and methods via a common index structure (see example code later in this section). <br /><br />[[Image:seriestree.png]]<br />You can create and add new and differing series types to the same TChart at runtime. <br /><br />
 
As a little background on the structure of the TeeChart Type Library, here is an explanation of the Series classes and interfaces. The diagram below shows the relationship between TeeChart Series classes. All classes derive from the generic "Series" class and thus share "Series" properties and methods. Several abstract Classes derive from Series (Custom3DSeries, CustomBarSeries and CircledSeries), these are highlighted in grey and their interfaces are not directly accessible for programming, their characteristics are inherited by their descendant Series types. All derived Series (in orange) are accessible in the TeeChart gallery for inclusion in your Chart. TeeChart Series, derived in this way, allow programmable access to the inherited properties and methods via a common index structure (see example code later in this section). <br /><br />[[Image:seriestree.png]]<br />You can create and add new and differing series types to the same TChart at runtime. <br /><br />
  
Line 31: Line 29:
 
   <br /> <br />[[Image:multiseries.png]] <br />
 
   <br /> <br />[[Image:multiseries.png]] <br />
  
====Choosing a Series Type====
+
===Choosing a Series Type===
 
Choosing a Series Type for a Chart will very much depend on your own requirements for the Chart. There are occasions however, when due to the number of variables to plot, the choice of Chart may depend on which Series types support the number of input variables. The following table shows the number of variables allowed by each Series type. <br /><br />[[Image:seriestable.png]]<br /><br />Labelling can be used to extend the value of a 2 variable Series Type. See the example below that uses 3 instances of the Bar Series type in the same Chart. <br />'''Example'''<br />Uses Bar Series types <br /><br />Product code     Month     Quantity produced <br />10                    Jan         300 <br />10                    Feb         325 <br />10                    Mar         287 <br />12                    Jan         175 <br />12                    Feb         223 <br />12                    Mar         241 <br />14                    Jan         461 <br />14                    Feb         470 <br />14                    Mar         455 <br /><br />In its simplest form, the data produces the following Chart, grouping the information by month: <br /><br />[[Image:XAseries1.png]]<br />Code: <br />
 
Choosing a Series Type for a Chart will very much depend on your own requirements for the Chart. There are occasions however, when due to the number of variables to plot, the choice of Chart may depend on which Series types support the number of input variables. The following table shows the number of variables allowed by each Series type. <br /><br />[[Image:seriestable.png]]<br /><br />Labelling can be used to extend the value of a 2 variable Series Type. See the example below that uses 3 instances of the Bar Series type in the same Chart. <br />'''Example'''<br />Uses Bar Series types <br /><br />Product code     Month     Quantity produced <br />10                    Jan         300 <br />10                    Feb         325 <br />10                    Mar         287 <br />12                    Jan         175 <br />12                    Feb         223 <br />12                    Mar         241 <br />14                    Jan         461 <br />14                    Feb         470 <br />14                    Mar         455 <br /><br />In its simplest form, the data produces the following Chart, grouping the information by month: <br /><br />[[Image:XAseries1.png]]<br />Code: <br />
  
Line 43: Line 41:
 
  [C#] <br />      tChart1.Aspect.View3D = false; <br /> <br />      line1.Add(600, "Jan"); <br />      line1.Add(715, "Feb"); <br />      line1.Add(676, "Mar"); <br />      line1.Title = "Product10 Stock"; <br />      line1.Color = bar1.Color; <br /> <br />      line2.Add(245, "Jan"); <br />      line2.Add(270, "Feb"); <br />      line2.Add(315, "Mar"); <br />      line2.Title = "Product10 Stock"; <br />      line2.Color = bar2.Color; <br /> <br />      line3.Add(800, "Jan"); <br />      line3.Add(755, "Feb"); <br />      line3.Add(835, "Mar"); <br />      line3.Title = "Product10 Stock"; <br />      line3.Color = bar3.Color;
 
  [C#] <br />      tChart1.Aspect.View3D = false; <br /> <br />      line1.Add(600, "Jan"); <br />      line1.Add(715, "Feb"); <br />      line1.Add(676, "Mar"); <br />      line1.Title = "Product10 Stock"; <br />      line1.Color = bar1.Color; <br /> <br />      line2.Add(245, "Jan"); <br />      line2.Add(270, "Feb"); <br />      line2.Add(315, "Mar"); <br />      line2.Title = "Product10 Stock"; <br />      line2.Color = bar2.Color; <br /> <br />      line3.Add(800, "Jan"); <br />      line3.Add(755, "Feb"); <br />      line3.Add(835, "Mar"); <br />      line3.Title = "Product10 Stock"; <br />      line3.Color = bar3.Color;
  
====Adding data to a Series====
+
===Adding data to a Series===
 
Most Series types use the 24 generic overloads of the Add method for adding data. There are some exceptions, see the following table: <br /><br />[[Image:seriestable2.png]]<br /><br />Note that all the Series specific Add methods, with the exception of the ShapeSeries, are automatically added as further overloads to the generic Add method and so are accessed from there (e.g. candleSeries1.Add(new DateTime(2002,11,27),100,400,200,300);).  
 
Most Series types use the 24 generic overloads of the Add method for adding data. There are some exceptions, see the following table: <br /><br />[[Image:seriestable2.png]]<br /><br />Note that all the Series specific Add methods, with the exception of the ShapeSeries, are automatically added as further overloads to the generic Add method and so are accessed from there (e.g. candleSeries1.Add(new DateTime(2002,11,27),100,400,200,300);).  
====Colour====
+
===Colour===
 
Colour may be manually added for a point when adding the point <br />Example  
 
Colour may be manually added for a point when adding the point <br />Example  
  
Line 58: Line 56:
 
  [C#] <br />bar1.Add(45, "My Transparent Bar",  Color.Transparent);
 
  [C#] <br />bar1.Add(45, "My Transparent Bar",  Color.Transparent);
  
====Deleting data points from a Series====
+
===Deleting data points from a Series===
 
Use Series.Delete to delete a point from a Series. Series.Delete has two overloads: <br />
 
Use Series.Delete to delete a point from a Series. Series.Delete has two overloads: <br />
  
Line 75: Line 73:
 
Series.Clear clears all points from a Series.
 
Series.Clear clears all points from a Series.
  
====Adding Null points to a Series====
+
===Adding Null points to a Series===
 
Series.Add has three overloads which allow you to add a Null point to a Series: <br />
 
Series.Add has three overloads which allow you to add a Null point to a Series: <br />
 
  //Adds a new null (transparent) point. <br />public Int32 Add() <br /><br />//Adds a new null point with specified text. <br />public Int32 Add(System.String) <br /><br />//Adds a new null point at a specified x value with specified text <br />public Int32 Add(System.Double, System.String) <br /><br />
 
  //Adds a new null (transparent) point. <br />public Int32 Add() <br /><br />//Adds a new null point with specified text. <br />public Int32 Add(System.String) <br /><br />//Adds a new null point at a specified x value with specified text <br />public Int32 Add(System.Double, System.String) <br /><br />
Line 84: Line 82:
 
Please look up the other two overloads in the TeeChart Help File for examples of their use.
 
Please look up the other two overloads in the TeeChart Help File for examples of their use.
  
=== Mixing Series Types on a Chart<br /> ===
+
== Mixing Series Types on a Chart<br /> ==
  
 
TeeChart Pro offers an empty Chart Canvas as a backdrop to data Series. That means that no Chart types are predefined. You define the Chart type you require as a mix of the Series Types that you wish to display. Due to the specialised nature of some Series types it is impractical to mix that Series type with another on a Chart. TeeChart helps you by greying out unsuitable Series types in the Chart Gallery when you arrive to add a new Series. There is no practical limit to the number of Series that you can put in one Chart.
 
TeeChart Pro offers an empty Chart Canvas as a backdrop to data Series. That means that no Chart types are predefined. You define the Chart type you require as a mix of the Series Types that you wish to display. Due to the specialised nature of some Series types it is impractical to mix that Series type with another on a Chart. TeeChart helps you by greying out unsuitable Series types in the Chart Gallery when you arrive to add a new Series. There is no practical limit to the number of Series that you can put in one Chart.
====Adding New Series====
+
===Adding New Series===
 
Add a Series by code. <br />Example
 
Add a Series by code. <br />Example
  
Line 94: Line 92:
 
<br />Series are added to the SeriesList and are accessible by Index, TChart1.Series(Index), beginning with 0 for the first Series. TeeChart Pro adds a default name for the Series (Series 0, Series 1, etc.). You may modify the name using the Series.Title property.
 
<br />Series are added to the SeriesList and are accessible by Index, TChart1.Series(Index), beginning with 0 for the first Series. TeeChart Pro adds a default name for the Series (Series 0, Series 1, etc.). You may modify the name using the Series.Title property.
  
====Choose Axes for a Series====
+
===Choose Axes for a Series===
 
Series added to the Chart will automatically take the Left and Bottom axes as their reference axes. There are 4 axes available, Top, Left, Bottom and Right. By code, changing the axes will look like this: <br /><br />
 
Series added to the Chart will automatically take the Left and Bottom axes as their reference axes. There are 4 axes available, Top, Left, Bottom and Right. By code, changing the axes will look like this: <br /><br />
  
 
  [C#] <br />bar1.VertAxis = Steema.TeeChart.Styles.VerticalAxis.Right; <br />bar1.HorizAxis = Steema.TeeChart.Styles.HorizontalAxis.Top;  
 
  [C#] <br />bar1.VertAxis = Steema.TeeChart.Styles.VerticalAxis.Right; <br />bar1.HorizAxis = Steema.TeeChart.Styles.HorizontalAxis.Top;  
  
More than 1 Series may be associated with each Axis. TeeChart will decide the best scale to fit the Series matched to the Axis but you may change Axis scales yourself (See the [TeeChartProNetTutorialsContentsTutorial4-AxisControl.htm#Scales Axis Tutorial]). Additional axes may be added; they will copy the scales associated with their counterpart from the first 4 axes (see the Tutorial section [[Xamarin.AndroidTutorial4#AdditionalAxes | Additional axes]]).
+
More than 1 Series may be associated with each Axis. TeeChart will decide the best scale to fit the Series matched to the Axis but you may change Axis scales yourself (See the [[XamarinAndroidTutorial4#AxisControlScales |Axis - Scales Tutorial]]). Additional axes may be added; they will copy the scales associated with their counterpart from the first 4 axes (see the Tutorial section [[XamarinAndroidTutorial4#AdditionalAxes | Additional axes]]).
  
====Connecting Series====
+
===Connecting Series===
 
You may use a Series as the datasource for another Series by code, see below:  
 
You may use a Series as the datasource for another Series by code, see below:  
  
 
  [C#] <br />Steema.TeeChart.Functions.Average average1 = new Steema.TeeChart.Functions.Average(); <br />line1.Function = average1; <br />line1.DataSource = bar1; <br />bar1.FillSampleValues(10); <br />line1.CheckDataSource();
 
  [C#] <br />Steema.TeeChart.Functions.Average average1 = new Steema.TeeChart.Functions.Average(); <br />line1.Function = average1; <br />line1.DataSource = bar1; <br />bar1.FillSampleValues(10); <br />line1.CheckDataSource();
  
See [TeeChartProNetTutorialsContentsTutorial7-WorkingWithFunctions.htm Tutorial 7 - Working with Functions] for more information about how to use TeeChart functions.  
+
See [[XamarinAndroidTutorial7 | Tutorial 7 - Working with Functions]] for more information about how to use TeeChart functions.
====Changing Series order====
+
 
 +
===Changing Series order===
 
Changing series order is easy. Setting a Series to 'Active=False' will hide the Series from the Chart but maintain its data content intact. <br />To change series order by code use Series.Exchange.  
 
Changing series order is easy. Setting a Series to 'Active=False' will hide the Series from the Chart but maintain its data content intact. <br />To change series order by code use Series.Exchange.  
  
Line 114: Line 113:
 
<nowiki>*Note. After exchanging Series, the index for the Series will be changed. Thus the line of code above will perpetually interchange the 2 Series '0' and '1' if the code is rerun, as 0 becomes 1 and 1 becomes 0. </nowiki>
 
<nowiki>*Note. After exchanging Series, the index for the Series will be changed. Thus the line of code above will perpetually interchange the 2 Series '0' and '1' if the code is rerun, as 0 becomes 1 and 1 becomes 0. </nowiki>
  
=== Series Value list<br /> ===
+
== Series Value list<br /> ==
  
 
TeeChart Series store their values in a Valuelist accessible and modifiable via the ValueList Class.  
 
TeeChart Series store their values in a Valuelist accessible and modifiable via the ValueList Class.  
====Accessing Series Values====
+
===Accessing Series Values===
 
You may access any value in the list: <br />Example <br /><br />
 
You may access any value in the list: <br />Example <br /><br />
  
Line 140: Line 139:
 
<br />
 
<br />
  
==== Series events<br /> ====
+
=== Series events<br /> ===
  
 
The previous section introduces some use of Series events. This section shows some additional uses.  
 
The previous section introduces some use of Series events. This section shows some additional uses.  
=====OnClickSeries=====
+
====OnClickSeries====
 
You may use the OnClickSeries event to obtain almost any information about a Series (see the section, Accessing Series Values). <br /><br />These examples apply to a Series with Datetime data eg These test values may be used for the following event examples: <br />
 
You may use the OnClickSeries event to obtain almost any information about a Series (see the section, Accessing Series Values). <br /><br />These examples apply to a Series with Datetime data eg These test values may be used for the following event examples: <br />
  
 
  [C#] <br />    private Steema.TeeChart.TChart tChart1; <br />    private Steema.TeeChart.Styles.Line line1; <br /> <br />    private void InitializeChart() <br />    { <br />      tChart1 = new Steema.TeeChart.TChart(this); <br /> <br />      line1 = new Steema.TeeChart.Styles.Line(tChart1.Chart); <br /> <br />      Random rnd = new Random(); <br />      line1.XValues.DateTime = true; <br />      line1.Pointer.Visible = true; <br />      line1.Add(DateTime.Parse("25/12/2012 10:30:00"), rnd.Next(100)); <br />      line1.Add(DateTime.Parse("25/12/2012 22:30:00"), rnd.Next(100)); <br />      line1.Add(DateTime.Parse("26/12/2012 09:20:00"), rnd.Next(100)); <br />      line1.Add(DateTime.Parse("26/12/2012 23:30:00"), rnd.Next(100)); <br />      line1.Add(DateTime.Parse("27/12/2012 11:10:00"), rnd.Next(100)); <br />      line1.Add(DateTime.Parse("27/12/2012 20:15:00"), rnd.Next(100)); <br />      line1.Add(DateTime.Parse("28/12/2012 08:15:00"), rnd.Next(100)); <br />      line1.Add(DateTime.Parse("28/12/2012 21:45:00"), rnd.Next(100)); <br />      line1.Add(DateTime.Parse("29/12/2012 12:45:00"), rnd.Next(100)); <br />      line1.Add(DateTime.Parse("29/12/2012 22:05:00"), rnd.Next(100)); <br /> <br />      line1.HorizAxis = Steema.TeeChart.Styles.HorizontalAxis.Top;  <br /> <br />      tChart1.Zoom.Style = Steema.TeeChart.ZoomStyles.InChart; <br />      tChart1.ClickSeries  = new Steema.TeeChart.TChart.SeriesEventHandler(tChart1_ClickSeries); <br /> <br />      SetContentView(tChart1); <br />    } <br /> <br />    void tChart1_ClickSeries(object sender, Steema.TeeChart.Styles.Series s, int valueIndex, MotionEvent e) <br />    { <br />      //This will show the Value of the nearest Point, not the exact Axis value at the clicked X and Y.  <br />      Toast <br />        .MakeText(this, "Date is: "  DateTime.FromOADate(line1.XValues[valueIndex]) <br />              " Value is: "  line1.YValues[valueIndex], ToastLength.Short) <br />        .Show();   <br />    } <br />
 
  [C#] <br />    private Steema.TeeChart.TChart tChart1; <br />    private Steema.TeeChart.Styles.Line line1; <br /> <br />    private void InitializeChart() <br />    { <br />      tChart1 = new Steema.TeeChart.TChart(this); <br /> <br />      line1 = new Steema.TeeChart.Styles.Line(tChart1.Chart); <br /> <br />      Random rnd = new Random(); <br />      line1.XValues.DateTime = true; <br />      line1.Pointer.Visible = true; <br />      line1.Add(DateTime.Parse("25/12/2012 10:30:00"), rnd.Next(100)); <br />      line1.Add(DateTime.Parse("25/12/2012 22:30:00"), rnd.Next(100)); <br />      line1.Add(DateTime.Parse("26/12/2012 09:20:00"), rnd.Next(100)); <br />      line1.Add(DateTime.Parse("26/12/2012 23:30:00"), rnd.Next(100)); <br />      line1.Add(DateTime.Parse("27/12/2012 11:10:00"), rnd.Next(100)); <br />      line1.Add(DateTime.Parse("27/12/2012 20:15:00"), rnd.Next(100)); <br />      line1.Add(DateTime.Parse("28/12/2012 08:15:00"), rnd.Next(100)); <br />      line1.Add(DateTime.Parse("28/12/2012 21:45:00"), rnd.Next(100)); <br />      line1.Add(DateTime.Parse("29/12/2012 12:45:00"), rnd.Next(100)); <br />      line1.Add(DateTime.Parse("29/12/2012 22:05:00"), rnd.Next(100)); <br /> <br />      line1.HorizAxis = Steema.TeeChart.Styles.HorizontalAxis.Top;  <br /> <br />      tChart1.Zoom.Style = Steema.TeeChart.ZoomStyles.InChart; <br />      tChart1.ClickSeries  = new Steema.TeeChart.TChart.SeriesEventHandler(tChart1_ClickSeries); <br /> <br />      SetContentView(tChart1); <br />    } <br /> <br />    void tChart1_ClickSeries(object sender, Steema.TeeChart.Styles.Series s, int valueIndex, MotionEvent e) <br />    { <br />      //This will show the Value of the nearest Point, not the exact Axis value at the clicked X and Y.  <br />      Toast <br />        .MakeText(this, "Date is: "  DateTime.FromOADate(line1.XValues[valueIndex]) <br />              " Value is: "  line1.YValues[valueIndex], ToastLength.Short) <br />        .Show();   <br />    } <br />
  
=====OnGetSeriesPointerStyle=====
+
====OnGetSeriesPointerStyle====
 
For those Series that use the TChart Pointer, you may access and modify the Pointer using the OnGetSeriesPointer event: <br /><br />Drawing an Uptriangle if the Point is higher than the last, DownTriangle if lower, etc. <br />
 
For those Series that use the TChart Pointer, you may access and modify the Pointer using the OnGetSeriesPointer event: <br /><br />Drawing an Uptriangle if the Point is higher than the last, DownTriangle if lower, etc. <br />
  
 
  [C#] <br />    void line1_GetPointerStyle(Steema.TeeChart.Styles.CustomPoint series, Steema.TeeChart.Styles.GetPointerStyleEventArgs e) <br />    { <br />      if (e.ValueIndex &gt; 0) <br />      { <br />        if (line1.YValues[e.ValueIndex] &gt; line1.YValues[e.ValueIndex - 1]) <br />        { <br />          e.Style = Steema.TeeChart.Styles.PointerStyles.Triangle; <br />        } <br />        else if (line1.YValues[e.ValueIndex] &lt; line1.YValues[e.ValueIndex - 1]) <br />        { <br />          e.Style = Steema.TeeChart.Styles.PointerStyles.DownTriangle; <br />        } <br />        else <br />        { <br />          e.Style = Steema.TeeChart.Styles.PointerStyles.Diamond; <br />        } <br />      } <br />      else <br />      { <br />        e.Style = Steema.TeeChart.Styles.PointerStyles.Diamond; <br />      } <br />    } <br />
 
  [C#] <br />    void line1_GetPointerStyle(Steema.TeeChart.Styles.CustomPoint series, Steema.TeeChart.Styles.GetPointerStyleEventArgs e) <br />    { <br />      if (e.ValueIndex &gt; 0) <br />      { <br />        if (line1.YValues[e.ValueIndex] &gt; line1.YValues[e.ValueIndex - 1]) <br />        { <br />          e.Style = Steema.TeeChart.Styles.PointerStyles.Triangle; <br />        } <br />        else if (line1.YValues[e.ValueIndex] &lt; line1.YValues[e.ValueIndex - 1]) <br />        { <br />          e.Style = Steema.TeeChart.Styles.PointerStyles.DownTriangle; <br />        } <br />        else <br />        { <br />          e.Style = Steema.TeeChart.Styles.PointerStyles.Diamond; <br />        } <br />      } <br />      else <br />      { <br />        e.Style = Steema.TeeChart.Styles.PointerStyles.Diamond; <br />      } <br />    } <br />
  
=====OnGetSeriesMark=====
+
====OnGetSeriesMark====
 
Use the OnGetSeriesMark event to modify the Mark contents at runtime. The following code varies the MarkText according to the value relative to the last; <br />TeeChart supports the dragging of Marks in cases of overlapping via the DragMarks Tool: <br />
 
Use the OnGetSeriesMark event to modify the Mark contents at runtime. The following code varies the MarkText according to the value relative to the last; <br />TeeChart supports the dragging of Marks in cases of overlapping via the DragMarks Tool: <br />
  
 
  [C#] <br />    void line1_GetSeriesMark(Steema.TeeChart.Styles.Series series, Steema.TeeChart.Styles.GetSeriesMarkEventArgs e) <br />    { <br />      if (e.ValueIndex &gt; 0) <br />      { <br />        if (line1.YValues[e.ValueIndex] &gt; line1.YValues[e.ValueIndex - 1]) <br />        { <br />          e.MarkText = e.MarkText  " (Up)"; <br />        } <br />        else if (line1.YValues[e.ValueIndex] &lt; line1.YValues[e.ValueIndex - 1]) <br />        { <br />          e.MarkText = e.MarkText  " (Down)"; <br />        } <br />        else <br />        { <br />          e.MarkText = e.MarkText  " (No Change)"; <br />        } <br />      } <br />    } <br />
 
  [C#] <br />    void line1_GetSeriesMark(Steema.TeeChart.Styles.Series series, Steema.TeeChart.Styles.GetSeriesMarkEventArgs e) <br />    { <br />      if (e.ValueIndex &gt; 0) <br />      { <br />        if (line1.YValues[e.ValueIndex] &gt; line1.YValues[e.ValueIndex - 1]) <br />        { <br />          e.MarkText = e.MarkText  " (Up)"; <br />        } <br />        else if (line1.YValues[e.ValueIndex] &lt; line1.YValues[e.ValueIndex - 1]) <br />        { <br />          e.MarkText = e.MarkText  " (Down)"; <br />        } <br />        else <br />        { <br />          e.MarkText = e.MarkText  " (No Change)"; <br />        } <br />      } <br />    } <br />
  
<br />The Chart appearance resulting from the last 2 events is: <br /><br />[[Image:seriesevents.png]]</div>
+
<br />The Chart appearance resulting from the last 2 events is: <br /><br />[[Image:XAseriesevents.png]]
  
 
<br />
 
<br />
Line 169: Line 168:
 
<font size="2">
 
<font size="2">
  
</font>[[Xamarin.AndroidTutorial5|PREVIOUS]]
+
</font>[[XamarinAndroidTutorial5|PREVIOUS]]
 
| width="58%" bgcolor="#ffffff" valign="TOP" |
 
| width="58%" bgcolor="#ffffff" valign="TOP" |
 
<font size="2">
 
<font size="2">
  
</font>[[Xamarin.AndroidTutorial7|NEXT]]
+
</font>[[XamarinAndroidTutorial7|NEXT]]
 
|}
 
|}
  
 
</center>
 
</center>
 
----
 
----
© 1998-2014 Steema Software SL. All rights reserved.
+
© 1998-{{CURRENTYEAR}} Steema Software SL. All rights reserved.

Latest revision as of 11:57, 22 April 2016

Net android.png

Contents page
Previous | Next

Tutorial 6 - Working with Series


Series Types

The TChart Series class is the common ancestor for all Series types. When using the TeeChart online help to obtain help on any Series Type, follow the link to the Series class located in the list of inherited types and then click on Series members where a list of all inherited properties and methods will be included.

Series Class structure

As a little background on the structure of the TeeChart Type Library, here is an explanation of the Series classes and interfaces. The diagram below shows the relationship between TeeChart Series classes. All classes derive from the generic "Series" class and thus share "Series" properties and methods. Several abstract Classes derive from Series (Custom3DSeries, CustomBarSeries and CircledSeries), these are highlighted in grey and their interfaces are not directly accessible for programming, their characteristics are inherited by their descendant Series types. All derived Series (in orange) are accessible in the TeeChart gallery for inclusion in your Chart. TeeChart Series, derived in this way, allow programmable access to the inherited properties and methods via a common index structure (see example code later in this section).

Seriestree.png
You can create and add new and differing series types to the same TChart at runtime.

[C#] 
//Add a series at runtime
button.Click = delegate
{
     Steema.TeeChart.Styles.Area tmpAreaSeries = new Steema.TeeChart.Styles.Area(tChart1.Chart);  
     tmpAreaSeries.FillSampleValues(4);
     //Or
     //Steema.TeeChart.Styles.Area tmpAreaSeries = new Steema.TeeChart.Styles.Area();
     //tChart1.Series.Add(tmpAreaSeries);
     //tmpAreaSeries.FillSampleValues(4);
};


All AreaSeries properties and methods are available for the new Series as for any Series created at design time.

An example of mixing different series classes in the same Chart would be to add a Area (Series(0)), Bar (Series(1)) and Line (Series(2)) Series to a Chart. All access a common index structure, the Chart's Series list. To work with the Series may look something like the following:

[C#] 
    private Steema.TeeChart.TChart tChart1;

    private void InitializeChart()
    {
      tChart1 = new Steema.TeeChart.TChart(this);

      //You could add the Series at runtime  
      Steema.TeeChart.Styles.Area area1 = new Steema.TeeChart.Styles.Area(tChart1.Chart);
      Steema.TeeChart.Styles.Bar bar1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
      Steema.TeeChart.Styles.Line line1 = new Steema.TeeChart.Styles.Line(tChart1.Chart);

      //Use Series common properties  
      tChart1.Series[0].FillSampleValues(10);
      tChart1.Series[1].FillSampleValues(10);
      tChart1.Series[2].FillSampleValues(10);
      tChart1.Series[1].Marks.Visible = false;
      tChart1.Series[2].Marks.Visible = false;

      //Modify Bar specific properties  
      bar1.BarStyle = Steema.TeeChart.Styles.BarStyles.Pyramid; //Change Bar type  
      bar1.Pen.Color = Color.Yellow; //Bar bounding lines colour  

      //Modify Line specific properties  
      line1.Stairs = true; //Set line to Stairs  
      line1.LinePen.Color = Color.Blue; //LineSeries bounding lines colour  

      //Modify Area specific properties  
      area1.AreaBrush.Gradient.Visible = true; //Area fill gradient  

      SetContentView(tChart1);
    }

The example code above will produce the image below:

 

Multiseries.png

Choosing a Series Type

Choosing a Series Type for a Chart will very much depend on your own requirements for the Chart. There are occasions however, when due to the number of variables to plot, the choice of Chart may depend on which Series types support the number of input variables. The following table shows the number of variables allowed by each Series type.

Seriestable.png

Labelling can be used to extend the value of a 2 variable Series Type. See the example below that uses 3 instances of the Bar Series type in the same Chart.
Example
Uses Bar Series types

Product code     Month     Quantity produced
10                    Jan         300
10                    Feb         325
10                    Mar         287
12                    Jan         175
12                    Feb         223
12                    Mar         241
14                    Jan         461
14                    Feb         470
14                    Mar         455

In its simplest form, the data produces the following Chart, grouping the information by month:

XAseries1.png
Code:

[C#] 
      Steema.TeeChart.Styles.Bar bar1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
      Steema.TeeChart.Styles.Bar bar2 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
      Steema.TeeChart.Styles.Bar bar3 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);

      foreach (Steema.TeeChart.Styles.Series tSeries in tChart1.Series)
      {  
        tSeries.Marks.Visible = false;  
      }

      tChart1.Header.Text = "Production results";

      bar1.Add(300, "Jan");
      bar1.Add(325, "Feb");
      bar1.Add(287, "Mar");
      bar1.Title = "Product10";

      bar2.Add(175, "Jan");
      bar2.Add(223, "Feb");
      bar2.Add(241, "Mar");
      bar2.Title = "Product12";

      bar3.Add(461, "Jan");
      bar3.Add(470, "Feb");
      bar3.Add(455, "Mar");
      bar3.Title = "Product14";

or (grouping by product):

XAseries2.png
Code:

[C#] 
      Steema.TeeChart.Styles.Bar bar1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
      Steema.TeeChart.Styles.Bar bar2 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
      Steema.TeeChart.Styles.Bar bar3 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);

      foreach (Steema.TeeChart.Styles.Series tSeries in tChart1.Series)
      {  
        tSeries.Marks.Visible = false;  
      }

      tChart1.Header.Text = "Production results";

      bar1.Add(300, "Product10");
      bar1.Add(175, "Product12");
      bar1.Add(461, "Product14");
      bar1.Title = "Jan";

      bar2.Add(325, "Product10");
      bar2.Add(223, "Product12");
      bar2.Add(470, "Product14");
      bar2.Title = "Feb";

      bar3.Add(287, "Product10");
      bar3.Add(241, "Product12");
      bar3.Add(455, "Product14");
      bar3.Title = "Mar";

We have added new values to the table above (Stock).  

Product code     Month     Quantity produced     Stock level
10                    Jan         300                          600
10                    Feb         325                          715
10                    Mar         287                          676
12                    Jan         175                          245
12                    Feb         223                          270
12                    Mar         241                          315
14                    Jan         461                          800
14                    Feb         470                          755
14                    Mar         455                          835

The values of stock in the table are generally higher than those of monthly production so displaying them gives the following chart (2D this time). The Chart uses Line Series to differentiate Stocks.

XAseries3.png
Code:
Add the following to the code of the first of the previous examples:

[C#] 
      tChart1.Aspect.View3D = false;

      line1.Add(600, "Jan");
      line1.Add(715, "Feb");
      line1.Add(676, "Mar");
      line1.Title = "Product10 Stock";
      line1.Color = bar1.Color;

      line2.Add(245, "Jan");
      line2.Add(270, "Feb");
      line2.Add(315, "Mar");
      line2.Title = "Product10 Stock";
      line2.Color = bar2.Color;

      line3.Add(800, "Jan");
      line3.Add(755, "Feb");
      line3.Add(835, "Mar");
      line3.Title = "Product10 Stock";
      line3.Color = bar3.Color;

Adding data to a Series

Most Series types use the 24 generic overloads of the Add method for adding data. There are some exceptions, see the following table:

Seriestable2.png

Note that all the Series specific Add methods, with the exception of the ShapeSeries, are automatically added as further overloads to the generic Add method and so are accessed from there (e.g. candleSeries1.Add(new DateTime(2002,11,27),100,400,200,300);).

Colour

Colour may be manually added for a point when adding the point
Example

[C#] 
bar1.Add(50, "Tomatoes", Color.FromArgb(200, 200, 200));

Alternatively, you can allow TeeChart to allocate a colour. TeeChart will choose one of up to 19 unique and as yet unused colours for each new Series, or for each new Series point if Series.ColorEach = True.
Example

[C#] 
Random rnd = new Random();
bar1.ColorEach = true;
for(int i = 0; i < 19; i)
{
     int higher = i 65;
     char letter = (char) higher;
     bar1.Add(rnd.Next(100),letter.ToString());
}

A transparent colour may be added to a Point to reserve a space for the value in the ValueList without it showing on the Chart.
Example

[C#] 
bar1.Add(45, "My Transparent Bar",  Color.Transparent);

Deleting data points from a Series

Use Series.Delete to delete a point from a Series. Series.Delete has two overloads:

public Void Delete(System.Int32)

Deletes the nth point in the Series.

 public Void Delete(System.Int32, System.Int32) 

Deletes a number of points n starting from the nth point in the Series.

Example

[C#] 
bar1.Delete(7,2);  (deletes two points starting from the 8th Series point (index starts at zero))

Series.Clear clears all points from a Series.

Adding Null points to a Series

Series.Add has three overloads which allow you to add a Null point to a Series:

//Adds a new null (transparent) point. 
public Int32 Add()

//Adds a new null point with specified text.
public Int32 Add(System.String)

//Adds a new null point at a specified x value with specified text
public Int32 Add(System.Double, System.String)

The second of the above overloads will add a Null point to the Series allowing you to define a label for the point but leaving a break in the Series at that point. In the case of a Line Series, the last point before the break will not join to the first point after the break.  
Example

[C#] 
line1.Add("Null Point");

Please look up the other two overloads in the TeeChart Help File for examples of their use.

Mixing Series Types on a Chart

TeeChart Pro offers an empty Chart Canvas as a backdrop to data Series. That means that no Chart types are predefined. You define the Chart type you require as a mix of the Series Types that you wish to display. Due to the specialised nature of some Series types it is impractical to mix that Series type with another on a Chart. TeeChart helps you by greying out unsuitable Series types in the Chart Gallery when you arrive to add a new Series. There is no practical limit to the number of Series that you can put in one Chart.

Adding New Series

Add a Series by code.
Example

[C#] 
button.Click = delegate
{
     Bar bar1 = new Bar(tChart1.Chart);
     bar1.FillSampleValues(10);
};


Series are added to the SeriesList and are accessible by Index, TChart1.Series(Index), beginning with 0 for the first Series. TeeChart Pro adds a default name for the Series (Series 0, Series 1, etc.). You may modify the name using the Series.Title property.

Choose Axes for a Series

Series added to the Chart will automatically take the Left and Bottom axes as their reference axes. There are 4 axes available, Top, Left, Bottom and Right. By code, changing the axes will look like this:

[C#] 
bar1.VertAxis = Steema.TeeChart.Styles.VerticalAxis.Right;
bar1.HorizAxis = Steema.TeeChart.Styles.HorizontalAxis.Top;

More than 1 Series may be associated with each Axis. TeeChart will decide the best scale to fit the Series matched to the Axis but you may change Axis scales yourself (See the Axis - Scales Tutorial). Additional axes may be added; they will copy the scales associated with their counterpart from the first 4 axes (see the Tutorial section Additional axes).

Connecting Series

You may use a Series as the datasource for another Series by code, see below:

[C#] 
Steema.TeeChart.Functions.Average average1 = new Steema.TeeChart.Functions.Average();
line1.Function = average1;
line1.DataSource = bar1;
bar1.FillSampleValues(10);
line1.CheckDataSource();

See Tutorial 7 - Working with Functions for more information about how to use TeeChart functions.

Changing Series order

Changing series order is easy. Setting a Series to 'Active=False' will hide the Series from the Chart but maintain its data content intact.
To change series order by code use Series.Exchange.

[C#] 
tChart1.Series.Exchange(0, 1);  //Change Series(0) with Series(1) in the index order

*Note. After exchanging Series, the index for the Series will be changed. Thus the line of code above will perpetually interchange the 2 Series '0' and '1' if the code is rerun, as 0 becomes 1 and 1 becomes 0.

Series Value list

TeeChart Series store their values in a Valuelist accessible and modifiable via the ValueList Class.  

Accessing Series Values

You may access any value in the list:
Example

[C#] 
      //Displays value of 4th point (index starts at 0) of a BarSeries
      Toast
        .MakeText(this, bar1.YValues[3].ToString(), ToastLength.Short)
        .Show();  


Values accessed in this way may be used to set traps on Series data:

[C#] 
      for (int i = 0; i < bar1.Count; i)
      {
        if (bar1.YValues[i] > 50)
        {
          new AlertDialog.Builder(this)
                    .SetTitle("Alert")
                    .SetMessage("Value: (" bar1.XValues[i] ", " bar1.YValues[i] ") exceeds limit")                    
                    .SetPositiveButton("OK", null as IDialogInterfaceOnClickListener)
                    .Show();
        }
      }


The same value may be obtained via the point ValueIndex used by some Series methods and several Chart events.
Example

[C#] 
    void tChart1_ClickSeries(object sender, Steema.TeeChart.Styles.Series s, int valueIndex, MotionEvent e)
    {
      if(s.Equals(bar1))
      {
        new AlertDialog.Builder(this)
          .SetTitle("Alert1")
          .SetMessage("ValueIndex is: " valueIndex.ToString())
          .SetPositiveButton("OK", null as IDialogInterfaceOnClickListener)
          .Show();

        new AlertDialog.Builder(this)
          .SetTitle("Alert2")
          .SetMessage("Point's YValue is " bar1.YValues[valueIndex].ToString())
          .SetPositiveButton("OK", null as IDialogInterfaceOnClickListener)
          .Show();
      }
    }


Example using Values
This code modifies the value of a BarSeries Bar according to the user's mouseclick.
Example

Use the TChart.ClickSeries event to determine where the user has clicked.

[C#] 
private void tChart1_ClickSeries(object sender, Steema.TeeChart.Styles.Series s, int valueIndex, System.Windows.Forms.MouseEventArgs e)
        {
            UpDatePoint(valueIndex,tChart1.Axes.Left.CalcPosPoint((e.Y)));
        }


Call the UpdatePoint Sub routine to modify the Bar's value:

[C#] 
private void UpDatePoint(int Bar, double Y)
        {
            if(Bar < tChart1.Series[0].Count)
            {
                tChart1.Series[0].YValues[Bar] = Y;
                tChart1.Series[0].Repaint();  
            }                                                              
        }


Series events

The previous section introduces some use of Series events. This section shows some additional uses.

OnClickSeries

You may use the OnClickSeries event to obtain almost any information about a Series (see the section, Accessing Series Values).

These examples apply to a Series with Datetime data eg These test values may be used for the following event examples:

[C#] 
    private Steema.TeeChart.TChart tChart1;
    private Steema.TeeChart.Styles.Line line1;

    private void InitializeChart()
    {
      tChart1 = new Steema.TeeChart.TChart(this);

      line1 = new Steema.TeeChart.Styles.Line(tChart1.Chart);

      Random rnd = new Random();
      line1.XValues.DateTime = true;
      line1.Pointer.Visible = true;
      line1.Add(DateTime.Parse("25/12/2012 10:30:00"), rnd.Next(100));
      line1.Add(DateTime.Parse("25/12/2012 22:30:00"), rnd.Next(100));
      line1.Add(DateTime.Parse("26/12/2012 09:20:00"), rnd.Next(100));
      line1.Add(DateTime.Parse("26/12/2012 23:30:00"), rnd.Next(100));
      line1.Add(DateTime.Parse("27/12/2012 11:10:00"), rnd.Next(100));
      line1.Add(DateTime.Parse("27/12/2012 20:15:00"), rnd.Next(100));
      line1.Add(DateTime.Parse("28/12/2012 08:15:00"), rnd.Next(100));
      line1.Add(DateTime.Parse("28/12/2012 21:45:00"), rnd.Next(100));
      line1.Add(DateTime.Parse("29/12/2012 12:45:00"), rnd.Next(100));
      line1.Add(DateTime.Parse("29/12/2012 22:05:00"), rnd.Next(100));

      line1.HorizAxis = Steema.TeeChart.Styles.HorizontalAxis.Top;  

      tChart1.Zoom.Style = Steema.TeeChart.ZoomStyles.InChart;
      tChart1.ClickSeries = new Steema.TeeChart.TChart.SeriesEventHandler(tChart1_ClickSeries);

      SetContentView(tChart1);
    }

    void tChart1_ClickSeries(object sender, Steema.TeeChart.Styles.Series s, int valueIndex, MotionEvent e)
    {
      //This will show the Value of the nearest Point, not the exact Axis value at the clicked X and Y.  
      Toast
        .MakeText(this, "Date is: " DateTime.FromOADate(line1.XValues[valueIndex])
             " Value is: " line1.YValues[valueIndex], ToastLength.Short)
        .Show();  
    }

OnGetSeriesPointerStyle

For those Series that use the TChart Pointer, you may access and modify the Pointer using the OnGetSeriesPointer event:

Drawing an Uptriangle if the Point is higher than the last, DownTriangle if lower, etc.

[C#] 
    void line1_GetPointerStyle(Steema.TeeChart.Styles.CustomPoint series, Steema.TeeChart.Styles.GetPointerStyleEventArgs e)
    {
      if (e.ValueIndex > 0)
      {
        if (line1.YValues[e.ValueIndex] > line1.YValues[e.ValueIndex - 1])
        {
          e.Style = Steema.TeeChart.Styles.PointerStyles.Triangle;
        }
        else if (line1.YValues[e.ValueIndex] < line1.YValues[e.ValueIndex - 1])
        {
          e.Style = Steema.TeeChart.Styles.PointerStyles.DownTriangle;
        }
        else
        {
          e.Style = Steema.TeeChart.Styles.PointerStyles.Diamond;
        }
      }
      else
      {
        e.Style = Steema.TeeChart.Styles.PointerStyles.Diamond;
      }
    }

OnGetSeriesMark

Use the OnGetSeriesMark event to modify the Mark contents at runtime. The following code varies the MarkText according to the value relative to the last;
TeeChart supports the dragging of Marks in cases of overlapping via the DragMarks Tool:

[C#] 
    void line1_GetSeriesMark(Steema.TeeChart.Styles.Series series, Steema.TeeChart.Styles.GetSeriesMarkEventArgs e)
    {
      if (e.ValueIndex > 0)
      {
        if (line1.YValues[e.ValueIndex] > line1.YValues[e.ValueIndex - 1])
        {
          e.MarkText = e.MarkText " (Up)";
        }
        else if (line1.YValues[e.ValueIndex] < line1.YValues[e.ValueIndex - 1])
        {
          e.MarkText = e.MarkText " (Down)";
        }
        else
        {
          e.MarkText = e.MarkText " (No Change)";
        }
      }
    }


The Chart appearance resulting from the last 2 events is:

XAseriesevents.png



PREVIOUS

NEXT


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