Difference between revisions of "VCLTutorial4"

From Steema Software Reference Wiki
Jump to: navigation, search
Line 13: Line 13:
 
<br>
 
<br>
  
 +
<HTML>
 +
 +
<script language="Javascript">
 +
function ResetHelp()
 +
{
 +
  document.target = "HVIEWER";
 +
  var thiswin = window.open('javascript:\"<BODY></BODY>\"', document.target);
 +
  thiswin.document.writeln("<HTML><HEAD>");
 +
  thiswin.document.writeln("</HEAD><BODY>");
 +
  thiswin.document.writeln("</BODY>");
 +
}
 +
 +
function CallHelp(HelpItem,Helpfile)
 +
  {
 +
  document.target = "HVIEWER";
 +
  var thiswin = window.open('javascript:\"<BODY></BODY>\"', document.target);
 +
  thiswin.document.writeln("<HTML><HEAD>");
 +
  thiswin.document.writeln("<OBJECT id=hhctrl33 type=\"application/x-oleobject\" classid=\"clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11\" ");
 +
  thiswin.document.writeln("codebase=\"hhctrl.ocx\">");
 +
  thiswin.document.writeln("<PARAM name=\"Command\" value=\"WinHelp\">");
 +
  if (Helpfile.toLowerCase()=="tc2013")
 +
  {
 +
      thiswin.document.writeln("<PARAM name=\"Item1\" value=\"teechart2013.hlp\">");
 +
  }
 +
  else
 +
  {
 +
      thiswin.document.writeln("<PARAM name=\"Item1\" value=\"teechart2013Guide.hlp\">");   
 +
  }
 +
  thiswin.document.writeln("<PARAM name=\"Item2\" value=" + HelpItem + "> </OBJECT>");
 +
  thiswin.document.writeln("</HEAD><BODY>");
 +
  thiswin.hhctrl33.Click();
 +
  thiswin.document.writeln("</BODY>");
 +
  ResetHelp();
 +
  }
 +
 +
function CallWeb(URL)
 +
{
 +
    window.open(URL);
 +
}
 +
</script>
 +
 +
<HEAD>
 +
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
 +
<META NAME="Generator" CONTENT="Microsoft FrontPage 6.0">
 +
<TITLE>Tutorial 3 - Chart Paging</TITLE>
 +
<LINK REL=STYLESHEET TYPE="text/css" HREF="helpstyle.css"></HEAD>
 +
<BODY TEXT="#000000" LINK="#0000ff" VLINK="#800080" BGCOLOR="#ffffff" TopMargin=4>
 +
<IFRAME ID="HVIEWER" NAME="HVIEWER" WIDTH=0 HEIGHT=0 BORDER=0></IFRAME>
 +
<DIV ID=one STYLE="z-index:-10;background-image:url('timages/headerback.png');position:absolute;top:0;left:0;height:75;width:110%">
 +
&nbsp;
 +
<table width=100% border=0><tr><td>&nbsp;</td></tr></table></DIV>
 +
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%><TR VALIGN=TOP><TD>
 +
<img src="timages/HeaderLogo.gif"></TD>
 +
<TD ALIGN=RIGHT><FONT SIZE=2>&nbsp;<A HREF="Contents.HTM">Contents&nbsp;page</A>&nbsp;<BR>&nbsp;<A HREF="Tutorial2.htm">Previous</A>&nbsp;|&nbsp;<A HREF="Tutorial4.htm">Next</A>&nbsp;<P></FONT>
 +
</TD><TD WIDTH=20>&nbsp;</TD></TR></TABLE>
 +
 +
<H2><A NAME="TeeChart_tutorial_3"></A>Tutorial 3 - Chart Paging</H2>
 +
<hr color="#AFBFDF">
 +
 +
<P>If the data source for your Chart contains more data than can be legibly displayed on one Chart screen you may wish to divide the Chart into pages that can be leafed through. This can be achieved via the Chart Editor or
 +
programmatically.</P>
 +
 +
<hr color="#AFBFDF">
 +
 +
<table border=0 width=80% cellpadding = 3><tr><td><b>Contents</b></td></tr>
 +
<tr><td>
 +
