Tech Note 362 How to Configure Charts and Data Tables In SuiteVoyager

Transcription

1 Tech Note 362 How to Configure Charts and Data Tables In SuiteVoyager All Tech Notes and KBCD docum ents and software are provided "as is" without warranty of any kind. See the Terms of Use for m ore inform ation. Topic#: Created: May 2004 Introduction The Wonderware DataTable and Chart application allows you to query any SQL- compliant database through the SuiteVoyager SQLPROVIDER web service and have the results returned in a table or chart according to your formatting specifications. Table and chart definitions can be easily saved in a navigation tree hierarchy, which will then be visible to portal users and can be added to custom access panels. Integrated Database Configuration To access the Integrated database Configuration Editor (Figure 1 below): 1. In the System access panel, expand Administration. 2. Click Data Source Manager. The Data Source Manager panel appears. 3. Click Integrated Databases. FIGURE 1: INTEGRATED DATABASES SETUP 4. Click Create New Database Connection. 5. Name the alias Tech Note NorthWind. You will be using this name as your data source in the rest of this document as a connection name. 6. Configure the parameters as shown in Figure 2 (below) and change the Server Name to your SQL Server's node name: 1/10

2 FIGURE 2: INTEGRATED DATABASE CONFIGURATION 7. Click Update. Configuring the Charting Navigation Tree Access the Chart Editor To access the Chart Editor from the System Access panel: 1. Expand Administration and then click Application Manager. The Application Manager page appears: FIGURE 3: APPLICATION MANAGER PAGE 2/10

3 2. Locate the Charting application within the list of installed applications, 3. In the Action column, click Configure. The Chart Editor appears: FIGURE 4: CHART EDITOR Add New Node to the Navigation Tree To create additional categories of charts under the default Charting node, you will need to add a new node to the navigation tree. 1. In the Charting navigation tree, right- click on an existing node and then click New Folder (Figure 4 above). The node options appear. 2. Enter Tech Note Chart Sample Folder in the Folder Name field. The name for the node will appear in the navigation tree. 3. In the Charting navigation tree, right-click on an existing node and select New Chart. The chart options appear. 4. Enter Tech Note Chart Sample Demo in the chart Title box. The node name appears in the navigation tree: 3/10

4 FIGURE 5: CHART EDITOR FIELDS 5. In the Role list, select the portal role whose assigned users you want to be able to view the published chart. To select more than one role, press the Ctrl key on your keyboard while making your selections. 6. In the Folder Description box, enter a description that will appear when users pause their mouse pointer over the node name in the contents pane. 7. Click Save. The new node will be added to the navigation tree display. Provide Column Names for the X and Y Value Columns For charts that use two numeric values, you will need to provide column names for the X Value Column and Y Value Column. For example, you want to create a chart that displays the EmployeeID versus the OrderID using data from the Orders table in the NorthWind database. You would enter the following values for the configuration options: X Value Column = OrderID Y Value Column = EmployeeID XAxis Label = CustomerID Query = SELECT OrderID, EmployeeID, CustomerID FROM Orders WHERE OrderID < /10

5 FIGURE 6: X AND Y COLUMN NAMES The resulting chart would show the OrderID values graphed along the x-axis of the chart and the EmployeeID values graphed along the y-axis of the chart. When the Show Marks option is selected, the OrderIDvalues are displayed for each (X,Y) point on the graph. (If a column name was not specified for the Label, then the EmployeeID values (Y Value Column) will be displayed for each (X,Y) point on the graph) : 5/10

6 FIGURE 7: ORDER ID GRAPH Configuring the Data Table Navigation Tree The steps in this task are similar to the Configuring the Charting Navigation Tree section: 1. Locate the Data Table application in the list of installed applications. 2. In the Action column, click Configure. The Data Table Editor appears. To create additional categories of charts under the default Data Table node, you will need to add a new node to the navigation tree. 3. In the Data Table Editor navigation tree, right- click an existing node and then click New Node. The node options appear. 4. Enter Tech Note Data Sample Folder in the Folder Name box. The node name appears in the navigation tree. 6/10

7 FIGURE 8: DATA TABLE EDITOR 5. Select the portal Role (from the Role list) whose assigned users you want to be able to view the published Data Table. FIGURE 9: ROLE LIST 7/10

8 To select more than one role, press the Ctrl key on your keyboard while making your selections. 6. Enter a description within the Folder Description box, that will appear when users pause their mouse pointer over the node name in the contents pane (Figure 8 above). 7. Click Save. The new node will be added to the navigation tree display. 8. In the Data Table navigation tree, right-click a node and then click New Table. The data table options appear. 9. Enter the number of rows that will be displayed in the final output in the Maximum Display Rows box. If you do not specify a value, ALL rows will be returned. Keep in mind that if you do not restrict the rows, and the table you are querying has a large number of records, the resulting table may take a long time to be displayed and consume considerable system resources. Query = SELECT OrderID, EmployeeID, CustomerID FROM Orders WHERE OrderID < Populate the configuration page as shown in the following figure: FIGURE 10: CONFIGURATION PAGE 11. Click Next. 8/10

9 The Data Table options appear. FIGURE 11: DATA TABLE OPTIONS 12. Enter Demonstrate a Data Table Demo for the Tech Note in the Data Table Title box. The node name appears in the navigation tree. 13. Select the color of the odd rows in the displayed table from the Background Color grid. 14. Select the color of the even rows in the displayed table from the Alternate Background Color grid. The resulting Data Table shows the OrderID, EmployeeID, Customer ID columns and values: 9/10

10 FIGURE 12: ALTERNATE ROW COLORS Example: Charts and Data Tables Against the SQL Server NorthWind Database WARNING: This utility was prepared using the backup utility for SuiteVoyager, and will overwrite your existing configuration. Please backup your existing configuration before using this file. Download the DEMO_t zip Please unzip the file to a temp location, and Run the Tech Note backup.msi to restore the Tech Note demo application to your SuiteVoyager portal. Please Refer to the following Documents for more information. Note: The Following links will only work if the SuiteVoyager is installed on the same system as the one on which this tech note is being read. Creating a Chart Creating a Data Table Creating a Data Source K. Nourbakhsh Tech Notes are published occasionally by Wonderware Technical Support. Publisher: Invensys System s, Inc., Rancho Parkway South, Lake Forest, CA There is also technical inform ation on our software products at Wonderware Technical Support For technical support questions, send an e- mail to support@wonderware.com. back to top 2013 Invensys System s, Inc. All rights reserved. No part of the m aterial protected by this copyright m ay be reproduced or utilized in any form or by any m eans, electronic or m echanical, including photocopying, recording, broadcasting, or by anyinform ation storage and retrieval system, without perm ission in writing from Invensys System s, Inc. Terms of Use. 10/10