Plot Pack Manual Version 2.0

Transcription

1 The Standard in Industrial Automation and Scientific Components for Real-Time Applications Plot Pack Manual Version 2.0 Version [02/21/02 3:26 PM]

2 Copyright This page intentionally left blank ii

3 Copyright Author Technical Reviewer Proofreader Patrick Carroll Todd Oster Cyrus Edson Copyright Copyright Iocomp Software Incorporated. All rights reserved. Portions of the software described in this document copyright Microsoft Corporation, Borland Corporation, and Linus Torvalds. All Rights Reserved. NO PART OF THIS PUBLICATION MAY BE REPRODUCED, STORED IN A RETRIEVAL SYSTEM OR TRANSMITTED BY ANY MEANS, ELECTRONIC, MECHANICAL, PHOTOCOPYING, RECORDING, OR OTHERWISE, WITHOUT WRITTEN PERMISSION FROM THE PUBLISHER. EXCEPT FOR THE LIMITED WARRANTY AS DESCRIBED IN THE END USER LICENSE AGREEMENT, THE INFORMATION AND MATERIAL CONTAINED IN THIS BOOK ARE PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY WARRANTY CONCERNING THE ACCURACY, ADEQUACY, OR COMPLETENESS OF SUCH INFORMATION OR MATERIAL OR THE RESULTS TO BE OBTAINED FROM USING SUCH INFORMATION OR MATERIAL CONTAINED WITHIN THIS MANUAL OR DOCUMENTATION. NEITHER IOCOMP SOFTWARE NOR THE AUTHOR SHALL BE RESPONSIBLE FOR ANY CLAIMS ATTRIBUTABLE TO ERRORS, OMISSIONS, OR OTHER INACCURACIES IN THE INFORMATION OR MATERIAL CONTAINED IN THIS BOOK, AND IN NO EVENT SHALL IOCOMP SOFTWARE OR THE AUTHOR BE LIABLE FOR DIRECT, INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OF SUCH INFORMATION OR MATERIAL. SOME STATES DO NOT ALLOW LIMITATIONS OF DURATION OF ANY IMPLIED WARRANTY, SO THE ABOVE LIMITATIONS MAY NOT APPLY TO YOU. Trademarks Iocomp and the Iocomp Logo are registered trademarks of Iocomp Software Incorporated. Microsoft, Visual Basic, Visual C++, Visual FoxPro, Windows, Microsoft Office, and ActiveX are trademarks or registered trademarks of Microsoft Corporation. Borland, Delphi, Kylix, C++ Builder, VCL, and CLX are trademarks or registered trademarks of the Borland Corporation. Linux is a registered trademark of Linus Torvalds. All other names, products, or marks are trademarks or registered trademarks of their respective companies. Initial Printing 03/2001 Manufactured in the United States of America iii

4 Table of Contents Table of Contents COPYRIGHT III TRADEMARKS III TABLE OF CONTENTS IV CHAPTER 1 - INTRODUCTION VISUAL C++ SPECIAL COMPILER NOTE BORLAND DELPHI, KYLIX, AND C++ BUILDER SPECIAL COMPILER NOTE COMPONENT NAMING CONVENTIONS SOURCE CODE UNIT NAMING CONVENTIONS CHAPTER 2 - DECIDING WHICH COMPONENT TO USE IPLOT Properties Depreciated Properties Methods Events IXYPLOT Properties Depreciated Properties Methods Events CHAPTER 3 - OVERALL THEORY SPECIFIC EXAMPLES: Visual Basic/VBA/VBScript Visual C C++ Builder Delphi/Kylix PLOT OBJECTS PLOT OBJECT INDEX PLOT OBJECT NAME GET PLOT OBJECT INDEX BY NAME GET PLOT OBJECT NAME BY INDEX CHAPTER 4 - AXES SPAN MIN AND MAX ROTATED AXES LABEL FORMATS Simple Values Exponential Values iv

5 Table of Contents Prefix Values Date/Time Values Price32nds REVERSE SCALES SCALE TYPES Linear Logarithmic Base LABELSEPARATION LABELSMARGIN LABELSMINLENGTH LABELSMINLENGTHAUTOADJUST STACKINGENDSMARGIN TRACKING USER INTERFACE CUSTOMIZING TICK LABELS Visual Basic Example Visual C++ Example PROPERTIES METHODS EVENTS CHAPTER 5 - DATA VIEW CHANNELS ANNOTATIONS DATA CURSORS LIMITS LAYER ORDER GRIDS MAJOR AND MINOR LINES STACKED AXES AND GRID LINES PROPERTIES METHODS EVENTS CHAPTER 6 - CHANNELS TRACE LINES DATA MARKERS INDIVIDUAL DATA MARKERS CHANNEL FILL TRACKING RING BUFFER DIGITAL CHANNEL SUPPORT ASYNCHRONOUS AND SYNCHRONOUS DATA CHANNEL DATA LOGGING FASTDRAW iplot Component Channel: iplotchannel: ixyplot Component Channel: iplotxychannel: v

6 Table of Contents PROPERTIES METHODS EVENTS CHAPTER 7 - LEGEND PREDEFINED COLUMNS TURN ON AND OFF COLUMN TITLES PROPERTIES METHODS EVENTS CHAPTER 8 - TOOLBAR CONFIGURE INDIVIDUAL BUTTONS IMPLEMENTED EXTERNALLY BUTTON DESCRIPTIONS Resume Button Pause Button Axes Scroll Mode Button Axes Zoom Mode Button Zoom In Button Zoom Out Button Select Button Zoom Box Button Cursor Button Edit Button Copy Button Save Button Print Button PROPERTIES METHODS EVENTS CHAPTER 9 - ANNOTATIONS ANNOTATION TYPES Text Line Rectangle LineX LineY ANNOTATION REFERENCE RELATIONSHIPS DataView Reference Channel Reference MOVEABLE ANNOTATIONS HOW TO ADD ANNOTATIONS Text Annotation Example Line Annotation Example Rectangle Annotation Example vi

7 Table of Contents LineX Example LineY Example HOW TO REMOVE ANNOTATIONS ANNOTATION CLICK EVENT PROPERTIES METHODS EVENTS CHAPTER 10 DATA CURSORS CURSOR TYPES Value X-Y Cursor [ValueXY] Value X Cursor [ValueX] Value Y Cursor [ValueY] Period Cursor [DeltaX] Peak-Peak Cursor [DeltaY] Frequency Cursor [InverseDeltaX] ADDING AND REMOVING CURSORS Data Cursor Example ACCESSING INDIVIDUAL CURSOR PROPERTIES Controlling User Popup Menu Controlling Hints Controlling Cursor Pointers IPLOT COMPONENT SPECIFIC NOTES IXYPLOT COMPONENT SPECIFIC NOTES CURSOR EVENTS PROPERTIES METHODS EVENTS CHAPTER 11 - LIMITS LINEX LINEY BANDX BANDY POLYBANDX PLOYBANDY ADDING AND REMOVING LIMITS Single-Line Limit Examples Band Limit Examples Poly Band Limit Examples PROPERTIES METHODS EVENTS CHAPTER 12 - LABELS HOW TO ADD LABELS Horizontal Label Example vii

8 Table of Contents Vertical Label Example HOW TO REMOVE LABELS PROPERTIES METHODS EVENTS CHAPTER 13 - VISUAL LAYOUT MANAGER TUTORIAL How to Move Objects Resizing Plot Objects How to Stack Axes Rotating X and Y-Axes CHAPTER 14 - ADDING DATA ADDXY Complete AddXY Example Visual Basic Visual C++ [Disp Inteface] Visual C++ [High-Speed idispatch Interface] C++ Builder Delphi/Kylix Internet Explorer [Client-Side, VBScript] Special ActiveX Example: Visual Basic Visual C++ [Disp Interface] Visual C++ [High-Speed idispatch Interface] Internet Explorer [Client-Side, VBScript] OTHER DATA ADDING METHODS ADDYELAPSEDSECONDS ADDYELAPSEDTIME ADDYNOW ADDXYARRAYS ADDEMPTY ADDXNULL [IPLOTX COMPONENT ONLY] ADDNULL [IXYPLOTX COMPONENT ONLY] MODIFYING/READING DATA RUNNING Y-VALUE MIN, MAX, AND MEAN EMPTY DATA POINTS CHAPTER 15 - NULL DATA HANDLING ADDING A NULL Y DATA POINT AT A SPECIFIC X DATA POINT (IPLOT ONLY) ADDING A NULL X & Y DATA (IXYPLOT ONLY) SETTING A NULL Y DATA POINT AT A SPECIFIC X DATA POINT FULL SOURCE EXAMPLE Visual Basic Visual C++ [Disp Inteface] Visual C++ [High-Speed idispatch Inteface] Delphi/Kylix C++ Builder viii

9 Table of Contents Internet Explorer CHAPTER 16 - USER INTERFACE CONTROL THE BUILT-IN TOOLBAR SCROLLABLE AND ZOOMABLE AXES ZOOMING TOOLS SELECT TOOL CURSOR TOOL CONTEXT SENSITIVE RIGHT-CLICK MENUS (POPUP MENUS) Axis Object DataView Object Toolbar Object Legend Object DataCursor Object RUNTIME PROPERTY EDITOR Right-Click on Plot Object Preventing or Disabling UI Interaction Disabling All UI Interaction on a Plot Object Disabling Popup Menu on a Plot Object or On Entire Component Toolbar Runtime Property Editor Button CHAPTER 17 - TRACKING TRACKING STYLES ScaleMinMax [Y-Axis Default] ScaleMax ScaleMin ScrollSmooth [X-Axis Default] Scroll Page ExpandCollapse TRACKING ALIGN FIRST STYLES Min Max Auto None [All Axis Default] TRACKING SCROLL COMPRESS MAX ENABLING AND DISABLING TRACKING Channel Tracking Properties Axis Tracking Properties User Interaction Manual Tracking CHAPTER 18 - INTERPOLATION NONE STRAIGHT LINE CUBIC SPLINE POLYNOMIAL RATIONAL ix

10 Table of Contents DIFFERENTIAL CHAPTER 19 - LOADING AND SAVING DATA DATA FORMATS SaveDataToFile LoadDataFromFile SavePropertiesToFile LoadPropertiesFromFile DATA LOG FORMATS LogFileName LogBufferSize LogActivate LogDeactivate ADDDATAARRAY EXAMPLE IMAGE FORMATS CHAPTER 20 - GRAPHICAL EXPORT ENHANCED METAFILEFORMAT BITMAP JPEG PNG GETBYTESJPEG METHOD CHAPTER 21 - PRINTING PRINTING OPTIONS Page Orientation Printer Dialog Margins SIMPLE CHART PRINT USING WITH EXTERNAL REPORTING PACKAGES OR CUSTOM CODE Clipboard Transfer IPictureDisp Object Transfer Save to Enhanced Metafile PRINTING TIPS CHAPTER 22 - AUTOSCALE AND AUTOLABEL RULE MODIFYING THE RULE DesiredIncrement Desired Start TRACKING CHAPTER 23 - VISUAL C++ DISP VS. IDISPATCH INTERFACE DISP INTERFACE [LATE BINDING] IDISPATCH INTERFACE [EARLY BINDING] CHAPTER 24 - USING WITH DATABASE x

11 Table of Contents INTEGRATED TEXT FILE SAVING AND LOADING SIMPLE X AND Y DATA TIME/DATE X AND Y DATA ADDING VERY LARGE AMOUNTS OF DATA TO THE CHART CHAPTER 25 - LAYOUT CONTROL THROUGH CODE LAYOUT MANAGER LAYOUT OBJECT ZORDER LAYOUT OBJECT STARTPERCENT AND STOPPERCENT Horizontal Layout Object Vertical Layout Object DataViewZVert DataViewZHorz TOOLBAR AND LEGEND X AND Y-AXES StackingEndsMargin LAYOUT OBJECT HORIZONTAL FULL LAYOUT THROUGH CODE EAMPLE Visual Basic/VBA/VBScript DELPHI/KYLIX Visual C++ [Disp Interface] Visual C++ [High-Speed idispatch Inteface] C++ Builder CHAPTER 26 - PERFORMANCE TUNING COMPONENT SIZE FRAME RATE AutoFrameRate UpdateFrameRate BeginUpdate EndUpdate SYSTEM HARDWARE Processor Memory Video Card Special ActiveX Example: Visual Basic Visual C++ [Disp Interface] Visual C++ [High-Speed idispatch Interface] Internet Explorer [Client-Side, VBScript] CHAPTER 27 - MEMORY UTILIZATION DATA STORAGE Memory Usage Calculations GB Application RAM Barrier RESOURCE MEMORY VS. RAM MEMORY RAM Memory Resource Memory xi

12 Table of Contents RING BUFFER CHAPTER 28 - IMPLEMENTING TOOLBAR EXTERNALLY RESUME BUTTON PAUSE BUTTON AXES SCROLL MODE BUTTON AXES ZOOM MODE BUTTON ZOOM IN BUTTON ZOOM OUT BUTTON SELECT BUTTON ZOOM BOX BUTTON CURSOR BUTTON EDIT BUTTON COPY BUTTON SAVE BUTTON PRINT BUTTON CHAPTER 29 - IMPLEMENTING LEGEND EXTERNALLY CHANNEL NAME LISTING CHANNEL TRACE LINE STYLE AND COLOR LISTING CHANNEL MARKER STYLE AND COLOR LISTING CHANNEL ASSOCIATED X-AXIS CHANNEL ASSOCIATED Y-AXIS CHANNEL CURRENT X/Y COORDINATE CHAPTER 30 - ASP (ACTIVE SERVER PAGES) CHAPTER 31 - INTERNET EXPLORER (CLIENT SIDE) CREATING THE PLOT PACK ACTIVEX OBJECT IN YOUR WEB PAGE ClassID List for Plot Pack Components INSTALLING THE PLOT PACK ACTIVEX CONTROL ON THE CLIENT LICENSING THE PLOT PACK ACTIVEX CONTROL ACCESSING THE PLOT PACK ACTIVEX CONTROL FROM VBSCRIPT FULL SOURCE EXAMPLE APPENDIX A - PLOT PACK PROPERTY EDITORS CONTROL GENERAL CONTROL TITLE CONTROL PRINT CONTROL HINTS CONTROL FILE I/O TRANSLATION ANNOTATION DEFAULTS CHANNELS GENERAL CHANNEL TRACE INTERPOLATION CHANNELS MARKERS xii

13 Table of Contents CHANNELS FILL CHANNELS DIGITAL CHANNEL FILE I/O CURSORS GENERAL CURSORS HINT CURSORS MENU ITEMS LIMITS GENERAL AXES GENERAL AXES TITLE AXES LABELS AXES TRACKING AXES CURSOR AXES SCROLL AXES SCALE LEGEND TOOLBAR DATA VIEW LABELS APPENDIX B - ACTIVEX HTML PROPERTIES AND EVENTS HTML PAGE IMPORTANT NOTES Boolean Values: Double Values: PROPERTIES VBSCRIPT EVENTS JAVASCRIPT EVENTS LPK FILE TUTORIAL Web Page ActiveX Licensing: What is an LPK File? Steps to create an LPK File APPENDIX C -- WHAT IS DATETIME FORMAT? APPENDIX E -- FREQUENTLY ASKED QUESTIONS INDEX xiii

14 Table of Contents This page intentionally left blank xiv

15 Chapter 1 - Introduction Chapter 1 - Introduction Welcome to the Iocomp Plot Pack Manual. This manual, in addition to our help files and example source code projects included on our website, provides a full suite of documentation for understanding how our Plot Pack components are constructed, operate, and are used to enhance the applications you develop. The Plot Pack currently includes two components: the iplot component which is designed for y = f(x) (Incrementing X Values) types of plotting data and the ixyplot component which is designed for plotting data that does not follow this equation and may have multiple Y solutions for any given X value. This manual is broken up into several chapters covering different aspects of the Plot Components. The components have been designed entirely on an object oriented approach, making them well suited for both simple and complex charting applications while leaving themselves open to the addition of many features and enhancements. The following icons are used throughout the manual for emphasis Important Note:! Useful Sample Code Conventions Tip: Reminder: All simple examples are formatted using a Visual Basic-like syntax. Depending upon your compiler, the syntax of accessing plot objects and properties may differ. Some specific examples for each major development environment are provided, formatted for that specific compiler. As an example, to access the TitleText property for the first X-Axis you would use the following different syntax for these major development environments Microsoft Visual Basic/VBA/VBScript iplotx1.xaxis(0).title = "Sample Title" Borland Delphi/Kylix iplot1.xaxis[0].title := 'Sample Title'; Microsoft Visual C++ m_iplotx1.getxaxis(0).settitle("sample Title"); //Disp Interface m_iplotx1->xaxis[0]->title = "Sample Title"; //idispatch Interface Borland C++ Builder iplot1->xaxis[0]->title = "Sample Title"; 1

16 Chapter 1 - Introduction Visual C++ Special Compiler Note You will need to include several ActiveX wrapper header files in your include statements to access Plot Component sub objects //include the following for iplotx #include "iplotx.h" #include "iplotchannelx.h" //include the following for ixyplotx #include "ixyplotx.h" #include "ixyplotchannelx.h" //include the following for iplotx and ixyplotx #include "iplotaxisx.h" #include "iplotlegendx.h" #include "iplottoolbarx.h" #include "iplotdataviewx.h" #include "iplotannotationx.h" #include "iplotlabelx.h" #include "iplotlimitx.h" #include "iplotdatacursorx.h" Enumerated types of ActiveX controls are only supported by Visual C++ if you are using the high-speed idispatch interface to an ActiveX control. Refer to the chapter on Visual C++ Disp vs. idispatch Interface for more information on using the high-speed idispatch interface. Refer to the help file for values associated with enumerated properties if you are using the Disp Interface. Microsoft Visual C++ does not support integration of our help files in to the Visual C++ IDE. You can view our help files through one of the following methods 1. Click on your START menu button, select Programs, and then Iocomp. In this folder you will find links to our help files for our ActiveX and VCL/CLX components as well as links to release notes, website information, and a link to the directory where our products are installed. 2. Navigate to the folder where you installed our products (generally c:\iocomp\product or c:\program files\iocomp\components). In this folder are our ActiveX and VCL help files which you can open directly as well as release notes, and the actual component binaries and source files. 3. Download one of the appendices listed in this manual for the ActiveX and VCL help. These appendices contain the same information in the ActiveX and VCL help files, but has been formatted for printing. 2

17 Chapter 1 - Introduction Borland Delphi, Kylix, and C++ Builder Special Compiler Note You will need to include itypes in your USE statement to access enumerated types of components. You should be sure to use our VCL/CLX version of our components since this is the native source code of our products. The ActiveX versions are simply VCL components wrapped with the Delphi DAX framework to make them compatible with ActiveX development environments. If you use our VCL/CLX version, you will be able to take advantage of special Delphi, Kylix, and C++ Builder VCL/CLX features such as the ability to compile the components into your application binary. Component Naming Conventions This manual covers the ActiveX, VCL, and CLX component versions of our components. Since these three component architectures differ in many ways, the actual class names of these components differ slightly. If we are talking generically about a component, we will refer to the Plot Components as iplot and ixyplot. In the ActiveX version of the components, the actual class names are iplotx and ixyplotx. In the VCL and CLX versions, the class names are TiPlot and TiXYPlot. You can extrapolate this to all of the components produced by Iocomp Software. All VCL and CLX components start with "Ti" and do not end in "X". All ActiveX components start with I and end in "X". Source Code Unit Naming Conventions The source of our components is written in Borland Delphi for Windows and Borland Kylix for Linux, corresponding to the VCL and CLX versions of our components respectively. The source code is identical between these two component standards, minus some IFDEF differences that you will see in the source. The major difference is in the naming of the Unit files. All VCL component Unit files start with "i". All CLX component Unit file names are the same with "Q" appended on the front. The class names of the components are still the same. Delphi and Kylix can decipher the difference between the VCL and CLX versions due to their inheritance which is dictated by our iinclude.inc file and corresponding IFDEFs. 3

18 Chapter 2 - Deciding Which Component To Use Chapter 2 - Deciding Which Component To Use The Plot Pack includes several different components for your charting applications. Each component has been designed for a particular type of chart. Feature iplot ixyplot Unlimited number of Channels Unlimited number of Data Cursors Unlimited number of Limits Channel Ring Buffers Annotations (Text, Line, and Rectangle) Unlimited number of X&Y-Axes Built in Toolbar and Legend Linear and Logarithmic Scales Reversible Scales Value, Prefix, Exponent, and Data/Time Scale Label styles Horizontal or Vertical orientation of Axes Data Point Markers Intelligent AutoScale of Axes in human readable format (1-2-5 Rule) Visual Layout manager (Design-Time and Run-Time) Stackable Scales (See Visual Layout Manager) Printing, Saving, Picture interface, and CopyToClipBoard Automated Data Logging to Disk Single-Line Cursor Cross-Hair Cursor Data Fill Optimized Drawing Routines for Large Data Sets Data Set restricted to y = f(x) Data Drill Down Interpolation Wondering why the ixyplot component has such as strange name? This component was named this way to help our ActiveX customers. If the class name had been named iplotxy then under ActiveX the component class would have been iplotxyx, which would have been confusing. 4