<A HREF="#EditorPaging">Paging with the Chart Editor</A><BR>
 +
<A HREF="#NaviPaging">Paging with the TChartPageNavigator component</A><BR>
 +
<A HREF="#CodePaging">Paging by code</a><BR>
 +
<A HREF="#PagePrint">Printing a multipage Chart</a><BR>
 +
<A HREF="#PagePrintView">Print-previewing a multipage Chart</a><BR>
 +
</td></tr>
 +
</table>
 +
 +
<H4><a name="EditorPaging">Paging with the Chart Editor</a></H4>
 +
 +
<P>Page sizes may be defined with the Chart Editor. It will still be necessary to add paging buttons to your project or you could make the Chart Editor available at runtime to allow users to change pages with the Editor.</P>
 +
 +
<P>At design time, select the Paging page in the Chart Editor.</P>
 +
 +
<P><IMG SRC="timages/TeePaging.png" width="421" height="348" ></P>
 +
 +
 +
<P>In the <B>Points per Page:</B> box, type (or scroll to) the number of Series points you wish to see on the Chart page. If you're coding the data values for the Series, the navigation buttons will not be highlighted until you run the project, populate the Series and show the Chart Editor at runtime. If you are connected to a Datasource you should see paging take effect immediately at design time.</P>
 +
 +
<P>Runtime:</P>
 +
 +
<P>To access paging properties via the chart editor at runtime use the EditChart or EditDBChart methods.</P>
 +
<P>e.g.  (You need to add EditChar and Editpro to the uses part of your project)</P>
 +
<PRE>EditChart(Self, Chart1);</PRE>
 +
 +
<br>
 +
<h4><A NAME="NaviPaging">Paging with the TChartPageNavigator component</A></h4>
 +
<p>TeeChart Pro offers the <A HREF="Javascript:CallHelp('TChartPageNavigator','Tc2013')">TChartPageNavigator component</a>
 +
for easy intuitive Chart page navigation, similar to existing navigators for database recordsets.</p>
 +
<img src="timages/PageNavi.png" width ="229" height ="30">
 +
<p>Set the Navigator's Chart property to the Chart Panel you wish to Page.</p>
 +
 +
<br>
 +
<H4><a name="CodePaging">Paging by code</a></h4>
 +
 +
<P>Paging properties and methods are available via the <A HREF="Javascript:CallHelp('TChart','Tc2013')">TChart component</A>. See the <A HREF="Javascript:CallHelp('TCustomAxisPanel.Page','Tc2013')">Page property</A></P>
 +
 +
<P>Steps required to add paging to your Chart:</P>
 +
 +
<OL>
 +
 +
<LI>Define Points per page</LI>
 +
 +
<P>Use MaxPointsPerPage to define the number of points to display on each page.</P>
 +
 +
<P>e.g.</P>
 +
<P>Chart1.MaxPointsPerPage := 10;</P>
 +
 +
<LI>Add Navigation buttons to the Chart's Form.</LI>
 +
 +
<P>Example: </P>
 +
 +
<P>First Page </P>
 +
<PRE>Chart1.Page := 0;</PRE>
 +
 +
<P>Advance a page</P>
 +
<PRE>Chart1.NextPage;</PRE>
 +
 +
<P>Go to a previous page</P>
 +
<PRE>Chart1.PreviousPage;</PRE>
 +
 +
<P>Last Page</P>
 +
<PRE>Chart1.Page := Chart1.Numpages;
 +
</PRE>
 +
 +
<LI>Decide what to do with the last page.</LI>
 +
 +
 +
<P>The last page is unlikely to have exactly the correct number of points to match the point quantity in the other Chart pages. You may choose to Scale the Last page which will 'best fit' the remaining points to the page, adjusting the axis scale accordingly, or you may treat the page as previous pages with the same number of points which may leave the last page rather empty if there are not many points
 +
on the page.</P>
 +
 +
<PRE>Chart1.ScaleLastPage := False;  (default = True)</PRE>
 +
<BR>
 +
 +
<LI>Show the user a page number</LI>
 +
 +
<P>The TChart OnPageChange event may be used to show the user the existing page number. Here using a Label
 +
for the Page number:</P>
 +
<PRE>Label1.Caption := IntToStr(Chart1.Page) + ' of ' + IntToStr(Chart1.Numpages);</PRE>
 +
</OL>
 +
<BR>
 +
 +
 +
<h4><A NAME="#PagePrint">Printing a multipage Chart</a></h4>
 +
<p>To print a multipage Chart use the Chart <A HREF="Javascript:CallHelp('TCustomAxisPanel.PrintPages','Tc2013')">PrintPages method</a>.</p>
 +
<pre>
 +
procedure TPrintPagesForm.Button1Click(Sender: TObject);
 +
begin
 +
  With PrintDialog1 do
 +
  begin
 +
    FromPage:=1;
 +
    ToPage:=Chart1.NumPages;
 +
    MinPage:=FromPage;
 +
    MaxPage:=ToPage;
 +
 +
    if Execute then
 +
      Chart1.PrintPages(FromPage,ToPage);
 +
  end;
 +
end;
 +
</pre>
 +
<br>
 +
<h4><A NAME="#PagePrintView">Print-previewing a multipage Chart</a></h4>
 +
<p>Multipage Charts may be print previewed whilst being navigated. Simply set the Previewer's
 +
<A HREF="Javascript:CallHelp('TTeePreviewPanel.Panel','Tc2013')">Panel property</A> to
 +
the Chart which you wish to view then use the
 +
<A HREF="Javascript:CallHelp('TChartPageNavigator','Tc2013')">TChartPageNavigator component</a> to page the Chart.</p>
  
  

Revision as of 14:28, 13 September 2013

Tchvcl.jpg

Contents page
Previous | Next


<HTML>

<script language="Javascript"> function ResetHelp() {

  document.target = "HVIEWER";
  var thiswin = window.open('javascript:\"<BODY></BODY>\"', document.target);
  thiswin.document.writeln("<HTML><HEAD>");
  thiswin.document.writeln("</HEAD><BODY>");
  thiswin.document.writeln("</BODY>");

}

function CallHelp(HelpItem,Helpfile)

 {
  document.target = "HVIEWER";
  var thiswin = window.open('javascript:\"<BODY></BODY>\"', document.target);
  thiswin.document.writeln("<HTML><HEAD>");
  thiswin.document.writeln("<OBJECT id=hhctrl33 type=\"application/x-oleobject\" classid=\"clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11\" ");
  thiswin.document.writeln("codebase=\"hhctrl.ocx\">"); 
  thiswin.document.writeln("<PARAM name=\"Command\" value=\"WinHelp\">");
  if (Helpfile.toLowerCase()=="tc2013")
  { 
     thiswin.document.writeln("<PARAM name=\"Item1\" value=\"teechart2013.hlp\">"); 
  }
  else
  {
     thiswin.document.writeln("<PARAM name=\"Item1\" value=\"teechart2013Guide.hlp\">");     
  }
  thiswin.document.writeln("<PARAM name=\"Item2\" value=" + HelpItem + "> </OBJECT>");
  thiswin.document.writeln("</HEAD><BODY>");
  thiswin.hhctrl33.Click();
  thiswin.document.writeln("</BODY>");
  ResetHelp();
 }

function CallWeb(URL) {

   window.open(URL);

} </script>

<HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252"> <META NAME="Generator" CONTENT="Microsoft FrontPage 6.0"> <TITLE>Tutorial 3 - Chart Paging</TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="helpstyle.css"></HEAD> <BODY TEXT="#000000" LINK="#0000ff" VLINK="#800080" BGCOLOR="#ffffff" TopMargin=4> <IFRAME ID="HVIEWER" NAME="HVIEWER" WIDTH=0 HEIGHT=0 BORDER=0></IFRAME>

 

 
<img src="timages/HeaderLogo.gif">  <A HREF="Contents.HTM">Contents page</A> 
 <A HREF="Tutorial2.htm">Previous</A> | <A HREF="Tutorial4.htm">Next</A> 

</FONT> </TD>

 </TD></TR></TABLE>

<A NAME="TeeChart_tutorial_3"></A>Tutorial 3 - Chart Paging


<P>If the data source for your Chart contains more data than can be legibly displayed on one Chart screen you may wish to divide the Chart into pages that can be leafed through. This can be achieved via the Chart Editor or