19 Chapter 2 - Deciding Which Component To Use The following ActiveX, VCL and CLX components are included with the Plot Pack iplot The iplot component has been designed for y = f(x) based graphs. Supports data with a continuously incrementing x-value. Typical uses are for Strip Chart, Chart Recorder, or Scrolling Chart types of plotting applications. This is the chart that should be used for almost all plotting applications. The Plot component also supports data fill (see Channel #1 example above) to a specified reference line as well as specialized AddData functions for time based data. Drawing routines have been optimized in this component to provide high-speed access and drawing (paint and scroll) operations. This is made possible due to the fact that the data sets need to follow the for y = f(x) function. The iplot main interface contains several properties, methods, and events that affect the overall appearance and operation of the entire component. 5

20 Chapter 2 - Deciding Which Component To Use Properties AnnotationDefaultBrushColor AnnotationDefaultBrushStlye AnnotationDefaultFontColor AnnotationDefaultFont AnnotationDefaultPenColor AnnotationDefaultPenStlye AnnotationDefaultPenWidth Annotation AutoFrameRate BackGroundColor BackGroundPicture BorderStyle Channel ComponentHandle DataCursor DataView DataViewZHorz DataViewZVert HintsFontColor HintsFont HintsHidePause HintsPause HintsShow Labels Legend Limit LogBufferSize LogFileName Logging Active OptionSaveAllProperties OuterMarginBottom OuterMarginLeft OuterMarginRight OuterMarginTop PrintMarginBottom PrintMarginLeft PrintMarginRight PrintMarginTop PrintOrientation PrintShowDialog ToolBar UpdateFrameRate UserCanEditObjects XAxis XYAxesReverse YAxis Refer to the Plot Object Sections for properties of the Plot Objects. These properties are only for the main plot interface. Refer to Appendix C & D for more detailed information about the iplot main interface properties. Depreciated Properties The following properties have been depreciated due to the inclusion of newer functionality provided. These properties are provided for backward compatibility only. TitleFontColor TitleFont TitleMargin TitleText TitleVisible 6

21 Chapter 2 - Deciding Which Component To Use Methods AddAnnotation AddChannel AddDataArray AddDataCursor AddDataView AddLabel AddLegend AddLimit AddToolBar AddTranslation AddXAxis AddYAxis AnnotationCount BeginUpdate ChannelCount ClearAllData CopyToClipBoard DataCursorCount DataViewCount DeleteAllTranslations DeleteAnnotation DeleteChannel DeleteDataCursor DeleteDataView DeleteLabel DeleteLegend DeleteLimit DeleteToolBar DeleteTranslation DeleteXAxis DeleteYAxis DisableAllTracking DisableLayoutManager EnableAllTracking EnableLayoutManager EndUpdate GetBytesJPEG GetChannelIndexByName GetNow GetSnapShotPicture GetTranslationOriginalString GetTranslationReplacementString GetXAxisIndexByName GetYAxisIndexByName LabelCount LegendCount LimitCount LoadDataFromFile LoadPropertiesFromFile LoadTranslationsFromFile Lock LogActivate LogDeactivate PrintChart RemoveAllAnnotations RemoveAllChannels RemoveAllDataCursors RemoveAllDataViews RemoveAllLabels RemoveAllLegends RemoveAllLimits RemoveAllToolBars RemoveAllXAxes RemoveAllYAxes RepaintAll SaveDataToFile SaveImageToBitmap SaveImageToJPEG SaveImageToMetaFile Save SavePropertiesToFile SaveTranslationsToFile ToolBarCount TranslationCount Unlock XAxisCount YAxisCount Refer to the Plot Object Sections for methods of the Plot Objects. These methods are only for the main plot interface. Refer to Appendix C and D for more detailed information about the iplot main interface methods. Events OnAfterPrint OnBeforePrint OnClickAnnotation OnClickDataPoint OnDataCursorChange OnKeyDown OnKeyPress OnKeyUp OnMouseDown OnMouseMove OnMouseUp OnXAxisCustomizeLabel OnXAxisMinChange OnXAxisSpanChange OnYAxisCustomizeLabel OnYAxisMinChange OnYAxisSpanChange Refer to Appendix C and D for more detailed information about the iplot main interface events. 7

22 Chapter 2 - Deciding Which Component To Use ixyplot The ixyplot component has been designed for graphs that don t have continuously incrementing x-values, and are not based on a y = f(x) function. Since we don t restrict that the graph be based on a y = f(x) function, there are some features that are not included or are different between the ixyplot component and the iplot component such as Null Data Handling: to specify a null data point (for inserting in breaks between trend line point to point connections or for signifying that a null data point exists), you will first have to add dummy data for a null data point and then set that data point to null. Drawing Routines: the drawing routines in the ixyplot component are not as optimized as in the iplot component since each channel is not based on y = f(x). For large data sets, performance may be sluggish. Use the iplot component whenever possible if your data is based on y = f(x) and you are using large data sets. Channel Fill: Since there can be any number of Y values for a particular X value, it is not possible to fill below or above a curve that can fit to these data points. Interpolation: Since there can be any number of Y values for a particular X value, it is not possible to perform interpolation or curve fitting functions to the channel data. Speed: Special speed enhancements are included in the iplot component that require the data added to it to be based on y = f(x). The ixyplot component will lose some speed improvements with large data sets. 8

23 Chapter 2 - Deciding Which Component To Use Properties The ixyplot main interface contains several properties, methods, and events that affect the overall appearance and operation of the entire component. AnnotationDefaultBrushColor AnnotationDefaultBrushStlye AnnotationDefaultFontColor AnnotationDefaultFont AnnotationDefaultPenColor AnnotationDefaultPenStlye AnnotationDefaultPenWidth Annotation AutoFrameRate BackGroundColor BackGroundPicture BorderStyle Channel ComponentHandle DataCursor DataView DataViewZHorz DataViewZVert HintsFontColor HintsFont HintsHidePause HintsPause HintsShow Labels Legend Limit LogBufferSize LogFileName Logging Active OptionSaveAllProperties OuterMarginBottom OuterMarginLeft OuterMarginRight OuterMarginTop PrintMarginBottom PrintMarginLeft PrintMarginRight PrintMarginTop PrintOrientation PrintShowDialog ToolBar UpdateFrameRate UserCanEditObjects XAxis XYAxesReverse YAxis Refer to Appendix C and D for more detailed information about the ixyplot main interface properties. Depreciated Properties The following properties have been depreciated due to the inclusion of newer functionality provided. These properties are provided for backward compatibility only. TitleFontColor TitleFont TitleMargin TitleText TitleVisible 9

24 Chapter 2 - Deciding Which Component To Use Methods AddAnnotation AddChannel AddDataArray AddDataCursor AddDataView AddLabel AddLegend AddLimit AddNull AddToolBar AddTranslation AddXAxis AddYAxis AnnotationCount BeginUpdate ChannelCount ClearAllData CopyToClipBoard DataCursorCount DataViewCount DeleteAllTranslations DeleteAnnotation DeleteChannel DeleteDataCursor DeleteDataView DeleteLabel DeleteLegend DeleteLimit DeleteToolBar DeleteTranslation DeleteXAxis DeleteYAxis DisableAllTracking DisableLayoutManager EnableAllTracking EnableLayoutManager EndUpdate GetBytesJPEG GetChannelIndexByName GetNow GetSnapShotPicture GetTranslationOriginalString GetTranslationReplacementString GetXAxisIndexByName GetYAxisIndexByName LabelCount LegendCount LimitCount LimitCount LoadDataFromFile LoadPropertiesFromFile LoadTranslationsFromFile Lock LogActivate LogDeactivate PrintChart RemoveAllAnnotations RemoveAllChannels RemoveAllDataCursors RemoveAllDataViews RemoveAllLabels RemoveAllLegends RemoveAllLimits RemoveAllToolBars RemoveAllXAxes RemoveAllYAxes RepaintAll SaveDataToFile SaveImageToBitmap SaveImageToJPEG SaveImageToMetaFile Save SavePropertiesToFile SaveTranslationsToFile ToolBarCount TranslationCount Unlock XAxisCount YAxisCount Refer to the Plot Object Sections for methods of the Plot Objects. These methods are only for the main plot interface. Refer to Appendix C and D for more detailed information about the iplot main interface methods. Events OnAfterPrint OnBeforePrint OnClickAnnotation OnClickDataPoint OnDataCursorChange OnKeyDown OnKeyPress OnKeyUp OnMouseDown OnMouseMove OnMouseUp OnXAxisCustomizeLabel OnXAxisMinChange OnXAxisSpanChange OnYAxisCustomizeLabel OnYAxisMinChange OnYAxisSpanChange 10

25 Chapter 3 - Overall Theory Chapter 3 - Overall Theory The Plot Pack components are object-oriented components that are designed for very high speed plotting and ease of use by both the application programmer and application user. The hierarchy of the Plot Pack components is shared among the many different types of plotting components that we offer. This allows programmers to use or Plot Components interchangeably since most of the properties, objects, and methods are common. There are several objects that make up the base for our Plot Components, and the hierarchy is as follows iplot or ixyplot Plot Objects DataView iplotaxis ToolBar Channel Legend Annotation DataCursor Limit Label Translation XAxis YAxis There can be any number of Plot Objects associated with each Plot Component. This gives rise to our Multiple Axes, Multiple Annotations, Multiple Labels, and Multiple Channel features. To access one of these Plot Component sub-objects, you would need to specify the index value of that object. For example Generic Example: icomponent1.plotobject(0).property = Value The iplotaxis object is the ancestor of the iplotxaxis and iplotyaxis (Shown above as XAxis and YAxis) objects. It should not be accessed directly. To work with the X and/or Y-Axis, use the X-Axis and Y-Axis interfaces instead. 11

26 Chapter 3 - Overall Theory Specific Examples: Visual Basic/VBA/VBScript icomponentx1.dataview(0).gridshow = TRUE icomponentx1.xaxis(0).min = 100 icomponentx1.yaxis(0).min = 100 icomponentx1.channel(0).name = "Channel 1" icomponentx1.legend(0).visible = TRUE icomponentx1.toolbar(0).showeditbutton = FALSE icomponentx1.annotation(0).text = "Sample Annotation" icomponentx1.datacursor(0).style = ipcsdeltax icomponentx1.limit(0).xaxisname = "X-Axis 1" icomponentx1.labels(0).caption = "Chart Y vs. Time" Visual C++ //Disp Interface m_icomponentx1.getdataview(0).setgridshow(true); m_icomponentx1.getxaxis(0).setmin(100); m_icomponentx1.getyaxis(0).setmin(100); m_icomponentx1.getchannel(0).setname("channel 1"); m_icomponentx1.getlegend(0).setvisible(true); m_icomponentx1.gettoolbar(0).setshoweditbutton(false); m_icomponentx1.getannotation(0).settext("sample Annotation"); m_icomponentx1.getdatacursor(0).setstyle(3); //ipcsdeltax m_icomponentx1.getlimit(0).setxaxisname("x-axis 1"); m_icomponentx1.getlabels(0).setcaption("chart Y vs. Time"); //idispatch Interface icomponentx1->dataview[0]->gridshow = TRUE; icomponentx1->xaxis[0]->min = 100; icomponentx1->yaxis[0]->min = 100; icomponentx1->channel[0]->name = "Channel 1"; icomponentx1->legend[0]->visible = TRUE; icomponentx1->toolbar[0]->showeditbutton = FALSE; icomponentx1->annotation[0]->text = "Sample Annotation"; icomponentx1->datacursor[0]->style = ipcsdeltax; icomponentx1->limit[0]->xaxisname = "X-Axis 1"; icomponentx1->labels[0]->caption = "Chart Y vs. Time"; 12

27 Chapter 3 - Overall Theory C++ Builder icomponent1->dataview[0]->gridshow = TRUE; icomponent1->xaxis[0]->min = 100; icomponent1->yaxis[0]->min = 100; icomponent1->channel[0]->name = "Channel 1"; icomponent1->legend[0]->visible = TRUE; icomponent1->toolbar[0]->showeditbutton = FALSE; icomponent1->annotation[0]->text = "Sample Annotation"; icomponent1->datacursor[0]->style = ipcsdeltax; icomponent1->limit[0]->xaxisname = "X-Axis 1"; icomponent1->labels[0]->caption = "Chart Y vs. Time"; Delphi/Kylix icomponent1.dataview[0].gridshow := TRUE; icomponent1.xaxis[0].min := 100; icomponent1.yaxis[0].min := 100; icomponent1.channel[0].name := 'Channel 1'; icomponent1.legend[0].visible := TRUE; icomponent1.toolbar[0].showeditbutton := FALSE; icomponent1.annotation[0].text := 'Sample Annotation'; icomponent1.datacursor[0].style := ipcsdeltax; icomponent1.limit[0].xaxisname := 'X-Axis 1'; icomponent1.labels[0].caption := "Chart Y vs. Time";! The index values are all zero based, meaning the first object s index is 0, the second is 1, the third is 2, and so on. Currently only one Data View, one Legend, and one Toolbar object is supported at this time and is left open for future expansion. The Axes object is not accessed directly. Access the X-Axis and Y-Axis objects through the individual X- Axis and Y-Axis objects. Plot Objects As shown above, the plot component is made up of many sub objects, referred to in this manual as plot objects. Plot Objects allow for the multiple axis, multiple channel, multiple limit, multiple label, and multiple data cursor features of the component by allowing an unlimited number of plot objects. Note that some plot objects currently only support one object of their type, such as the DataView, Legend, and Toolbar, but will be upgraded in the future. Plot Object Index To access a specific plot object, such as the third channel for example, you need to use the index of that plot object. Note that a plot object indices start at 0 icomponent1.channel(2).property = Value icomponent1.channel(2).procedure 13

28 Chapter 3 - Overall Theory Plot Object Name All plot objects have a unique index value that is generated when they are created. You can also associate a name to a plot object using the Name starting property of each plot object. Each plot object is generally referenced by its index, but you can also use the name of a plot object when referencing. This allows you to use your own system of referencing multiple channels or axes without using the index values. Also, some properties used by other plot objects to reference other plot objects require the name of the plot object instead of the index. icomponent1.channel(0).procedure icomponent1.channel(icomponent1.getchannelindexbyname("channel 1").Procedure icomponent1.datacursor(1).channelname = "Channel 1" icomponent1.datacursor(1).channelname = icomponent1.channel(0).name Get Plot Object Index By Name You can retrieve the index of a channel or axis by using the following procedure and passing the name of the object Index = icomponent1.getchannelindexbyname("channel 1") Index = icomponent1.getxaxisindexbyname("xaxis 1") Index = icomponent1.getyaxisindexbyname("yaxis 1") Get Plot Object Name by Index You can retrieve the name of any plot object as follows NameString = icomponent1.channel(index).name NameString = icomponent1.xaxis(index).name NameString = icomponent1.yaxis(index).name NameString = icomponent1.datacursor(index).name NameString = icomponent1.limit(index).name NameString = icomponent1.labels(index).name 14

29 Chapter 4 - Axes Chapter 4 - Axes The Axes Plot Object refers to both the X-Axis and Y-Axes Plot Objects. You need to have at least one X-Axis and one Y-Axis to be able to display data in the chart. Every channel that contains data will need to be associated with one X-Axis and one Y-Axis to be able to display data. Many of the operations of a chart are handled through the axes. The axis object not only provides a visual display of the X-Axis and Y-Axis scales, but are dynamic in that they allow the user to scroll the plot data that is displayed, zoom in and out, and otherwise have complete control over the data displayed in the chart even while you are adding data in real-time! The Axes also have built-in scrolling and scaling capabilities that make implementing a very professional chart very easy. This automated scrolling and scaling is referred to as Tracking, and is fully automated. Refer to the chapter entitled Tracking for more information on fine-tuning and configuring the tracking features. Axis Objects To move, resize, and stack axes and other plot objects show above, refer to the chapter entitled Visual Layout Manager for more information about using the Visual Layout Manager. If you need to dynamically modify the chart layout at runtime or through your program code, refer to the chapter entitled Layout Control Through Code 15

30 Chapter 4 - Axes As you will notice above, there is one X-Axis and actually two Y-Axis. This is useful if you have several data channels where you would like to have a shared, common X-Axis but want to have separate, independent Y-Axis with different scales. The above examples show the Y-Axes stacked. You can also have them oriented side by side if you wish. Both the X-Axis and Y-Axis objects support multiple axes, so you can have as many Y-Axes of each type as you wish. Each channel, however, can only be associated with one X and one Y-Axis at any one time. Below you will find explanations of some of the features supported by both the X and Y-Axes Span To set the breadth of values that are displayed on the axis, set the Span property. The Span property specifies the value displayed between the min and maximum values of the axis. For example, if you wish the axis to display 1000 units of data, set the Span property to If the user scrolls the axis, they are modifying the Min property of the scale, but the span will always be constant. If the user zooms the axis, then the Span value will change according to the ZoomFactor. (i.e. if the user zooms in by a factor of 2, then the Span will be reduced in half from 1000 to 500) iplot1.yaxis(0).span = 1000 iplot1.yaxis(0).span = 1000 Min and Max The Min property is used to set the minimum value of the axis that is currently visible. The Max property is read only and is simply a calculation of Max = Min + Span. iplot1.min = 10 'Max is a read-only value MaxValue = iplot1.max...is the same as... MaxValue = iplot1.yaxis(0).min + iplot1.yaxis(0).span The minimum and maximum values that the axes support are as follows... Maximum Value: +1x or +1E300 Minimum Value: -1x or -1E300 Data Precision: 15 places 16

31 Chapter 4 - Axes Rotated Axes The X and Y-Axes can be rotated so that you can plot both horizontally and vertically based upon your application needs. Refer to the Visual Layout Manager chapter for more information or use the XYAxesReverse property from the main plot component interface. iplot1.xyaxesreverse = True You can easily rotate the X and Y-Axes without using code in your application by using the Visual Layout Manager inside of our custom property editor. Refer to the chapter Visual Layout Manager for more information on using the Visual Layout Manager. Label Formats All Axes support the following label format styles.. Simple Values Exponential Values 2.35E E-128 Prefix Values 2.2K 3.4M Date/Time Values 3 Jan 01 5:23pm 01/31/2001 Price32nds Price32nds is for use in the Bond and Securities Market. The value is displayed where 23 is in 32nds and 1 is in 256ths. Therefore, in decimal the price above is: /32 + 1/256 = Pass the actual double value of to display it as Price32nds format as to your application end user 17

32 Chapter 4 - Axes Reverse Scales All Axes can be reversed. By default, the axes increase in value from left to right or bottom to top. This can be reversed by setting a simple property called ReverseScale. iplot1.xaxis(0).reversescale = TRUE Log Scale Scale Types All Axes support the following scale types Reversed Linear This is the standard type of scale that most programmers will use in their charts. Scales can range from values between 1x to 1x Logarithmic Base 10 Supports logarithmic base-10 type data. Scales can range from base-10 log values of 1x to 1x

33 Chapter 4 - Axes LabelSeparation Use LabelSeparation to get or set the minimum separation between scale labels. LabelSeparation represents the percentage of a character size and is based on the LabelsFont used for the axis. A value of 0.5 is equal to half the size of a character. The actual separation maybe greater due to the AutoScale reducing the number of major ticks to keep the scale labels in a human readable format (1-2-5 Rule). iplot1.xaxis(0).labelseparation = 2 iplot1.yaxis(0).labelseparation = 2 LabelSeparation LabelsMargin LabelSeparation Use LabelsMargin to get or set the spacing between the major tick and major tick labels. LabelsMargin represents the percentage of a character size and is based on the LabelsFont used for the axis. A value of 0.5 is equal to half the size of a character. iplot1.xaxis(0).labelsmargin = 0.25 iplot1.yaxis(0).labelsmargin = 0.25 LabelsMargin 19

34 Chapter 4 - Axes LabelsMinLength Use LabelsMinLength to get or set the minimum label length used in calculating the number of scale labels (Major Ticks) during AutoScale for horizontal layout objects. For vertical layout objects, this is used in calculating the minimum width of the layout object. Set this value larger to ensure that the vertical layout object is of a minimum width to accommodate larger values without needing to increase in size. This property prevents common oscillations that occur when the scale flips between, for example, 4 digits at the top of the scale to three digits. To prevent oscillations in this example, set the min length to 4 so that when the top of the scale goes down to three digits, the width is kept at four digits. AutoScale automatically calculates the number of scale labels based on the LabelsFont, LabelSeparation, and LabelsMinLength properties to ensure labels that are in a human readable format (1-2-5 Rule). iplot1.xaxis(0).labelsminlength = 5 iplot1.yaxis(0).labelsminlength = 10 LabelsMinLength LabelsMinLength! All margins use units of characters. This allows the component to dynamically adjust the scales based upon the font used instead of using rigid pixel specifications. A value of 0.25 would be equivalent to ¼ the size (width or height, depending on if the margin relates to a horizontal or vertical margin) of a single character from the font being used in the layout object. 20

35 Chapter 4 - Axes LabelsMinLengthAutoAdjust Use LabelsMinLengthAutoAdjust to specify whether the LabelsMinLength property is automatically adjusted as the minimum required label length increases. While plotting, or user scrolling/zooming, the actual minimum label length may become greater than the LabelsMinLength property value. This will result it the axis growing in size to accommodate the wider label. If the plotting data or user changes the displayed data causing the label width to vary, it may cause an annoying oscillation of the display plot objects sizes. To prevent this oscillation, set this property to TRUE. The LabelsMinLength property is stored when the TrackingEnabled property is set to FALSE. The LabelsMinLength property will be restored to the previous value when TrackingEnabled property is set back to TRUE. iplot1.xaxis(0).labelsminlengthautoadjust = True StackingEndsMargin Use StackingEndsMargin to get or set the margin at the end of the axis when stacked. StackingEndsMargin represents the percentage of a character size and is based on the LabelFont used for the axis. A value of 0.5 is equal to half the size of a character. Note that this feature currently only supports the Axes layout objects. Also note that the stacking margin only applies to layout objects that touch each other and only affects the ends that touch. In the following example, the first Y-Axis (on the bottom) has a starting percent of 0 and ending percent of 50. The second Y-Axis (on top) has a starting percent of 50 and an ending percent of 100. The Stacking Ends Margin allocates additional space to separate the two stacked axes. The total spacing is 0.5 characters in this example, with the StackingEndsMargin values being cumulative. The StackingEndsMargin will have no effect on the ends of the ends of the axes unless they touch another axis. iplot1.yaxis(0).startpercent = 0 iplot1.yaxis(0).stoppercent = 50 iplot1.yaxis(0).stackingendsmargin = 0.25 iplot1.yaxis(1).startpercent = 50 iplot1.yaxis(1).stoppercent = 100 iplot1.yaxis(1).stackingendsmargin =

36 Chapter 4 - Axes StackingEndsMargin (0.5 Total = ) Tracking Tracking refers to the Auto-Scale and Auto-Scroll features of the axes. The axes have the capability to adjust their scales and scroll dynamically at runtime according to several properties that you setup. This makes it easy to implement a chart that looks and functions the way that you would like without complex coding on your part. Refer to the chapter on Tracking for more detailed information. User Interface By default, the component is setup to allow scrolling and zooming of the axes by your application user. The application user is also able to edit the axis properties either through a popup menu or through the run-time menu button on the toolbar. You can control the user interface by using the Enabled and PopupEnabled properties of the axes to control whether the user can scroll/zoom or be able to bring up the popup menu for the axis to edit properties of that axis. If you are using stacked axes, you may notice that the grid appears to be drawn funny in the DataView area. To fix this, assign the grid to the special value <All> so that major ticks for all axes are used to draw the grid lines. e.g. icomponent.dataview(0).gridyaxisname = <All> 22

37 Chapter 4 - Axes Customizing Tick Labels The X and Y Axis scales are automatically configured for you using the AutoScale and AutoLabel (1-2-5 Rule) features of the Plot Components. However, you may wish to customize all or some of the displayed labels with your own text. For example, let's replace all of the X-Axis labels with their string equivalents. We will use the OnXAxisCustomizeLabel event. This event will fire each time a label above is painted on the X- Axi, passing the Index of the Axis being painted, the current Value of the label being painted in double format, and a pointer to the actual Label in String format. We will modify the Label variable which will then be displayed in place of the original value. Here is the chart before using the event. We have six labels, one through ten... Visual Basic Example Private Sub iplotx1_onxaxiscustomizelabel(byval Index As Long, ByVal Value As Double, ALabel As String) 'Examine the Value passed in the event. This event will fire for each 'label in the Axis (Index of the Axis is passed in the Index parameter), 'passing the Value of the Label in the Value parameter. Modify the 'ALabel string that is passed to change the label to any desired string. Select Case Value Case 0: ALabel = "Zero" Case 2: ALabel = "Two" Case 4: ALabel = "Four" Case 6: ALabel = "Six" Case 8: ALabel = "Eight" Case 10: ALabel = "Ten" End Select End Sub 23

38 Chapter 4 - Axes Visual C++ Example void CPlotcustomizelabeltestDlg::OnXAxisCustomizeLabel_m_iPlotX1(long Index, double Value, BSTR FAR* ALabel) { } //Examine the Value passed in the event. This event will fire for each //label in the Axis (Index of the Axis is passed in the Index parameter), //passing the Value of the Label in the Value parameter. Modify the //ALabel string that is passed to change the label to any desired string. if (Value == 0) { *ALabel = ::SysAllocString(L"Zero"); }; if (Value == 2) { *ALabel = ::SysAllocString(L"Two"); }; if (Value == 4) { *ALabel = ::SysAllocString(L"Four"); }; if (Value == 6) { *ALabel = ::SysAllocString(L"Six"); }; if (Value == 8) { *ALabel = ::SysAllocString(L"Eight"); }; if (Value == 10) { *ALabel = ::SysAllocString(L"Ten"); }; Here is the chart after using the OnXAxisCustomizeLabel event...! Warning! Many development languages do not support Case statements even evaluating Double values. The example above uses a Case Statement for simplicity only. If you are using any language besides Visual Basic you will need to use IF statements instead 24

39 Chapter 4 - Axes Properties CursorPrecision CursorScaler DateTimeFormat DesiredIncrement DesiredStart Enabled Height Horizontal InnerMargin LabelSeparation LabelsFontColor LabelsFont LabelsFormatStyle LabelsMargin LabelsMinLengthAutoAdjust LabelsMinLength LabelsPrecision LabelsPrecisionStyle MajorLength MasterUIInput Max Min MinorCount MinorLength Name OuterMargin PopupEnabled RestoreValuesOnResume ReverseScale ScaleLinesColor ScaleLineShow ScaleType ScrollMax ScrollMin ScrollMinMaxEnabled Span StackingEndsMargin StartPercent StopPercent TitleFontColor TitleFont Title TitleMargin TitleShow TrackingAlignFirstStyle TrackingEnabled TrackingScrollCompressMax TrackingStyle Visible Width ZOrder Refer to Appendix C and D for more detailed information about this plot object s properties. Methods GetLabelText NewTrackingData PercentToPosition PixelsToPosition PositionToPercent PositionToPixels ResetFirstAlign UpdateResumeValues ValueOnScale Zoom Refer to Appendix C and D for more detailed information about this plot object s methods. Events OnXAxisCustomizeLabel OnXAxisMinChange OnXAxisSpanChange OnYAxisCustomizeLabel OnYAxisMinChange OnYAxisSpanChange! All events are on the main component interface and not on the sub-object interface. 25

40 Chapter 5 - Data View Chapter 5 - Data View The Data View object is the center-point of the Plot Pack components. This is the area where your data points, trend lines, data cursors, limits, and annotations are displayed. Currently, only one data view is available. The Data View only displays graphical representations of the Channel data. In a future release, a grid data view object will be made available to show numerical representations of your chart data. Data View Object 26

41 Chapter 5 - Data View Channels The channels objects are configured by using the properties and methods of the channel object. To add a channel, execute the AddChannel method from the main interface. To add data or to configure a particular channel, use the index of the channel with the channel sub-interface Index = icomponent.addchannel icomponent.channel(index).procedure icomponent.channel(index).property Here are some specific examples icomponent.channel(0).addxy(12.3, ) Value = icomponent.channel(0).getxmean icomponent.channel(0).color = vbred icomponent.channel(0).markersstyle = ipmssquare Index = icomponent.getchannelindexbyname("channel 1") icomponent.channel(index).addxy(12.3, ) Value = icomponentchannel(index).getxmean icomponent.channel(index).color = vbred icomponent.channel(index).markersstyle = ipmssquare! Remember that one channel is added to the component by default when it is created. You can execute the RemoveAllChannels method in your form loading handler if you wish to remove all channels and start with a component with no channels. Refer to the Channels Chapter for more information about using the Channels Object Annotations Annotations are configured by using the properties and methods of the annotation object. To add an annotation, execute the AddAnnotation method from the main interface. To configure a particular annotation, use the index of the annotation with the annotation sub-interface Index = icomponent.addannotation icomponent.annotation(index).procedure icomponent.annotation(index).property Here are some specific examples icomponent.annotation(0).channelname = "Channel 1" icomponent.annotation(0).channelname = icomponent.channel(0).name icomponent.annotation(0).brushcolor = vbred icomponent.annotation(0).x = 12.5 icomponent.annotation(0).y = icomponent.annotation(0).textrotation = ira180 Refer to the Annotations Chapter for more information about using the Annotation Object 27

42 Chapter 5 - Data View Data Cursors Data are configured by using the properties and methods of the DataCursor object. To add a data cursor, execute the AddDataCursor method from the main interface. To configure a particular data cursor, use the index of the data cursor with the data cursor sub-interface Index = icomponent.adddatacursor icomponent.datacursor(index).procedure icomponent.datacursor(index).property Here are some specific examples icomponent.datacursor(0).channelname = "Channel 1" icomponent.datacursor(0).channelname = icomponent.channel(0).name icomponent.datacursor(0).hintshow = False Value = icomponent.datacursor(0).valuex Value = icomponent.datacursor(0).valuey icomponent.datacursor(0).style = ipcsdeltax! Remember that one data cursor is added to the component by default when it is created. You can execute the RemoveAllDataCursors method in your form loading handler if you wish to remove all data cursors and start with a component with no data cursors. Data Cursors are initially hidden by default(i.e. their visible properties are set to False). To show the data cursors, click on the data cursor button on the toolbar at runtime, set the Visible property of the data cursor to True, or execute the DoButtonClickCursor procedure from the toolbar object. Limits Refer to the Data Cursors Chapter for more information about using the Cursors Object Limits configured by using the properties and methods of the limit object. To add a limit, execute the AddLimit method from the main interface. To configure a particular limit, use the index of the limit with the annotation sub-interface Index = icomponent.addlimit icomponent.limit(index).procedure icomponent.limit(index).property Here are some specific examples icomponent.limit(0).xaxisname = "XAxis 1" icomponent.limit(0).yaxisname = "YAxis 1" icomponent.limit(0).xaxisname = icomponent.xaxis(0).name icomponent.limit(0).yaxisname = icomponent.yaxis(0).name icomponent.limit(0).line1position = 25.0 icomponent.limit(0).line2position = 37.2 icomponent.limit(0).style = iplsbandx Refer to the Limits Chapter for more information about using the Limits Object 28

43 Chapter 5 - Data View Layer Order Objects in the Data View area, such as the grid, channels, limits, annotations, and data cursors are draw in the following order from bottom to top Grid Channels Limits Annotations Data Cursors In a future release, the ability to change the layer order of the objects in the Data View area will be made available. Access to objects in the Data View area is obtained through the Channel, Annotation, and Limit objects, as the DataView object is just a container for these objects. Grids The grid lines you see beneath your plotted data in the DataView area can be configured by using the properties listed below or by using the built-in property editor. The grid lines are drawn with respect to a specified set of X and Y-Axis Major and Minor tick marks as well as around the DataView area. You can setup the grid lines to be drawn to any, all, or none of these lines as you desire. Grid Lines 29

44 Chapter 5 - Data View Major and Minor Lines The GridLineShowXMajors and GridLineShowYMajors properties control whether a line is drawn with respect to the X and Y Major tick marks on your axis. The drawn lines will scroll with the axis when it is scrolled either by the application user or by the AutoScroll capability of the chart. Similarly, the GridLineShowXMinors and GridLineShowYMinors properties control whether a line is drawn with respect to the X and Y Minor tick marks on your axis. Major Tick Grid Line Minor Tick Grid Line If you need to draw grid lines that match up with all Axes or that scroll independently with their associated Axes, utilize the special <All> axis which will instruct the grid lines to be drawn for all visible Axes of that type. For example, if you are stacking three Y-Axes, you will probably want the horizontal grid lines to match up with the major ticks of each axis. To do this, simply set the GridYAxisName property of the DataView object to <All>. icomponent.dataview(0).gridxaxisname = "<All>" icomponent.dataview(0).gridyaxisname = "<All>" 30

45 Chapter 5 - Data View Stacked Axes and Grid Lines When you use stacked axes in the plot components, the standard setting of one Y-Axis or X-Axis to draw the grid lines doesn t always look correct. For example, the following grid lines do not work for this stacked-axes chart Grid Lines Drawn to Only One Y-Axis 31

46 Chapter 5 - Data View The chart would look better if the Y-Axis grid lines were drawn to the ticks of all Y-Axis. To fix this, simply set the GridYAxisName property to the special value of <All> iplot1.dataview(0).gridyaxisname = "<All>" The resulting chart would look like the following Grid Lines Drawn to All Y-Axes 32

47 Chapter 5 - Data View Properties BackgroundColor BackgroundTranparent Enabled GridLineColor GridLineMajorStyle GridLineMinorStyle GridLineShowBottom GridLineShowLeft GridLineShowRight GridLineShowTop GridLineShowXMajors GridLineShowXMinors GridLineShowYMajors GridLineShowYMinors GridShow GridXAxisName GridYAxisName Height Horizontal Name PopupEnabled StartPercent StopPercent Title Visible Width ZOrder Methods Events Refer to Appendix C and D for more detailed information about this plot object s properties. None. Open for future expansion. None. Open for future expansion. 33

48 Chapter 6 - Channels Chapter 6 - Channels The Channel objects are the Plot Component objects that contain your Chart Data (Data Points) and provide the interface for adding data and sending tracking data to the associated axes. There can be an unlimited number of channels in your chart. Each is addressed differently and independent of all of the other channels in the chart. Each channel is associated with a particular X and Y-Axis so that it may draw its data in the Data View in relation to the X and Y Scales. Each channel can have an associated channel data trace line that connects individual data points, channel data marker to show individual data points, and data fill (iplot component only) to flood fill a color or pattern to a reference line. Channels can be synchronous or asynchronous, depending on your needs. Display of digital data is also supported. Channel Object If you open the run-time property editor and navigate to the channel s tab, you will be able to access the Stats page which gives you current Point Count, Memory, and other important statistics about the selected channel. 34

49 Chapter 6 - Channels Trace Lines Trace Lines are the lines drawn between data points on the graph. You can specify the line s color, width, and style to help differentiate it from other trace lines in your chart. For graphs that don t require lines drawn between data points, you can turn off the trace line by setting the TraceVisible property to False. Curve fitting or Interpolation (e.g. Straight Line, Cubic Spline, Polynomial, Rational, Differential, etc) is also supported by the iplot component channel object in addition to straight trace lines. Refer to the chapter entitled Interpolation for more information. The following line styles are available Style iplssolid iplsdash iplsdot iplsdashdot iplsdashdotdot Description A solid line. A line made up of a series of dashes. A line made up of a series of dots. A line made up of alternating dashes and dots. A line made up of a serious of dash-dot-dot combinations. Since we use the Windows API (ActiveX and VCL components), trace line styles such as dashed, dot, and dot dash styles do not work with line widths greater than 1 (i.e. with line widths greater than 1, the trace line will always be solid.). Adding the ability to draw line widths greater than 1 using non-solid lines would seriously affect the speed of the component, so it is recommended that the data point markers and channel colors be used to differentiate between channels with line widths greater than 1. 35

50 Chapter 6 - Channels Data Markers By default, when a data point is drawn on the plot component DataView area, a single-pixel point is used. You can, however, use larger symbols or markers to denote a data point on the chart. This is useful in differentiating between channel data points and for highlighting true data points. The following types of markers are available. Additional types will be added as needed and is open for future expansion. Style ipmscircle ipmssquare ipmsdiamond ipmscross ipmsplus ipmstriangleup ipmstriangledown ipmstriangleleft ipmstriangleright Description Circle Square Diamond Cross Plus Triangle Pointing Up Triangle Pointing Down Triangle Pointing Left Triangle Pointing Right Individual Data Markers By default, when data markers are drawn, the same data marker is used for all data points. You can specify different Data Markers for individual points. When the Data Marker is initially added to the channel, its properties are initially set to the default values specified for the channel. First, set the MarkersAllowIndividual property to True to allow individual specification of each data marker. You can then later use the following properties to modify a data marker. 'Setup Channel iplot1.channel(0).markersvisible = True iplot1.channel(0).markersstyle = ipmsdiamond 'The default style for all 'data markers iplot1.channel(0).markersallowindividual = True 'Data Point 1 index = iplot1.channel(0).addxy (10, 75) 'We'll let this data marker 'use the default values 'Data Point 2 index = iplot1.channel(0).addxy (10, 75) iplot1.channel(0).datamarkershow(index) = False 'Hide this specific 'data marker 'Data Point 3 index = iplot1.channel(0).addxy (11, 72) iplot1.channel(0).datamarkerstyle(index) = ipmsplus 'Change the style 'of this data marker 36

51 Chapter 6 - Channels Channel Fill The iplot component supports the ability to flood fill an area between the trace line and a specified base line (either above or below the trace line). The Fill feature is not available with the ixyplot component since its datasets are not based on y = f(x). To specify a baseline for the flood fill, use the FillReference property on a specific channel. ReferenceLine = 80 ReferenceLine = 60 ReferenceLine = 0 Tracking Tracking refers to the AutoScale and AutoScrolling features of the axes. When new data is added to the channel, tracking data is sent to the associated X and Y-Axes for the channel regarding the newly added data. This data is used by the chart to automatically scale and scroll the axes and channel data. By default, tracking data is sent to both the X and Y-Axes referred to by the channel s XAxisName and YAxisName properties. You can enable or disable the sending of tracking data to a specific X or Y-Axis by using the XAxisTrackingEnabled and YAxisTrackingEnabled properties. 37

52 Chapter 6 - Channels Ring Buffer By default, the chart will buffer all of the data points added to all channels into RAM. This buffered data makes it possible to scroll back to older data (history) and other related functions. The RingBuffer property allows you to control how much data is stored in available memory. If you set the RingBuffer property to 10,000, then memory will be allocated for 10,000 data points. After you add 10,000 data points, the oldest data will begin to be replaced by newly added data points. The Ring Buffer is a FIFO (First In First Out) type buffer. You can find more information on using the Ring Buffer feature in the chapter entitled Memory Utilization. Remember that the RingBuffer properties are assigned to individual channels, and are independent of other channels. Also, Remember that the RingBuffer is specified as the number of data points that will be stored in the buffer. Digital Channel Support If your data sets contain binary data (0 s and 1 s, True and False, etc.), then you can set the DigitalEnabled property to True to enable Digital Channel support. When Digital Channel Support is on, Y values that are = 0 are plotted on the Y-Axis scale according to the DigitalReferenceLow value. Y values that are < 0 or > 0 are plotted on the Y- Axis scale according to the DigitalReferenceHigh value. The result is two possible values for Y on the Y-Axis.! Some compilers treat True as 1 or 1, so any value that is not 0 is treated as a Digital High or Logic = True. All data will be squared off, with a horizontal line drawn from the last data point to the next data point, and then a vertical line drawn between the last horizontal line to the next data point as shown below in Channel #2 38

53 Chapter 6 - Channels Data Points Asynchronous and Synchronous Data The Plot Components are able to handle Asynchronous Data (several channels that don t have synchronized X-Axis or Time data values) or Synchronous Data (several channels that have X- Axis or Time data values that are the same. i.e. there is one data point in each channel for any given X-Axis or Time data value). The only difference between the two data set types relates to the use of the following features of the chart Using the AddDataArray method: This method allows you to add data to all channels by passing the channel data as an array to the main plot interface instead of individually to each channel. This method requires that your data be synchronous. If you data is asynchronous, you can add data using the AddDataArray method by using two special data point values for those data points which don t exist for a particular channel or for those data points which are null values Set the data value to 5E-301 for Null Value Data Points Set the data value to 5E-302 for Empty Value Data Points 39

54 Chapter 6 - Channels Using the Channel Data Logging feature off of the main plot interface instead of individually from each channel: If you are using asynchronous data in conjunction with the AddDataArray method, then you must ensure that the LogBufferSize property is set to 0 or 1 to disable caching of data before it is written to the log file from the main interface. If you data is synchronous, then the LogBufferSize can be set to any value you wish to use. Channel Data Logging This feature is useful if you need an automated way of saving chart data to disk as it is being added in real-time. The saved data can be used by an external program or can be used to reload the data back into the chart at a later time. Channel Data Logging can be setup for each individual channel. You can also setup the main interface for automatic Channel Data Logging of all channels to disk, but you must be using Synchronous Data. Refer to the chapter entitled Loading and Saving Data for more detailed information.! The directory specified when using the channel data logging feature must exist on the target system and the application s user must have permissions to write to that directory or file. Otherwise, an exception error will be generated. FastDraw Quick Description: This feature, only available with the iplot component, increases the drawing efficiency of the channel data when drawing large data sets to the Data View area. This is accomplished by reducing the number of drawing operations required to draw your channel data. Benefits: Dramatically speeds up drawing of data points and trace lines to the screen when you are showing a large number of data points. Drawbacks: Can create aliasing effects if you are using the smooth-scrolling features of the component. However, it is guaranteed to show you the extremes of the data points at all times. 40

55 Chapter 6 - Channels Technical Description: when this feature is turned on, the iplot component reduces the number of repaints to the screen by only drawing the data points that would be visible on the video screen. It does this by determining how many data points would be drawn in any one video screen pixel, and then representing all of those data points as a single data point. The following shows how the number of data points and trace lines are reduced during the painting process of channel data when utilizing the FastDraw feature of the component.the first grid (each square is a pixel) shows the data points and trace lines as they would be drawn if FastDraw was disabled Each line segment represents a drawing operation. Each dot represents a data point in the channel object. Counting the number of line segments and data markers results in 15 drawing operations. This is what the screen would actually look like, remembering that each square is a pixel 41

56 Chapter 6 - Channels Now, lets try to reduce the number of drawing operations in the third column. In the third column (shaded in yellow for emphasis), we have four data points and three line segments. Since the line segments are simply overlapping each other, we can reduce the number of line draws by performing the following method 1. Determine the first and last data point in the column of data points (P3 and P4). 2. Determine the maximum and minimum Y values in the column of data points (Represented by diamond-shaped points). 3. Do not draw the data markers between the first and last data points in the column (Represented by gray-data points) 4. Connect a line between the previous data point in the previous column(p2) to the first data point(p3). 5. Connect a line between the next data point in the next column (P5) to the last data point(p4). 6. Draw a perpendicular line between the Y maximum and Y minimum values. P2 P4 P5 P1 P3 P6 Again, counting the number of line segments drawn and data markers drawn results in 11 drawing operations. This results in a reduction of 4 drawing operations when compared to not using FastDraw. The greater the number of data points that fit in a single column of pixels, the more FastDraw can reduce the number of drawing operations, resulting in faster redraws and overall speed of the component. To sum up FastDraw, if we assume that the data points are equally spaced across the DataView area, turning on FastDraw will reduce the number of drawing operations when there are more than two data points per column of pixels in the Data View. In other words, the following formula must be satisfied ((Number of Visible Data Points) / (DataView Width in Pixels)) > 2 If the number of data points is not equally spaced across the DataView, FastDraw will speed up the drawing of the component when more than two data points occupy the same column of pixels in the DataView area. 42

57 Chapter 6 - Channels Channel Types Each component in the Plot Pack is setup to handle a specific plotting task using a channel type specific to that plot component. The channel type denotes which features are available for adding data to that channel. The channel types available for use are as follows. Refer to the chapter entitled Adding Data for more detailed information on using the different add data methods described below. iplot Component Channel: iplotchannel: This is the channel type used by the iplot component. Implements Date Time adding methods and method for adding X Null data points. For Date Time adding methods, it is assumed that the X-Axis is the Time Axis. You can rotate the axes if you wish the Time Axis (the X-Axis) to be vertical instead of horizontal. AddXY : adds data points in X and Y data point pairs. Index = iplot1.channel(channelnumber).addxy(xvalue, YValue) Index = iplot1.channel(0).addxy(10.34, 25.43) AddXYArrays : adds data points from two variant arrays, each containing x and y values. The number of elements in each array must be identical (i.e. if XData contains 100 elements, YData must contain 100 elements), otherwise an exception will be generated. Index = iplot1.channel(channelnumber).addxyarrays(xarray, YArray) This procedure is able to handle variant arrays that start at element 0 or any value that you require. If you array starts at element XData(10), then that value will be used to add the first data point. It is recommended that you loop through your array and use the AddXY method to add data to the chart as that is much faster than using the AddXYArrays procedure due to the use of Variants. This procedure has been added as a convenient way of passing variant arrays to the channel to add data, but is slower than simply looping through the array in your program. If your data is already in Variant array format (i.e. not a double array), then there is no performance penalty by using the AddXYArrays procedure. AddYArray : Adds multiple y values with a specified X-Axis spacing interval. For example, if your variant array (Y values) contains 100 elements and your XInterval is 1, then the plot component will plot all of your Y values with an increasing X value of 1. First data point is (1, YData(0)), second data point is (2,YData(1)), third data point is (3,YData(2)), fourth data point is (4, YData(3)), etc. Index = iplot1.channel(channelnumber).addyarray(xinterval, YArray) 43

58 Chapter 6 - Channels This procedure is able to handle variant arrays that start at element 0 or any value that you require. If you array starts at element XData(10), then that value will be used to add the first data point. The interval depends on whether your X-Axis is in Date/Time format or not. If LabelsFormatStyle of the X-Axis is iptfdatetime, then the interval must be specified in Date/Time format. Otherwise, the interval is expressed in seconds or the units that are used on your X-Axis. AddYElapsedSeconds : adds a Y data point at an X coordinate specified by the number of elapsed seconds since the ResetElapsedStartTime method was called. Index = iplot1.channel(0).addyelapsedseconds(yvalue) Index = iplot1.channel(0).addyelapsedseconds(25.43) AddYElapsedTime : adds a Y data point at an X coordinate specified by the amount of time (in DateTimeFormat) since the ResetElapsedStartTime method was called. Index = iplot1.channel(0).addyelapsedtime(yvalue) Index = iplot1.channel(0).addyelapsedtime(25.43) AddYNow : adds a Y data point at an X coordinate specified by the current system time (in DateTimeFormat). Index = iplot1.channel(0).addynow(yvalue) Index = iplot1.channel(0).addynow(25.43) AddXNull : adds a data point at a specified X data point. The Y value will be set to Null. Index = iplot1.channel(0).addxnull(xvalue) Index = iplot1.channel(0).addxnull(10.34) AddXEmpty : adds an empty data point at a specified X coordinate with no Y coordinate. An empty data point is a data point with no X or Y Value, only an index placeholder for the data point. Since this data point doesn t have an X or Y Value, no Data Marker is shown and the trace line will not be drawn to this data point. This is useful for adding data point placeholders so that you can set the X and Y value of the data point at a later time. Index = iplot1.channel(0).addxempty(xvalue) Index = iplot1.channel(0).addxempty (10.34) Refer to the chapter entitled Null Data and Empty Data Handling for more information on Null and Empty Data Points.! The iplot component does not support null X data points. Use the ixyplot component if you need to create null X and Y data points. 44

59 Chapter 6 - Channels ixyplot Component Channel: iplotxychannel: This is the channel type used by the ixyplot component. Supports adding data using the AddXY method. Also supported is the AddNull method for adding null data points AddXY : adds data points in X and Y data point pairs. iplot1.channel(0).addxy(xvalue, YValue) iplot1.channel(0).addxy(10.34, 25.43) AddXYArrays : adds data points from two variant arrays, each containing X and Y values. The number of elements in each array must be identical (i.e. if XArray contains 100 elements, YArray must contain 100 elements), otherwise an exception will be generated. iplot1.channel(0).addxyarrays(xarray, YArray) This procedure is able to handle variant arrays that start at element 0 or any value that you require. If you array starts at element XData(10), then that value will be used to add the first data point. AddNull : sets a data point as a null data point (both X and Y coordinates). Index = iplot1.channel(0).addnull() 'or you can add a point and then set it to null later Index = iplot1.channel(0).addxy(15.4,17.9) iplot1.channel(0).datanull(index) = TRUE AddEmpty : sets a data point as an empty data point. An empty data point is a data point with no X or Y Value, only an index placeholder for the data point. Since this data point doesn t have an X or Y Value, no Data Marker is shown and the trace line will not be drawn to this data point. This is useful for adding data point placeholders so that you can set the X and Y value of the data point at a later time. Index = iplot1.channel(0).addempty() 'You can later set the X and Y coordinates of this 'data point by using the DataX and DataY properties iplot1.channel(0).datax(index) = XValue iplot1.channel(0).datay(index) = YValue Refer to the chapter entitled Null Data and Empty Data Handling for more information on Null and Empty Data Points. 45

60 Chapter 6 - Channels Properties Color Count DataEmpty DataMarkerShow DataMarkerStyle DataNull DataX DataY DigitalEnabled DigitalReferenceHigh DigitalReferenceLow DigitalReferenceStyle ElapsedStartTime Enabled FastDrawEnabled FillColor FillEnabled FillReference FillStyle FillUseChannelColor InterpolationStyle LogBufferSize LogFileName LoggingActive MarkersAllowIndividual MarkersBrushColor MarkersBrushStyle MarkersBrushUseChannelColor MarkersPenColor MarkersPenStyle MarkersPenUseChannelColor MarkersPenWidth MarkersSize MarkersStyle MarkersVisible Name PopupEnabled RingBufferSize RunningYMax RunningYMean RunningYMin Tag TitleText TraceLineStyle TraceLineWidth TraceVisible VisibleInLegend Visible XAxisName XAxisTrackingEnabled YAxisName YAxisTrackingEnabled Methods Refer to Appendix C and D for more detailed information about this plot object s properties. AddEmpty [ixyplot Only] AddXEmpty [iplot Only] AddXNull [iplot Only] AddXYArrays AddXY AddYArray AddYElapsedSeconds [iplot Only] AddYElapsedTime [iplot Only] AddYNow [iplot Only] Clear GetXMax GetXMean GetXMin GetYInterpolated [iplot Only] GetYMax GetYMean GetYMin LoadDataFromFile LoadPropertiesFromFile LogActivate LogDeactivate ResetElapsedStartTime SaveDataToFile SavePropertiesToFile Events Refer to Appendix C and D for more detailed information about this plot object s properties. OnClickDataPoint! All events are on the main component interface and not on the sub-object interface. 46

61 Chapter 7 - Legend Chapter 7 - Legend The Legend object provides display of channel names and their associated line and marker color symbols for easy reference by your application user. Legend Object! Currently, the legend can only be vertical. Horizontal support will be added in a future release. 47

62 Chapter 7 - Legend Predefined Columns By default, only the Line column is shown in the legend as well as the Channel Title. You can choose to show or hide the following columns in the chart as well as their associated titles Line : Displays the line style and line color of the channel. Marker : Displays the marker style and marker color of the channel. X-Axis Title : Displays the X-Axis title associated with this channel. Y-Axis Title : Displays the Y-Axis title associated with this channel. X-Value: Displays the last added data point s X-Value for this channel. Y-Value: Displays the last added data point s Y-Value for this channel. Y-Max: Displays the maximum Y-Value for this channel. Y-Min: Displays the minimum Y-Value for this channel. Y-Mean: Displays the mean Y-Value for this channel. If you are using long Titles for your channels, you can utilize the ChannelNameMaxWidth property. This property specifies the maximum width, in characters, of Titles displayed in the legend. If the Title exceeds the number of characters specified, it will word-wrap to the next line.! Only the Channel Title is shown in the Title Column. The Channel Title is set by using the ChannelTitle property of the channel. The Name property of each channel is the name that is used programmatically and is not the title seen by end user of the chart. 48

63 Chapter 7 - Legend Turn On and Off Column Titles By default, the title of each column in the legend is not shown. You can choose to show the title of each column by setting the ColumnTitlesVisible = True or by using the built-in property editor to make the Column Titles Visible. Properties BackGroundColor BackGroundTransparent ChannelNameMaxWidth ColumnSpacing ColumnTitlesFontColor ColumnTitlesFont ColumnTitlesVisible Enabled FontColor Font Height Horizontal MarginBottom MarginLeft MarginRight MarginTop Name PopupEnabled RowSpacing SelectedItemBackGroundColor SelectedItemFontColor SelectedItemFont ShowColumnLine ShowColumnMarker ShowColumnXAxisTitle ShowColumnXValue ShowColumnYAxisTitle ShowColumnYMax ShowColumnYMean ShowColumnYMin ShowColumnYValue StartPercent StopPercent Visible Width ZOrder Methods Events Refer to Appendix C and D for more detailed information about this plot object s properties. None. Open for future expansion. None. Open for future expansion.! If you change previous data points, the YMax, YMin, and YMean values will no longer be valid. To refresh these values if you change previous data points, call GetYMax, GetYMin, and/or GetYMean to force a recalculation of these values after making your chages. In versions prior to Version Service Pack 2, the X-Value and Y-Value columns were used to display the current position of the cursor. This has been changed so that cursor position data is shown in a hint window next to the cursor line(s). Refer to the chapter on Cursors for more information about displaying cursor data. 49

64 Chapter 8 - ToolBar Chapter 8 - ToolBar The ToolBar object provides access for your application user to many built-in features of the Plot Pack components such as Tracking Control, Zooming, Scrolling, Cursor, Clipboard, Print, Save, access to the Run-Time Property Editor, and many other functions which can be expanded. The built-in toolbar makes it easy to use our component without needing a separate, external component or additional program code to implement a toolbar. Of course, if you need additional features that our toolbar doesn t provide or if you need to include functions in a unified application toolbar, you can dispense with this toolbar and implement a toolbar externally. Refer to the chapter entitled Implementing Toolbar Externally for more detailed information. Currently, the toolbar only supports being aligned to the top of the component. Moving and sizing the toolbar as well as support for multiple toolbars is left open for future expansion. ToolBar Object 50

65 Chapter 8 - ToolBar Configure Individual Buttons There are currently 10 buttons available for display and use in the toolbar. You can individually show or hide buttons by using the Show properties listed below. Additional buttons will be added and is open for future expansion. Implemented Externally There are various methods and properties implemented for use in your programs code to control the toolbar outside of the Plot Component. Refer to the chapter on Implementing ToolBar Externally for more information. Button Descriptions Resume Button This button resumes all tracking on all axes. Also, all cursors are hidden and all axes are re-zoomed to their stored values. To ensure that new axis zoom settings are saved, right-click on the appropriate axis and select "Update Resume Values". Pause Button This button pauses tracking on all axes. Axes Scroll Mode Button There are two modes available when clicking the mouse on an axis and moving the mouse up/down or right/left. This button allows the axis to scroll. Axes Zoom Mode Button There are two modes available when clicking the mouse on an axis and moving the mouse up/down or right/left. This button allows the axis to zoom. 51

66 Chapter 8 - ToolBar Zoom In Button This button increases the zoom on all axes by a factor 2x. Zoom Out Button This button decreases the zoom on all axes by a factor 2x. Select Button Used for selecting items in the data view area. Generates events that can be used by the programmer to react to selection of items such as data points, annotations, areas of the data view, etc. Also used for moving annotations that have their UserCanMove property set to TRUE. Zoom Box Button This button allows the user to draw a box on the DataView area and zoom all axes around the selected area. Cursor Button This button shows or hides all data cursors. Edit Button This button brings up the run-time property editor for the component. Copy Button This button copies an Enhanced Metafile Format version of the component to the clipboard. 52

67 Chapter 8 - ToolBar Save Button This button brings up a save dialog to save out snapshots of the chart in several supported graphic formats. Print Button This button brings up a print selection dialog to print out the current chart to a system or network printer. The chart as it is drawn when this button is pressed is used to generate the chart printout. Properties CursorActive Enabled Height Horizontal Name PopupEnabled ShowAxesModeButtons ShowCopyButton ShowCursorButton ShowEditButton ShowPauseButton ShowPrintButton ShowResumeButton ShowSaveButton ShowSelectButton ShowZoomBoxButton ShowZoomInOutButtons StartPercent StopPercent Visible Width ZoomBoxActive ZoomInOutFactor ZOrder Methods Refer to Appendix C and D for more detailed information about this plot object s properties. DoButtonClickCopy DoButtonClickCursor DoButtonClickEdit DoButtonClickPause DoButtonClickPrint DoButtonClickResume DoButtonClickSave DoButtonClickScrollAxesMode DoButtonClickSelect DoButtonClickZoomAxesMode DoButtonClickZoomBox DoButtonClickZoomIn DoButtonClickZoomOut TurnOffCursor Events Refer to Appendix C and D for more detailed information about this plot object s properties. Also refer to the Implementing Toolbar Externally chapter for more information. None. Open for future expansion. 53

68 Chapter 9 - Annotations Chapter 9 - Annotations The Annotation Objects are the text and shapes that can be displayed in the DataView, overlaid over your channel data. Annotations can be positioned in relation to a particular channel or to the DataView area, depending on whether you want the annotations to scroll or track with the channel data or be fixed in place within the DataView. Annotations can be in the form of text strings, lines, or rectangles. Additional annotation types will be added and is open for future expansion. Text Annotation Object Graphical Annotation Objects 54

69 Chapter 9 - Annotations Annotation Types Text Text annotations. Font size, style, name, color properties, and text rotation can be set for each individual text annotation. Use the X and Y properties to set the center-point of the Text Object. The text will be centered both horizontally and vertically around this point. Sample Annotation Line X, Y Center Point Line annotations. Width, length, and line color properties can be set for each individual line annotation. Use the X and Y properties to set the beginning point of the line (X,Y) and the X2 and Y2 properties to set the end point of the line (X2, Y2). X, Y Start Point PenColor, X2, Y2 End Point PenStyle, and PenWidth Rectangle Rectangle annotations. Width, length, line color, fill style, and fill color properties can be set for each individual rectangle annotation. Use the X and Y properties to set the centerpoint of the Rectangle Object. The rectangle will be centered both horizontally and vertically around this point. Use the Width and Height properties to set the rectangle s width and height. Use the PenColor, PenWidth, and PenStyle properties to set the border line properties. Use the BrushColor and BrushStyle properties to set the fill properties. PenColor, PenStyle, and PenWidth BrushColor and BrushStyle X, Y Center Point 55

70 Chapter 9 - Annotations LineX X-Axis Line Annotation. Set the X coordinate to specify the X-Axis value that will be used to draw a line perpendicular to the X-Axis. The length of the line goes from positive infinity to negative infinity on the Y-Axis. PenColor, PenStyle, and PenWidth LineY X-Axis Value Y-Axis Line Annotation. Set the Y coordinate to specify the Y-Axis value that will be used to draw a line perpendicular to the Y-Axis. The length of the line goes from positive infinity to negative infinity on the X-Axis. Y-Axis Value PenColor, PenStyle, and PenWidth Reversing Axes has no effect on DataView aligned Annotations. The reference values specified are always left to right (0-100) and bottom to top in relation to the Data View. 56

71 Chapter 9 - Annotations Annotation Reference Relationships When setting the X, Y, X2, and Y2 coordinates of each annotation object, these coordinates can refer either to a specific channel or to the DataView itself. DataView Reference To have the annotation be referenced to a particular channel, set the Reference property to iprtdataview. The coordinates will now refer to the DataView and will in effect be static in relation to the axes and channels in the chart. The range of values possible for the X and Y coordinates are from A value of 0 would correspond to the left (X coordinate) or bottom (Y coordinate) of the DataView area. A value of 100 would correspond to the right (X coordinate) or top (Y coordinate) of the DataView area. A value of 50 would be halfway in-between. Channel Reference To have the annotation be referenced to a particular channel, set the ChannelName Property to the name of the channel and set the Reference property to iprtchannel. The coordinates specified will now be in reference to the X and Y-Axes associated with that channel. In effect, the annotation will move with the channel as the channel and associated axes are scrolled. Reference = iprtdataview Annotation references the Data View Reference = iprtchannel Annotation references the specified Channel s Axes 57

72 Chapter 9 - Annotations Moveable Annotations Annotations can be moveable by your application end user by setting the UserCanMove property of each annotation object. Index = iplot1.annotation(0).usercanmove = True When this property is set to true, the application end-user at runtime will be able to grab a hold of and drag annotations within the DataView area. How to Add Annotations To add an annotation to the chart, simply execute the following method Index = iplot1.addannotation The return value is an unique index for use in manipulating the object. After adding the object, you can set the properties of the annotation, such as setting the object as a text annotation and its associated font properties or setting the object as a line annotation and its associated line properties. [Note: Font properties in the example below will differ depending on your compiler] Text Annotation Example iplot1.annotation(index).reference = iprtchannel iplot1.annotation(index).channelname = "Channel 1" iplot1.annotation(index).x = 'Center X Coordinate iplot1.annotation(index).y = 'Center Y Coordinate iplot1.annotation(index).style = ipastext 'Text Annotation iplot1.annotation(index).fontcolor = vbwhite 'White Font iplot1.annotation(index).text = "Sample Annotation" iplot1.annotation(index).textrotation = ira180 'Rotate up-side-down Line Annotation Example iplot1.annotation(index).reference = iprtchannel iplot1.annotation(index).channelname = iplot1.channel(0).name iplot1.annotation(index).x = 'Starting X Coordinate iplot1.annotation(index).y = 'Starting Y Coordinate iplot1.annotation(index).x2 = 67.4 'Ending X Coordinate iplot1.annotation(index).y2 = 'Ending Y Coordinate iplot1.annotation(index).style = ipasline 'Line Annotation iplot1.annotation(index).pencolor = vbwhite 'White Line iplot1.annotation(index).penstyle = pssolid 'Solid Line iplot1.annotation(index).penwidth = 2 58

73 Chapter 9 - Annotations Rectangle Annotation Example iplot1.annotation(index).reference = iprtdataview iplot1.annotation(index).x = 'Center X % Coordinate iplot1.annotation(index).y = 'Center Y % Coordinate iplot1.annotation(index).style = ipasrectangle 'Rectangle Annotation iplot1.annotation(index).pencolor = vbwhite 'White Border iplot1.annotation(index).penstyle = psdash 'Dashed Line iplot1.annotation(index).penwidth = 1 iplot1.annotation(index).brushcolor = vbyellow 'Yellow Fill iplot1.annotation(index).brushstyle = bsdiagcross LineX Example iplot1.annotation(index).reference = iprtchannel iplot1.annotation(index).channelname = iplot1.channel(0).name iplot1.annotation(index).x = 'X Coordinate iplot1.annotation(index).style = ipaslinex 'LineX Annotation iplot1.annotation(index).pencolor = vbwhite 'White Line iplot1.annotation(index).penstyle = pssolid 'Solid Line iplot1.annotation(index).penwidth = 2 LineY Example iplot1.annotation(index).reference = iprtchannel iplot1.annotation(index).channelname = iplot1.channel(0).name iplot1.annotation(index).y = 'Y Coordinate iplot1.annotation(index).style = ipasliney 'LineY Annotation iplot1.annotation(index).pencolor = vbwhite 'White Line iplot1.annotation(index).penstyle = pssolid 'Solid Line iplot1.annotation(index).penwidth = 2 How to Remove Annotations To remove an annotation, execute the DeleteAnnotation method, passing the unique index value of the annotation to delete. To delete all annotations, execute the RemoveAllAnnotations method. Note that these methods are on the main component interface. 59

74 Chapter 9 - Annotations Annotation Click Event Properties Methods Events This event, actually an event on the main component interface, is fired every time a user clicks on an annotation when the Select Button is engaged. The event passes back the Index of the Annotation that is clicked. Visual Basic OnClickAnnotation(ByVal Index As Long) //Visual C++ CProgramDlg::OnClickAnnotation(long Index) //Delphi-Kylix-C++ Builder TForm1.iPlot1ClickAnnotation(Index: Integer) BrushColor BrushStyle ChannelName Enabled FontColor Font Height Name PenColor PenStyle PenWidth PopupEnabled Reference Style Text TextRotation Visible Width X2 X Y2 Y Refer to Appendix C and D for more detailed information about this plot object s properties. None. Open for future expansion. OnClickAnnotation! All events are on the main component interface and not on the sub-object interface. 60

75 Chapter 10 Data Cursors Chapter 10 Data Cursors The Cursor is a tool included with the Plot Pack components, which allows the user to display individual data points on the screen in the Plot Legend. This tool is available for use from the integrated toolbar, and can also be used by your program code through the built-in events and interfaces that support the cursor. The cursor tool work differently depending on the type of component being used. All of the cursors display their data in a hint window next to the cursor. If you wish to display the cursor data in your own window or in an external control, refer to the available events at the end of this chapter. The Plot pack components support an unlimited number of cursors through code and through the runtime property editor. One cursor is automatically added for easy use by the cursor toolbar button. Cursor Types By default, the cursors are initially set as Value X-Y cursors, which in the iplot component draws a line perpendicular to the X-Axis and displays the X and Y data point values for a particular channel. You can change the type of cursor either by right-clicking on the cursor at run-time or through code by accessing the Cursor Object. You can also change the labels in the popup menu for each cursor, customizing it for your particular application. Value X-Y Cursor [ValueXY] This cursor style displays the current X and Y-Axis value for a data point in a particular channel. This example shows a data point on Channel #1 at X=40.0 and Y=

76 Chapter 10 Data Cursors Value X Cursor [ValueX] This cursor style displays the current X-Axis value for a data point in a particular channel. This example shows a data point on Channel #1 at X=40.0. Value Y Cursor [ValueY] This cursor style displays the current Y-Axis value for a data point in a particular channel. This example shows a data point on Channel #1 Y=

77 Chapter 10 Data Cursors Period Cursor [DeltaX] This cursor style displays the value of the distance between the two displayed cursors when measuring two data points along the X-Axis. This example shows a data point on Channel #1 at X=40.0 and Y= Peak-Peak Cursor [DeltaY] This cursor style displays the value of the distance between the two displayed cursors when measuring two data points along the Y-Axis. This example shows a peak-to-peak distance value of

78 Chapter 10 Data Cursors Frequency Cursor [InverseDeltaX] This cursor style displays the current X and Y-Axis value for a data point in a particular channel. This example shows a data point on Channel #1 at X=40.0 and Y= Adding and Removing Cursors To add a data cursor to the chart, simply execute the following method index = iplot1.adddatacursor To delete a data cursor from the chart, simply execute the following method iplot1.deletedatacursor(index) To remove all data cursors from the chart, simply execute the following method iplot1.removealldatacursors The return value is an unique index for use in manipulating the object. After adding the object, you can set the properties of the data cursor, such changing the cursor style, the hint window font, hint orientation, etc. [Note: Font properties in the example below will differ depending on your compiler]! If you are using Interpolation to draw the trace line, please note that the Data Cursors do not yet support the display of X or Y coordinate data for Interpolated trace lines. The X and Y coordinate data will reflect Straight Line Traces only. 64

79 Chapter 10 Data Cursors Data Cursor Example iplot1.datacursor(index).style = ipcsvaluexy iplot1.datacursor(index).menuitemcaptionvaluexy = "XY Coordinates" iplot1.datacursor(index).menuitemvisiblevaluex = False iplot1.datacursor(index).menuitemvisiblevaluey = False iplot1.datacursor(index).channelname = "Channel 1" iplot1.datacursor(index).fontcolor = vbcyan CursorXValue = iplot1.datacursor(index).valuex CursorYValue = iplot1.datacursor(index).valuey Accessing Individual Cursor Properties There are many properties that can be used to customize the look and feel as well as the operation of the cursor in your application. Controlling User Popup Menu By default, the popup menu allows users to change the style of the cursor. You can control the user selections that are available by using the MenuItemCaption and MenuItemVisible properties of the cursor object. The MenuItemCaption properties allow you to customize the label used to describe the type of cursor style available to the user. The MenuItemVisible properties allow you to customize whether a particular cursor style is available to the user. Controlling Hints You can control the behavior of the cursor by using the available hint properties of the cursor object. The HintHideOnRelease property is useful if you only want the hint window to be visible when the user has clicked, and holds down the mouse button on a particular cursor. You can also choose to hide the hint permanently using the HintShow property so that you can show cursor data outside the component. Use the OnCursorChange event on the main plot interface to be notified that the cursor has changed position. Controlling Cursor Pointers You can programmatically change the cursor positions by using the Pointer1Position and Pointer2Position properties. The Pointer2Position property is only valid for those cursors that use two pointers. iplot Component Specific Notes If the cursor is in-between data points in a particular channel, then the cursor will display linear interpolated (y = mx + b) values. Also, the value displayed for each channel depends on which X and Y-Axes that channel is associated with. 65

80 Chapter 10 Data Cursors ixyplot Component Specific Notes The ixyplot Component s cursor, if in ipcsvaluexy mode, will display a crosshair cursor instead of a single line. This is due to the fact that there can be many different y solutions from any particular x value. Cursor Events If you need to know when the user is moving the cursor tool on the DataView area, you can use the OnCursorChange event to detect this. You can then query the DataCursor object for the current Pointer1Position and Pointer2Position properties (depending on the Cursor Style) to determine the X and Y values for that channel under the cursor or to determine the calculated values from specialized cursor styles. OnCursorChange(CursorIndex as Integer) icomponent.datacursor(cursorindex).pointer1position icomponent.datacursor(cursorindex).pointer2position 66

81 Chapter 10 Data Cursors Properties ChannelName Color Enabled FontColor Font HintHideOnRelease HintOrientationSide HintPosition HintShow MenuItemCaptionDeltaX MenuItemCaptionDeltaY MenuItemCaptionInverseDeltaX MenuItemCaptionValueX MenuItemCaptionValueXY MenuItemCaptionValueY MenuItemVisibleDeltaX MenuItemVisibleDeltaY MenuItemVisibleInverseDeltaX MenuItemVisibleValueX MenuItemVisibleValueXY MenuItemVisibleValueY Name Pointer1Position Pointer2Position PopupEnabled Status Style UseChannelColor Visible ValueX ValueY Refer to Appendix C and D for more detailed information about this plot object s properties. Methods None. Open for future expansion. Events OnDataCursorChange! All events are on the main component interface and not on the sub-object interface. 67

82 Chapter 11 - Limits Chapter 11 - Limits Limits (a.k.a. Process Windows) are objects that you can define and place on the chart. This is useful for showing a set of limits or process windows where data should be contained. There are six types of Limits and Process Windows (referred to as Band Limits) available in the chart. Each limit is associated with an X-Axis and Y-Axis. Band Limits can be setup to be drawn as a filled band or two lines. You can create an unlimited number of limits and limit types per chart. LineX This type of limit is a vertical line positioned at a specific X-Axis value, perpendicular to the X- Axis. You can modify the line style, color, and width. Do not use the line width to simulate a band limit as the line width is in pixels (not accurate for limit use), and the band limits use the actual axis values. LineX Limit 68

83 Chapter 11 - Limits LineY This type of limit is a vertical line positioned at a specific Y-Axis value, perpendicular to the Y- Axis. You can modify the line style, color, and width. Do not use the line width to simulate a band limit as the line width is in pixels (not accurate for limit use), and the band limits use the actual axis values. LineY Limit BandX This type of limit is a set of two lines or a filled-band positioned at two specific X-Axis values, perpendicular to the X-Axis. You can modify the starting X Value and ending X Value to create the band. You can also modify fill properties such as fill style and fill color. If you specify a fill style of clear, then the band will be comprised of two parallel lines. 69

84 Chapter 11 - Limits BandY This type of limit is a set of two lines or a filled-band positioned at two specific Y-Axis values, perpendicular to the Y-Axis. You can modify the starting Y Value and ending Y Value to create the band. You can also modify fill properties such as fill style and fill color. If you specify a fill style of clear, then the band will be comprised of two parallel lines. PolyBandX This type of limit is a dynamic set of connected points (two X Values, and one Y Value), resulting in two lines or a filled-band perpendicular to the X-Axis. Use AddBandElement to add individual band elements to make up the entire band. Each band element will be connected to the previous and next band element to make up the band. 70

85 Chapter 11 - Limits PloyBandY This type of limit is a dynamic set of connected points (two Y Values, and one X Value), resulting in two lines or a filled-band perpendicular to the Y-Axis. Use AddBandElement to add individual band elements to make up the entire band. Each band element will be connected to the previous and next band element to make up the band. Adding and Removing Limits To add a data limit to the chart, simply execute the following method index = iplot1.addlimit The return value is an unique index for use in manipulating the object. After adding the object, you can set the properties of the limit, such as changing the limit style, the limit fill (if applicable), and the limit color. To remove a limit from the chart, simply execute the following method iplot1.deletelimit(index) To remove all limits, simply execute the following method iplot1.removealllimits 71

86 Chapter 11 - Limits Single-Line Limit Examples iplot1.limit(index).style iplot1.limit(index).color iplot1.limit(index).linestyle iplot1.limit(index).line1position iplot1.limit(index).style iplot1.limit(index).color iplot1.limit(index).linestyle iplot1.limit(index).line1position = iplslimity = vbred = pssolid = 25 'Position on Y-Axis = iplslimitx = vbred = pssolid = 25 'Position on X-Axis Band Limit Examples iplot1.limit(index).style iplot1.limit(index).color iplot1.limit(index).fillstyle iplot1.limit(index).line1position iplot1.limit(index).line2position iplot1.limit(index).style iplot1.limit(index).color iplot1.limit(index).fillstyle iplot1.limit(index).line1position iplot1.limit(index).line2position = iplslimity = vbred = bsdiagcross = 25 'Position on Y-Axis = 55 'Position on Y-Axis = iplslimitx = vbred = bsdiagcross = 25 'Position on X-Axis = 55 'Position on X-Axis Poly Band Limit Examples iplot1.limit(index).style = iplslimity iplot1.limit(index).color = vbred iplot1.limit(index).fillstyle = bsdiagcross iplot1.limit(index).addbandelement(25, 75, 45) '25: Position on X-Axis '75: Upper limit Y-Axis '45: Lower limit Y-Axis iplot1.limit(index).addbandelement(30, 85, 50) '30: Position on X-Axis '85: Upper limit Y-Axis '50: Lower limit Y-Axis iplot1.limit(index).addbandelement(35, 90, 50) '35: Position on X-Axis '90: Upper limit Y-Axis '50: Lower limit Y-Axis iplot1.limit(index).addbandelement(40, 80, 45) '40: Position on X-Axis '80: Upper limit Y-Axis '45: Lower limit Y-Axis iplot1.limit(index).addbandelement(45, 70, 40) '45: Position on X-Axis '70: Upper limit Y-Axis '40: Lower limit Y-Axis 72

87 Chapter 11 - Limits iplot1.limit(index).style = iplslimitx iplot1.limit(index).color = vbred iplot1.limit(index).fillstyle = bsdiagcross iplot1.limit(index).addbandelement(25, 75, 45) '25: Position on Y-Axis '75: Upper limit X-Axis '45: Lower limit X-Axis iplot1.limit(index).addbandelement(30, 85, 50) '30: Position on Y-Axis '85: Upper limit X-Axis '50: Lower limit X-Axis iplot1.limit(index).addbandelement(35, 90, 50) '35: Position on Y-Axis '90: Upper limit X-Axis '50: Lower limit X-Axis iplot1.limit(index).addbandelement(40, 80, 45) '40: Position on Y-Axis '80: Upper limit X-Axis '45: Lower limit X-Axis iplot1.limit(index).addbandelement(45, 70, 40) '45: Position on Y-Axis '70: Upper limit X-Axis '40: Lower limit X-Axis To remove all band elements, use the ClearAllElements method iplot1.limit(index).clearallelements 'Remove All Band Elements 73

88 Chapter 11 - Limits Properties Color Enabled FillStyle Line1Position Line2Position LineStyle LineWidth Name PopupEnabled Style Visible XAxisName YAxisName Methods Refer to the help files for more detailed information about this plot object s properties. AddBandElement ClearAllElements Refer to the help files for more detailed information about this plot object s methods. Events None. Open for future expansion. 74

89 Chapter 12 - Labels Chapter 12 - Labels The Label Objects hold text that can be used as a horizontal chart title, common stacked-axes vertical title, footer, etc. By default, one label object is added to the chart to hold the chart title. You can add any number of label objects to the Plot component and change their position and properties using our built-in property editor and visual layout manager. Label Labels! For backward compatibility with older versions of our Plot Components, the first label cannot be removed. This is due to the fact that the first label is mapped to the depreciated title properties of the component. All Title properties such as TitleText, TitleFont, and TitleMargin are mapped to the first label object. Remember that it is easier to add labels and setup their properties using our builtin property editor. The examples here illustrate manipulating the object through code. 75

90 Chapter 12 - Labels How to Add Labels To add a Label to the chart, simply execute the following method index = iplot1.addlabel The return value is a unique index for use in manipulating the object. After adding the object, you can set the properties of the label, such as setting the object associated font properties or setting the caption. [Note: Font properties in the example below will differ depending on your compiler] Horizontal Label Example iplot1.labels(index).alignment = iahcenter iplot1.labels(index).caption = "Sample Chart X vs. Y" iplot1.labels(index).font = "Times New Roman" iplot1.labels(index).horizontal = True iplot1.labels(index).marginbottom = 0.25 iplot1.labels(index).marginleft = 0 iplot1.labels(index).marginright = 0 iplot1.labels(index).margintop = 0.25 Vertical Label Example iplot1.labels(index).alignment = iahcenter iplot1.labels(index).caption = "Stacked Y-Axes" iplot1.labels(index).font = "Times New Roman" iplot1.labels(index).horizontal = False iplot1.labels(index).marginbottom = 0.25 iplot1.labels(index).marginleft = 0 iplot1.labels(index).marginright = 0 iplot1.labels(index).margintop = 0.25 How to Remove Labels To remove a label, execute the DeleteLabel method, passing the unique index value of the label to delete. To delete all labels, execute the RemoveAllLabels method. Note that these methods are on the main component interface. 76

91 Chapter 12 - Labels Properties Methods Events Alignment Caption Enabled FontColor Font Height Horizontal MarginBottom MarginLeft MarginRight MarginTop Name PopupEnabled StartPercent StopPercent Visible Width ZOrder Refer to Appendix C and D for more detailed information about this plot object s properties. None. Open for future expansion. None. Open for future expansion. 77

92 Chapter 13 - Visual Layout Manager Chapter 13 - Visual Layout Manager The Visual Layout Manger included in each Plot Pack component enables you to easily layout your chart plot objects with very little effort. The Layout Manager is available at design-time through our custom property editors or available to your application users at run-time with our run-time property editor. The Layout Manger makes it possible to visually layout your chart without writing a single line of code and without using complicated properties. You can of course use your own programming code to make changes to the chart layout at runtime, but the Layout Manger makes it simple and easy to do visually. To access the Visual Layout Manger, open up the property editor for the Plot Component and click on the Layout tab. The Plot control on your form is represented by the blue rectangle with icons for all of the current layout objects contained within the control such as the X-Axis, Y-Axis, Data View, Legend, and Toolbar Layout Objects. The Data View Object is fixed in position and in size (it resizes to fill all available space) and all other objects move in relation to the Data View. 78

93 Chapter 13 - Visual Layout Manager Tutorial How to Move Objects Click and hold down the left mouse button on the Y-Axis. Notice that the Y-Axis object turns from a gray background to a yellow background on your screen. Drag and drop the Y-Axis 1 object in-between the Data View and Legend 1. Notice that a rectangle will move along with your cursor. This indicates that you are moving the object over valid positions that are available. 79

94 Chapter 13 - Visual Layout Manager Release the mouse button to complete the move of the Y-Axis object. Notice that the Y-Axis object has moved to the position specified and all of the other objects have been repositioned to maximize the size of the Data View area. 80

95 Chapter 13 - Visual Layout Manager Resizing Plot Objects To resize a Plot Object, such as an axis, hold your mouse cursor over one of the ends of the object to be resized. Notice that the mouse cursor changes to a double arrow pointer, indicating that you are about to resize the Plot Object. Hold down the left mouse button. Notice that the object is highlighed in yellow to indicate that you are resizing that particular object on your screen. 81

96 Chapter 13 - Visual Layout Manager Drag your mouse to resize the object. Notice that the object dynamically changes size as you resize it. Release the mouse button when finished. Note: The only objects that can be resized at this time are the X and Y-Axis objects. 82

97 Chapter 13 - Visual Layout Manager How to Stack Axes The Visual Layout Manger make it easy to stack multiple axes on top of one another. To stack axes, first make sure that the axes to stack are sized so that they don t overlap. If the axes overlap, then the stacking process will not work. 83

98 Chapter 13 - Visual Layout Manager Drag and drop one of the axis objects on top of another axis that you wish to stack with. Release the mouse button and the two axes will stack, with all other plot objects readjusting. 84

99 Chapter 13 - Visual Layout Manager Rotating X and Y-Axes To swap the positions of the X and Y-Axes, right-click on the Data View object and select X-Y- Axes Reverse. This will reverse the positions of all X and Y-Axes objects. Reversing or Rotating Axes has no effect on DataView aligned Annotations. The reference values specified are always left to right (0-100) and bottom to top in relation to the Data View. 85

100 Chapter 14 - Adding Data Chapter 14 - Adding Data Adding Data to the Plot Pack components is a very easy and straightforward process. Since the channels in the chart are not required to be synchronous, you can simply add your data points in X/Y coordinate pairs as required. There are currently four methods for adding data to the Plot Components. AddXY This method allows you to add data to the plot component in x and y data value pairs. This is the simplest method to use when adding data to the Plot Components. This method is compatible with both the iplot and ixyplot components. Complete AddXY Example The following example assumes that you have placed a single iplot component on your form along with a standard push button named PlotButton. When you initially create the plot object, it automatically adds one X-Axis, one Y-Axis, and one Channel for you by default. Each example will plot 100 random Y data points with an increasing X value. Visual Basic If you will be adding data from unsynchronized events (such as from data acquisition hardware) and run into a problem where some data will cause other data to scroll off the screen, take a look at the multiple X and Y-Axis support. You can have each channel assigned to its own axes, independent of other channels. You can then add data in a synchronous or asynchronous manner as needed. Private Sub PlotButton_Click() Dim x As Long Dim XData As Double Dim YData As Double For x = 1 To 100 'Increment X Data XData = XData + 1 'Generate Random Y Data YData = Rnd(1) * 100 'Plot XY Data Pair iplotx1.channel(0).addxy XData, YData Next x End Sub 86

101 Chapter 14 - Adding Data Visual C++ [Disp Inteface] //Place at top of cpp file #include "iplotx.h" #include "iplotaxisx.h" #include "iplotlegendx.h" #include "iplotchannelx.h" #include "iplottoolbarx.h" #include "iplotdataviewx.h" #include "iplotannotationx.h" #include "iplotlabelsx.h" void CFormDlg::OnPlotButton() { double XData; double YData; XData = 0; YData = 0; for(int i=0; i<100; i++) { //Increment X Data XData = XData + 1; //Generate Random Y Data YData = (rand()/(double)rand_max)*100; } //Plot XY Data Pair m_iplotx.getchannel(0).addxy(xdata, YData); }; Visual C++ [High-Speed idispatch Interface] //Place at top of cpp file #import "iplotlibrary.tlb" named_guids #include "atlbase.h" extern CComModule _Module; using namespace iplotlibrary; void CFormDlg::OnPlotButton() { double XData; double YData; CWnd* m_wnd; IUnknown* m_iunknown; CComPtr<iPlotLibrary::IiPlotX> iplotx1; //Get interface to Plot Component //Assuming that name of component on form is IDC_IPLOTX1 in this example m_wnd = GetDlgItem(IDC_IPLOTX1); m_iunknown = m_wnd->getcontrolunknown(); m_iunknown->queryinterface( uuidof(iplotlibrary::iiplotx), \ (LPVOID*)&iPlotX1); 87

102 Chapter 14 - Adding Data XData = 0; YData = 0; for(int i=0; i< ; i++) { //Increment X Data XData = XData + 1; //Generate Random Y Data YData = (rand()/(double)rand_max)*100; } //Plot XY Data Pair iplotx1->channel[0]->addxy(xdata, YData); }; C++ Builder #include <stdlib.h> //Place at top of cpp file void fastcall TForm1::PlotButtonClick(TObject *Sender) { double XData; double YData; XData = 0; YData = 0; for(int i=0; i<100; i++) { //Increment X Data XData = XData + 1; //Generate Random Y Data YData = (random(100)); } //Plot XY Data Pair iplot1->channel[0]->addxy(xdata, YData); }; 88

103 Chapter 14 - Adding Data Delphi/Kylix procedure TForm1.PlotButtonClick(Sender: TObject); var x : Integer; XData : Double; YData : Double; begin for x := 1 To 100 do begin //Increment X Counter XData := XData + 1; //Generate Random Data YData := Random(100); end; //Plot XY Data Pair iplot1.channel[0].addxy(xdata, YData); end; Internet Explorer [Client-Side, VBScript] <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <title>internet Explorer Plot Pack Example</title> </head> <body> <object classid="clsid:1791c a-bd28-f2331bc9b7c7" id="iplotx1" width="500" height="200"></object> <input type="button" value="plot" name="plotbutton"> <script LANGUAGE="VBScript"> <!-- Sub PlotButton_OnClick() Dim x Dim XData Dim YData For x = 1 To 100 'Increment X Counter XData = XData + 1 'Generate Random Data YData = Rnd(1) * 100 'Plot XY Data Pair iplotx1.channel(0).addxy XData, YData Next end sub --> </script> </body> </html> 89

104 Chapter 14 - Adding Data Sample Output from Example Special ActiveX Example: When iterating through a large loop and access sub objects of the ActiveX plot component, it is more efficient to create a temporary variable to keep track of the sub object in memory instead of having to access it during each iteration of the loop. In the example above, we go through a loop 100 times. We access the channel sub object 100 times for each AddXY method. There is a very small performance penalty when accessing the channel, which is magnified when looping, and can be noticeable with very large loops. To rectify this, we can sacrifice a small amount of memory to greatly speed up large loops. We will set a local variable to reference the channel sub-object only once, and then reuse the local variable in the loop. In the following example we will create a temporary variable to hold the channel sub object and will loop through 1,000,000 data points. You can flip between the method used in the example above and the example shown below to see the difference in speed. (Approximately 2x-4x faster using the local variable method shown below depending on your compiler). 90

105 Chapter 14 - Adding Data Visual Basic Private Sub PlotButton_Click() Dim x As Long Dim XData As Double Dim YData As Double Dim TempChannel as iplotchannelx Set TempChannel = iplotx1.channel(0) For x = 1 To 'Increment X Data XData = XData + 1 'Generate Random Y Data YData = Rnd(1) * 100 'Plot XY Data Pair TempChannel.AddXY XData, YData Next x End Sub Visual C++ [Disp Interface] //Place at top of cpp file #include "iplotx.h" #include "iplotaxisx.h" #include "iplotlegendx.h" #include "iplotchannelx.h" #include "iplottoolbarx.h" #include "iplotdataviewx.h" #include "iplotannotationx.h" void CFormDlg::OnPlotButton() { double XData; double YData; CiPlotChannelX TempChannel; XData = 0; YData = 0; TempChannel = m_iplotx1.getchannel(0); for(int i=0; i< ; i++) { //Increment X Data XData = XData + 1; //Generate Random Y Data YData = (rand()/(double)rand_max)*100; } //Plot XY Data Pair TempChannel.AddXY(XData, YData); }; 91

106 Chapter 14 - Adding Data Visual C++ [High-Speed idispatch Interface] //Place at top of cpp file #import "iplotlibrary.tlb" named_guids #include "atlbase.h" extern CComModule _Module; using namespace iplotlibrary; void CFormDlg::OnPlotButton() { double XData; double YData; CWnd* m_wnd; IUnknown* m_iunknown; CComPtr<iPlotLibrary::IiPlotX> iplotx1; CComPtr<iPlotLibrary::IiPlotChannelX> tempchannel; //Get interface to Plot Component //Assuming that name of component on form is IDC_IPLOTX1 in this example m_wnd = GetDlgItem(IDC_IPLOTX1); m_iunknown = m_wnd->getcontrolunknown(); m_iunknown->queryinterface( uuidof(iplotlibrary::iiplotx), \ (LPVOID*)&iPlotX1); tempchannel = iplotx1->channel[0]; XData = 0; YData = 0; for(int i=0; i< ; i++) { //Increment X Data XData = XData + 1; //Generate Random Y Data YData = (rand()/(double)rand_max)*100; } //Plot XY Data Pair tempchannel->addxy(xdata, YData); }; 92

107 Chapter 14 - Adding Data Internet Explorer [Client-Side, VBScript] <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <title>internet Explorer Plot Pack Example</title> </head> <body> <object classid="clsid:1791c a-bd28-f2331bc9b7c7" id="iplotx1" width="500" height="200"></object> <input type="button" value="plot" name="plotbutton"> <script LANGUAGE="VBScript"> <!-- Sub PlotButton_OnClick() Dim x Dim XData Dim YData Dim TempChannel Set TempChannel = iplotx1.channel(0) For x = 1 To 'Increment X Counter XData = XData + 1 'Generate Random Data YData = Rnd(1) * 100 'Plot XY Data Pair TempChannel.AddXY XData, YData Next end sub --> </script> </body> </html> Other Data Adding Methods The iplot component has several other methods for adding data that are specific only to the iplot component. These methods make it very easy to add data in real-time using the component s built-in timer or the computer s internal system clock. 93

108 Chapter 14 - Adding Data AddYElapsedSeconds This method adds Y data that you specify, and Y data from an internal seconds counter. This is useful if you are acquiring data in real-time and wish to use the built-in seconds timer and you do not have access to independent time data from your data source. icomponent.channel(0).addyelapsedseconds(ydata)! The time value added for the x-axis is calculated as the number of seconds that have elapsed since the date/time value of the ElapsedStartTime property. To set the ElapsedStartTime property to the current system time (i.e. Reset the Elapsed Time used by the AddYElapsedSeconds and AddYElapsedTime methods), execute the ResetElapsedStartTime method to set the ElapsedStartTime property to the current system time. AddYElapsedTime This method adds Y data that you specify and Y data from an internal time counter. This is useful if you are acquiring data in real-time and wish to use the built-in timer and you do not have access to independent time data from your data source. icomponent.channel(0).addyelapsedtime(ydata) DateTime Note: the X value that is used is in Date/Time format [i.e. 1 Day = 1, 1 hour = 1/24, 1 minute = 1/(24*60)]. Refer to the section on Date/Time formats for more information on using Date/Time values. AddYNow This method adds Y data that you specify, and Y data from your computer s internal system clock (Operating System s Clock). This is useful if you are acquiring data in real-time and wish to use current system time and you do not have access to independent time data from your data source. icomponent.channel(0).addyelapsedtime(ydata) DateTime Note: the X value that is used is in Date/Time format [i.e. 1 Day = 1, 1 hour = 1/24, 1minute = 1/(24*60)]. Refer to the section on Date/Time formats for more information on using Date/Time values. If you have a service or program that automatically runs on your computer to synchronize your time with the NIST time computers via the internet, with your corporate network servers, or any other program that may modify your system clock, you may run into problems using this method. This is because the chart (and your actual data) expects time to increment properly. It is recommended that you do not use this method with such utilities, as there can be unpredictable results. 94

109 Chapter 14 - Adding Data AddXYArrays This method adds data points from two variant arrays, each containing x and y values. The number of elements in each array must be identical (i.e. if XArray contains 100 elements, YArray must contain 100 elements), otherwise an exception will be generated) icomponent.channel(0).addxyarrays(xarray, YArray) This procedure is able to handle variant arrays that start at element 0 or any value that you require. If you array starts at element XData(10), then that value will be used to add the first data point. AddEmpty This method sets a data point as an empty data point. An empty data point is a data point with no X or Y Value, only an index placeholder for the data point. Since this data point doesn t have an X or Y Value, no Data Marker is shown and the trace line will not be drawn to this data point. This is useful for adding data point placeholders so that you can set the X and Y value of the data point at a later time. Index = iplot1.channel(0).addempty() 'You can later set the X and Y coordinates of this 'data point by using the DataX and DataY properties iplot1.channel(0).datax(index) = XValue iplot1.channel(0).datay(index) = YValue iplot1.channel(0).datax(index) = 10.5 iplot1.channel(0).datay(index) = 57.4 See Chapter Null Data and Empty Data Handling for more information. AddXNull [iplotx component only] This method adds a data point at a specified X data point. The Y value will be set to Null. icomponent.channel(0).addxnull(xdata) icomponent.channel(0).addxnull(10.5) See Chapter Null Data and Empty Data Handling for more information. 95

110 Chapter 14 - Adding Data AddNull [ixyplotx component only] This method adds a data point as a null data point (both X and Y coordinates). You must first add a data point using AddXY using dummy data, obtain the index of that data point, and then pass that index to set the data point to null. Index = iplot1.channel(0).addnull() See Chapter Null Data and Empty Data Handling for more information. Modifying/Reading Data If you need to modify or read a data point after adding it to a channel, you can use the following property to change the X or Y value of a data point. You will need to know the index of the data point to make this modification(the index was passed back by the AddXY and other add data functions) 'Add a data point and get the data point's Index Index = icomponent.channel(0).addxy(10.5, 20.5) 'Change the data point's X and Y Value icomponent.channel(0).datax(index) = 11 icomponent.channel(0).datay(index) = 21 'Read the data point's X and Y Value DataPointXValue = icomponent.channel(0).datax(index) DataPointYValue = icomponent.channel(0).datay(index) If you are using the iplot component, you can also use a special method on the channel called GetYInterpolated. If you know a X value, then you can query the component for the corresponding Y value of a data point at the X value. Since double values are not precise, the Y value returned will be interpolated using the trace line drawn between a data point before and after the given X value. YValue = icomponent.channel(index).getyinterpolated(xvalue) Note: this method does not exist on the ixyplot component since there can be many numerous solutions to any given X value. 96

111 Chapter 14 - Adding Data Running Y-Value Min, Max, and Mean The Channel objects have three specialized properties that provide the following information about the channel without requiring extensive calculations by the component RunningYMax RunningYMin RunningYMean These values represent the Maximum Y, Minimum Y, and Mean Y values in the specified channel. Since these values are calculated as you add data, accessing these values is very quick since calculation of the max, min, and mean do not have to be done on every query. 'Use these values to get the running mean of the corresponding values 'This method is quick because it is calculated during every addition 'of a data point instead of every time the value is checked YMaxValue = icomponent.channel(index).runningymax YMinValue = icomponent.channel(index).runningymin YMeanValue = icomponent.channel(index).runningymean The drawback to using these values is that if you change previous data points, these values will no longer be valid. To refresh these values if you change previous data points, call GetYMax, GetYMin, and/or GetYMean to force a recalculation of these values. You can use the GetYMax, GetYMin, and GetYMean values if you wish to have these values recalculated every time, but you will see a performance decrease due to the overhead. 'Use these values to force a recalculation for every call YMaxValue = icomponent.channel(index).getymax YMinValue = icomponent.channel(index).getymin YMeanValue = icomponent.channel(index).getymean! If you are utilizing Empty or Null data points, the RunningYMean value will not be correct, as it does not exclude these values from the Mean calculation. 97

112 Chapter 14 - Adding Data Empty Data Points In some situations, you may want to add a data point but not specify its X and/or Y Value. When a data point is missing it s X and/or Y value, the data point is ignored by the Plot component when drawing the trace line. This results in a trace line between two valid data points and ignoring the empty data point. In contrast, null data points create a break in the trace line. To add an empty data point, use the AddXEmpty if you are using the iplot component to add an empty data point with an X value and an empty Y value. Use the AddEmpty method if you are using the ixyplot component to add an empty data point with no X or Y value. You can then use the DataX and/or DataY properties to specify the data point X and/or Y values at a later time. 'Add an empty data point to the iplot component Index = icomponent.channel.addxempty(10.5) 'Specify the X coordinate 'Add an empty data point to the ixyplot component Index = icomponent.channel.addempty() See Chapter Null Data and Empty Data Handling for more information. 98

113 Chapter 15 - Null Data Handling Chapter 15 - Null Data Handling By default, the Plot Pack components are setup to draw a trace line between every point on the chart in the order that they are added to the channel. The Null Data handling features allows you to specify certain Y data values as null data points, preventing the chart from connecting these data points to actual data points. This feature is typically used in data acquisition hardware applications where you lose connection with the hardware, but want to show on the chart that no data was collected at a particular X (usually Time Axis value) and you have an undefined Y value (a.k.a. Null Data Point). For example, notice the break in the trend line between the 4 th and 6 th data points. The 5 th data point was plotted with a null Y value, so it does not show up in the chart and no line is drawn through that data point. 6 th Point 4 th Point Y-Axis Null Y Data Point Added at This X Value (5 th point) X-Axis Adding a Null Y Data Point at a Specific X Data Point (iplot Only) The AddXNull() method is used to add a specified X data point with the corresponding Y data point being null (i.e. undefined). Simply pass the X value (e.g. 2.56) icomponent.channel(0).addxnull(2.56) Adding a Null X & Y Data (ixyplot Only) The AddNull() method is used to add a data point with both an X and Y null value. icomponent.channel(0).addnull() 99

114 Chapter 15 - Null Data Handling Setting a Null Y Data Point at a Specific X Data Point The DataNull() method is used to change a Y data point to a null value for an X/Y data point pair that has already been plotted on the chart. Simply pass the X value (e.g. 2.56) icomponent.channel(0).datanull(2.56) Full Source Example The following examples assume you have placed an iplot Component on your form and have placed a simple pushbutton named PlotButton on your form. The example will plot 50 random data points with some random Null Data points for illustrative purposes. Sample Output from Example 100

115 Chapter 15 - Null Data Handling Visual Basic Private Sub PlotButton_Click() Dim x As Long Dim XData As Long Dim YData As Long For x = 1 To 50 XData = XData + 2 YData = Rnd(1) * 100 '85% of the time plot the X and Y Data Value '15% of the time plot the X Value and Y as null If Rnd(1) < 0.85 Then 'Plot X and Y Data Pair iplotx1.channel(0).addxy XData, YData Else 'Plot X Data and Y Null Data iplotx1.channel(0).addxnull XData End If Next x End Sub Visual C++ [Disp Inteface] void CFormDlg::OnPlotButton() { double XData; double YData; XData = 0; YData = 0; for(int i=0; i<50; i++) { XData = XData + 2; YData = (rand()/(double)rand_max)*100; } //85% of the time plot the X and Y Data Value //15% of the time plot the X Value and Y as Null if ((rand()/(double)rand_max) < 0.85) { //Plot X and Y Data Pair m_iplotx1.getchannel(0).addxy(xdata, YData); } else { //Plot X Data and Y Null Data m_iplotx1.getchannel(0).addxnull(xdata); } }; 101

116 Chapter 15 - Null Data Handling Visual C++ [High-Speed idispatch Inteface] //Place at top of cpp file #import "iplotlibrary.tlb" named_guids #include "atlbase.h" extern CComModule _Module; using namespace iplotlibrary; void CFormDlg::OnPlotButton() { double XData; double YData; CWnd* m_wnd; IUnknown* m_iunknown; CComPtr<iPlotLibrary::IiPlotX> iplotx1; //Get interface to Plot Component //Assuming that name of component on form is IDC_IPLOTX1 in this example m_wnd = GetDlgItem(IDC_IPLOTX1); m_iunknown = m_wnd->getcontrolunknown(); m_iunknown->queryinterface( uuidof(iplotlibrary::iiplotx), \ (LPVOID*)&iPlotX1); XData = 0; YData = 0; for(int i=0; i<50; i++) { XData = XData + 2; YData = (rand()/(double)rand_max)*100; } //85% of the time plot the X and Y Data Value //15% of the time plot the X Value and Y as Null if ((rand()/(double)rand_max) < 0.85) { //Plot X and Y Data Pair iplotx1->channel[0]->addxy(xdata, YData); } else { //Plot X Data and Y Null Data iplotx1->channel[0]->addxnull(xdata); } }; 102

117 Chapter 15 - Null Data Handling Delphi/Kylix procedure TForm1.PlotButtonClick(Sender: TObject); var x : Integer; XData : Double; YData : Double; begin for x := 1 To 50 do begin XData := XData + 2; YData := Random(100); //85% of the time plot the X and Y Data Value //15% of the time plot the X Value and Y as Null If Random(11) < 8.5 then //Plot XY Data Pair iplot1.channel[0].addxy(xdata, YData) else //Plot X Data and Y Null Data iplot1.channel[0].addxnull(xdata); end; end; end; C++ Builder #include <stdlib.h> //Place at top of cpp file void fastcall TForm1::PlotButtonClick(TObject *Sender) { double XData; double YData; XData = 0; YData = 0; for(int i=0; i<50; i++) { XData = XData + 2; YData = (random(100)); } //85% of the time plot the X and Y Data Value //15% of the time plot the X Value and Y as Null if (random(11) < 8.5) { //Plot X and Y Data Pair iplot1->channel[0]->addxy(xdata, YData); } else { //Plot X Data and Y Null Data iplot1->channel[0]->addxnull(xdata); } }; 103

118 Chapter 15 - Null Data Handling Internet Explorer [Client-Side, VBScript] <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <title>internet Explorer Plot Pack Example</title> </head> <body> <object classid="clsid:1791c a-bd28-f2331bc9b7c7" id="iplotx1" width="500" height="200"></object> <input type="button" value="plot" name="plotbutton"> <script LANGUAGE="VBScript"> <!-- Sub PlotButton_OnClick() Dim x Dim XData Dim YData For x = 1 To 50 XData = XData + 2 YData = Rnd(1) * 100 '85% of the time plot the X and Y Data Value '15% of the time plot the X Value and Y as null If Rnd(1) < 0.85 Then 'Plot X and Y Data Pair iplotx1.channel(0).addxy XData, YData Else 'Plot X Data and Y Null Data iplotx1.channel(0).addxnull XData End If Next end sub --> </script> </body> </html> 104

119 Chapter 16 - User Interface Control Chapter 16 - User Interface Control This chapter will cover using the User Interface controls that included with the Plot Pack. These control objects are available to your end user at runtime while using your compiled application. The main user interfaces in the Plot Pack components that are available at runtime for the application user are: The Built-in Toolbar The toolbar provides quick and easy to use control over the function of the chart by your end user at runtime in your application. All functions are implemented inside of the chart without the need to implement these in your own application code. Button Meaning Resume Button: Resumes tracking on ALL axes Pause Button: Pauses tracking for ALL axes Axes Mode Buttons: Changes the mode that the axes are in when using the mouse. The first icon puts the axes in scroll mode. The second icon puts the axes in zoom mode. Zoom In/Out Buttons: Zooms ALL axes in our out according to the ZoomInOutFactor property.. Select Button: Used for selecting items in the data view area. Generates events that can be used by the programmer to react to selection of items such as data points, annotations, areas of the data view, etc. Zoom Box Button: Allows the user to draw a "Zoom Box" on the DataView area to zoom ALL axes. Cursor Button: Show or hide all data cursors. Values for each channel are displayed in a hint window next to the cursor(s). Edit Button: Brings up the Run-Time property editor for the user to change most control properties. Copy Button: Copies the current component image to the clipboard. Save Button: Brings up a dialog to allow the user to save chart data to currently supported file types. Print Button: Allows user to print image of chart to printer. 105

120 Chapter 16 - User Interface Control Scrollable and Zoomable Axes All X and Y-Axes can be scrolled or zoomed by the user at runtime, even while data is being plotted to the chart. By default, the chart is set into Scroll Mode. This means that when a user clicks on an axis, holds down the mouse button, and drags the cursor, that axis will scroll up or down depending on the user s direction of movement. When the user selects Zoom Mode from the toolbar, clicking and dragging the axis will cause the axis scale to zoom in our out, depending on the user s direction of movement (Up Zooms In, Down Zooms Out, Left Zooms Out, Right Zooms In). Whenever an axis is scrolled or zoomed, tracking on that axis will pause until restarted. You can pause or resume tracking on all axes by using the Resume and Pause Buttons, or by right-clicking on an individual axis and toggling Tracking Enabled. Zooming Tools There are three tools available to the user to zoom all axes at the same time Zoom In Button: this tool will zoom all axes according to the ZoomInOutFactor property. Zoom Out Button: this tool will de-zoom all axes according to the ZoomInOutFactor property. Zoom Box Button: this tool will allow a user to click and drag out a box on the DataView area. All axes will be zoomed to display this selected area. To reset the zoom, click on the Resume Button. To accept the modified zoom of the axis, right-click on the axis and select Use New Values. Select Tool The select tool is used by the application end-user to select items in the data view area at runtime, such as annotations, data points, etc. Cursor Tool The cursor tool hides or shows all available cursors. See the chapter on the Cursor for more detailed information. 106

121 Chapter 16 - User Interface Control Context Sensitive Right-Click Menus (Popup Menus) Each object in the Plot Component has it s own context sensitive right-click menu. The available options depend on the object being selected. Axis Object You can resume or pause tracking on an individual axis by right-clicking on the axis and selecting Tracking Enabled If the user has zoomed or scrolled the axis, the option Use New Values will be available. This will change the properties of the axis to use the new Min and Span values that correspond to the scrolled or zoomed axis. The edit menu item will allow the user to bring up the runtime property editor for this object. DataView Object Right-Clicking on the DataView will allow the user to bring up the runtime property editor for this object. Toolbar Object Right-Clicking on the Toolbar will allow the user to bring up the runtime property editor for this object. Legend Object Right-Clicking on the Legend will allow the user to bring up the runtime property editor for the selected channel. DataCursor Object Right-Clicking on a Data Cursor will allow the user modify the properties and functionality of the selected Data Cursor object. You can disable the Popup Menus on each individual object by using the Enabled and PopupEnabled properties of each plot object. For example, to keep the application user from scrolling the X-Axis, you can set the Enabled property of the X-Axis to FALSE (icomponent.xaxis(0).enabled = FALSE). This will prevent the user from interacting with the X-Axis with either the mouse or keyboard input devices. 107

122 Chapter 16 - User Interface Control Runtime Property Editor The runtime property editor allows your application user to have complete control over the plot component control at runtime. Some features are disabled in the runtime property editor, such as adding and deleting axes or channels, since these functions are to be handled by the application s code and may lead to problems and program errors at runtime. The Runtime Property allows the user to make changes to almost all aspects of the control during execution such as modifying axes properties, changing channel properties, using the Visual Layout Manager, etc. There are two ways that your application user can directly access the Runtime Property Editor at runtime Right-Click on Plot Object When a user right-clicks on a Plot Object and selects Edit, the runtime property editor will be displayed along with the particular Plot Object that was selected (Such as The X-Axis or the particular channel selected in the Legend). icomponent1.usercaneditobjects = FALSE You can prevent the user from being able to bring up the runtime property editor through right-clicks by setting the UserCanEditObjects property to FALSE. Preventing or Disabling UI Interaction You can disable or enable the following on the component as a whole or on a specific plot object as needed. Disabling All UI Interaction on a Plot Object Set the Enabled property on each Plot Object, such as the Axis, to prevent scrolling, the legend to prevent selection, etc. All plot objects support the Enabled property, but some objects don t accept user interaction at this time (such as limits) so this property is ignored. icomponent.xaxis(0).enabled = False icomponent.yaxis(0).enabled = False icomponent.legend(0).enabled = False 108

123 Chapter 16 - User Interface Control Disabling Popup Menu on a Plot Object or On Entire Component Set the PopupEnabled property on each Plot Object, such as the Axis, to prevent the user from bringing up the Popup Menu. All plot objects support the PopupEnabled property, but some objects don t accept user interaction at this time (such as limits) so this property is ignored. The main plot interface supports the UserCanEditObjects which disables all run-time property access by the application user, but does not disable all popup menus. icomponent.usercaneditobjects = False icomponent.xaxis(0).enabled = False icomponent.yaxis(0).enabled = False icomponent.legend(0).enabled = False Toolbar Runtime Property Editor Button The Toolbar Runtime Property Editor Button entire plot component control. brings up the runtime property editor for the icomponent1.toolbar(0).showeditbutton = FALSE You can prevent the user from being able to bring up the runtime property editor from the toolbar by setting the ShowEditButton property to FALSE You will notice that the Runtime Property Editor is missing the OK, Apply, and Cancel button. When changes are made by your application s end-user, the changes are immediately reflected in the Plot Component. 109

124 Chapter 17 - Tracking Chapter 17 - Tracking Tracking is a general term for the Auto-Scale and Auto-Scrolling features of the Plot Pack. These features pertain to how the axes react to the addition of new data to the chart with respect to the sizing of the span of the axes and the position of the axes with respect to this new data. Tracking Data is information from the channel, regarding newly added data points, that is passed to the axes so that they can adjust according to your needs. The Plot Pack Channel and Axes objects support a feature called Tracking. Whenever a channel draws data to the DataView window, it sends Tracking Data to its associated X and Y-Axes. This tracking data tells the axis where new data is being plotted so that the axis can scroll or adjust it various sizing properties (Min, Max, and Span) to keep the newly added data in view. Channel Tracking Data Tracking Data X-Axis Y-Axis By default, the Plot Components Axes and Channel Tracking Settings are setup as follows X-Axis is setup for Smooth Scrolling. Whenever new data is added to the chart (assume data is added from left to right), the X-Axis will smoothly scroll to keep the most recent data in view. icomponent.xaxis(0).trackingstyle = iptsscrollsmooth Y-Axis is setup for Scale Min Max Adjust. The axis will scale the Min and Span properties to keep the new tracking data in view. icomponent.yaxis(0).trackingstyle = iptsscaleminmax 110

125 Chapter 17 - Tracking All Channels are set to have their tracking data sent to their associated axes icomponent.channel(0).trackingstyle = iptsscrollsmooth All Axes have their Tracking enabled so that they will adjust to new tracking data from the channels. icomponent.xaxis(0).trackingenabled = TRUE icomponent.yaxis(0).trackingenabled = TRUE You can independently setup your own scaling and tracking options for each axis and channel if you wish if the default settings do not fit your needs. The next few sections will discuss the different AutoScale and Tracking options that are available Tracking Styles There are five different styles that can be set on each axis that control how the axes are Auto-Scaled when new tracking data is received from each channel. All axes support the rule which provides human readable scales. See the chapter on AutoScale and AutoLabel for more information on the automatic scaling and label features of the Plot Pack. ScaleMinMax [Y-Axis Default] Rule: This is a feature of the AutoScale capability built into the axes of all Plot Pack components. The rule has been designed to provide major tick labels that are human readable. In studies, most people like to see numbers increment by numbers that are multiples of 1, 2, or 5. For example, on a scale that is between 0 and 100, people like to see a scale that increments like 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, and 100. If there is not enough room on the chart, then the next best Human Readable format is 0, 20, 40, 60, 80, 100. A scale of 0, 17, 33, 50, 67, 83, and 100 would not fit into the rule, and wouldn t look good to a human anyway. The Rule will ensure that the scales always look professional. Refer to the AutoLabel and AutoScale Chapter for more information on the Rule. This tracking mode will adjust the min and span properties on the axis to ensure that new data being added to the channel is kept in the visible DataView area. This is generally used with the Y-Axis for Strip Chart applications. icomponent.xaxis(0).trackingstyle = iptsscaleminmax icomponent.yaxis(0).trackingstyle = iptsscaleminmax 111

126 Chapter 17 - Tracking ScaleMax ScaleMin This tracking mode will adjust only the max properties on the axis to ensure that new data being added to the channel is kept in the visible DataView area. If tracking data indicates that the data is below the min property of the axis, then the min value will not be changed. icomponent.xaxis(0).trackingstyle = iptsscalemax icomponent.yaxis(0).trackingstyle = iptsscalemax This tracking mode will adjust only the min properties on the axis to ensure that new data being added to the channel is kept in the visible DataView area. If tracking data indicates that the data is above the max property of the axis, then the max value will not be changed. icomponent.xaxis(0).trackingstyle = iptsscalemin icomponent.yaxis(0).trackingstyle = iptsscalemin ScrollSmooth [X-Axis Default] Scroll Page If the data is off axis, then this tracking mode will adjust the axis to show the new tracking data at the end of the scale. This style is generally used with the X-Axis for Strip Chart applications. icomponent.xaxis(0).trackingstyle = iptsscrollsmooth icomponent.yaxis(0).trackingstyle = iptsscrollsmooth If the data is off axis, then this tracking mode will adjust the axis in discrete blocks (will show next major tick) to show the new tracking data at the end of the scale. This style is generally used with the X-Axis for Strip Chart applications. ExpandCollapse icomponent.xaxis(0).trackingstyle = iptsscrollpage icomponent.yaxis(0).trackingstyle = iptsscrollpage This tracking mode will adjust the min and span properties on the axis to ensure that all data being added to the channel is kept in the visible DataView area. It will also ensure that the all visible data is expanded to the maximum viewing size within the data view by sizing the span up and down and the data changes in the viewable area. Warning!: This style is not recommended for all situations because the routines used to achieve this effect can place a large load on the computer s processor under certain situations. icomponent.xaxis(0).trackingstyle = iptsexpandcollapse icomponent.yaxis(0).trackingstyle = iptsexpandcollapse 112

127 Chapter 17 - Tracking Tracking Align First Styles There are four styles that can be used to instruct the axes on how to align themselves when the first data point is plotted to the chart. You can have the data begin plotting on one extreme side of the chart or another depending on this setting. Min This style adjusts the axis to show the first data point on the beginning of the scale. icomponent.xaxis(0).trackingalignfirststyle = ipafsmin icomponent.yaxis(0).trackingalignfirststyle = ipafsmin Example TrackingAlignFirstStyle Set to ipafsmin Max This style adjusts the axis to show the first data point on the end of the scale. icomponent.xaxis(0).trackingalignfirststyle = ipafsmax icomponent.yaxis(0).trackingalignfirststyle = ipafsmax 113

128 Chapter 17 - Tracking Auto Example TrackingAlignFirstStyle Set to ipafsmax This style leaves the axis unchanged if the first data point is already in view. If the first data point is out of view, then the axis is adjusted to show the first data point on the beginning of the scale. icomponent.xaxis(0).trackingalignfirststyle = ipafsauto icomponent.yaxis(0).trackingalignfirststyle = ipafsauto None [All Axis Default] The axes are not adjusted on the first data point. This is the default for all axes and is the most commonly used Align First Style. icomponent.xaxis(0).trackingalignfirststyle = ipafsnone icomponent.yaxis(0).trackingalignfirststyle = ipafsnone Tracking Scroll Compress Max This feature specifies the maximum span value that is used to compress the axis when it receives tracking data. When the TrackingEnabled property is set to TRUE, the Span property will be increased (Compressed) to include the new Tracking Data if the current Span property is less than the TrackingSrollCompressMax property value. 114

129 Chapter 17 - Tracking Notice that the data in the plot has been plotted up to an X-Axis value of 100. If the TrackingScrollCompressMax property is set to 500, then X-Axis span will begin to increase as new data is being added. When the Span property reaches the same value as the TrackingScrollCompressMax property, a value of 500, then the TrackingStyle will take over from that point on. In a default chart, the X-Axis would begin to Smooth Scroll after the Span property had reached a value of 500. Example: icomponent.xaxis(0).trackingscrollcompressmax = 500 Enabling and Disabling Tracking You can enable or disable the transfer of tracking data from the Channel to the Axes by setting independent properties on either the channel or axes. This gives you complete control over how tracking is implemented. 115

130 Chapter 17 - Tracking Channel Tracking Properties You can disable the transmission of tracking data that comes from a channel to a particular axis by setting that channel s XAxisTrackingEnabled or YAxisTrackingEnabled properties. This allows you to only send tracking data to one, both, or none of the associated axes for this channel. The default value is TRUE. icomponent.channel(0).xaxistrackingenabled = TRUE icomponent.channel(0).yaxistrackingenabled = TRUE Axis Tracking Properties You can disable the reception of tracking data for a particular axis by setting the TrackingEnabled property for the axis. The default value is TRUE. icomponent.xaxis(0).trackingenabled = TRUE icomponent.yaxis(0).trackingenabled = TRUE User Interaction The end user of your application can also enable or disable tracking for all channels by using the Pause and Resume buttons on the built-in toolbar. Refer to the chapter on the toolbar for more information. Manual Tracking If you need to manually send tracking information to the axes, use the following procedure, passing the new data icomponent.xaxis(index).newtrackingdata(xdata) icomponent.yaxis(index).newtrackingdata(ydata) icomponent.xaxis(index).newtrackingdata(10.5) icomponent.yaxis(index).newtrackingdata(27.2) If all you are interested in doing is preventing the axes from scrolling all together, then you should turn off the Tracking on all axes. Set the TrackingEnabled property to False for all axes. The effect will be that all of the axes will not respond to tracking data, and will not scroll. If you want to prevent user s from scrolling the axes, set the Enabled property of the axis to False to prevent user interaction with the axis. 116

131 Chapter 18 - Interpolation Chapter 18 - Interpolation This feature, sometimes referred to as Curve -Fitting though that is not always the case, is supported by our iplot component. Interpolation is the process by which a line or series is drawn according to an estimation function or set of functions based on existing known data point values. There are several types of Interpolation available for the channel object. All of the current Interpolation styles draw curves that intersect existing data points. None This is not really an Interpolation Style of the component, but is used when you do not want a trace line drawn between data points. You simply want to show the known data points on the graph without a line interconnecting the data points. To draw no line, set the TraceVisible property to FALSE. iplot1.channel(0).tracevisible = False 117

132 Chapter 18 - Interpolation Straight Line This type of interpolation simply draws a straight line between each data point. This can result in jagged-looking curves. iplot1.channel(0).interpolationstyle = ipiststraightline 118

133 Chapter 18 - Interpolation Cubic Spline This type of interpolation draws a curve based on Cubic Spline curve fitting interpolation equations. iplot1.channel(0).interpolationstyle = ipistcubicspline 119

134 Chapter 18 - Interpolation Polynomial This type of interpolation draws a curve based on Polynomial Interpolation curve fitting equations and is only good for small data sets (~100 data points) Polynomial degree is fixed at [n 1] with n =number of data points. iplot1.channel(0).interpolationstyle = ipistpolynomial 120

135 Chapter 18 - Interpolation Rational This type of interpolation draws a curve based on Rational Interpolation curve fitting equations. This is an alternative to the Polynomial Interpolation with functions that have poles. This interpolation is good for small to medium-sized data sets. iplot1.channel(0).interpolationstyle = ipistrational Sometimes when using the curve fitting styles, an exception may be generated by the curve-fitting function due to the data being outside of the bounds of the function. If the data in your channel causes the function to go outside its bounds (e.g. causes the function to divide by zero or generate a larger number than can be handled by a double value), then an exception will be generated within the component causing the painting routine to fail. This will result in partially drawn curves and/or data points. 121

136 Chapter 18 - Interpolation Differential This type of interpolation draws a curve based on Differential Interpolation. This style draws horizontal and vertical lines between data points. A line is drawn horizontal between one point s X and Y-Value to the next data point s X-Value. A vertical line is then drawn perpendicular from the end point up or down to the Y-Value of the second data point. iplot1.channel(0).interpolationstyle = ipistdifferential 122

137 Chapter 19 - Loading and Saving Data Chapter 19 - Loading and Saving Data The Plot Pack components support several different methods for storing and retrieving data and control image snapshots both to and from the local file system or to and from a network server. Additionally, several data text, data log, and binary image file formats are also supported. The component interfaces have been left open for future expansion and support of additional file types and formats. Data Formats The plot pack components natively support several text formats for saving and loading channel data. The saved data can be used in other applications (such as Microsoft Excel) or can be used to reload channel data into another instance of the control at a later date or program execution. Saving and loading of channel properties, such as channel trace width, line color, and other control properties is also supported. There are two interfaces that are supported for loading and saving data. One is specific to a particular channel and the other is for all channels. To save and load data for a specific channel, use the methods below from a specific channel interface (e.g. iplot1.channel(0).savetodatafile). To save and load data for all channels in the chart, use the methods below from the main plot component interface (e.g. iplot1.savetodatafile). The supported data formats are as follows Text (Tab Delimited) File SaveDataToFile This method will save out the data for the specified channel or all channels to a tab delimited text file specified by FileName. iplot1.channel(0).savedatatofile(filename) Sample File Output:

138 Chapter 19 - Loading and Saving Data iplot1.savedatatofile(filename) Sample File Output: Channel 1(X) Channel 1(Y) Channel 2(X) Channel 2(Y) Null Null LoadDataFromFile This method will load in the data for the specified channel from a tab delimited text file specified by FileName. The first column must be the X channel data and the second column must be the Y channel data. For loading data from the main plot interface, the first column is for the first channel s X data, the second column is for the first channel s Y data, the third column is for the second channel s X data, the fourth column is for the second channel s Y data, and so on. The first row is ignored when loading data from the main plot interface. iplot1.channel(0).loaddatafromfile(filename) iplot1.loaddatafromfile(filename) SavePropertiesToFile This method will save out the properties for the specified channel to a tab delimited text file specified by FileName. Note, the file contains property information about the specified channel or all channels such as trace line width, line color, marker setup information, etc and does not contain XY data. The properties that are streamed out are generally only used with the LoadPropertiesFromFile method and not with external applications. Note the main interface s SavePropertiesToFile method will stream out all properties of the control, not just the individual properties for each channel. iplot1.channel(0).savepropertiestofile(filename) iplot1.savepropertiestofile(filename) 124

139 Chapter 19 - Loading and Saving Data LoadPropertiesFromFile This method will load in the properties for the specified channel from a text file specified by FileName. Note, the file contains property information about the specified channel or all channels such as trace line width, line color, marker setup information, etc and does not contain XY data. The properties that are streamed in are generally only used with the SavePropertiesToFile method and not with external applications. Note the main interface s LoadPropertiesFromFile method will stream in all properties of the control, not just the individual properties for each channel. iplot1.channel(0).loadpropertiesfromfile(filename) iplot1.loadpropertiesfromfile(filename) Data Log Formats The Plot Pack components also support real-time logging of channel data to a text file on your local hard drive. This differs from the Data Formats above in that data is appended to a text file (Tab Delimited) as data is being added to the chart.! You will need to ensure that the directory specified has already been created on the target data storage area before activating the log. LogFileName This property specifies the path and filename of the log. If you are developing for a crossplatform application, then you will need to ensure that the path and filename are appropriate for all OS file systems or for the target OS file systems. iplot1.channel(0).logfilename = FileName LogBufferSize This property specifies the size of the buffer to use when logging channel data to the file specified by the LogFileName property. When data from the chart has filled the buffer, the buffered data is then written to the log file. This is useful if you want to spread out the disk write access by the plot component. (i.e. if you don t use a buffer, then a write to the log is executed after every data point is added. This may not be desirable in some situations. With the buffer size set, you can have the component only write to the log after a specified amount of data has filled the buffer, therefore reducing the number of writes to the log file). The value specified is in units of # of data points. 125

140 Chapter 19 - Loading and Saving Data iplot1.channel(0).logbuffersize = 10 Note that if you are using the log from the main interface, you will be writing out a log file that contains data for all channels. You must use the AddDataArray method to add data from the main interface if you are using the main interface logging feature. LogActivate This method will start the logging of new data points to the specified file. Note that older data points will not be added to the log file, only new ones that have been added after executing this method. iplot1.channel(0).logactivate LogDeactivate This property will stop the logging of new data points to the specified log file. iplot1.channel(0).logdeactivate AddDataArray Example If you are using the logging feature from the main plot interface where you are logging all channels to a single log file, you have to use the AddDataArray method to add data to the channels. The first parameter refers to the common X Value for all of the channels, and the array contains one Y Value for each channel. The array type can be double or any variant type that can be converted to a double. The following example shows how to add data to the chart. 'Random Data dim TempArray(100) as Double for x = 0 to 99 TempArray(x) = rnd(1)*100 next x iplot1.adddataarray(xvalue, TempArray) 'Data From Some Other Source dim TempArray(100) as Double for x = 0 to 99 TempArray(x) = YValueSource next x iplot1.adddataarray(xvalue, TempArray) 'Your Data is already in array format iplot1.adddataarray(xvalue, YValuesArray) Also refer to the Adding Data Chapter for more information on using AddDataArray, about using AddDataArray in pseudo-asynchronous mode, or for handling null or empty value data. 126

141 Chapter 19 - Loading and Saving Data Image Formats There are also several image formats that are supported for saving static images of the plot component (except for the toolbar object). This is useful for exporting the image for use in an external reporting tool, for dynamic creation of images for ASP web pages, or for other uses where you need a snapshot graphic of the chart. Supported image formats are as follows Enhanced Metafile Format (EMF) Windows/OS2 Bitmap (BMP, RGB Encoded) Independent JPEG Group Format (JPEG, JPG) Portable Network Graphics Format (PNG, 16 million colors) {Coming Soon } Also See Chapter on Graphic Export. 127

142 Chapter 20 - Graphical Export Chapter 20 - Graphical Export There are also several image formats that are supported for saving static images of the plot component (except for the toolbar object). This is useful for exporting the image for use in an external reporting tool, for dynamic creation of images for ASP web pages, or for other uses where you need a snapshot graphic of the chart. Supported image formats are as follows Enhanced Metafile Format (EMF) Windows/OS2 Bitmap (BMP, RGB Encoded) Independent JPEG Group Format (JPEG, JPG) Portable Network Graphics Format (PNG, 16 million colors) {Coming Soon } Enhanced MetaFileFormat This format is compact, and allows resizing in another application. This file type is only supported on Windows platforms and is not supported under Linux. We recommend that you use TrueType fonts (Vector Fonts) in the Plot component when using this file format since TrueType fonts resize better than bitmap-based fonts. icomponent.saveimagetometafile(filename) icomponent.saveimagetometafile("c:\my documents\plotimage001.emf") Bitmap This format is generally used where you need to use a Windows-OS/2 compatible bitmap file. The file is uncompressed, so it is generally not recommended since other, compressed formats are available. JPEG icomponent.saveimagetobitmap(filename) icomponent.saveimagetobitmap("c:\my documents\plotimage001.bmp") This format is compact, lossy compressed, and is widely supported. However, we recommend that you use our EMF or PNG file types if possible since they produce smaller file sizes and the final graphic output is more suited for these other formats. icomponent.saveimagetojpeg(filename, Compression, Progressive) icomponent.saveimagetojpeg("c:\my documents\plotimage001.emf", 100, True) Note: Compression is a value between and reflects the amount of lossy compression applied to the image. A value of 25 will give very good compression, but the image will be degraded. We recommend that you always use a value of 100. Progressive refers to the interlacing encoding used in some browsers. 128

143 Chapter 20 - Graphical Export PNG This format is compact, loss-less compressed (same quality as a bitmap, no loss of quality), and is widely supported. This file format is a replacement for the GIF standard (which is encumbered with patent issues, only supports 256 colors, and doesn t compress as well as PNG), and is supported by all version 4.0 web browsers and above on all platforms. Note, this format is not yet available GetBytesJPEG Method This method is useful in ASP web pages where you want to send a JPEG image of the Plot component to a web client. GetBytesJPEG allows you to send a JPEG image directly to the web client without using intermediate files. Microsoft IIS Server ASP Page (VBScript) <%@ Language=VBScript %> <!--METADATA NAME="iPlotLibrary" TYPE="TypeLib" UUID="{DA D93B-498C-8C10-DEBD83EF1357}"--> <% 'Setup Response Response.Expires = 0 Response.Buffer = True Response.Clear 'Create ActiveX Control Set iplotx1 = Server.CreateObject("iPlotLibrary.iPlotX") 'Set Some Properties iplotx1.width=500 iplotx1.height=300 iplotx1.labels(0).caption = "Test Chart 1" iplotx1.toolbar(0).visible = False 'Plot Some Random Data for x = 0 to 100 iplotx1.channel(0).addxy x, sin(x) * 100 next 'Stream JPEG Image Response.ContentType = "image/jpeg" Response.BinaryWrite(iPlotX1.GetBytesJPEG(100, TRUE)) 'Cleanup Set iplotx1 = Nothing %> 129

144 Chapter 21 - Printing Chapter 21 - Printing The Iocomp Plot Pack components have built-in, basic capabilities for printing copies of your chart to a local or network printer. Features include 1. Ability to show or hide standard printer dialog before print 2. Set Page Orientation 3. Setup Page Margins When you print out a copy of your chart, the entire image of the chart will be printed except for the toolbar, and the chart will be expanded to fit the entire page depending on your page orientation and page margin settings. The printing support in the Plot Pack components is designed to provide a very simple and easy to use interface for outputting your charts to paper. If you need more complex reporting capabilities, you will need to use a reporting package or custom code. Printing Options Page Orientation To specify the orientation of the chart to be printed, modify the PrinterOrientation property.. icomponent1.printerorientation = poportriat or icomponent1.printerorientation = polandacape Printer Dialog To specify that the standard print dialog is displayed when the Print method is executed, then set the PrintShowDialog property to TRUE. icomponent1.printshowdialog = TRUE 130

145 Chapter 21 - Printing Margins To set the paper margins, set the following properties to the margins you require. Units are in inches icomponent1.printmarginright = 10 icomponent1.printmarginleft = 10 icomponent1.printmargintop = 10 icomponent1.printmarginbottom = 10 Top Margin Left Margin Chart Sizes to fill entire page inside of specified margins Right Margin Bottom Margin Simple Chart Print To print out a copy of the currently displayed chart in your program, execute the following method on the control iplot1.print() This method will print a copy of the current chart, stretched to the size of the page up to the margin properties that were previously set without the toolbar. Using with External Reporting Packages or Custom Code If you require more complex printing options, then you will need to use an external reporting package or your own customized code. For these other options, you can access a copy of the chart image for use as follows 131

146 Chapter 21 - Printing Clipboard Transfer icomponent1.copytoclipboard() This method will copy an enhanced metafile version of the chart to the standard clipboard for use elsewhere in your program. Note: use this option carefully. This method will be using your clipboard, and there is a possibility that other applications or even your application may be using the clipboard at the same time. IPictureDisp Object Transfer Image1.Picture = icomponent1.getsnapshotpicture() This method will return an IPictureDisp object image formatted as a metafile. Save to Enhanced Metafile icomponent1.save() This method will save a copy of the chart image to an enhanced metafile format file for use elsewhere. Printing Tips Many programmers like to see dark background charts with light colored channels and channel markers when viewing the Plot Components in a program. However, this color scheme doesn t look very good on a printout and can waste printer toner, ink, and can lead to wrinkled paper on inkjet printers. To counteract these printing issues, it is best to change the colors used in the chart just before printing, print out the chart, and then reset the colors back to their original settings. For example icomponent1.beginupdate() {Stops painting to the control to reduce flicker} {Set background colors for Chart and DataView areas to a light color or white} icomponent1.print() {Set background colors back to their original settings} icomponent1.endupdate() {This resumes painting to the control} Always, always, always use TrueType fonts to get the best results when saving to a graphic format or when printing. When using non-truetype fonts, you may see distorted fonts or incorrect kerning. 132

147 Chapter 22 - AutoScale and AutoLabel Chapter 22 - AutoScale and AutoLabel All axes support automatic scaling and formatting of their labels and tick marks. The automated scale (AutoScale feature) refers to the automatic scrolling of the axis with respect to newly added data and is related to the axis tracking feature. The AutoLabel feature refers to the rules that ensure the scales look human readable, that is to say fall on major ticks and values that look good to a human Rule This rule refers to how the scales label positions and features are automatically calculated by the component. This means that the component attempts to ensure that the scale contains major tick labels increment by 1, 2, or 5 (or multiples such as 10, 100, 1000, etc) within the bounds that you setup using the Axis Min and Max properties. In short, the scale will attempt to fit in as many major tick labels as possible For example, if your scale goes from 500 to +500, the component will attempt to fit as many labels between 500 and that are increment by 1, 2, or 5 and so on. For example, -500, - 400, -300, -200, -100, 0, 100, 200, 300, 400, 500 is a possible listing of major ticks in such as scale that would satisfy the rule. Another example is 500, -250, 0, 250, 500. An example that wouldn t fit would be 500, -389, -278, -167, -56, 56, 167, 278, 389, 500. Besides, that kind of scale doesn t look human readable Which scale is used depends on the font size specified for the Axis labels. The scale will attempt to fit in a scale with the maximum number of labels possible. How many can fit depends several configurable factors. Below you will find a list of rules used for the AutoScale and AutoLabel features. The component will go thorough the list in order and attempt to fit the maximum number of labels 133

148 Chapter 22 - AutoScale and AutoLabel Linear Scale The scale will attempt to fit the maximum number of labels where the major tick labels are divisible by 1, 2, or 5. Date/Time Scale The scale will attempt to fit the maximum number of labels possible by moving through the following order starting from Milliseconds and going out to Years. For example, if generating labels on human-readable minutes is not possible, the scale will automatically switch to creating labels using hours instead. If that is not possible, it will move on to days, etc. Milliseconds: 1, 2, 5, 10, 20, 50, 100, 200, or 500 Seconds: 1, 5, 10, 15, or 30 Minutes: 1, 5, 10, 15, or 30 Hours: 1, 2, or 12 Days: 1, 7, or 14 Months: 1, 2, 3, or 6 Years: 1, 2, or 5 134

149 Chapter 22 - AutoScale and AutoLabel Price32nds Scale The scale will attempt to fit the maximum number of labels possible where the major ticks are divisible by... 1/256, 2/256, 4/256, 1/32, 2/32, 4/32, 8/32, or 16/32 Log10 Scale The scale will attempt to fit the maximum number of labels possible where the major ticks are divisible by... 2, 5, 10, 20, 50, 100, or

150 Chapter 22 - AutoScale and AutoLabel Modifying the Rule DesiredIncrement If the Rule doesn t work in your particular situation, you can tune the AutoLabel feature by using the DesiredIncrement property of the axis. This property let s you override the rule and specify the increment used in the AutoLabel calculations For example, let s say you have a scale from 0 to 10. The Scale automatically creates a scale 0, 2.0, 4.0, 6.0, 8.0, But, you want the scale to increment by values of 2.5. So you would set the DesiredIncrement property to 2.5, and if the new scale will fit in the space allotted, you would see a scale: 0, 2.5, 5.0, 7.5, For scales that do not scroll, you can also specify a fixed DesiredStart property to force the scale to start the first major tick at a specified value. 136

151 Chapter 22 - AutoScale and AutoLabel Desired Start You can also force the AutoScale routine to start on a particular major tick value instead of the default Min value of the axis. Let s say, for example you have a scale from 0 to 10. The initial chart starts the scale off at the minimum value of the scale which is 0.0 But, you want the first major tick to start off at 0.5. So you would set the DesiredStart property to 0.5, forcing the scale to start at 0.5 Tracking Tracking refers to how the scale reacts when new data is added to the chart, such as smoothly scrolling to show new data that is added. Refer to the chapter on Tracking for more information. 137

152 Chapter 23 - Visual C++ Disp vs. idispatch Interface Chapter 23 - Visual C++ Disp vs. idispatch Interface Visual C++ supports two different types of ways to interface with an ActiveX component... Disp Interface [Late Binding] This is the type of interface that is used if you add an ActiveX component to your project and use member variables to access your component. This type of interface is slower than the idispatch interface, and is not recommended for our Plot Components. Disp Coding Example //Using the Disp Interface Index = m_iplotx1.addchannel(); m_iplotx1.getchannel(index).setmarkersstyle(4); //ipmsplus m_iplotx1.getchannel(index).settracelinewidth(2); m_iplotx1.getchannel(index).addxy(xvalue, YValue); Sample data rates for our iplotx component running on an AMD 900Mhz computer showing the speed differences between the Disp and idispatch interface speed. One million data points were plotted on the chart, and the time taken to perform the plot was recorded below Disp Interface, AddXY Method: 85,000 data points/second Disp Interface, AddXYArrays Method: 560,000 data points/second idispatch Interface, AddXY Method: 1,256,000 data points/second idispatch Interface, AddXYArrays Method: 516,000 data points/second 138

153 Chapter 23 - Visual C++ Disp vs. idispatch Interface idispatch Interface [Early Binding] This is the type of interface that is used if you add an ActiveX component to your form (by rightclicking on the form and selecting Insert ActiveX Control ) or when you create an ActiveX component dynamically at runtime. This interface is used with your use the #import directive in your project to dynamically import the TLB during compilation. The idispatch Interface is much faster when accessing methods and properties of the Plot Pack component and is the recommended interface for using our components. Also, accessing subobjects of the components such as channels is much easier and you are able to use the namespace of the components to access enumerated properties. idispatch Coding Example //Using the idispatch Interface Index = iplotx1.addchannel(); iplotx1->channel[index].markersstyle = ipmsplus; iplotx1->channel[index].tracelinewidth = 2; iplotx1->channel[index].addxy(xvalue, YValue); For example, to use the idispatch Interface, do the following Insert an ActiveX component onto your form by right clicking on the form and selecting Insert ActiveX Component. 2. Place the following code at the top of your form s CPP file... //Place at top of cpp file #import "iplotlibrary.tlb" named_guids #include "atlbase.h" extern CComModule _Module; using namespace iplotlibrary; 139

154 Chapter 23 - Visual C++ Disp vs. idispatch Interface 3. To access the component placed on the form (we named the IDC of the component in this example IDC_IPLOTX1, refer to the following example. This example uses a local variable to access the component, but you can easily use a global variable instead. double XData; double YData; CWnd* m_wnd; IUnknown* m_iunknown; CComPtr<iPlotLibrary::IiPlotX> iplotx1; //Get interface to Plot Component //Assuming that name of component on form is IDC_IPLOTX1 in this example m_wnd = GetDlgItem(IDC_IPLOTX1); m_iunknown = m_wnd->getcontrolunknown(); m_iunknown->queryinterface( uuidof(iplotlibrary::iiplotx), \ (LPVOID*)&iPlotX1); 4. Now to access the component, use the newly created variable iplotx1 5. The syntax of accessing the component is similar to Visual Basic and Borland C++ Builder. Here are a few examples... //Disp Interface (Slow Speed) m_icomponentx1.dataview(0).setgridshow(true); m_icomponentx1.xaxis(0).setmin(100); m_icomponentx1.yaxis(0).setspan(100); m_icomponentx1.channel(0).setname( Channel 1 ); m_icomponentx1.legend(0).setvisible(true); m_icomponentx1.toolbar(0).setshoweditbutton(false); m_icomponentx1.annotation(0).settext( Sample Annotation ); m_icomponentx1.datacursor(0).setstyle(3); //ipcsdeltax m_icomponentx1.limit(0).setxaxisname( X-Axis 1 ); m_icomponentx1.labels(0).setcaption( Chart Y vs. Time ); //idispatch Interface (High-Speed) icomponentx1->dataview[0]->gridshow = TRUE; icomponentx1->xaxis[0]->min = 100; icomponentx1->yaxis[0]->span = 100; icomponentx1->channel[0]->name = Channel 1 ; icomponentx1->legend[0]->visible = TRUE; icomponentx1->toolbar[0]->showeditbutton = FALSE; icomponentx1->annotation[0]->text = Sample Annotation ; icomponentx1->datacursor[0]->style = ipcsdeltax; icomponentx1->limit[0]->xaxisname = X-Axis 1 ; icomponentx1->labels[0]->caption = Chart Y vs. Time ; 6. Notice that you no longer have to use get and set methods to access properties or to access sub objects. Simply use the properties as you would in Visual Basic. 7. Since we are using the namespace for the iplotlibrary, you can also use enumerated properties, such as ipcsdeltax in the example above. 140

155 Chapter 24 - Using With Database Chapter 24 - Using With Database Adding data to the Plot Pack component chart from a database is straightforward. Simply loop through the data in your recordset and add a data point from each record into the chart. The following issues should be kept in mind to increase performance or to perform more complex swapping of data. Integrated Text File Saving and Loading The Plot Pack components natively support loading and saving of data from tab delimited text files on a per channel or per chart basis. Refer to the chapter entitled Loading and Saving Data. Simple X and Y Data To add simple integer or double (floating point) data from your database to the chart, simply load your database recordset, and then loop through each record, adding each X and Y data point by using the AddData method (by passing X and Y values in double format) 'Create Database Connection and Recordset 'Loop through recordset until EOF iplot1.channel(0).addxy RecordFieldXValue, RecordFieldYValue 'End Loop Time/Date X and Y Data To add Time or Date Based data from a database, you will first need to convert the value from its original format to a Double format before adding it to the chart if it is not already in Double format. (i.e. if the data is in string format as March 1, 2001 then it will need to be converted to it s corresponding Date/Time double format value. For more information about Date/Time formats see the chapter entitled Adding Data ) Many development environments have functions that automate this procedure. For example, if the X value in the Database is a Time or Date value then you use the following 'Create Database Connection and Recordset 'Loop through recordset until EOF DoubleFormatXValue = DateValue(RecordFieldXValue) iplot1.channel(0).addxy DoubleFormatXValue, RecordFieldYValue 'End Loop Don t forget that if you are using Date/Time format values, you need to setup the associated axis to use DateTime formatted labels. Refer to the chapter entitled Adding Data for more information about DateTime format. iplot1.xaxis(0).labelsformatstyle = iptfdatetime iplot1.yaxis(0).labelsformatstyle = iptfdatetime 141

156 Chapter 24 - Using With Database Adding Very Large Amounts of Data to The Chart If you plan on adding very large amounts of data to the chart (millions of data points or more), then you have to take into account the memory limits of Windows Applications (2GB per application and associated components), network speed to transfer large amounts of data, and the processing time needed to move the data through memory or from a database located on your local hard drive or over a network. 1,000,000 data points = MB of memory storage 5,000,000 data points = MB of memory storage 10,000,000 data points = MB of memory storage 25,000,000 data points = MB of memory storage 50,000,000 data points = 1.09 GB of memory storage If you try and load all of this data at once, you will overload the PCI system bus or Ethernet Network since this is a huge amount of data to move at one time. You may want to consider loading the data dynamically as needed instead of trying to load all of the data at once. Also see the chapter entitled Memory Utilization for more information. 142

157 Chapter 25 - Layout Control Through Code Chapter 25 - Layout Control Through Code Generally, you will use the built-in property editor to setup and layout objects (layout objects plot objects such as the axes, data view, toolbar, and legend). Review the chapter entitled Visual Layout Manger for more information. You can, however, modify the placement of layout objects in your program s code at run-time by using the following methods and properties. Layout Manager The layout manager automatically adjusts the position of layout objects such as the axes, toolbar, and legend for you. If you are manually adjusting the layout of layout objects through code, it is helpful to disable the layout manager while you are making changes and then re-enable the layout manager when you are finished. To Disable the Layout Manager, execute the following iplot1.disablelayoutmanager To Enable the Layout Manager, execute the following iplot1.enablelayoutmanager Layout Object ZOrder The ZOrder of a plot object determines how it is displayed in relation of other plot objects of the same type. Each plot object has a ZOrder property that determines how the layout object is painted on the control in relation to other layout objects. If two layout objects of the same type have the same ZOrder, then they are considered to be stacked. For example, Y-Axis 1 & 2 have the same ZOrder, so they take up the same vertical position and are therefore stacked YAxis 2 YAxis 0 Stacked Axes YAxis 1 ZOrder 0 ZOrder 1 143

158 Chapter 25 - Layout Control Through Code Layout Object StartPercent and StopPercent To specify how much area a particular layout object takes up, you will need to set the Start and Stop Percent properties. These properties are currently only supported by the X-Axis, Y-Axis, and Label objects. A Start percent of 25% for a vertical layout object means that the layout object begins drawing 25% from the bottom of the area reserved for the axes. A Start percent of 25% for a horizontal layout object means that the layout object begins drawing 25% from the left side of the component. A Stop percent of 75% for a vertical layout object means that the layout object ends drawing 75% from the bottom of the area reserved for the axes. A Stop percent of 75% for a horizontal layout object means that the layout object ends drawing 75% from the left side of the component. Horizontal Layout Object iplot1.xaxis(0).startpercent = 25 iplot1.xaxis(0).stoppercent = 75 25% 75% 0% Vertical Layout Object 100% iplot1.yaxis(0).startpercent = 25 iplot1.yaxis(0).stoppercent = % 75% 144 0% 25%

159 Chapter 25 - Layout Control Through Code DataViewZVert and DataViewZHorz Since the DataView is both a horizontal and vertical layout object, you need to use these properties off of the main plot component interface to set the relative ZOrder position of the DataView in relation to other horizontal and vertical layout objects. DataViewZVert To place the DataView in ZOrder #2 relative to other vertical layout objects, you would set the DataViewZVert property equal to 2. iplot1.dataviewzvert = 2 YAxis 2 YAxis 0 Data View YAxis 3 YAxis 1 ZOrder 0 ZOrder 1 ZOrder 2 ZOrder 3 DataViewZHorz To place the DataView in ZOrder #1 relative to other horizontal layout objects, you would set the DataViewZHorz property equal to 1. iplot1.dataviewzhorz = 1 ZOrder 2 XAxis 1 ZOrder 1 Data View ZOrder 0 XAxis 0 145

160 Chapter 25 - Layout Control Through Code Toolbar and Legend Currently the Visual Layout Manager in the property editor does not support changing the ZOrder of the Toolbar. You can however change the ZOrder of the Toolbar relative to other horizontal layout objects (such as the DataView or X-Axes) by changing the ZOrder of the Toolbar through code at run-time. Note: this feature is not yet fully supported for positions other than the top of the component. The toolbar must always be the topmost ZOrder (i.e. the ZOrder must always be greater than other horizontal layout objects). The Visual Layout Manager does support changing the ZOrder of the Legend in a graphical manner. You can also change the ZOrder of the Legend relative to other vertical layout objects (such as the DataView or Y-Axes) by changing the ZOrder of the Legend through code at run-time. The following would place the legend at the left side of the component iplot1.legend(0).zorder = 0! Only one toolbar and one legend are supported at this time. Always use an index value of 0 when accessing the ToolBar or Legend. X and Y-Axes The plot component axes are designed to automatically take care of drawing, aligning, and maintain the layout of the axes for you. You do, however, have control over several parameters that affect how the automated layout is handled. StackingEndsMargin Use StackingEndsMargin to get or set the margin at the end of the axis when stacked. StackingEndsMargin represents the percentage of a character size and is based on the LabelFont used for the axis. A value of 0.5 is equal to half the size of a character. Note that this feature currently only supports the Axes layout objects. Also note that the stacking margin only applies to layout objects that touch each other and only affects the ends that touch. In the following example, the first Y-Axis (on the bottom) has a starting percent of 0 and ending percent of 50. The second Y-Axis (on top) has a starting percent of 50 and an ending percent of 100. The Stacking Ends Margin allocates additional space to separate the two stacked axes. The total spacing is 0.5 characters in this example, with the StackingEndsMargin values being cumulative. The StackingEndsMargin will have no effect on the ends of the ends of the axes unless they touch another axis 146

161 Chapter 25 - Layout Control Through Code iplot1.yaxis(0).startpercent = 0 iplot1.yaxis(0).stoppercent = 50 iplot1.yaxis(0).stackingendsmargin = 0.25 iplot1.yaxis(1).startpercent = 50 iplot1.yaxis(1).stoppercent = 100 iplot1.yaxis(1).stackingendsmargin = % 50% 0% StackingEndsMargin (0.5 = ) Layout Object Horizontal This property should not be modified by the developer and is for internal use by the component to manage the layout and rotation of layout objects. To rotate the X and Y-Axes, use the XYAxesReverse property off of the main plot component interface iplot1.xyaxesreverse = True All axes margins use units of character widths and heights. This allows the component to dynamically adjust the scales based upon the font used instead of using rigid pixel specifications. A value of 0.25 would be equivalent to size (horizontal or vertical depending on if the margin relates to a horizontal or vertical margin) of a single character from the font being used in the layout object. 147

162 Chapter 25 - Layout Control Through Code Plot Component Outer Margin You can change the inner margin of the plot component, thereby creating a margin between the layout objects and the edge of the component. The margin values are specified in pixels. The following example sets a 5-pixel margin around the inside of the Plot Component iplot1.outermarginleft = 5 '5 Pixel Margin iplot1.outermarginright = 5 '5 Pixel Margin iplot1.outermargintop = 5 '5 Pixel Margin iplot1.outermarginbottom = 5 '5 Pixel Margin OuterMarginTop OuterMarginLeft Layout Objects OuterMarginRight OuterMarginBottom 148

163 Chapter 25 - Layout Control Through Code Full Layout Through Code Eample The following example demonstrates adding an additional X-Axis and two additional Y-Axes, moving the X-Axis and Y-Axes by manipulating the ZOrder of all of the appropriate layout objects, and then adjusting two of the Y-Axes to be stacked. The code assumes you have added a fairly large iplot component to your form and you are placing the code in your form load event. You don t have to hand-code the layout of objects unless you wish or need to do so. You can always use the Visual Layout Manager to arrange the layout objects without using any code in your program. Refer to the chapter entitled Visual Layout Manager for more information about using the Visual Layout Manager.. The output from the program should look like the following Y-Axis (0) X-Axis (0) X-Axis (1) Label (0) Y-Axis (2) Y-Axis (1) 149

164 Chapter 25 - Layout Control Through Code Visual Basic/VBA/VBScript 'Add one additional X-Axis 'There is already one X-Axis in the chart by default iplotx1.addxaxis 'Add two additional Y-Axes 'There is already one Y-Axis in the chart by default iplotx1.addyaxis iplotx1.addyaxis 'Disable the Layout Manager so that it doesn't interfere 'with our manual layout code iplotx1.disablelayoutmanager 'Configure ZOrder of Horizontal Layout Objects iplotx1.xaxis(0).zorder = 0 iplotx1.dataviewzhorz = 1 iplotx1.xaxis(1).zorder = 2 iplotx1.labels(0).zorder = 3 iplotx1.toolbar(0).zorder = 4 'Configure ZOrder of Vertical Layout Objects 'Note that the first two Y-Axes will have the same ZOrder, 'making them stacked axes iplotx1.yaxis(0).zorder = 0 iplotx1.yaxis(1).zorder = 0 iplotx1.dataviewzvert = 1 iplotx1.yaxis(2).zorder = 2 iplotx1.legend(0).zorder = 3 'Configure the Start and Stop Percent of the two Y-Axes we wish to stack iplotx1.yaxis(0).startpercent = 0 iplotx1.yaxis(0).stoppercent = 50 iplotx1.yaxis(1).startpercent = 50 iplotx1.yaxis(1).stoppercent = 100 'Configure the Stacking Ends Margins for each of the stacked axes to allow 'for a separation total of half of a character between the ends of the axes 'that touch each other iplotx1.yaxis(0).stackingendsmargin = 0.25 iplotx1.yaxis(1).stackingendsmargin = 0.25 'Assign the Grid to use the Y-Axis on the far right so that the Grid looks 'consistent iplotx1.dataview(0).gridyaxisname = iplotx1.yaxis(2).name 'Re-Enable the Layout Manager iplotx1.enablelayoutmanager 150

165 Chapter 25 - Layout Control Through Code Delphi/Kylix //Add one additional X-Axis //There is already one X-Axis in the chart by default iplot1.addxaxis; //Add two additional Y-Axes //There is already one Y-Axis in the chart by default iplot1.addyaxis; iplot1.addyaxis; //Disable the Layout Manager so that it doesn't interfere with our manual //layout code iplot1.disablelayoutmanager; //Configure ZOrder of Horizontal Layout Objects iplot1.xaxis[0].zorder := 0; iplot1.dataviewzhorz := 1; iplot1.xaxis[1].zorder := 2; iplot1.labels[0].zorder := 3; iplot1.toolbar[0].zorder := 4; //Configure ZOrder of Vertical Layout Objects //Note that the first two Y-Axes will have the same ZOrder, making them //stacked axes iplot1.yaxis[0].zorder := 0; iplot1.yaxis[1].zorder := 0; iplot1.dataviewzvert := 1; iplot1.yaxis[2].zorder := 2; iplot1.legend[0].zorder := 3; //Configure the Start and Stop Percent of the two Y-Axes we wish to stack iplot1.yaxis[0].startpercent := 0; iplot1.yaxis[0].stoppercent := 50; iplot1.yaxis[1].startpercent := 50; iplot1.yaxis[1].stoppercent := 100; //Configure the Stacking Ends Margins for each of the stacked axes to allow //for a separationtotal of half of a character between the endsof the axes //that touch each other iplot1.yaxis[0].stackingendsmargin := 0.25; iplot1.yaxis[1].stackingendsmargin := 0.25; //Assign the Grid to use the Y-Axis on the far right so that the Grid looks //consistent iplot1.dataview[0].gridyaxisname := iplot1.yaxis[2].name; //Re-Enable the Layout Manager iplot1.enablelayoutmanager; 151

166 Chapter 25 - Layout Control Through Code Visual C++ [Disp Interface] Place the following include statements at the top of your cpp file #include "iplotx.h" #include "iplotaxisx.h" #include "iplotlegendx.h" #include "iplottoolbarx.h" #include "iplotdataviewx.h" #include "iplotlabels.h" ================================================================ //Add one additional X-Axis //There is already one X-Axis in the chart by default m_iplotx1.addxaxis(); //Add two additional Y-Axes //There is already one Y-Axis in the chart by default m_iplotx1.addyaxis(); m_iplotx1.addyaxis(); //Disable the Layout Manager so it doesn't interfere with manual layout code m_iplotx1.disablelayoutmanager(); //Configure ZOrder of Horizontal Layout Objects m_iplotx1.getxaxis(0).setzorder(0); m_iplotx1.setdataviewzhorz(1); m_iplotx1.getxaxis(1).setzorder(2); m_iplotx1.getlabels(0).setzorder(3); m_iplotx1.gettoolbar(0).setzorder(4); //Configure ZOrder of Vertical Layout Objects. Note that the first two //Y-Axes will have the same ZOrder, making them stacked axes m_iplotx1.getyaxis(0).setzorder(0); m_iplotx1.getyaxis(1).setzorder(0); m_iplotx1.setdataviewzvert(1); m_iplotx1.getyaxis(2).setzorder(2); m_iplotx1.getlegend(0).setzorder(3); //Configure the Start and Stop Percent of the two Y-Axes we wish to stack m_iplotx1.getyaxis(0).setstartpercent(0); m_iplotx1.getyaxis(0).setstoppercent(50); m_iplotx1.getyaxis(1).setstartpercent(50); m_iplotx1.getyaxis(1).setstoppercent(100); //Configure the Stacking Ends Margins for each //of the stacked axes to allow for a separation //total of half of a character between the ends //of the axes that touch each other m_iplotx1.getyaxis(0).setstackingendsmargin(0.25); m_iplotx1.getyaxis(1).setstackingendsmargin(0.25); //Assign the Grid to use the Y-Axis on the far right //so that the Grid looks consistent m_iplotx1.getdataview(0).setgridyaxisname(m_iplotx1.getyaxis(2).getname()); //Re-Enable the Layout Manager m_iplotx1.enablelayoutmanager(); 152

167 Chapter 25 - Layout Control Through Code Visual C++ [High-Speed idispatch Inteface] Place the following include statements at the top of your file //Place at top of cpp file #import "iplotlibrary.tlb" named_guids #include "atlbase.h" extern CComModule _Module; using namespace iplotlibrary; ================================================================ double XData; double YData; CWnd* m_wnd; IUnknown* m_iunknown; CComPtr<iPlotLibrary::IiPlotX> iplotx1; //Get interface to Plot Component //Assuming that name of component on form is IDC_IPLOTX1 in this example m_wnd = GetDlgItem(IDC_IPLOTX1); m_iunknown = m_wnd->getcontrolunknown(); m_iunknown->queryinterface( uuidof(iplotlibrary::iiplotx), \ (LPVOID*)&iPlotX1); //Add one additional X-Axis //There is already one X-Axis in the chart //by default iplotx1->addxaxis(); //Add two additional Y-Axes //There is already one Y-Axis in the chart //by default iplotx1->addyaxis(); iplotx1->addyaxis(); //Disable the Layout Manager so that //it doesn't interfere with our manual //layout code iplotx1->disablelayoutmanager(); //Configure ZOrder of Horizontal Layout Objects iplotx1->xaxis[0]->zorder = 0; iplotx1->dataviewzhorz = 1; iplotx1->xaxis[1]->zorder = 2; iplotx1->labels[0]->zorder = 3; iplotx1->toolbar[0]->zorder = 4; //Configure ZOrder of Vertical Layout Objects //Note that the first two Y-Axes will have the //same ZOrder, making them stacked axes iplotx1->yaxis[0]->zorder = 0; iplotx1->yaxis[1]->zorder = 0; iplotx1->dataviewzvert = 1; iplotx1->yaxis[2]->zorder = 2; iplotx1->legend[0]->zorder = 3; //Configure the Start and Stop Percent of the //two Y-Axes we wish to stack iplotx1->yaxis[0]->startpercent = 0; 153

168 Chapter 25 - Layout Control Through Code iplotx1->yaxis[0]->stoppercent = 50; iplotx1->yaxis[1]->startpercent = 50; iplotx1->yaxis[1]->stoppercent = 100; //Configure the Stacking Ends Margins for each //of the stacked axes to allow for a separation //total of half of a character between the ends //of the axes that touch each other iplotx1->yaxis[0]->stackingendsmargin = 0.25; iplotx1->yaxis[1]->stackingendsmargin = 0.25; //Assign the Grid to use the Y-Axis on the far right //so that the Grid looks consistent iplotx1->dataview[0]->gridyaxisname = iplotx1->yaxis[2]->name(); //Re-Enable the Layout Manager iplotx1->enablelayoutmanager(); 154

169 Chapter 25 - Layout Control Through Code C++ Builder //Add one additional X-Axis //There is already one X-Axis in the chart //by default iplot1->addxaxis(); //Add two additional Y-Axes //There is already one Y-Axis in the chart //by default iplot1->addyaxis(); iplot1->addyaxis(); //Disable the Layout Manager so that //it doesn't interfere with our manual //layout code iplot1->disablelayoutmanager(); //Configure ZOrder of Horizontal Layout Objects iplot1->xaxis[0]->zorder = 0; iplot1->dataviewzhorz = 1; iplot1->xaxis[1]->zorder = 2; iplot1->labels[0]->zorder = 3; iplot1->toolbar[0]->zorder = 4; //Configure ZOrder of Vertical Layout Objects //Note that the first two Y-Axes will have the //same ZOrder, making them stacked axes iplot1->yaxis[0]->zorder = 0; iplot1->yaxis[1]->zorder = 0; iplot1->dataviewzvert = 1; iplot1->yaxis[2]->zorder = 2; iplot1->legend[0]->zorder = 3; //Configure the Start and Stop Percent of the //two Y-Axes we wish to stack iplot1->yaxis[0]->startpercent = 0; iplot1->yaxis[0]->stoppercent = 50; iplot1->yaxis[1]->startpercent = 50; iplot1->yaxis[1]->stoppercent = 100; //Configure the Stacking Ends Margins for each //of the stacked axes to allow for a separation //total of half of a character between the ends //of the axes that touch each other iplot1->yaxis[0]->stackingendsmargin = 0.25; iplot1->yaxis[1]->stackingendsmargin = 0.25; //Assign the Grid to use the Y-Axis on the far right //so that the Grid looks consistent iplot1->dataview[0]->gridyaxisname = iplot1->yaxis[2]->name(); //Re-Enable the Layout Manager iplot1->enablelayoutmanager(); 155

170 Chapter 26 - Performance Tuning Chapter 26 - Performance Tuning By default, the Plot Components are designed to provide real-time performance even at high data rates on most system and application configurations. However, there are certain limitations and realities of the Windows and Linux operating systems, as well as graphics and processor hardware considerations. For example, you will have no problem displaying tens of thousands of data points per second on a chart on a standard Windows 95/98/ME/NT/2000 or Linux system. However, the operating system can only draw to the screen at a certain rate depending on your processor speed, video card speed, system load, and/or the pixel size of the area being drawn on the video display. Overall Component Speed = (Component Size) * (Frame Rate) * (System Speed) * (Video Card Speed) * (System Load) To achieve the best real-time performance with extremely high data rates and frame rates, you will need to take the following items into consideration when setting up the component and or your computer system Component Size This is by far the most important item that affects the perceived speed and processor usage on your system. For example, when you display a video file on a standard system (high frame rate video, 500Mhz processor, 64MB Ram, 1024x768 system), you will see the processor usage climb as you increase the size of the video window. This happens because the operating system has to draw more pixels to the screen as you increase the size of the window. This is also the case with components. If you try to run a Plot component at full screen (1024x768 for example), the operating system has to work harder to draw the increased number of pixels to the system. Frame Rate All of Iocomp s components include properties and methods that allow you to control how often the control is repainted when changes are made to the components such as adding data or scrolling axes. Properties and methods that allow this control are: AutoFrameRate, UpdateFrameRate, BeginUpdate, and EndUpdate. These features allow you to either automatically or manually control how often the control s display area is updated. 156

171 Chapter 26 - Performance Tuning AutoFrameRate The AutoFrameRate property specifies whether the control automatically controls the frame repaint rate. With AutoFrameRate enabled, the control will automatically throttle the number of repaints per second that the control executes according to the number of frame per second specified in the UpdateFrameRate property. By using the Auto Frame Rate feature, you can control the number of repaints that the operating system has to make for the control, therefore reducing the amount of processing time used by this component. UpdateFrameRate icomponent1.autoframerate = TRUE The UpdateFrameRate property specifies the frame rate at which the control automatically repaints in frame per second. Every time a data point is plotted or when a user scrolls the axes, the control has to repaint itself to reflect the new changes. icomponent1.updateframerate = 10 The frame rate is used to improve performance by controlling the number of times the control repaints itself per second. To activate automatic frame rate control, the UpdateFrameRate property must be non zero. You can also use the manual BeginUpdate and EndUpdate method to manually control repainting even if the UpdateFrameRate feature is turned on. Each time a change occurs to the control that requires a repaint, the control will determine if a new frame needs to be displayed. The FrameTime is one second divided by the UpdateFrameRate. If a change occurs to the control before the FrameTime has elapsed, the control is not repainted. If a change occurs to the control after the FrameTime has elapsed, the control is repainted and the next frame is started. There must be a steady stream of changes to the control that require repainting for the automatic frame rate control to function correctly. The rate of change per second must be greater than the UpdateFrameRate for the desired frame rate to be achieved. Once changes to the control that require repainting have been stopped, call the EndUpdate method to force the control to repaint the last changes that may be cached. When the frame rate control is inactive, the control will attempt to repaint when a change is made to the control that requires a repaint. The actual number of repaints per second is dependent of the system hardware, system activity, and the number of request being made to repaint the control. The frame rate can be manually controlled by using the BeginUpdate and EndUpdate methods. Make sure that the UpdateFrameRate property is set to 0 to disable automatic frame rate control. Your code will need to keep track of the last update before beginning 157

172 Chapter 26 - Performance Tuning a new frame. To begin a new frame, call the EndUpdate method and then the BeginUpdate method to start the next frame. Note: if the user is interacting with the component, such as scrolling axes, clicking toolbar buttons, etc, the UpdateFrameRate is ignored. This allows the control to repaint quickly when the user is using the UI of the component so that it doesn t appear sluggish with very slow Update Rates. BeginUpdate This method is used to manually stop all painting to the control if needed. This is useful if you plan on adding a very large amount of data to the chart or wish to make many changes to the chart, but don t want the chart to repaint until you have completed your operations. icomponent1.beginupdate EndUpdate This method is used in conjunction with the AutoFrameRate feature mentioned above. It can also be used to manually resume all painting to the control if needed when AutoFrameRate is turned off. icomponent1.endupdate System Hardware Most modern or new computer systems are easily capable of displaying real-time data to the video display. If you need to display our controls with very high data rates on large video displays with large component sizes, then you will need to ensure that your computer hardware is up to the task. Processor Having a faster processor generally will improve overall performance of your system and will increase the speed of draws to your video screen. Most modern systems (approximately 400Mhz or higher) have processors fast enough to handle most real-time applications used with our controls. 158

173 Chapter 26 - Performance Tuning Memory The amount of memory is generally not that important to the speed of displaying data to the screen. The amount of RAM memory only comes into play when you are buffering many millions of data points into the chart, and have very low amounts of RAM in your system. If you run out of physical RAM, the operating system has to use the hard disk to store additional program memory, which is significantly slower than using physical RAM. See the next chapter regarding Memory Utilization of our Plot Pack components. Note: Windows NT and 2000 allow you to set specific minimum and maximum sizes for the virtual memory swap file. If you will be storing may millions of data points in the chart, ensure that your maximum virtual memory swap file settings are set to accommodate the expected memory usage. Video Card Many computer manufacturers have opted to include video card chipsets into the system bios/chipset. Generally, these types of video chipsets are not designed for displaying high-speed data to the video display. Also, some video cards that are included with systems are similarly not designed for displaying high-speed data. It is recommended that you use a high quality (many are not expensive), accelerated video card in your system if you will be using very large component sizes or video resolutions. Many people ask about their processor usage being very high when adding data at very high data rates. Generally this is not a problem since repaints to the screen have very low priority on the system, and if other processes need processor time during very heavy system loads, the repaints will be dropped. By using the AutoFrameRate feature of our components, you can reduce the actual processor load on the system due to repaints by our controls if needed. Special ActiveX Example: When iterating through a large loop and access sub objects of the ActiveX plot component, it is more efficient to create a temporary variable to keep track of the sub object in memory instead of having to access it during each iteration of the loop. In the example above, we go through a loop 100 times. We access the channel sub object 100 times for each AddXY method. There is a very small performance penalty when accessing the 159

174 Chapter 26 - Performance Tuning channel, which is magnified when looping, and can be noticeable with very large loops. To rectify this, we can sacrifice a small amount of memory to greatly speed up large loops. We will set a local variable to reference the channel sub-object only once, and then reuse the local variable in the loop. In the following example we will create a temporary variable to hold the channel sub object and will loop through 1,000,000 data points. You can flip between the method used in the example above and the example shown below to see the difference in speed. (Approximately 2x-4x faster using the local variable method shown below depending on your compiler). Visual Basic Private Sub PlotButton_Click() Dim x As Long Dim XData As Double Dim YData As Double Dim TempChannel as iplotchannelx Set TempChannel = iplotx1.channel(0) For x = 1 To 'Increment X Data XData = XData + 1 'Generate Random Y Data YData = Rnd(1) * 100 'Plot XY Data Pair TempChannel.AddXY XData, YData Next x End Sub 160

175 Chapter 26 - Performance Tuning Visual C++ [Disp Interface] //Place at top of cpp file #include "iplotx.h" #include "iplotaxisx.h" #include "iplotlegendx.h" #include "iplotchannelx.h" #include "iplottoolbarx.h" #include "iplotdataviewx.h" #include "iplotannotationx.h" void CFormDlg::OnPlotButton() { double XData; double YData; CiPlotChannelX TempChannel; XData = 0; YData = 0; TempChannel = m_iplotx1.getchannel(0); for(int i=0; i< ; i++) { //Increment X Data XData = XData + 1; //Generate Random Y Data YData = (rand()/(double)rand_max)*100; } //Plot XY Data Pair TempChannel.AddXY(XData, YData); }; 161

176 Chapter 26 - Performance Tuning Visual C++ [High-Speed idispatch Interface] //Place at top of cpp file #import "iplotlibrary.tlb" named_guids #include "atlbase.h" extern CComModule _Module; using namespace iplotlibrary; void CFormDlg::OnPlotButton() { double XData; double YData; CWnd* m_wnd; IUnknown* m_iunknown; CComPtr<iPlotLibrary::IiPlotX> iplotx1; CComPtr<iPlotLibrary::IiPlotChannelX> tempchannel; //Get interface to Plot Component //Assuming that name of component on form is IDC_IPLOTX1 in this example m_wnd = GetDlgItem(IDC_IPLOTX1); m_iunknown = m_wnd->getcontrolunknown(); m_iunknown->queryinterface( uuidof(iplotlibrary::iiplotx), \ (LPVOID*)&iPlotX1); tempchannel = iplotx1->channel[0]; XData = 0; YData = 0; for(int i=0; i< ; i++) { //Increment X Data XData = XData + 1; //Generate Random Y Data YData = (rand()/(double)rand_max)*100; } //Plot XY Data Pair tempchannel->addxy(xdata, YData); }; Also see chapter "Visual C++ Disp vs. idispatch Interface" for more information about the High-Speed idispatch Interface. 162

177 Chapter 26 - Performance Tuning Internet Explorer [Client-Side, VBScript] <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <title>internet Explorer Plot Pack Example</title> </head> <body> <object classid="clsid:1791c a-bd28-f2331bc9b7c7" id="iplotx1" width="500" height="200"></object> <input type="button" value="plot" name="plotbutton"> <script LANGUAGE="VBScript"> <!-- Sub PlotButton_OnClick() Dim x Dim XData Dim YData Dim TempChannel Set TempChannel = iplotx1.channel(0) For x = 1 To 'Increment X Counter XData = XData + 1 'Generate Random Data YData = Rnd(1) * 100 'Plot XY Data Pair TempChannel.AddXY XData, YData Next end sub --> </script> </body> </html> 163

178 Chapter 27 - Memory Utilization Chapter 27 - Memory Utilization The Plot Pack components include several mechanisms for controlling the amount of RAM memory that is used to store channel data. By storing all or some of the data for each channel, the plot component makes it possible to use the built in scrolling, zooming, and cursor tools to be able to look at historical data and to be able to print and save that data to other formats. The following sections will discuss how the Plot Pack components store data and how to control the amount of RAM memory that is used to suit your needs. Data Storage Memory Usage Calculations Since the plot pack components are designed to handle asynchronous data channels (i.e. the data points from one channel don t have to be in sync with data points in another channel), each data point use 2 double values and a Boolean value to represent a single data point 2 doubles and a Boolean value are used to represent one data point. 2 Double Values = 20 bytes (double = 10 bytes) 1 Boolean Value = 4 bytes Total = = 24 bytes per data point Therefore, each data point that you add to the chart takes up 24 bytes of memory. to add 1 million (1,000,000) data points to your chart, you can expect to use If you expect 24 bytes * 1,000,000 = 24,000,000 bytes 24 million bytes / 1024 bytes per KB = 23,437.5 KB 23,437.5 KB / 1024 KB per MB = MB for 1,000,000 Data Points a total of MB for all 1 million data points. If you have 5 channels with 100,000 data points added to each channel that would be 24 bytes * 5 channels * 100,000 = 12,000,000 bytes 12 million bytes / 1024 bytes per KB = 11,718.8 KB 11,718.8 KB / 1024 KB per MB = MB for 5 channels a total of 11.44MB of data storage needed for 5 channels with 100,000 data points each channel. Future versions of our Plot Pack will include the capability to specify the data storage style where you can trade-off functionality of our component for increased number of allowable points to be stored in the component. 164

179 Chapter 27 - Memory Utilization 2GB Application RAM Barrier Under the Windows 32-bit operating system, each application is limited to using a total 2GB of RAM Memory (2048 MB). This includes memory usage by everything in the program, including variables in your code and memory used by all components in the application (ActiveX, VCL, or CLX components). Keep this in mind when determining how much data you can fit into the chart as exceeding the 2GB RAM Usage barrier can result in nasty out of memory or other program and system errors. If you run into this issue, then either use the Ring Buffer feature of the Plot Pack, reduce the number of data points added to the chart, or periodically save the data to an external file and clear out the buffer before adding additional data points. Future versions of Windows will support larger memory usage sizes. Consult your development environment documentation and Windows documentation for more information about future updates to this limitation Under Linux (CLX components only) the amount of memory accessible by an application depends on your kernel version, kernel build, and development environment. This can range between 2GB and 64GB depending on your situation, but is generally a 2GB limit for most distributions. Consult your development environment documentation and Linux distribution documentation for more information. Resource Memory vs. RAM Memory RAM Memory Modern operating systems such as Microsoft Windows 95/98/ME/NT/2000 and Linux support Virtual Memory and can handle the addition of data sets of this size. This means that in a system with 64MB of Physical RAM 128MB of Virtual Memory you can support 192 MB of data from the operating system and running applications. If you are using 1,000,000 data points in your chart (22.89 MB of data), this can easily fit in your available system RAM memory. If you need additional memory, increase the allocation of virtual memory (See your System control panel or operating system documentation) or install additional RAM modules. Resource Memory Resource Memory, on the other hand, depends on your operating system and is not related to the amount of Physical RAM or Virtual Memory you have allocated for your operating system. Resources refer to memory allocated to brushes, pens, windows, font managers, and other operating system dependent resources. Operating systems such as Windows 95/98/ME have a smaller limit on the amount of resources that can be allocated at any one time compared to Windows NT/2000/XP systems. This is a function of the 165

180 Chapter 27 - Memory Utilization operating system and does not matter how much RAM you have installed, even if you have gigabytes of memory installed. This resource memory barrier limits the number of programs, windows, and controls that you can have open at any one time. You should have no problem running several Plot Pack components (Service Pack 1 release or greater) in your application. You can run approximately 1500 windows + controls on a Windows 95/98/ME system, and approximately 3000 windows + controls on a Windows NT/2000 system. Windows XP is expected to have even higher limits. Note that this is highly dependent on other applications, services, and other programs running on your system and is intended only as a guide. Ring Buffer By default, the plot components store all data that has been added to available system RAM memory. To control the amount of memory that is used by the charts, you can take advantage of the Ring Buffer support in the plot components. The Ring Buffer is a FIFO (First-In First-Out. In other words, when the buffer is full, the first data point added is the first data point to be overwritten) type buffer where you specify the maximum amount of data points that can fit in the buffer. Once that maximum number is exceeded, then data is removed from the buffer starting with the first data points that were initially added.! When you set the Ring Buffer to a non-zero value, then memory will be allocated for that number of data points whether or not those data points actually exist. The advantage to this type of buffer is that you will always know if the buffer you have set exceeds the available RAM + Virtual Memory on your system ahead of time, instead of find this out after running the chart overnight! To enable the Ring Buffer for a particular channel, set the RingBufferSize property for the number of data points that you wish to remain in the buffer for a specific channel. iplot1.channel(0).ringbuffersize = The RingBufferSize is specified in the number of data points allowed in the buffer for this particular channel. This property setting does not affect other channels. 166

181 Chapter 27 - Memory Utilization To disable the ring buffer and storage all data to available memory (up to the 2GB per application limit), set the ring buffer property to zero iplot1.channel(0).ringbuffersize = 0 Newly Added Data Points [Head] Oldest Data Overwritten [Tail] Ring Buffer (FIFO) 167

182 Chapter 28 - Implementing Toolbar Externally Chapter 28 - Implementing Toolbar Externally The built-in toolbar is intended to be a very simple and easy to use toolbar, providing basic user tools and functionality for the Plot Pack components. If you need a more advanced toolbar, or if you want to include functionality for other features of your application, you will need to use an external toolbar control. The Plot Pack components have interfaces that allow you to easily map and perform the same functions as the built-in toolbar. Many development environments come with their own toolbar controls and you can find many other third-party toolbars with many advanced features. You will need to use our toolbar interfaces in the event code that is generated by the toolbar that you use. Each function interface will perform the same action as if the user had clicked on the corresponding built-in toolbar button. Methods that are available to perform toolbar functions are as follows Resume Button icomponent.toolbar(0).dobuttonclickresume Pause Button icomponent.toolbar(0).dobuttonclickpause Axes Scroll Mode Button icomponent.toolbar(0).dobuttonclickscrollaxesmode Axes Zoom Mode Button icomponent.toolbar(0).dobuttonclickzoomaxesmode Zoom In Button icomponent.toolbar(0).dobuttonclickzoomout 168

183 Chapter 28 - Implementing Toolbar Externally Zoom Out Button icomponent.toolbar(0).dobuttonclickzoomin Select Button icomponent.toolbar(0).dobuttonclickselect Zoom Box Button icomponent.toolbar(0).dobuttonclickzoombox Cursor Button icomponent.toolbar(0).dobuttonclickcursor Edit Button icomponent.toolbar(0).dobuttonclickedit Copy Button icomponent.toolbar(0).dobuttonclickcopy Save Button icomponent.toolbar(0).dobuttonclicksave Print Button icomponent.toolbar(0).dobuttonclickprint! Currently, only one toolbar is supported. Always use ToolBar(0) when referencing the toolbar. In a future release, the Plot Components will support multiple toolbars. 169

184 Chapter 29 - Implementing Legend Externally Chapter 29 - Implementing Legend Externally The built-in legend automatically provides the following functionality Channel Trace Line Style and Color Listing Channel Marker Style and Color Listing Channel Name Listing Channel Associated X-Axis Channel Associated Y-Axis Channel Current X/Y Coordinate if you wish to implement your own legend outside of our component, you can emulate the features listed above as follows Channel Name Listing The value displayed in the Title column is actually not the ChannelName property, but the ChannelTitle property. The ChannelTitle property controls what is displayed in the Title column. To access a particular Channel Title, use the following iplot1.channel(0).channeltitle where 0 is the Channel index corresponding to the first channel. 170

185 Chapter 29 - Implementing Legend Externally To access all of the Channel Titles in a loop, execute the following For x = 0 to iplot1.channelcount -1 ChannelTitleTextString = iplot1.channel(x).channeltitle Next x Channel Trace Line Style and Color Listing The colored line displayed in the first represents the line style and color of the channel s trace line. Note that the width of the line is not represented and that the line style is simulated to make it easier to distinguish among the different line styles available. To access a particular Channel Line Style or Line Color, use the following iplot1.channel(0).tracelinestyle iplot1.channel(0).color where 0 is the Channel index of the 1 st channel. The following line styles are available Line Style Integer Value iplsdash 0 iplsdashdot 1 iplsdashdotdot 2 iplsdot 3 iplssolid 4 To access all of the Channel Trace Line Styles and Colors in a loop, execute the following For x = 0 to iplot1.channelcount -1 ChannelLineStyleValue = iplot1.channel(x).tracelinestyle ChannelLineColor = iplot1.channel(x).color ChannelLineStyle = iplot1.channel(x).tracelinestyle Next x Channel Trace Line Channel Marker 171

186 Chapter 29 - Implementing Legend Externally Channel Marker Style and Color Listing The colored marker displayed in the first represents the marker style and color of the channel s marker. There are several properties that affect the look of a Channel Marker. A marker is drawn using a style to determine the shape of the marker, a pen (for drawing the outline), and a brush (for drawing the fill ). To access the properties of markers for a particular channel, use the following iplot1.channel(0).markersbrushcolor iplot1.channel(0).markersbrushstyle iplot1.channel(0).markersbrushusechannelcolor iplot1.channel(0).markerspencolor iplot1.channel(0).markerspenstyle iplot1.channel(0).markerspenusechannelcolor iplot1.channel(0).markerspenwidth iplot1.channel(0).markerssize iplot1.channel(0).markersstyle where 0 is the Channel index corresponding to the first channel. The following marker styles, brush styles are line styles are available Markers Style Integer Value ipmscircle 0 ipmssquare 1 ipmsdiamond 2 ipmscross 3 ipmsplus 4 ipmstriangleup 5 ipmstriangledown 6 ipmstriangleleft 7 ipmstriangleright 8 Brush Style Integer Value bssolid 0 bsclear 1 bshorizontal 2 bsvertical 3 bsfdiagonal 4 bsbdiagonal 5 bscross 6 bsdiagcross 7 Pen Style Integer Value pssolid 0 psdash 1 psdot 2 psdashdot 3 psdashdotdot 4 psclear 5 172

187 Chapter 29 - Implementing Legend Externally Channel Associated X-Axis To obtain the associated X-Axis for a particular channel, use the following iplot1.channel(0).xaxisname Channel Associated Y-Axis To obtain the associated Y-Axis for a particular channel, use the following iplot1.channel(0).yaxisname Channel Current X/Y Coordinate The X and Y columns in the legend display the current X and Y coordinates for the most recently added data point for a particular channel. In the example below, the green channel (Channel 6) shows a current Y value of 30, which corresponds to the X-Value displayed in the graph and in the legend. To access any particular X or Y coordinate of a particular data point, use the following where Index is the index of the data point being requested (0 would be the first data point, 1 the second, 2 the third, etc.) XValue = iplot1.channel(0).datax(index) YValue = iplot1.channel(0).datay(index) To access the X and Y coordinate of the most recently added data point, use the following XValue = iplot1.channel(0).datax(iplot1.channel(0).count 1) Yvalue = iplot1.channel(0).datay(iplot1.channel(0).count 1) 173

188 Chapter 30 - ASP (Active Server Pages) Chapter 30 - ASP (Active Server Pages) Working with ASP pages in conjunction with a Microsoft IIS server (Windows NT 4.0, Windows 2000, Windows XP) allows you to instantiate our component on the server side, add data to the chart, and then stream an image of the chart to your end user without using temporary files. This is all done without needing to run a copy of our component on the web browser client, allowing for cross-platform support of our component in static mode. Here is a simple example that shows how to create a Plot component on the web server, set some properties of the component, add some data, and then stream out a JPEG image of the component to your client by using the Response object. ASP Page code is interpreted on the web server before it is sent to the client, so the following script would be replaced with a JPEG image in the resulting HTML code sent to the browser. Microsoft IIS Server ASP Page (VBScript) <%@ Language=VBScript %> <!--METADATA NAME="iPlotLibrary" TYPE="TypeLib" UUID="{DA D93B-498C-8C10-DEBD83EF1357}"--> <% 'Setup Response Response.Expires = 0 Response.Buffer = True Response.Clear 'Create ActiveX Control Set iplotx1 = Server.CreateObject("iPlotLibrary.iPlotX") 'Set Some Properties iplotx1.width=500 iplotx1.height=300 iplotx1.labels(0).caption = "Test Chart 1" iplotx1.toolbar(0).visible = False 'Plot Some Random Data for x = 0 to 100 iplotx1.channel(0).addxy x, sin(x) * 100 next 'Stream JPEG Image Response.ContentType = "image/jpeg" Response.BinaryWrite(iPlotX1.GetBytesJPEG(100, TRUE)) 'Cleanup Set iplotx1 = Nothing %> 174

189 Chapter 31 - Internet Explorer (Client Side) Chapter 31 - Internet Explorer (Client Side) Our ActiveX version of our Plot Pack components can be used to display Real-Time chart data in the Microsoft Internet Explorer Browser. This chapter covers running our Plot Pack ActiveX components on a client s Internet Explorer Browser. If you only require static images to be displayed on a users machine and you wish to support all operating systems and browsers other than Microsoft Internet Explorer and Windows, then please refer to our chapter on ASP (Active Server Pages) and/or Apache Web Modules. The following requirements must be met to be able to display Real-Time data from your network server to your local client s web browser 1. The client must be running 32-bit Windows. 2. The client must be running Microsoft Internet Explorer 3.01 or higher version 3. You must provide code or another ActiveX component in your HTML webpage code to transfer data from the web server or other network server or computer. If your web page will be acquiring data from the client s machine or if you will be statically embedding your data in the web page (or statically through ASP or other server side scripts), then this is not needed. SOAP as well as direct database-linking support will be provided in a future release.! Netscape and The Mozilla project do have solutions for embedding ActiveX controls in their browsers on Windows machines with varying degrees of success. Some solutions support properties and events, others do not. Iocomp does not support these solutions at this time, but will support future versions of Netscape, Mozilla, and other browsers when they attain sufficient support for embedding ActiveX controls. Creating the Plot Pack ActiveX Object in Your Web Page To create an ActiveX object on the client s machine, you would need to include the following html code in the body section of your web page <object classid="clsid:1791c a-bd28-f2331bc9b7c7" id="iplotx1" width="500" height="200"> </object> Many HTML development tools such as InterDev and FrontPage will automatically generate this code for you, and will also stream out design-time properties of the control to the html document for you. If you are using an HTML development tool that doesn t automatically generate this code for you, you will need to manually type in the information as needed. 175

190 Chapter 31 - Internet Explorer (Client Side) ClassID List for Plot Pack Components iplot 1791C A-BD28-F2331BC9B7C7 ixyplot D1CAE8F4-6DFF-4187-B1B8-DDCF91F98A8A Refer to Appended <Insert Appendix Number Here>: ActiveX HTML Properties and Events for a listing of all of the supported properties and events than can be used with our Plot Pack components in an HTML web page. Installing the Plot Pack ActiveX Control on the Client To automatically install and update our Plot Pack ActiveX controls on your client machine, you will need to modify the object tag used in the previous section as follows <object classid="clsid:1791c a-bd28-f2331bc9b7c7" id="iplotx1" width="500" height="200" codebase="pathname/iplotlibrary.cab#2,0,0,0"> </object> The addition of codebase= pathname/iplotlibrary.cab#2,0,0,0 instructs Internet Explorer to download, install, and register the Plot Pack ActiveX components (compressed in a CAB file) under the following conditions 1. The Plot Pack ActiveX is not installed on the client s computer 2. The version of the Plot Pack ActiveX installed on the client s computer is less than the version specified after the # symbol. Notice that the version number separator is, and not.. To obtain a digitally signed, pre-prepared CAB file for the Plot Pack or any of our ActiveX components, navigate to our downloads web page at To obtain the version number of the ActiveX component contained in our pre-prepared CAB file, open the file in a Zip utility (such as WinZip ) and view the contained INF file. That file will contain the full version of the contained ActiveX component Don t uncompress or modify the CAB file s supplied by Iocomp Software. Simply copy the CAB file to your server, and reference it in the codebase parameter of the object tag. If you need to place our ActiveX in your own self-created CAB file, then you will need to obtain a digital certificate from a Cert provider such as Versign or Thawte. By using our digitally signed CAB files or using your own digitally signed CAB file, your clients can leave their Internet Security Settings set on High. 176

191 Chapter 31 - Internet Explorer (Client Side) Licensing the Plot Pack ActiveX Control All ActiveX controls that require licensing must have an LPK file specified in each web page that uses that control. Since only one LPK file can be specified in any one web page, it is recommended that you generate an LPK file for all ActiveX controls (no matter which vendor) that you may be using in your web pages. To integrate the LPK file into your web page, you will need to associate the LPK file with the Microsoft License Manager control that is built into the Internet Explorer browser as follows <object CLASSID="clsid:5220cb21-c88d-11cf-b347-00aa00a28331" VIEWASTEXT> <param name="lpkpath" value="pathname/lpkfile.lpk"> </object>! The CLASSID used is for the Microsoft License Manager control and not the other ActiveX controls used in your web page! To generate an LPK file, you will need to obtain the LPK Tool program from Microsoft. You can download this tool from Microsoft s Website and from their Internet Explorer Toolkit. Accessing the Plot Pack ActiveX Control from VBScript If you are familiar with Microsoft Visual Basic or VBA from Microsoft Office products, you should find the VBScript language to be almost identical. Accessing the chart from your VBScript code follows the same rules as Visual Basic. Consult documentation or books on how to use VBScript, or consult our example below and in the Examples Section of our Support Website. AddXY Example <script LANGUAGE="VBScript"> <!-- Sub PlotButton_OnClick() Dim x Dim XData Dim YData For x = 1 To 100 'Increment X Counter XData = XData + 1 'Generate Random Data YData = Rnd(1) * 100 'Plot XY Data Pair iplotx1.channel(0).addxy XData, YData Next end sub --></script> VBScript does not support variable types. When you dimension your variables, do not give a type. All variable types in VBScript are Variants. 177

192 Chapter 31 - Internet Explorer (Client Side) Full Source Example <html><head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <title>internet Explorer Plot Pack Example</title></head><body bgcolor="#ffffff"> <object classid="clsid:1791c a-bd28-f2331bc9b7c7" id="iplotx1" width="500" height="200"></object> <input type="button" value="plot" name="plotbutton"> <script LANGUAGE="VBScript"> <!-- Sub PlotButton_OnClick() Dim x Dim XData Dim YData For x = 1 To 100 'Increment X Counter XData = XData + 1 'Generate Random Data YData = Rnd(1) * 100 'Plot XY Data Pair iplotx1.channel(0).addxy XData, YData Next end sub --></script></body></html> 178

193 Appendix A - Plot Pack Property Editors Appendix A - Plot Pack Property Editors Control General User Can Edit Objects: Use to specify whether your application user can open the runtime property editor by right-clicking on a plot object and select a popup Edit menu item. Only the Edit popup items are disabled when this option is unchecked. Auto Frame Rate: Use AutoFrameRate to specify whether the control automatically activates the repaint frame rate control. When the AutoFrameRate is set to true, the control automatically calls BeginUpdate when the control is performing its next repaint. From then on, the control repaint frame rate is equal to the UpdateFrameRate no matter how many changes are maid to the control every second. Update Frame Rate: Use UpdateFrameRate to get or set the frame rate at which the control repaints. The frame rate is used to improve performance by controlling the number of times the control repaints itself per second. To activate automatic frame rate control, the UpdateFrameRate property must be non zero and the BeginUpdate method must be called. To deactivate automatic frame rate control, call the EndUpdate method. Each time a change occurs to the control that requires a repaint, the control will 179

194 Appendix A - Plot Pack Property Editors determine if a new frame needs to be displayed. The FrameTime is one second divided by the UpdateFrameRate. If a change occurs to the control before the FrameTime has elapsed, the control is not repainted. If a change occurs to the control after the FrameTime has elapsed, the control is repainted and the next frame is started. There must be a steady stream of changes to the control that require repainting for the automatic frame rate control to function correctly. The rate of change per second must be greater than the UpdateFrameRate for the desired frame rate to be achieved. Once changes to the control that require repainting have been stopped, call the EndUpdate method to force the control to repaint the last changes that may be cached. When the frame rate control is inactive, the control will attempt to repaint when a change is made to the control that requires a repaint. The actual number of repaints per second is dependent of the system hardware, system activity, and the number of request being made to repaint the control. The frame rate can be manually controlled by using the BeginUpdate and EndUpdate methods. Make sure that the UpdateFrameRate property is set to 0 to disable automatic frame rate control. Your code will need to keep track of the last update before beginning a new frame. To begin a new frame, call the EndUpdate method and then the BeginUpdate method to start the next frame. Background Color: Use BackgroundColor to read or change the background color of the control. Border Style:Use BorderStyle to provide the control with a three-dimensional beveled look. Value ibsnone ibsraised ibslowered Meaning No border. The outer border is raised. The outer border is lowered. Outer Margin: Use OuterMarginLeft, OuterMarginRight, OuterMarginTop, or OuterMarginBottom to set the margin between the left, right, top, or bottom side edge of the control and the internal drawn elements. The values are specified in pixels. 180

195 Appendix A - Plot Pack Property Editors Control Title Title Visible: Use to show or hide the main chart title displayed above the DataView area. Title Text: Use to set the Title Text of the main chart title. Title Margin: Use to set the margin between the bottom of the title and the DataView area. Title Font: Use to se the font of the title.! These properties have been depreciated in favor of our multiple label support. Please use the Labels tab to set properties for the Title Label and other labels in the Plot Component. 181

196 Appendix A - Plot Pack Property Editors Control Print Show Dialog: Use PrinterShowDialog to specify whether the printer setup dialog is shown to the user when the PrintChart method is called. If Enabled, the user can select a local or network printer, specify the orientation, number of copies, and etc before actually printing the chart. Orientation: Use PrinterOrientation to set the orientation of the chart on the printed page. Value poportrait polandscape Meaning Portrait Landscape Margin: The left, right, top, and bottom margins on the printed page. 182

197 Appendix A - Plot Pack Property Editors Control Hints Hints Show: Use HintsShow to specify whether Help Hints are shown for the entire control. Hints Pause: Use HintsPause to get or set the time interval that passes before the control's Help Hint appears when the user places the mouse pointer on a object. The HintsPause value is in milliseconds. Hints Hide Pause: Use HintsHidePause to get or set the time interval to wait before hiding the Help Hint if the mouse has not moved from the object. The HintsHidePause value is in milliseconds. 183

198 Appendix A - Plot Pack Property Editors Control File I/O Log File Name: Use LogFileName to get or set the filename (including path) for the log file. This is the log file for all axes. Warning! All channels must be synchronized. You must use the AddDataArray method when adding data to the plot component when using the main plot interface s logging feature. If you wish to use asynchronous channels, then you must use the LogFileName logging feature off of each channel. Log Buffer Size: Use LogBufferSize to get or set the size of the log buffer. When logging is active, data will flow into the log buffer if the LogBufferSize is greater than 0. When the buffer is filled, then data will be written to the log file and the buffer cleared. This is useful if you want to regulate how often data is written to the log file. If this value is 0, then data is written to the log file after every new data point is added to the chart. The value is in number of data points per channel. If you have 5 channels and set this value to 10, then the log will be written to and the buffer cleared after 50 data points have been accumulated. Warning! All channels must be synchronous. You must use the AddDataArray method when adding data to the plot component when using the main plot interface s logging feature. If you wish to use asynchronous channels, then you must use the LogBufferSize logging feature off of each individual channel. 184

199 Appendix A - Plot Pack Property Editors Note: if the log is deactivated, the buffer will automatically be flushed to the log file and cleared. Properties Save: Call SavePropertiesToFile to stream out all of the properties of the plot component to a file. Properties Load: Call LoadPropertiesFromFile to stream in all of the properties of the plot component from a file. Translation Add: Adds a translation string pair to the list of translations. Remove: Removes the selected translation from the list of translations. ClearAll: Removes all translations from the list of translations. Save: Exports a tab delimited text file of translation string pairs. Load: Loads a tab delimited text file of translation string pairs. Original String: The English string in the original component to be translated. Casesensitive. Leading and trailing spaces are NOT ignored. Replacement String: The translated string, which replaces the Original String. 185

200 Appendix A - Plot Pack Property Editors Annotation Defaults Font: Specifies the default font attributes used when creating annotation objects. Pen Color: Specifies the pen color used when drawing the annotation object. Pen Style:. Use MarkersPenStyle to get or set the pen style used when drawing data markers. Value pssolid psdash psdot psdashdot psdashdotdot psclear psinsideframe Meaning A solid line A line made up of a series of dashes A line made up of a series of dots A line made up of alternating dashes and dots A line made up of a serious of dash-dot-dot combinations No line is drawn (used to omit the line around shapes that draw an outline using the current pen) A solid line, but one that may use a dithered color if Width is greater than 1 Pen Width:. Use MarkersPenWidth to get or set the pen width used when drawing data markers. Brush Color: Use MarkersBrushColor to get or set the brush color used to draw data markers. 186

201 Appendix A - Plot Pack Property Editors Brush Style: Use MarkersBrushStyle to get or set the brush style used when drawing data markers. Value bssolid bsclear bshorizontal bsvertical bsfdiagonal bsbdiagonal bscross bsdiagcross Meaning Solid Clear Horizontal Lines Vertical Lines Diagonal Bottom-Left to Top-Right Diagonal Top-Left to Bottom-Right Combination of bshorizontal and bsvertical Combination of bsfdiagonal and bsbdiagonal Visual Layout Manager 187

202 Appendix A - Plot Pack Property Editors How To Use: The Layout Manager is a visual, graphical representation of the individual plot component objects as they are drawn on the component. You can drag-and-drop individual items to reposition them within the control. You can also change the width and height of objects by placing your mouse cursor over one of the ends of the objects (look for the cursor to change to a double arrow) and dragging them to the desired size. If you drop one axes object on another, and they do not overlap, then the axes will stack on top of one another. To flip the X and Y-Axes, right click anywhere in the Layout Manager for a menu item to rotate the X and Y-Axes. Toolbar: The Toolbar object. This item cannot be moved at this time. A feature to reposition this item will be added in future versions. Label: The Label Object. In this example, the only label in the component is named Title. There must always be at least one label in the component for backward compatibility with older versions, though it can be hidden. Data View: The object which contains the plotted data. All objects move in relation to this object, so it is fixed. X-Axis: An individual X-Axis. If you have added multiple X-Axes, there would be multiple X-Axis objects which you could reorder or stack. Y-Axis: An individual Y-Axis. If you have added multiple Y-Axes, there would be multiple Y-Axis objects which you could reorder or stack. Legend: The Legend Object. This object cannot be flipped at this time, only moved. Only one Legend object is supported at this time. 188

203 Appendix A - Plot Pack Property Editors Channels General Channel List: A listing of the channels that have been added to the Chart. Add Button: Adds a channel to the list Remove Button: Removes the selected channel from the list Name: Use Name to set the Plot Object s name. This name can then be used to reference the object. There is no restrictions on the length of the name or the characters used. Title: Use TitleText to get or set the title text for the channel. This is the title that is displayed in the legend for this channel. Ring Buffer Size: Use RingBufferSize to get or set the size of the data buffer used for storing channel data. By setting this property to a non-zero value, the ring buffer feature is enable. To disable the ring buffer feature, set this property to 0. The ring buffer will remain a constant size no matter how many data points are added to the channel and will act like a FIFO (First In First Out). Visible: Use the Visible property to show or hide a specific Plot Object. Visible In Legend: Use VisibleInLegend to specify whether the channel is shown in the legend. 189

204 Appendix A - Plot Pack Property Editors Popup Enabled: Use the PopupEnabled property to enable or disable the Popup Menu of a Plot Object. The Popup Menu is shown when a user right-clicks on this Plot Object. Setting this property to FALSE is useful if you don t want the Popup Menu functionality of this Plot Object in your particular application. Note: when the Enabled property is set to FALSE, then this property will have no effect and the Popup will be disabled. Fast Draw: Enables or disables the Fast Draw feature. This feature dramatically speeds up redraws to the screen if you are displaying large data sets (> data points). Color: Use Color to get or set the color of the channel. The Color property is used by the Trace drawing routine and is used by default for the Markers and Fill drawing routines. X-Axis Name: Use XAxisName to get or set the name of the x-axis used for plotting the channel x data against. If the XAxisName is not a valid x-axis name, the channel data will not be drawn. Y-Axis Name: Use YAxisName to get or set the name of the Y-Axis used for plotting the channel y data against. If the YAxisName is not a valid Y-Axis name, the channel data will not be drawn. X-Axis Tracking Enabled: Use XAxisTrackingEnabled to specify whether the channel sends tracking data to its assigned x-axis. Y-Axis Tracking Enabled: Use YAxisTrackingEnabled to specify whether the channel sends tracking data to its assigned Y-Axis. 190

205 Appendix A - Plot Pack Property Editors Channel Trace Visible: Use TraceVisible to specify whether the channel trace line is visible. Typically the trace line is hidden for a scatter type plot. Line Style: Use TraceLineStyle to get or set the line style of the channel trace line. Value iplssolid iplsdash iplsdot iplsdashdot iplsdashdotdot Meaning A solid line A line made up of a series of dashes A line made up of a series of dots A line made up of alternating dashes and dots A line made up of a serious of dash-dot-dot combinations Line Width: Use TraceLineWidth to get or set the pen width used when drawing the channel trace line. 191

206 Appendix A - Plot Pack Property Editors Interpolation Style:. 192

207 Appendix A - Plot Pack Property Editors Channels Markers Show: Use MarkersVisible to specify whether the data markers are visible. Allow Individual: Use MarkersAllowIndividual to specify whether the DataMarkerShow and DataMarkerStyle properties are used to draw individual data point data markers. When this property is set to True, then the data markers are initially drawn using the MarkersStyle property but can be modified individually with the DataMarkerShow and DataMarkerStyle properties. When this property is set to False, then all of the data markers are drawn using the MarkersStyle property of the channel. Style: Use MarkersStyle to get or set the style of the data markers. Value ipmscircle ipmssquare ipmsdiamond ipmscross ipmsplus ipmstriangleup ipmstriangledown ipmstriangleleft ipmstriangleright Meaning Circle Square Diamond Cross Plus Triangle Pointing Up Triangle Pointing Down Triangle Pointing Left Triangle Pointing Right 193

208 Appendix A - Plot Pack Property Editors Size: Use MarkersSize to get or set the size of data markers. The MarkersSize value is in pixels. Pen Use Channel Color: Use MarkersPenUseChannelColor to specify whether markers use the channel color for the pen color. When MarkersPenUseChannelColor is set to True, the pen uses the color of the Color property. When MarkersPenUseChannelColor is set to False, the pen uses the color of the MarkersPenColor property. Pen Style: Use MarkersPenStyle to get or set the pen style used when drawing data markers. Value pssolid psdash psdot psdashdot psdashdotdot psclear psinsideframe Meaning A solid line A line made up of a series of dashes A line made up of a series of dots A line made up of alternating dashes and dots A line made up of a serious of dash-dot-dot combinations No line is drawn (used to omit the line around shapes that draw an outline using the current pen) A solid line, but one that may use a dithered color if Width is greater than 1 Pen Color: Use MarkersPenColor to get or set the pen color used to draw data markers. Pen Width: Use MarkersPenWidth to get or set the pen width used when drawing data markers. Brush Use Channel Color: Use MarkersBrushUseChannelColor to specify whether markers use the channel color for the brush color. When MarkersBrushUseChannelColor is set to True, the brush uses the color of the Color property. When MarkersBrushUseChannelColor is set to False, the brush uses the color of the MarkersBrushColor property. 194

209 Appendix A - Plot Pack Property Editors Brush Style: Use MarkersBrushStyle to get or set the brush style used when drawing data markers. Value bssolid bsclear bshorizontal bsvertical bsfdiagonal bsbdiagonal bscross bsdiagcross Meaning Solid Clear Horizontal Lines Vertical Lines Diagonal Bottom-Left to Top-Right Diagonal Top-Left to Bottom-Right Combination of bshorizontal and bsvertical Combination of bsfdiagonal and bsbdiagonal Brush Color: Use MarkersBrushColor to get or set the brush color used to draw data markers. Channels Fill 195

210 Appendix A - Plot Pack Property Editors Enabled: Use FillEnabled to specify whether a fill is drawn underneath the channel data. Use Channel Color: Use FillUseChannelColor to specify whether the fill uses the channel color when drawing the fill underneath the channel data. When FillUseChannelColor is set to True, the fill color used is the Color property value. When FillUseChannelColor is set to False, the fill color used is the FillColor property value. Reference: Use FillReference to get or set the reference line that the fill is drawn to on the Y-Axis. Color: FillColor to get or set the brush color used to paint the fill under the data. Style: Use FillStyle to get or set the brush style used when drawing the fill underneath the channel data. Value bssolid bsclear bshorizontal bsvertical bsfdiagonal bsbdiagonal bscross bsdiagcross Meaning Solid Clear Horizontal Lines Vertical Lines Diagonal Bottom-Left to Top-Right Diagonal Top-Left to Bottom-Right Combination of bshorizontal and bsvertical Combination of bsfdiagonal and bsbdiagonal 196

211 Appendix A - Plot Pack Property Editors Channels Digital Enabled: Use DigitalEnabled to specify whether the data in the channel is interpreted as digital or analog data.. If DigitalEnabled is TRUE, then values of 0 and 1 are plotted against DigitalReferenceLow and DigitalReferenceHigh respectively. Y coordinate values that are equal to 0 (i.e. Value = 0) are plotted on the scale at the Y coordinate specified by DigitalReference Low. X coordinates that are not equal to 0 (i.e. 0 < Value > 0) are plotted on the scale at the Y coordinate specified by DigitalReference High. Reference High: Use DigitalReferenceHigh to get or set the Y coordinate for digital high values or Logic = TRUE used for plotting data points while in Digital Mode when the value is not equal to 0 (i.e. 0 < Value > 0). Reference Low: Use DigitalReferenceLow to get or set the Y coordinate for digital low values or Logic = FALSE used in Digital Mode while in Digital Mode when the value is equal to 0 (i.e. Value = 0). 197

212 Appendix A - Plot Pack Property Editors Reference Style: Use DigitalReferenceStyle to get or set the formatting style of a digital channel. Value ipdrscale ipdrpercent Meaning DigitalReferenceLow and DigitalReferenceHigh properties are interpreted as actual values on the associated Y-Axis Scale DigitalReferenceLow and DigitalReferenceHigh properties are interpreted as a percentage of the distance from the bottom of the DataView (0%) and the top of the DataView (100%) [Note: Acceptable values are between 0 and 100] Channel File I/O Log File Name: Use LogFileName to get or set the filename (including path) for the log file. This is the log file only for the associated channel. Note: Channels may be synchronous or asynchronous. If you are only using synchronous data, you can use the LogFileName logging feature off of the main component interface to save all channel data to a single log file. 198

213 Appendix A - Plot Pack Property Editors Buffer Size: Use LogBufferSize to get or set the size of the log buffer. When logging is active, data will flow into the log buffer if the LogBufferSize is greater than 0. When the buffer is filled, then data will be written to the log file and the buffer cleared. This is useful if you want to regulate how often data is written to the log file. If this value is 0, then data is written to the log file after every new data point is added to the chart. Note: Channels may be synchronous or asynchronous. If you are only using synchronous data, you can use the LogBufferSize logging feature off of the main component interface to save all channel data to a single log file. Note: if the log is deactivated, the buffer will automatically be flushed to the log file and cleared. Properties Save: Call SavePropertiesToFile to stream out all of the properties of the associated channel to a file. Properties Load: Call LoadPropertiesFromFile to stream in all of the properties of the associated channel from a file. Cursors General Cursor Name: Use Name to set the Plot Object s name. This name can then be used to reference the object. There is no restrictions on the length of the name or the characters used. 199

214 Appendix A - Plot Pack Property Editors Cursor Style: Use Style to get or set the style of the data cursor object. The style determines the type and behavior of the cursor. Note: data points are interpolated when used with the iplot component. These are the possible values: Value ipcsvaluexy ipcsvaluex ipcsvaluey ipcsdeltax ipcsdeltay ipcsinversedeltax Meaning Displays Data Point s ValueX and ValueY with a single pointer line for the iplot component and a cross-hair (two pointer lines) for the ixyplot component. Displays Data Point s ValueX with a single pointer line Displays Data Point s ValueY with a single pointer line Displays Data Points X Span between to pointer lines. Use ValueX to retrieve the X Span. Displays Data Points Y Span between to pointer lines. Use ValueY to retrieve the Y Span. Displays Frequency between two pointer lines. Uses scale values and CursorScaler property of the associated channel s X-Axis. Use ValueX to retrieve the calculated value. Cursor Channel Name: Use ChannelName to get or set the name of the channel used for referencing. This property associates a particular channel s data with the cursor. Data from the channel is then used by the cursor to display individual data points, ranges, and other cursor calculated values. Pointer 1 Position: Use Pointer1Position to get or set the position of the first cursor pointer. The units of the Pointer1Position are in reference to the DataView area in percent. Therefore the only valid values are between 0 and 100. If the data cursor is horizontal, the position is in reference to the Y-Axis side of the DataView area with 0 being the bottom of the DataView and 100 being the top of the data view. If the data cursor is vertical, the position is in reference to the X-Axis side of the DataView area with 0 being the left side of the DataView and 100 being the right side of the data view. 200

215 Appendix A - Plot Pack Property Editors For data cursors of style ValueXY (iplot Component Only), ValueX, and ValueY, this property sets the position of the single cursor line used with these data cursor styles. Pointer 2 Position: Use Pointer2Position to get or set the position of the second cursor pointer. The units of the Pointer2Position are in reference to the DataView area in percent. Therefore the only valid values are between 0 and 100. For data cursors of style ValueXY (iplot Component Only), ValueX, and ValueY, this property is ignored since they don t have a second cursor line.. Pointer Color: Use Color to get or set the color of the data cursor line or lines. This property is overridden if the UseChannelColor property is set to True. Use Channel Color: Use UseChannelColor to specify whether the data cursor line use the channel color for the line color. When UseChannelColor is set to True, the data cursor line is drawn using the associated Channel s Color property. When UseChannelColor is set to False, the data cursor line is drawn using the Data Cursor s Color property. Cursor Font: Use Font to change the font attributes of the data cursor hint. Popup Enabled: Use the PopupEnabled property to enable or disable the Popup Menu of a Plot Object. The Popup Menu is shown when a user right-clicks on this Plot Object. Setting this property to FALSE is useful if you don t want the Popup Menu functionality of this Plot Object in your particular application. Note: when the Enabled property is set to FALSE, then this property will have no effect and the Popup will be disabled. 201

216 Appendix A - Plot Pack Property Editors Cursors Hint Show: Use HintShow to specify whether the hint is shown next to the data cursor in the DataView area. You will generally want to leave this value set to TRUE so that the X and/or Y values of the cursor are displayed next to the cursor. When this property is set to false, you will need to use the OnCursorChange event to be notified when the cursor moves so that you can externally display or react to the X and Y values of the cursor.. Hide On Release: Use HintHideOnRelease to specify whether the hint is automatically hidden when the user releases the mouse button. The hint will be shown when the user selects, clicks down, and while moving the cursor in the DataView area. If this property is set to True, then the hint will immediately be hidden when the mouse is released. Position: Use HintPosition to get or set the position of a hint object next to a data cursor. The value is specified in percent of the horizontal or vertical range of the DataView Area. If HintPosition = 25 and the cursor is horizontal, then the left-side of the hint will be 25% of the distance from the left side of the DataView area.. If HintPosition = 60 and the cursor is vertical, then the top side of the hint will be 60% of the distance from the top side of the DataView area. 202

217 Appendix A - Plot Pack Property Editors Orientation Side: Use HintOrientationSide to get or set the orientation of the hint displayed next to the cursor. Note: the orientation will automatically be flipped if a cursor is moved in such a way as to move the hint window outside of the DataView area (i.e. there is no room between the cursor and the edge of the DataView boundaries). These are the possible values: Value Meaning iosbottomright Displays the hint to the right of a vertical cursor and below a horizontal cursor. iostopleft Displays the hint to the left of a vertical cursor and above a horizontal cursor. Cursors Menu Items Value XY Visible: Use MenuItemVisibleValueXY to specify whether right-click, context-sensitive menu for the data cursor object displays the ValueXY entry. This menu item allows the user to change the cursor to display both X and Y values. Value X Visible: Use MenuItemVisibleValueX to specify whether right-click, contextsensitive menu for the data cursor object displays the ValueX entry. This menu item allows the user to change the cursor to display only X values. 203

218 Appendix A - Plot Pack Property Editors Value Y Visible: Use MenuItemVisibleValueY to specify whether right-click, contextsensitive menu for the data cursor object displays the ValueY entry. This menu item allows the user to change the cursor to display only Y values. Delta X Visible: Use MenuItemVisibleInverseDeltaX to specify whether right-click, context-sensitive menu for the data cursor object displays the InverseDeltaX entry. This menu item allows the user to change the cursor to display the inverse of the range of X values between two cursor lines (value = 1/range). This is typically used in conjunction with the Axis CursorScaler property to display calculated frequency values. Delta Y Visible: Use MenuItemVisibleDeltaY to specify whether right-click, contextsensitive menu for the data cursor object displays the DeltaY entry. This menu item allows the user to change the cursor to display the range of Y values between two cursor lines. Inverse Delta X Visible: Use MenuItemVisibleInverseDeltaX to specify whether rightclick, context-sensitive menu for the data cursor object displays the InverseDeltaX entry. This menu item allows the user to change the cursor to display the inverse of the range of X values between two cursor lines (value = 1/range). This is typically used in conjunction with the Axis CursorScaler property to display calculated frequency values.. Value XY Caption: Use MenuItemCaptionValueXY to specify the caption of the ValueXY right-click, run-time popup menu for the data cursor object. This is useful for customizing the menu for application specific descriptions. The menu item allows the user to change the cursor to display both X and Y values. Value X Caption: Use CaptionValueX to specify the caption of the ValueX rightclick, run-time popup menu for the data cursor object. This is useful for customizing the menu for application specific descriptions. The menu item allows the user to change the cursor to display only X values. Value Y Caption: Use MenuItemCaptionValueY to specify the caption of the ValueY right-click, run-time popup menu for the data cursor object. This is useful for customizing the menu for application specific descriptions. The menu item allows the user to change the cursor to display only Y values. Delta X Caption: Use MenuItemCaptionDeltaX to specify the caption of the DeltaX right-click, run-time popup menu for the data cursor object. This is useful for customizing the menu for application specific descriptions. The menu item allows the user to change the cursor to display the range of X values between two cursor lines. Delta Y Caption: Use MenuItemCaptionDeltaY to specify the caption of the DeltaY right-click, run-time popup menu for the data cursor object. This is useful for customizing the menu for application specific descriptions. The menu item allows the user to change the cursor to display the range of Y values between two cursor lines. 204

219 Appendix A - Plot Pack Property Editors Inverse Delta X Caption: Use MenuItemCaptionDeltaX to specify the caption of the InverseDeltaX right-click, run-time popup menu for the data cursor object. This is useful for customizing the menu for application specific descriptions. The menu item allows the user to change the cursor to display the inverse of the range of X values between two cursor lines (value = 1/range). This is typically used in conjunction with the Axis CursorScaler property to display calculated frequency values.. Limits General Name: Use Name to set the Plot Object s name. This name can then be used to reference the object. There is no restrictions on the length of the name or the characters used. 205

220 Appendix A - Plot Pack Property Editors Style: Use Style to get or set the style of the limit object. The style determines the type of the limit and how it is drawn on the screen and manipulated. These are the possible values: Value Meaning Displays a single line perpendicular to the X-Axis at iplslinex a position specified by Line1Position. Displays a single line perpendicular to the Y-Axis at iplsliney a position specified by Line1Position. Displays a filled or two line band perpendicular to the iplsbandx X-Axis specified by the Line1Position and. Displays a filled or two line band perpendicular to the iplsbandy Y-Axis specified by the Line1Position and Line2Position properties. Displays a filled or two line band using elements (upper and lower limit values specified for a iplspolybandx particular Y-Axis positions) added by the AddBandElement method. Displays a filled or two line band using band elements (upper and lower limit values specified for a iplspolybandy particular Y-Axis positions) added by the AddBandElement method. Line 1 Position: Use Line1Position to get or set the position of the first limit line. The units of the Line1Position are in reference to the values on the referenced axis of interest. This property is used for all limit line styles. For limit lines of style LineX and LineY, this property sets the position of the single limit line used with these limit styles. CursorStyle iplslinex iplsliney Position Value Meaning References the X-Axis scale referenced in the XAxisName property. References the Y-Axis scale referenced in the YAxisName property. For limit lines of style BandX and BandY, this property sets the position of the first cursor line with these fill-region or dual-line data limit line styles. For limit lines of style PolyBandX or PloyBandY, this property is ingored. 206

221 Appendix A - Plot Pack Property Editors CursorStyle iplsbandx iplsbandy iplspolybandx iplspolybandy Position Value Meaning References the X-Axis scale referenced in the XAxisName property. References the Y-Axis scale referenced in the YAxisName property. Property Ignored. Use AddBandElement. Property Ignored. Use AddBandElement. Line 2 Position: Use Line2Position to get or set the position of the second limit line. The units of the Line2Position are in reference to the values on the referenced axis of interest. For limit lines of style LineX and LineY, this property is ignored. CursorStyle Position Value Meaning iplslinex Property Ignored. Use Line1Position instead. iplsliney Property Ignored. Use Line1Position instead. For limit lines of style BandX and BandY, this property sets the position of the second cursor line with these fill-region or dual-line data limit line styles. For limit lines of style PolyBandX or PloyBandY, this property is ingored. CursorStyle iplsbandx iplsbandy iplspolybandx iplspolybandy Position Value Meaning References the X-Axis scale referenced in the XAxisName property. References the Y-Axis scale referenced in the YAxisName property. Property Ignored. Use AddBandElement. Property Ignored. Use AddBandElement. 207

222 Appendix A - Plot Pack Property Editors Fill Style: Use FillStyle to get or set the fill style used when drawing the fill between limit lines. This property has no effect if the Limit Style property is set to iplslinex or iplsliney. These are the possible values: Value Meaning bssolid Solid. Clear. No fill will be created, but two solid lines of bsclear line width 1 using the Limit s Color property will be drawn at the Line1Position and Line2Position positions. bshorizontal Horizontal Lines. bsvertical Vertical Lines. bsfdiagonal Diagonal Bottom-Left to Top-Right. bsbdiagonal Diagonal Top-Left to Bottom-Right. bscross Combination of bshorizontal and bsvertical. bsdiagcross Combination of bsfdiagonal and bsbdiagonal. Line Style: Use LineStyle to get or set the line style of the limit line or lines. This property is ignored if the Limit s Style property is set to iplsbandx, iplsbandy, iplspolybandx, or iplspolybandy. These are the possible values: Value pssolid psdash psdot psdashdot psdashdotdot psclear psinsideframe Meaning A solid line. A line made up of a series of dashes. A line made up of a series of dots. A line made up of alternating dashes and dots. A line made up of a series of dash-dot-dot combinations. No line is drawn. A solid line, but one that may use a dithered color if Width is greater than 1. Note: Only the psinsideframe style will produce a dithered color to match a Color property that is not in the color table. All others choose the closest color from the Windows color table. Note: Dotted or dashed pen styles are not available when the Width property is not 1 or

223 Appendix A - Plot Pack Property Editors Line Width: Use LineWidth to get or set the pen width used when drawing the limit line or lines. This property is ignored if the Limit s Style property is set to iplsbandx, iplsbandy, iplspolybandx, or iplspolybandy. Color: Use Color to get or set the color of the limit line or lines Value iplslinex iplsliney iplsbandx iplsbandy iplspolybandx iplspolybandy Meaning Displays a single line perpendicular to the X-Axis at a position specified by Line1Position. Displays a single line perpendicular to the Y-Axis at a position specified by Line1Position. Displays a filled or two line perpendicular to the X- Axis specified by the Line1Position and Line2Position properties. Displays a filled or two line band perpendicular to the Y-Axis specified by the Line1Position and Line2Position properties. Displays a filled or two line band using elements (upper and lower limit values specified for a particular Y-Axis positions) added by the AddBandElement method. Displays a filled or two line band using band elements (upper and lower limit values specified for a particular Y-Axis positions) added by the AddBandElement method. X-Axis Name: Use XAxisName to get or set the name of the X-Axis used for referencing. This property is used by the Line1Position, Line2Position, and AddBandElement properties and methods for positioning the limit line or lines against the specified X-Axis. Y-Axis Name: Use YAxisName to get or set the name of the Y-Axis used for referencing. This property is used by the Line1Position, Line2Position, and AddBandElement properties and methods for positioning the limit line or lines against the specified Y-Axis. 209

224 Appendix A - Plot Pack Property Editors Axes General Name: Use Name to set the Plot Object s name. This name can then be used to reference the object. There is no restrictions on the length of the name or the characters used. Min: Use Min to get or set the minimum value that will be display on the axis. Span: Use Span to get or set the range displayed on the axis. Desired Start: Use DesiredStart to get or set the desired start for the axis scale. This property will affect what value will be on the first major tick of the axis. Let s say the Axis starts at 0, but you want it to start at 9. Setting this value to 9 will instruct the Axis to start the first major tick on 9 and then follow the DesiredIncrement property for all further major ticks. Note: due to performance issues, this property only has effect if the value exists in the visible axis (i.e. the value must be equal to or between the axis min and max values). This feature is only intended to be used with static scales (scales that do not scroll). Set this property to 0 to disable this feature and use the default rules. 210

225 Appendix A - Plot Pack Property Editors Desired Increment: Use DesiredIncrement to get or set the desired increment for the axis scale. If this property is set to 0, then the AutoScale feature of the axis scale will automatically adjust the scale to follow a rule, which ensures that the scale major ticks and labels fall along human-readable whole numbers such as 0,25,50,75,100, 0,10,20,30,40,50,60,70,80,90,100, etc. depending on your min and span property settings. If this property is greater than zero, the AutoScale feature will attempt to create a scale using your increment values depending on your min and span property settings, adding major ticks and labels that will fit in the area used by the scale. If the AutoScale finds that not all of the labels will fit in the scale area (depends on your font properties), then it will attempt to fit as many labels as possible using this setting. For example, if you want the scale to increment by values of 2.5, and your min and span properties are 0 and 50, then the AutoScale code will attempt to create a scale with 0, 2.5, 5.0, 7.5, 10, 12.5,, 40, 42.5, 45, 47.5, 50. If not all of the labels can fit in the space allocated to the scale, it will attempt to fit as many labels as possible using the rule.. Scale Type: Use ScaleType to get or set the type of scale. When the scale type is set to ipstlog10, the Min and Span properties are restricted to being greater than 0. Value Meaning ipstlinear Linear ipstlog10 Logarithmic Base 10 Visible: Use the Visible property to show or hide a specific Plot Object. Enabled: Use the Enabled property to enable or disable the UI (User Interface) of a Plot Object. When this property is set to TRUE, then the UI functionality (ability to move a scale, scroll a list, click on buttons, etc) of the Plot Object is enabled. Note that setting this property to TRUE will not override other properties that affect the UI of this Plot Object. When this property is set to FALSE, then the UI functionality of the Plot Object is disabled. Note that this will override all other properties that affect the UI of this Plot Object. Note: when a Plot Object is disabled, the Plot Object will not look disabled like standard textboxes or labels. Only the UI will be disabled. Popup Enabled: Use the PopupEnabled property to enable or disable the Popup Menu of a Plot Object. The Popup Menu is shown when a user right-clicks on this Plot Object. 211

226 Appendix A - Plot Pack Property Editors Setting this property to FALSE is useful if you don t want the Popup Menu functionality of this Plot Object in your particular application. Note: when the Enabled property is set to FALSE, then this property will have no effect and the Popup will be disabled. Reverse Scale: Use ReverseScale to specify whether the scale is reversed. If ReverseScale is False, the axis goes from left to right for horizontal orientation or bottom to top for vertical orientation. If ReverseScale is True, the axis goes from right to left for horizontal orientation, or top to bottom for vertical orientation. Restore Values On Resume: Use RestoreValuesOnResume to set whether or not the axis restores the original axis parameters and values that were in effect when the Pause All Tracking Button is clicked. All parameters (such as axis min and span) are restored when the Resume All Tracking Button is clicked and this property is set to TRUE. Master UI Input: Use MasterUIInput to set this axis to be the Master User Interface for all axes of this type. For example, let s say you have three (3) YAxes. If you set this property to TRUE on the first Y-Axis, then all UI (User Input, such as mouse or keyboard input) on that axis will be applied to all other Y-Axes. The X-Axes will not be affected as they are not Y- Axes (i.e. they are not the same type). This is useful if you want the scrolling action of one axis to be synchronized with all other axes of the same type. If you want all Axes of the same type to be synchronized, set this property to TRUE on all of them. If you want all Axes to be independent, set this property to FALSE on all of them. 212

227 Appendix A - Plot Pack Property Editors Axes Title Axes Title Show: Use TitleShow to specify whether the axis title is shown. Axes Title Text: Use Title to get or set the title text for the axis. To hide the title, use the TitleShow property. Axes Title Margin: Use TitleMargin to get or set margin between the axis title and axis scale labels. TitleMargin represents the percentage of a character size and is based on the TitleFont used for the axis. A value of 0.5 is equal to half the size of a character. Axes Title Font: The Font for the Title. 213

228 Appendix A - Plot Pack Property Editors Axes Labels Min Length: Use LabelsMinLength to get or set the minimum label length used in calculating the number of scale labels (Major Ticks) during AutoScale. This property has no effect if the axis is not horizontal. AutoScale automatically calculates the number of scale labels based on the LabelsFont, LabelSeparation, and LabelsMinLength to ensure labels that are in a human readable format (1-2-5 Rule). Precision: Use LabelsPrecision to get or set the precision of the axis labels. The actual number of digits shown to the right of the decimal place depends on the setting of the LabelsPrecisionStyle property. For example, if LabelsPrecision is 1, LabelsPrecisionStyle is set to ipsfixeddecimalpoints, and the value is then the label text will be formatted to display To show integers only, set LabelsPrecision to 0. Margin: Use LabelsMargin to get or set the spacing between the major tick and major tick labels. LabelsMargin represents the percentage of a character size and is based on the LabelsFont used for the axis. A value of 0.5 is equal to half the size of a character. Label Separation: Use LabelSeparation to get or set the minimum separation between scale labels. LabelSeparation represents the percentage of a character size and is based on the LabelsFont used for the axis. A value of 0.5 is equal to half the size of a character. 214

229 Appendix A - Plot Pack Property Editors The actual separation maybe greater due to the AutoScale reducing the number of major ticks to keep the scale labels in a human readable format (1-2-5 Rule). Min Length Auto Adjust: Use LabelsMinLengthAutoAdjust to specify whether the LabelsMinLength property is automatically adjusted as the minimum required label length increases. While plotting, or user scrolling/zooming, the actual minimum label length may become greater than the LabelsMinLength property value. This will result it the axis growing in size to accommodate the wider label. If the plotting data or user changes the displayed data causing the label width to vary, it may cause an annoying oscillation of the display plot objects sizes. To prevent this oscillation, set this property to true. The LabelsMinLength property is stored when the TrackingEnabled property is set to False. The LabelsMinLength property will be restored to the previous value when TrackingEnabled property is set back to True. Precision Style: Use PrecisionStyle to specify how the LabelsPrecision property is interpreted when formatting scale labels. When PrecisionStyle is set to ipssignificantdigits, the number of digits to the right of the decimal point is automatically calculated to ensure that the span of the values will show enough significant digits. For Example : LabelsPrecision = 3 LabelsPrecisionStyle = ipssignificantdigits Span = 50 Number of digits shown to the right of the decimal point = 1 Value ipssignificantdigits ipsfixeddecimalpoi nts Meaning Precision property specifies the number of significant digits Precision property specifies the number of digits to the right of the decimal point 215

230 Appendix A - Plot Pack Property Editors Format Style: Use LabelsFormatStyle to get or set the formatting style of scale labels. Value Meaning iptfvalue Simple Value (ex ) iptfexponent Exponential (ex. 2.35E+002) iptfprefix Prefix (ex. 2.2K) iptfdatetime Date/Time (ex. 3 Jan 01 5:23:44) ex This format is used in the Bond and Securities Market. Displayed where 23 is in 32nds and 1 is in 256ths. So in decimal the price above is: 100 iptfprice32nds +23/32 + 1/256. Pass the actual double value of to display it as Price32nds format as Date Time Format: Use DateTimeFormat to get or set the Date/Time formatting string for the labels. See FormatDateTime for specific values. Axes Tracking Enabled: Use TrackingEnabled to specify whether the axis will adjust itself to new tracking data from the channels. Depending on the TrackingStyle, When the 216

231 Appendix A - Plot Pack Property Editors TrackingEnabled property is set to True, the axis will scroll or compress based on the new tracking data. Style: Use TrackingStyle to specify how the axis adjusts itself in response to new tracking data if off scale. Value iptsscalemin Max iptsscalemax iptsscalemin iptsscrollsmo oth iptsscrollpage Meaning Will adjust the Min or Span property to keep the new tracking data in view Will adjust the Max property if necessary to keep the new tracking data in view Will adjust the Min property if necessary to keep the new tracking data in view If the data is off axis, the scale will be adjusted to show the data at the end of the scale If the data is off axis, the scale will be adjusted to show the data at the beginning of the scale Align First Style: Use TrackingAlignFirstStyle to specify how the axis aligns itself when it receives it first piece of tracking data. If there is more than one channel sending tracking data, only the data from the first channel is used to set the first alignment. To force the axis to realign to the next piece of tracking data, call the ResetFirstAlign method. Value ipafsmin ipafsmax ipafsauto ipafsnone Meaning Axis is adjusted to show first data point on the beginning of the scale Axis is adjusted to show first data point on the end of the scale Axis is unchanged if first data point is in view. If out of view then the axis is adjusted to show first data point on the beginning of the scale Axis is not adjusted on the first data point Scroll Compress Max: Use TrackingScrollCompressMax to get or set the maximum span value when compressing the scale. When new tracking data is received and the TrackingEnabled is set to True, the Span property will be increased (Compressed) to include the tracking data if the current Span property is less than the TrackingScrollCompressMax. To disable this feature, set TrackingScrollCompressMax to

232 Appendix A - Plot Pack Property Editors Axes Cursor Cursor Precision: Use CursorPrecision to get or set the precision of the cursor ToolTips. The actual number of digits shown to the right of the decimal place depends on the setting of the LabelsPrecisionStyle property. For example, if CursorPrecision is 1, LabelsPrecisionStyle is set to ipsfixeddecimalpoints, and the value at the current cursor position is then the cursor ToolTip text will be formatted to display 40.6 (actual display of one data point, two data points, or a calculated value depends on the cursor s property settings). To show integers only, set LabelsPrecision to 0. Note: this is a property of the Axis and not of the cursor object since the scale will be determining the precision of the data displayed in the cursor if the cursor is setup to use this axis for obtaining scale data. To modify properties of the cursor object or to associate a cursor with this axis object, refer to iplotdatacursorx. Cursor Scaler: Use CursorScaler to get or set the desired scalar for the cursor associated with this axis scale. CursorScaler is only used with cursors that have their Style property set to InverseDeltaX, typically used for frequency calculations. The Scalar is a multiplier used to convert this axis units to seconds format so that the cursor can property display the frequency calculation. 218

233 Appendix A - Plot Pack Property Editors For example, if the axis units are ms (milliseconds or 1/1,000th of a second), then you would need to set the Scalar to 1,000 to convert from ms to seconds. If the units are µs (microseconds or 1/1,000,000th of a second), then the Scalar should be set to 1,000,000 to convert from µs to seconds. If your units are already in seconds on this axis, then you would set the Scalar to 1. Axes Scroll Min/Max Enabled: Use ScrollMinMaxEnabled to specify whether scrolling of the axis is fixed to a range of values specified by ScrollMax and ScrollMin. If this property is set to True, then the axis will stop scrolling when ScrollMax and/or ScrollMin are reached on the scale. Min: Use ScrollMin to set a fixed maximum limit on scrolling of the axis. If the user attempts to scroll the axis past this point on the axis and ScrollMinMaxEnabled is set to True, the axis will not scroll past the specified maximum point. Max: Use ScrollMax to set a fixed maximum limit on scrolling of the axis. If the user attempts to scroll the axis past this point on the axis and ScrollMinMaxEnabled is set to True, the axis will not scroll past the specified maximum point. 219

234 Appendix A - Plot Pack Property Editors Axes Scale Major Length: Use MajorLength to get or set the axis major ticks length. Minor Length: Use MinorLength to get or set the axis minor ticks length. Minor Count: Use MinorCount to get or set the number of axis minor ticks shown. MinorCount should be set to one less than the desires number of minor sections. For example, if you want 5 minor sections, set MinorCount to 4. Scale Lines Color: The color of the lines used to draw the scale. Inner Margin: Use InnerMargin to get or set the margin between the axis line and the side towards the data view. The InnerMargin value is in pixels. Outer Margin: Use OuterMargin to get or set margin between the axis labels or the axis title if shown and the side away form the data view. The OuterMargin value is in pixels. Stacking Ends Margin: Use StackingEndsMargin to get or set the margin at the end of the axis when stacked. StackingEndsMargin represents the percentage of a character size and is based on the LabelFont used for the axis. A value of 0.5 is equal to half the size of a character. Start Percent: Use StartPercent to get or set the starting position within the plot layout drawing area where the layout object is drawn. 220

235 Appendix A - Plot Pack Property Editors The reference for 0% is the bottom or left of the data view and depends on the orientation of the layout object. The reference for 100% is the top or right of the data view and depends on the orientation of the layout object Currently, only the axes support the StartPercent and StopPercent properties. The legend, and toolbar ignore the StartPercent and StopPercent properties. Stop Percent: Use StopPercent to get or set the stopping position within the plot layout drawing area where the layout object is drawn. The reference for 0% is the bottom or left of the data view and depends on the orientation of the layout object. The reference for 100% is the top or right of the data view and depends on the orientation of the layout object Currently, only the axes support the StartPercent and StopPercent properties. The legend, and toolbar ignore the StartPercent and StopPercent properties. Legend Visible: Use the Visible property to show or hide a specific Plot Object. Enabled: Use the Enabled property to enable or disable the UI (User Interface) of a Plot Object. 221

236 Appendix A - Plot Pack Property Editors When this property is set to TRUE, then the UI functionality (ability to move a scale, scroll a list, click on buttons, etc) of the Plot Object is enabled. Note that setting this property to TRUE will not override other properties that affect the UI of this Plot Object. When this property is set to FALSE, then the UI functionality of the Plot Object is disabled. Note that this will override all other properties that affect the UI of this Plot Object. Note: when a Plot Object is disabled, the Plot Object will not look disabled like standard textboxes or labels. Only the UI will be disabled. Popup Enabled: Use the PopupEnabled property to enable or disable the Popup Menu of a Plot Object. The Popup Menu is shown when a user right-clicks on this Plot Object. Setting this property to FALSE is useful if you don t want the Popup Menu functionality of this Plot Object in your particular application. Note: when the Enabled property is set to FALSE, then this property will have no effect and the Popup will be disabled. Column Spacing: Use ColumnSpacing to get or set the spacing between columns in the legend. ColumnSpacing represents the percentage of a character size and is based on the Font used in the Legend. A value of 0.5 is equal to half the width of a character. Channel Name Max Width: Use ChannelNameMaxWidth to specify the maximum channel name width allowed in the Legend before word wrapping occurs. This property allows you to set a maximum width of the Channel Name column, allowing those channel names that exceed this width to word-wrap to the next line.. Row Spacing: Use RowSpacing to get or set the spacing between rows in the legend. RowSpacing represents the percentage of a character size and is based on the Font used in the Legend. A value of 0.5 is equal to half the height of a character. Font: The font used in the Legend. Margin: Use OuterMarginLeft, OuterMarginRight, OuterMarginTop, or OuterMarginBottom to set the margin between the left, right, top, or bottom side edge of the control and the internal drawn elements. The values are specified in pixels. Column Titles Visible: Use ColumnTitlesVisible to specify whether the column titles are visible in the legend. Column Titles Font: Use ColumnTitlesFont to change the attributes of the column titles font. To change to a new font, specify a new IFontDisp object. Background Transparent: Use the BackGroundTransparent property to specify whether the background behind the legend shows through. 222

237 Appendix A - Plot Pack Property Editors Background Color: Use BackGroundColor to get or set the background color of the legend. Selected Item Background Color: Use SelectedItemBackGroundColor to get or set the background color of selected items in the legend. Selected Item Font: The font of the selected item. Show Column Line: Use ShowColumnLine to specify whether the line column is shown in the legend. Show Column Marker: Use ShowColumnMarker to specify whether the marker column is shown in the legend. Show Column X-Axis Title: Use ShowColumnXAxisTitle to specify whether the X- Axis title column is shown in the legend. Show Column Y-Axis Title: Use ShowColumnYAxisTitle to specify whether the Y- Axis title column is shown in the legend. Show Column X-Value: Use ShowColumnXValue to specify whether the x value column is shown in the legend. The value displayed is the last x value added to the channel. The formatting of the text is control by the formatting of the X-Axis that the channel is using. Show Column Y-Value: Use ShowColumnYValue to specify whether the y value column is shown in the legend. The value displayed is the last y value added to the channel. The formatting of the text is control by the formatting of the Y-Axis that the channel is using. Show Column Y-Max: Use ShowColumnYMax to specify whether the Y-Maximum Value for each channel is shown in the legend. Show Column Y-Min: Use ShowColumnYMin to specify whether the Y Minimum Value for each channel is shown in the legend. Show Column Y-Mean: Use ShowColumnYMean to specify whether the Y Mean Value for each channel is shown in the legend.! If you change previous data points, the YMax, YMin, and YMean values will no longer be valid. To refresh these values if you change previous data points, call GetYMax, GetYMin, and/or GetYMean to force a recalculation of these values after making your chages. 223

238 Appendix A - Plot Pack Property Editors ToolBar Visible: Show or hide entire toolbar. Enabled: Use the Enabled property to enable or disable the UI (User Interface) of a Plot Object. When this property is set to TRUE, then the UI functionality (ability to move a scale, scroll a list, click on buttons, etc) of the Plot Object is enabled. Note that setting this property to TRUE will not override other properties that affect the UI of this Plot Object. When this property is set to FALSE, then the UI functionality of the Plot Object is disabled. Note that this will override all other properties that affect the UI of this Plot Object. Note: when a Plot Object is disabled, the Plot Object will not look disabled like standard textboxes or labels. Only the UI will be disabled. Popup Enabled: Use the PopupEnabled property to enable or disable the Popup Menu of a Plot Object. The Popup Menu is shown when a user right-clicks on this Plot Object. Setting this property to FALSE is useful if you don t want the Popup Menu functionality of this Plot Object in your particular application. 224

239 Appendix A - Plot Pack Property Editors Note: when the Enabled property is set to FALSE, then this property will have no effect and the Popup will be disabled. Zoom In/Out Factor: Use ZoomInOutFactor to get or set the Toolbar Zoom button zoom factor. When your application user clicks on either the Zoom In or Zoom Out buttons, or you use the toolbar methods DoButtonClickZoomIn or DoButtonClickZoomOut, the chart axes will be zoomed according to this factor. When the ScaleType is set to Linear... To zoom in our out by 100% set the value to 2 To zoom in our out by 50% set the value to 1.5 A setting of 1 will have no effect, and the zoom in and out capability will be disabled. (Zoom Value must always be greater or equal to 1) When the ScaleType is set to Logarithmic... This property has no effect. Log based scales always zoom in our out by 100%, or by a factor of

240 Appendix A - Plot Pack Property Editors Show: Determines whether a button is shown on the toolbar or not. Button Meaning Resume Button: Resumes tracking on ALL axes Pause Button: Pauses tracking for ALL axes Axes Mode Buttons: Changes the mode that the axes are in when using the mouse. The first icon puts the axes in scroll mode. The second icon puts the axes in zoom mode. Zoom In/Out Buttons: Zooms ALL axes in our out. Select Button: Used for selecting items in the data view area. Generates events that can be used by the programmer to react to selection of items such as data points, annotations, areas of the data view, etc. Zoom Box Button: Allows the user to draw a "Zoom Box" on the DataView area to zoom ALL axes. Cursor Button: Show or hide all data cursors. Values for each channel are displayed in a hint window next to the cursor(s). Edit Button: Brings up the Run-Time property editor for the user to change most control properties. Copy Button: Copies the current component image to the Windows' clipboard. Save Button: Brings up a dialog to allow the user to save chart data to currently supported file types. Print Button: Allows user to print image of chart to printer. See Print properties for more information. 226

241 Appendix A - Plot Pack Property Editors Data View Enabled: Use the Enabled property to enable or disable the UI (User Interface) of a Plot Object. When this property is set to TRUE, then the UI functionality (ability to move a scale, scroll a list, click on buttons, etc) of the Plot Object is enabled. Note that setting this property to TRUE will not override other properties that affect the UI of this Plot Object. When this property is set to FALSE, then the UI functionality of the Plot Object is disabled. Note that this will override all other properties that affect the UI of this Plot Object. Note: when a Plot Object is disabled, the Plot Object will not look disabled like standard textboxes or labels. Only the UI will be disabled. Popup Enabled: Use the PopupEnabled property to enable or disable the Popup Menu of a Plot Object. The Popup Menu is shown when a user right-clicks on this Plot Object. Setting this property to FALSE is useful if you don t want the Popup Menu functionality of this Plot Object in your particular application. Note: when the Enabled property is set to FALSE, then this property will have no effect and the Popup will be disabled. 227

242 Appendix A - Plot Pack Property Editors Background Transparent: Use BackGroundTransparent to specify whether the background behind the data view shows through. Background Color: Use BackGroundColor to get or set the background color of the data view. Grid Show: Use GridXAxisName to get or the name of the X-Axis used for displaying X-Axis major and minor lines in the grid. Use GridLineShowXMajors and GridLineShowXMinors to specify which ticks are used to draw grid lines. Stacked Axes Note: If you are using stacked axes, you will probably want to set this property to <All>. This string value will instruct the grid to draw to the major tick lines for each individual X-Axis. Grid X-Axis Name: Use GridXAxisName to get or the name of the X-Axis used for displaying X-Axis major and minor lines in the grid. Use GridLineShowXMajors and GridLineShowXMinors to specify which ticks are used to draw grid lines. If you are using stacked axes, it is recommended that you use an additional invisible axis to ensure that the grid lines extend over the entire Plot Data View area. If not, then the grid lines will only be drawn to the X-Axis specified, and will not be drawn to areas where the X-Axis has been restricted by the StartPercent and StopPercent properties of that Axis. Grid Y-Axis Name: Use GridXAxisName to get or the name of the Y-Axis used for displaying Y-Axis major and minor lines in the grid. Use GridLineShowYMajors and GridLineShowYMinors to specify which ticks are used to draw grid lines. Stacked Axes Note: If you are using stacked axes, you will probably want to set this property to <All>. This string value will instruct the grid to draw to the major tick lines for each individual X-Axis.Line Color: Use GridLineColor to get or set the color of the grid lines drawn in the data view. Line Major Style: Use the GridLineMajorStyle property to get or set the line style of grid lines drawn from major ticks (major ticks from axes specified by the GridXAxisName and GridYAxisName properties) Value ipglssolid ipglsdash ipglsdot Meaning A solid line A line made up of a series of dashes A line made up of a series of dots 228

243 Appendix A - Plot Pack Property Editors Line Minor Style: Use the GridLineMinorStyle property to get or set the line style of grid lines drawn from minor ticks (minor ticks from axes specified by the GridXAxisName and GridYAxisName properties) Value ipglssolid ipglsdash ipglsdot Meaning A solid line A line made up of a series of dashes A line made up of a series of dots Show: Sets which lines are shown in the grid. Show X-Major's: Use GridLineShowXMajors to specify whether the X-Axis major ticks lines are shown in the grid. Show Y-Major's: Use GridLineShowYMajors to specify whether the Y-Axis major ticks lines are shown in the grid. Show X-Minor's: Use GridLineShowYMinors to specify whether the Y-Axis minor ticks lines are shown in the grid. Show Y-Minors: Use GridLineShowYMinors to specify whether the Y-Axis minor ticks lines are shown in the grid. Labels 229

244 Appendix A - Plot Pack Property Editors Name: Use Name to set the Plot Object s name. This name can then be used to reference the object. There is no restrictions on the length of the name or the characters used. Visible: Use the Visible property to show or hide a specific Plot Object. Font: Use Font to change the font attributes of the Label Object text. Caption: Use Caption to get or set the Label Object display text. To hide the caption, see the Visible property of the Label Object. Note: for backward compatibility, the TitleText property will always modify the Caption property of Label Index 0. Alignment: Set Alignment to specify how the text is aligned within the ClientRect of the label object. These are the possible values: Value Meaning iahcenter Text is centered in the control. iahleft Text is left-justified: Begins at the left edge of the control. iahright Text is right-justified: Ends at the right edge of the control. Margin: Use Margin to get or set the margin between the Caption and the top, bottom, left, and right of the Label Object. The Margin values is in percent of the title font height or width. 230

245 Appendix B - ActiveX HTML Properties and Events Appendix B - ActiveX HTML Properties and Events HTML Page Important Notes Boolean Values: TRUE = -1 FALSE = 0 Double Values: Double values cannot be of greater precision than 4 decimal places. This is a limitation of the streaming mechanism of Internet Explorer. This is generally a problem with Date/Time values used in the axes properties. It is recommended that you calculate and set Date/Time Min and Span values for axes (and any other property that you need greater than 4 decimal place precision) in your HTML page loading code as a work-around. Properties Below, you will find all of the currently supported properties that can be streamed in from an HTML page into the iplotx component. Default values are provided. If you only need the default properties, then you do not need these lines in your HTML Object tag code since the control will set these default properties all by itself. You only need to include param tags for properties that differ from the default. (Note: some HTML editors will automatically insert all of these streamed properties for you. If you don t need the default properties, simply delete the param lines. If you used the built-in property editors in your HTML editor to set properties at design time, then leave in the param lines if you are not sure which ones to remove or leave) Array Properties Note: Channel0 refers to the first channel and Channel1 refers to the second channel, and so on. All array properties (sub object properties) are coded with the number after the array name, and are zero based. Please note that only the Axes and Channels support multiple items at this time. The following list shows the available param tags for our iplot and ixyplot components along with their default values 231

246 Appendix B - ActiveX HTML Properties and Events <param name="dataviewzhorz" value="1"> <param name="dataviewzvert" value="1"> <param name="xyaxesreverse" value="0"> <param name="outermarginleft" value="5"> <param name="outermargintop" value="5"> <param name="outermarginright" value="5"> <param name="outermarginbottom" value="5"> <param name="printorientation" value="1"> <param name="printmarginleft" value="1"> <param name="printmargintop" value="1"> <param name="printmarginright" value="1"> <param name="printmarginbottom" value="1"> <param name="printshowdialog" value="-1"> <param name="updateframerate" value="60"> <param name="backgroundcolor" value="0"> <param name="borderstyle" value="2"> <param name="autoframerate" value="-1"> <param name="hintsshow" value="-1"> <param name="hintspause" value="500"> <param name="hintshidepause" value="2500"> <param name="titlevisible" value="-1"> <param name="titletext" value="untitled"> <param name="titlemargin" value="0.25"> <param name="titlefont" value="arial"> <param name="titlefontcolor" value=" "> <param name="usercaneditobjects" value="-1"> <param name="logfilename" value> <param name="logbuffersize" value="0"> <param name="optionsaveallproperties" value="0"> <param name="hintsfont" value="ms Sans Serif"> <param name="hintsfontcolor" value=" "> <param name="annotationdefaultfont" value="ms Sans Serif"> <param name="annotationdefaultfontcolor" value=" "> <param name="annotationdefaultbrushstlye" value="0"> <param name="annotationdefaultbrushcolor" value=" "> <param name="annotationdefaultpenstlye" value="0"> <param name="annotationdefaultpencolor" value=" "> <param name="annotationdefaultpenwidth" value="1"> <param name="dataviewzhorz" value="1"> <param name="dataviewzvert" value="1"> <param name="channelcount" value="1"> <param name="xaxiscount" value="1"> <param name="yaxiscount" value="1"> <param name="toolbarcount" value="1"> <param name="legendcount" value="1"> <param name="dataviewcount" value="1"> <param name="datacursorcount" value="1"> <param name="limitcount" value="1"> <param name="labelcount" value="1"> <param name="translationcount" value="0"> <param name="toolbar0.name" value="toolbar 1"> <param name="toolbar0.visible" value="1"> <param name="toolbar0.enabled" value="1"> <param name="toolbar0.popupenabled" value="1"> <param name="toolbar0.horizontal" value="1"> <param name="toolbar0.zorder" value="3"> <param name="toolbar0.startpercent" value="0"> <param name="toolbar0.stoppercent" value="100"> <param name="toolbar0.showresumebutton" value="1"> <param name="toolbar0.showpausebutton" value="1"> <param name="toolbar0.showaxesmodebuttons" value="1"> <param name="toolbar0.showzoominoutbuttons" value="1"> <param name="toolbar0.showselectbutton" value="0"> 232

247 Appendix B - ActiveX HTML Properties and Events <param name="toolbar0.showzoomboxbutton" value="1"> <param name="toolbar0.showcursorbutton" value="1"> <param name="toolbar0.showeditbutton" value="1"> <param name="toolbar0.showcopybutton" value="1"> <param name="toolbar0.showsavebutton" value="1"> <param name="toolbar0.showprintbutton" value="1"> <param name="toolbar0.zoominoutfactor" value="2"> <param name="legend0.name" value="legend 1"> <param name="legend0.visible" value="1"> <param name="legend0.enabled" value="1"> <param name="legend0.popupenabled" value="1"> <param name="legend0.horizontal" value="0"> <param name="legend0.zorder" value="2"> <param name="legend0.startpercent" value="0"> <param name="legend0.stoppercent" value="100"> <param name="legend0.marginleft" value="1"> <param name="legend0.margintop" value="1"> <param name="legend0.marginright" value="1"> <param name="legend0.marginbottom" value="1"> <param name="legend0.backgroundcolor" value=" "> <param name="legend0.backgroundtransparent" value="1"> <param name="legend0.selecteditembackgroundcolor" value="65535"> <param name="legend0.selecteditemfont.charset" value="1"> <param name="legend0.selecteditemfont.color" value="0"> <param name="legend0.selecteditemfont.height" value="-11"> <param name="legend0.selecteditemfont.name" value="ms Sans Serif"> <param name="legend0.selecteditemfont.pitch" value="0"> <param name="legend0.selecteditemfont.style" value="0"> <param name="legend0.selecteditemfont" value="65535"> <param name="legend0.showcolumnline" value="1"> <param name="legend0.showcolumnmarker" value="0"> <param name="legend0.showcolumnxaxistitle" value="0"> <param name="legend0.showcolumnyaxistitle" value="0"> <param name="legend0.showcolumnxvalue" value="0"> <param name="legend0.showcolumnyvalue" value="0"> <param name="legend0.showcolumnymax" value="0"> <param name="legend0.showcolumnymin" value="0"> <param name="legend0.showcolumnymean" value="0"> <param name="legend0.font.charset" value="1"> <param name="legend0.font.color" value=" "> <param name="legend0.font.height" value="-11"> <param name="legend0.font.name" value="ms Sans Serif"> <param name="legend0.font.pitch" value="0"> <param name="legend0.font.style" value="0"> <param name="legend0.font" value="0"> <param name="legend0.columnspacing" value="0.5"> <param name="legend0.rowspacing" value="0.25"> <param name="legend0.columntitlesvisible" value="0"> <param name="legend0.columntitlesfont.charset" value="1"> <param name="legend0.columntitlesfont.color" value=" "> <param name="legend0.columntitlesfont.height" value="-11"> <param name="legend0.columntitlesfont.name" value="ms Sans Serif"> <param name="legend0.columntitlesfont.pitch" value="0"> <param name="legend0.columntitlesfont.style" value="1"> <param name="legend0.columntitlesfont" value="0"> <param name="legend0.channelnamemaxwidth" value="0"> <param name="xaxis0.name" value="x-axis 1"> <param name="xaxis0.visible" value="1"> <param name="xaxis0.enabled" value="1"> <param name="xaxis0.popupenabled" value="1"> <param name="xaxis0.horizontal" value="1"> <param name="xaxis0.zorder" value="0"> <param name="xaxis0.startpercent" value="0"> 233

248 Appendix B - ActiveX HTML Properties and Events <param name="xaxis0.stoppercent" value="100"> <param name="xaxis0.min" value="0"> <param name="xaxis0.span" value="100"> <param name="xaxis0.desiredstart" value="0"> <param name="xaxis0.desiredincrement" value="0"> <param name="xaxis0.reversescale" value="0"> <param name="xaxis0.innermargin" value="5"> <param name="xaxis0.outermargin" value="5"> <param name="xaxis0.title" value="x-axis 1"> <param name="xaxis0.titlemargin" value="0.25"> <param name="xaxis0.titlefont.charset" value="1"> <param name="xaxis0.titlefont.color" value=" "> <param name="xaxis0.titlefont.height" value="-13"> <param name="xaxis0.titlefont.name" value="arial"> <param name="xaxis0.titlefont.pitch" value="0"> <param name="xaxis0.titlefont.style" value="1"> <param name="xaxis0.titlefont" value="0.25"> <param name="xaxis0.titleshow" value="0"> <param name="xaxis0.majorlength" value="7"> <param name="xaxis0.minorlength" value="3"> <param name="xaxis0.minorcount" value="1"> <param name="xaxis0.labelsmargin" value="0.25"> <param name="xaxis0.labelsfont.charset" value="1"> <param name="xaxis0.labelsfont.color" value=" "> <param name="xaxis0.labelsfont.height" value="-11"> <param name="xaxis0.labelsfont.name" value="ms Sans Serif"> <param name="xaxis0.labelsfont.pitch" value="0"> <param name="xaxis0.labelsfont.style" value="0"> <param name="xaxis0.labelsfont" value="0.25"> <param name="xaxis0.labelsprecisionstyle" value="0"> <param name="xaxis0.labelsprecision" value="3"> <param name="xaxis0.labelsminlength" value="5"> <param name="xaxis0.labelsminlengthautoadjust" value="0"> <param name="xaxis0.labelseparation" value="2"> <param name="xaxis0.labelsformatstyle" value="0"> <param name="xaxis0.datetimeformat" value="hh:nn:ss"> <param name="xaxis0.scalelineshow" value="0"> <param name="xaxis0.scalelinescolor" value=" "> <param name="xaxis0.stackingendsmargin" value="0.5"> <param name="xaxis0.scaletype" value="0"> <param name="xaxis0.trackingenabled" value="1"> <param name="xaxis0.trackingstyle" value="3"> <param name="xaxis0.trackingalignfirststyle" value="2"> <param name="xaxis0.trackingscrollcompressmax" value="0"> <param name="xaxis0.cursorprecision" value="3"> <param name="xaxis0.cursorscaler" value="1"> <param name="xaxis0.scrollminmaxenabled" value="0"> <param name="xaxis0.scrollmax" value="100"> <param name="xaxis0.scrollmin" value="0"> <param name="xaxis0.restorevaluesonresume" value="1"> <param name="xaxis0.masteruiinput" value="0"> <param name="yaxis0.name" value="y-axis 1"> <param name="yaxis0.visible" value="1"> <param name="yaxis0.enabled" value="1"> <param name="yaxis0.popupenabled" value="1"> <param name="yaxis0.horizontal" value="0"> <param name="yaxis0.zorder" value="0"> <param name="yaxis0.startpercent" value="0"> <param name="yaxis0.stoppercent" value="100"> <param name="yaxis0.min" value="0"> <param name="yaxis0.span" value="100"> <param name="yaxis0.desiredstart" value="0"> <param name="yaxis0.desiredincrement" value="0"> 234

249 Appendix B - ActiveX HTML Properties and Events <param name="yaxis0.reversescale" value="0"> <param name="yaxis0.innermargin" value="5"> <param name="yaxis0.outermargin" value="5"> <param name="yaxis0.title" value="y-axis 1"> <param name="yaxis0.titlemargin" value="0.25"> <param name="yaxis0.titlefont.charset" value="1"> <param name="yaxis0.titlefont.color" value=" "> <param name="yaxis0.titlefont.height" value="-13"> <param name="yaxis0.titlefont.name" value="arial"> <param name="yaxis0.titlefont.pitch" value="0"> <param name="yaxis0.titlefont.style" value="1"> <param name="yaxis0.titlefont" value="0.25"> <param name="yaxis0.titleshow" value="0"> <param name="yaxis0.majorlength" value="7"> <param name="yaxis0.minorlength" value="3"> <param name="yaxis0.minorcount" value="1"> <param name="yaxis0.labelsmargin" value="0.25"> <param name="yaxis0.labelsfont.charset" value="1"> <param name="yaxis0.labelsfont.color" value=" "> <param name="yaxis0.labelsfont.height" value="-11"> <param name="yaxis0.labelsfont.name" value="ms Sans Serif"> <param name="yaxis0.labelsfont.pitch" value="0"> <param name="yaxis0.labelsfont.style" value="0"> <param name="yaxis0.labelsfont" value="0.25"> <param name="yaxis0.labelsprecisionstyle" value="0"> <param name="yaxis0.labelsprecision" value="3"> <param name="yaxis0.labelsminlength" value="5"> <param name="yaxis0.labelsminlengthautoadjust" value="0"> <param name="yaxis0.labelseparation" value="2"> <param name="yaxis0.labelsformatstyle" value="0"> <param name="yaxis0.datetimeformat" value="hh:nn:ss"> <param name="yaxis0.scalelineshow" value="0"> <param name="yaxis0.scalelinescolor" value=" "> <param name="yaxis0.stackingendsmargin" value="0.5"> <param name="yaxis0.scaletype" value="0"> <param name="yaxis0.trackingenabled" value="1"> <param name="yaxis0.trackingstyle" value="0"> <param name="yaxis0.trackingalignfirststyle" value="3"> <param name="yaxis0.trackingscrollcompressmax" value="0"> <param name="yaxis0.cursorprecision" value="3"> <param name="yaxis0.cursorscaler" value="1"> <param name="yaxis0.scrollminmaxenabled" value="0"> <param name="yaxis0.scrollmax" value="100"> <param name="yaxis0.scrollmin" value="0"> <param name="yaxis0.restorevaluesonresume" value="1"> <param name="yaxis0.masteruiinput" value="0"> <param name="dataview0.name" value="data View 1"> <param name="dataview0.visible" value="1"> <param name="dataview0.enabled" value="1"> <param name="dataview0.popupenabled" value="1"> <param name="dataview0.horizontal" value="0"> <param name="dataview0.zorder" value="0"> <param name="dataview0.startpercent" value="0"> <param name="dataview0.stoppercent" value="100"> <param name="dataview0.title" value> <param name="dataview0.gridxaxisname" value="x-axis 1"> <param name="dataview0.gridyaxisname" value="y-axis 1"> <param name="dataview0.gridshow" value="1"> <param name="dataview0.gridlinecolor" value="32768"> <param name="dataview0.gridlineshowleft" value="1"> <param name="dataview0.gridlineshowright" value="1"> <param name="dataview0.gridlineshowtop" value="1"> <param name="dataview0.gridlineshowbottom" value="1"> 235

250 Appendix B - ActiveX HTML Properties and Events <param name="dataview0.gridlineshowxmajors" value="1"> <param name="dataview0.gridlineshowxminors" value="0"> <param name="dataview0.gridlineshowymajors" value="1"> <param name="dataview0.gridlineshowyminors" value="0"> <param name="dataview0.gridlinemajorstyle" value="0"> <param name="dataview0.gridlineminorstyle" value="0"> <param name="dataview0.backgroundtransparent" value="1"> <param name="dataview0.backgroundcolor" value=" "> <param name="channel0.name" value="channel 1"> <param name="channel0.visible" value="1"> <param name="channel0.enabled" value="1"> <param name="channel0.popupenabled" value="1"> <param name="channel0.titletext" value="channel 1"> <param name="channel0.color" value="255"> <param name="channel0.visibleinlegend" value="1"> <param name="channel0.ringbuffersize" value="0"> <param name="channel0.tracevisible" value="1"> <param name="channel0.tracelinestyle" value="0"> <param name="channel0.tracelinewidth" value="1"> <param name="channel0.markersvisible" value="0"> <param name="channel0.markerssize" value="3"> <param name="channel0.markersstyle" value="0"> <param name="channel0.markersallowindividual" value="0"> <param name="channel0.markerspencolor" value="255"> <param name="channel0.markerspenusechannelcolor" value="1"> <param name="channel0.markerspenstyle" value="0"> <param name="channel0.markerspenwidth" value="0"> <param name="channel0.markersbrushcolor" value="255"> <param name="channel0.markersbrushusechannelcolor" value="1"> <param name="channel0.markersbrushstyle" value="0"> <param name="channel0.xaxisname" value="x-axis 1"> <param name="channel0.yaxisname" value="y-axis 1"> <param name="channel0.xaxistrackingenabled" value="1"> <param name="channel0.yaxistrackingenabled" value="1"> <param name="channel0.logfilename" value> <param name="channel0.logbuffersize" value="0"> <param name="channel0.tag" value="0"> <param name="channel0.limits" value="0"> <param name="channel0.fillenabled" value="0"> <param name="channel0.fillreference" value="0"> <param name="channel0.fillstyle" value="0"> <param name="channel0.fillcolor" value="0"> <param name="channel0.fillusechannelcolor" value="1"> <param name="channel0.digitalenabled" value="0"> <param name="channel0.digitalreferencestyle" value="0"> <param name="channel0.digitalreferencelow" value="10"> <param name="channel0.digitalreferencehigh" value="90"> <param name="channel0.fastdrawenabled" value="1"> <param name="channel0.interpolationstyle" value="0"> <param name="datacursor0.name" value="cursor 1"> <param name="datacursor0.visible" value="0"> <param name="datacursor0.enabled" value="1"> <param name="datacursor0.popupenabled" value="1"> <param name="datacursor0.channelname" value="channel 1"> <param name="datacursor0.style" value="0"> <param name="datacursor0.font.charset" value="1"> <param name="datacursor0.font.color" value=" "> <param name="datacursor0.font.height" value="-11"> <param name="datacursor0.font.name" value="ms Sans Serif"> <param name="datacursor0.font.pitch" value="0"> <param name="datacursor0.font.style" value="0"> <param name="datacursor0.font" value="0"> <param name="datacursor0.color" value="65535"> 236

251 Appendix B - ActiveX HTML Properties and Events <param name="datacursor0.usechannelcolor" value="1"> <param name="datacursor0.hintshow" value="1"> <param name="datacursor0.hinthideonrelease" value="0"> <param name="datacursor0.hintorientationside" value="0"> <param name="datacursor0.hintposition" value="50"> <param name="datacursor0.pointer1position" value="50"> <param name="datacursor0.pointer2position" value="60"> <param name="datacursor0.menuitemvisiblevaluexy" value="1"> <param name="datacursor0.menuitemvisiblevaluex" value="1"> <param name="datacursor0.menuitemvisiblevaluey" value="1"> <param name="datacursor0.menuitemvisibledeltax" value="1"> <param name="datacursor0.menuitemvisibledeltay" value="1"> <param name="datacursor0.menuitemvisibleinversedeltax" value="1"> <param name="datacursor0.menuitemcaptionvaluexy" value="value X-Y"> <param name="datacursor0.menuitemcaptionvaluex" value="value X"> <param name="datacursor0.menuitemcaptionvaluey" value="value Y"> <param name="datacursor0.menuitemcaptiondeltax" value="period"> <param name="datacursor0.menuitemcaptiondeltay" value="peak-peak"> <param name="datacursor0.menuitemcaptioninversedeltax" value="frequency"> <param name="limit0.name" value="limit 1"> <param name="limit0.visible" value="1"> <param name="limit0.enabled" value="1"> <param name="limit0.popupenabled" value="1"> <param name="limit0.color" value="255"> <param name="limit0.linestyle" value="0"> <param name="limit0.linewidth" value="0"> <param name="limit0.fillstyle" value="0"> <param name="limit0.xaxisname" value="x-axis 1"> <param name="limit0.yaxisname" value="y-axis 1"> <param name="limit0.style" value="1"> <param name="limit0.line1position" value="50"> <param name="limit0.line2position" value="50"> <param name="label0.name" value="title"> <param name="label0.visible" value="1"> <param name="label0.enabled" value="1"> <param name="label0.popupenabled" value="1"> <param name="label0.horizontal" value="1"> <param name="label0.zorder" value="2"> <param name="label0.startpercent" value="0"> <param name="label0.stoppercent" value="100"> <param name="label0.marginleft" value="0"> <param name="label0.margintop" value="0"> <param name="label0.marginright" value="0"> <param name="label0.marginbottom" value="0.25"> <param name="label0.caption" value="untitled"> <param name="label0.alignment" value="0"> <param name="label0.font.charset" value="1"> <param name="label0.font.color" value=" "> <param name="label0.font.height" value="-19"> <param name="label0.font.name" value="arial"> <param name="label0.font.pitch" value="0"> <param name="label0.font.style" value="1"> <param name="label0.font" value="0"> 237

252 Appendix B - ActiveX HTML Properties and Events VBScript Events Events in VBScript under Internet Explorer are identical to their counterparts in Visual Basic or VBA except that VBScript does not support variable types and some events (such as drag and focus events). Internet Explorer VBA does not support variable types. All variables are assumed to be Variants, so you will not find any as operators in the event declarations. <SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript> <!-- Sub iplotx1_onafterprint() End Sub Sub iplotx1_onbeforeprint() End Sub Sub iplotx1_onclick() End Sub Sub iplotx1_onclickannotation(byval Index) End Sub Sub iplotx1_onclickdatapoint(byval ChannelIndex, ByVal DataIndex) End Sub Sub iplotx1_ondatacursorchange(byval Index) End Sub Sub iplotx1_ondblclick() End Sub Sub iplotx1_onmousedown(byval Button, ByVal Shift, ByVal X, ByVal Y) End Sub Sub iplotx1_onmousemove(byval Shift, ByVal X, ByVal Y) End Sub Sub iplotx1_onmouseup(byval Button, ByVal Shift, ByVal X, ByVal Y) End Sub Sub iplotx1_onxaxiscustomizelabel(byval Index, ByVal Value, ALabel) End Sub Sub iplotx1_onxaxisminchange(byval Index, ByVal OldValue, ByVal NewValue) End Sub Sub iplotx1_onxaxisspanchange(byval Index, ByVal OldValue, ByVal NewValue) 238

253 Appendix B - ActiveX HTML Properties and Events End Sub Sub iplotx1_onyaxiscustomizelabel(byval Index, ByVal Value, ALabel) End Sub Sub iplotx1_onyaxisminchange(byval Index, ByVal OldValue, ByVal NewValue) End Sub Sub iplotx1_onyaxisspanchange(byval Index, ByVal OldValue, ByVal NewValue) End Sub --> </SCRIPT> JavaScript Events If you prefer to use JavaScript in your HTML code, then you will need to first map the event you wish to use with the iplotx component to a particular event handler as follows. Note that this is a hack in Internet Explorer to allow JavaScript to be used with the ActiveX component. Netscape Navigator and other browsers do not support ActiveX controls as this time. <SCRIPT LANGUAGE=javascript FOR=iPlotX1 EVENT="OnAfterPrint"> <!-- iplotx1_onafterprint(); //--> </SCRIPT> <SCRIPT LANGUAGE=javascript FOR=iPlotX1 EVENT="OnBeforePrint"> <!-- iplotx1_onbeforeprint(); //--> </SCRIPT> <SCRIPT LANGUAGE=javascript FOR=iPlotX1 EVENT="OnClick"> <!-- iplotx1_onclick(); //--> </SCRIPT> <SCRIPT LANGUAGE=javascript FOR=iPlotX1 EVENT="OnClickAnnotation(Index)"> <!-- iplotx1_onclickannotation(index); //--> </SCRIPT> <SCRIPT LANGUAGE=javascript FOR=iPlotX1 EVENT="OnClickDataPoint(ChannelIndex, DataIndex)"> <!-- iplotx1_onclickdatapoint(channelindex, DataIndex); //--> </SCRIPT> <SCRIPT LANGUAGE=javascript FOR=iPlotX1 EVENT="OnDataCursorChange(Index)"> <!-- iplotx1_ondatacursorchange(index); //--> </SCRIPT> <SCRIPT LANGUAGE=javascript FOR=iPlotX1 EVENT="OnDblClick"> <!-- iplotx1_ondblclick(); //--> </SCRIPT> <SCRIPT LANGUAGE=javascript FOR=iPlotX1 EVENT="OnMouseDown(Button, Shift, X, Y)"> 239

254 Appendix B - ActiveX HTML Properties and Events <!-- iplotx1_onmousedown(button, Shift, X, Y); //--> </SCRIPT> <SCRIPT LANGUAGE=Jscript FOR=iPlotX1 EVENT="OnMouseMove(Shift, X, Y)"> <!-- iplotx1_onmousemove(shift, X, Y); //--> </SCRIPT> <SCRIPT LANGUAGE=javascript FOR=iPlotX1 EVENT="OnMouseUp(Button, Shift, X, Y)"> <!-- iplotx1_onmouseup(button, Shift, X, Y); //--> </SCRIPT> <SCRIPT LANGUAGE=javascript FOR=iPlotX1 EVENT="OnXAxisCustomizeLabel(Index, Value, ALabel)"> <!-- iplotx1_onxaxiscustomizelabel(index, Value, ALabel); //--> </SCRIPT> <SCRIPT LANGUAGE=javascript FOR=iPlotX1 EVENT="OnXAxisMinChange(Index, OldValue, NewValue)"> <!-- iplotx1_onxaxisminchange(index, OldValue, NewValue); //--> </SCRIPT> <SCRIPT LANGUAGE=javascript FOR=iPlotX1 EVENT="OnXAxisSpanChange(Index, OldValue, NewValue)"> <!-- iplotx1_onxaxisspanchange(index, OldValue, NewValue); //--> </SCRIPT> <SCRIPT LANGUAGE=javascript FOR=iPlotX1 EVENT="OnYAxisCustomizeLabel(Index, Value, ALabel)"> <!-- iplotx1_onyaxiscustomizelabel(index, Value, ALabel); //--> </SCRIPT> <SCRIPT LANGUAGE=javascript FOR=iPlotX1 EVENT="OnYAxisMinChange(Index, OldValue, NewValue)"> <!-- iplotx1_onyaxisminchange(index, OldValue, NewValue); //--> </SCRIPT> <SCRIPT LANGUAGE=javascript FOR=iPlotX1 EVENT="OnYAxisSpanChange(Index, OldValue, NewValue)"> <!-- iplotx1_onyaxisspanchange(index, OldValue, NewValue); //--> </SCRIPT> Events that have parameters must be enclosed within quotation marks. 240

255 Appendix B - ActiveX HTML Properties and Events Now include a separate script tag to include the event handlers, and the code you wish to run when that event is fired <SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript> <!-- function iplotx1_onafterprint() { //Add your code here }; function iplotx1_onbeforeprint() { //Add your code here }; function iplotx1_onclick() { //Add your code here }; function iplotx1_onclickannotation(index) { //Add your code here }; function iplotx1_onclickdatapoint(channelindex, DataIndex) { //Add your code here }; function iplotx1_ondatacursorchange(index) { //Add your code here }; function iplotx1_ondblclick() { //Add your code here }; function iplotx1_onmousedown(button, Shift, X, Y) { //Add your code here }; function iplotx1_onmousemove(shift, X, Y) { //Add your code here }; function iplotx1_onmouseup(button, Shift, X, Y) { //Add your code here }; 241

256 Appendix B - ActiveX HTML Properties and Events function iplotx1_onxaxiscustomizelabel(index, Value, ALabel) { //Add your code here }; function iplotx1_onxaxisminchange(index, OldValue, NewValue) { //Add your code here }; function iplotx1_onxaxisspanchange(index, OldValue, NewValue) { //Add your code here }; function iplotx1_onyaxiscustomizelabel(index, Value, ALabel) { //Add your code here }; function iplotx1_onyaxisminchange(index, OldValue, NewValue) { //Add your code here }; function iplotx1_onyaxisspanchange(index, OldValue, NewValue) { //Add your code here }; //--> </SCRIPT> LPK File Tutorial Web Page ActiveX Licensing: What is an LPK File? An LPK file is a file that licenses our ActiveX controls when running on a Microsoft Internet Explorer Web Browser. This file must be created for all ActiveX components that require licensing, regardless of manufacturer. 242

257 Appendix B - ActiveX HTML Properties and Events Steps to create an LPK File Make sure you have installed our ActiveX components using our Product Installer (either from the CD-ROM or downloaded version). If you have any reason to believe that our components are missing license information on your system, simply open our installer from the Windows Add/Remove Control Panel and select the REPAIR option to fix our ActiveX licensing. 2. Obtain the Microsoft LPK File Generation Tool either from your Visual Studio Installation, from the Microsoft Internet Explorer API Pack, or from Microsoft's Download File Section of their website (Download: Microsoft LPK Tool [74.5 KB]). This program is the only program that can generate LPK files and is provided by Microsoft. 243

258 Appendix B - ActiveX HTML Properties and Events 3. Open the LPK Tool and select the Iocomp Components you will be using on the web page. Also select other ActiveX controls that you will be using on the same web page that require licensing. You can only have one LPK file per web page, so you will need to select all ActiveX controls that will be used. We recommend that you create a single LPK file for all web pages on your site for simplicity. Click on the "ADD ->" button when you are done. 4. Click the "Save & Exit" button to generate the LPK file. 244

259 Appendix B - ActiveX HTML Properties and Events 5. You can name the LPK file anything you wish. We recommend that you don't include spaces or non-standard characters in the name as to avoid issues with different server operating systems (remember that our ActiveX components can be placed on any web server OS, they just have to run on a Windows Web Browser client). 6. Copy the LPK file to a location on your web server. If you are just creating a single web page, we recommend that you place the LPK file in the same folder as the web page. If you are creating multiple web pages, we recommend that you place the LPK file in a common folder off of the root of your web server, such as /download.! The LPK file must be located on the same server as where the HTML page is stored/generated. You can only have one LPK file per web page. Therefore, you will need to include all licenses for all ActiveX components (whether they are from Iocomp or some other Third Party ActiveX company) in the single LPK file. We recommend that you make one single LPK file for use on your website to make things easier. 245