programmatically.


Contents

<A HREF="#EditorPaging">Paging with the Chart Editor</A>
<A HREF="#NaviPaging">Paging with the TChartPageNavigator component</A>
<A HREF="#CodePaging">Paging by code</a>
<A HREF="#PagePrint">Printing a multipage Chart</a>
<A HREF="#PagePrintView">Print-previewing a multipage Chart</a>

<a name="EditorPaging">Paging with the Chart Editor</a>

Page sizes may be defined with the Chart Editor. It will still be necessary to add paging buttons to your project or you could make the Chart Editor available at runtime to allow users to change pages with the Editor.

At design time, select the Paging page in the Chart Editor.

<IMG SRC="timages/TeePaging.png" width="421" height="348" >


In the Points per Page: box, type (or scroll to) the number of Series points you wish to see on the Chart page. If you're coding the data values for the Series, the navigation buttons will not be highlighted until you run the project, populate the Series and show the Chart Editor at runtime. If you are connected to a Datasource you should see paging take effect immediately at design time.

Runtime:

To access paging properties via the chart editor at runtime use the EditChart or EditDBChart methods.

e.g. (You need to add EditChar and Editpro to the uses part of your project)

EditChart(Self, Chart1);


<A NAME="NaviPaging">Paging with the TChartPageNavigator component</A>

TeeChart Pro offers the <A HREF="Javascript:CallHelp('TChartPageNavigator','Tc2013')">TChartPageNavigator component</a> for easy intuitive Chart page navigation, similar to existing navigators for database recordsets.

<img src="timages/PageNavi.png" width ="229" height ="30">

Set the Navigator's Chart property to the Chart Panel you wish to Page.


<a name="CodePaging">Paging by code</a>

Paging properties and methods are available via the <A HREF="Javascript:CallHelp('TChart','Tc2013')">TChart component</A>. See the <A HREF="Javascript:CallHelp('TCustomAxisPanel.Page','Tc2013')">Page property</A>

Steps required to add paging to your Chart:

  1. Define Points per page
  2. Use MaxPointsPerPage to define the number of points to display on each page.

    e.g.

    Chart1.MaxPointsPerPage := 10;

  3. Add Navigation buttons to the Chart's Form.
  4. Example:

    First Page

    Chart1.Page := 0;

    Advance a page

    Chart1.NextPage;

    Go to a previous page

    Chart1.PreviousPage;

    Last Page

    Chart1.Page := Chart1.Numpages;
    
  5. Decide what to do with the last page.

  6. The last page is unlikely to have exactly the correct number of points to match the point quantity in the other Chart pages. You may choose to Scale the Last page which will 'best fit' the remaining points to the page, adjusting the axis scale accordingly, or you may treat the page as previous pages with the same number of points which may leave the last page rather empty if there are not many points on the page.

    Chart1.ScaleLastPage := False;   (default = True)


  7. Show the user a page number
  8. The TChart OnPageChange event may be used to show the user the existing page number. Here using a Label for the Page number:

    Label1.Caption := IntToStr(Chart1.Page) + ' of ' + IntToStr(Chart1.Numpages);



<A NAME="#PagePrint">Printing a multipage Chart</a>

To print a multipage Chart use the Chart <A HREF="Javascript:CallHelp('TCustomAxisPanel.PrintPages','Tc2013')">PrintPages method</a>.

procedure TPrintPagesForm.Button1Click(Sender: TObject);
begin
  With PrintDialog1 do
  begin
    FromPage:=1;
    ToPage:=Chart1.NumPages;
    MinPage:=FromPage;
    MaxPage:=ToPage;

    if Execute then 
       Chart1.PrintPages(FromPage,ToPage);
  end;
end;


<A NAME="#PagePrintView">Print-previewing a multipage Chart</a>

Multipage Charts may be print previewed whilst being navigated. Simply set the Previewer's <A HREF="Javascript:CallHelp('TTeePreviewPanel.Panel','Tc2013')">Panel property</A> to the Chart which you wish to view then use the <A HREF="Javascript:CallHelp('TChartPageNavigator','Tc2013')">TChartPageNavigator component</a> to page the Chart.




PREVIOUS

NEXT


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