#### Using a custom report as the source for a Graphics page A WebCTRL® custom report can be the data source for the following items on a Graphics page: A data table A chart A color map
For example, this report... | ...supplies data to the chart and data table on this graphic
NOTE Data in a data table, chart, or color map does not change when the graphic is viewed in Time-lapse.
Click for details below To produce a data table To produce a chart To produce a color map
##### To produce a data table To produce a data table like the example below, first create the report in the WebCTRL® interface and then create the corresponding graphic in ViewBuilder. To create the report in the WebCTRL® interface
Instructions | Example
--- | ---
1. Click the Reports drop-down arrow, and then select Report Manager. |
2. Click Add. 3. On the Report Editor's Type tab, type a Display name and ID for the report. 4. In the Primary column field, select the type of information that you want the report to be based on (Control Programs in this example). |
5. On the Type tab, enter the criteria for the option that you selected in step 4. 6. In the Primary column header field, enter the heading that you want for that column (Equipment in this example). |
7. Define each column in the report on the Columns tab. See the examples on the right. 8. Define any other information you may want, and then click Accept. |
To create the graphic in ViewBuilder
Instructions | Example
--- | ---
1. Select File > New > Graphic, and then click OK. |
2. Click the Add Control tab in the Tools window. 3. Click the Data Table control and then click in the workspace. |
4. In the Properties window, enter the Report ID exactly as it appears in the WebCTRL® Report Editor. 5. Resize the control so that it is at least the size that the table will be in the WebCTRL® interface. To resize, enter a specific size in the Properties window or drag the handles on the control. NOTE If the table is cut off when you view the graphic in the WebCTRL® interface, increase the size of the control in ViewBuilder. 6. If you defined variables in the Report Editor and you want to use a different default value for the Data Table, click in the Properties window, type the variable's ID (from the Report Editor), and then type the new default value. NOTE To have the data table show data for a location other than the graphic's location, add a variable and type`location` in the ID column. Type the path to the location in the Value column. |
7. Save the graphic. |
##### To produce a chart To produce a bar chart like the example below, first create the report in the WebCTRL® interface and then create the corresponding graphic in ViewBuilder. NOTE When a chart that is based on a report is displayed on a Graphics page, you can hover over various points on the chart to see values. You can also click on each item in the legend to turn that information on and off. See Using a custom report as the source for a Graphics page for more information on a chart. To create the report in the WebCTRL® interface
Instructions | Example
--- | ---
1. Click the Reports drop-down arrow, and then select Report Manager. |
2. Click Add. 3. On the Report Editor's Type tab, type a Display name and ID for the report. 4. In the Primary column field, select the type of information that you want to report based on (Date Range in this example). |
5. On the Type tab, enter the criteria for the option that you selected in step 4. 6. In the Primary column header field, enter the heading that you want for that column (Date Range in this example). |
7. Define each column in the report on the Columns tab. NOTE In the example on the right, all four columns have the same criteria. |
8. Define the Chart options on the Output tab. 9. Define any other information you may want, and then click Accept. |
To create the graphic in ViewBuilder
Instructions | Example
--- | ---
1. Select File > New > Graphic, and then click OK. |
2. Click the Add Control tab in the Tools window. 3. Click the Chart control and then click in the workspace. |
4. In the Properties window, enter the Report ID exactly as it appears in the WebCTRL® Report Editor. 5. Select the Type of chart you want. 6. Resize the control so that it is at least the size that the chart will be in the WebCTRL® interface. To resize, enter a specific size in the Properties window or drag the handles on the control. NOTE If the chart is cut off when you view the graphic in the WebCTRL® interface, increase the size of the chart control in ViewBuilder. 7. If you defined variables in the Report Editor and you want to use a different default value for the chart, click in the Properties window, type the variable's ID (from the Report Editor), and then type the new default value. NOTE To have the chart show data for a location other than the graphic's location, add a variable and type`location` in the ID column. Type the path to the location in the Value column. |
8. Save the graphic. |
##### To produce a color map A Graphics page color map shows specified colors for various conditions that are defined in a WebCTRL® report. For example, each building on a campus map could show a color that indicates its energy usage. See image below. A color map can also have an option that lets a user switch between different kinds of information. For example, in the image below, a user could click on the MTD kWh drop-down list and select YTD kWh. To produce a color map: Create the graphic in ViewBuilder. Create the corresponding report in the WebCTRL® interface. Edit the graphic to add information specific to the WebCTRL® report. See instructions below. Create the graphic in ViewBuilder
Instructions | Example
--- | ---
1. Add an image (floorplan, campus map, etc.) to the graphic, and then double-click the image to open the Associations window. |
2. Associate each item on your image (zone, building, etc.) just as you would associate zones on a thermographic floorplan. See "Associating zones on a floorplan to equipment" in ViewBuilder Help. NOTE The Variable Color checkbox in the Associations window must be checked. 3. Click Save and Close. |
Create the report in the WebCTRL® interface
Instructions | Example
--- | ---
1. Click the Reports drop-down arrow, and then select Report Manager. |
2. Click Add. 3. On the Report Editor's Type tab, type a Display name and ID for the report. 4. In the Primary column field, select Color Map. |
5. Type a location in your system so that you can preview the report (#building_1 in the example). This location is only for testing your entries in the Report Editor. Associations to actual locations in the system will be made in ViewBuilder. NOTE You can add more than one location if you want to see more in the preview. 6. Click Add. |
7. Define each column in the report on the Columns tab. See examples of the first two columns on the right. |
A color map can retrieve color information only from a column that has the Render data as field set to Color. 8. Define any other information needed on the Report Editor tabs, and then click Accept. |
Edit the graphic in ViewBuilder to add report information
Instructions | Example
--- | ---
Follow steps 1 through 5 if the colormap will show information from more than one report column. If not, skip to step 6. 1. Select Configure > View Properties. 2. On the Local Variables tab, click . 3. Double-click Boolean in the Type column, and then select Report column in the drop-down list. 4. Double-click variable in the Name column, and then replace variable with colormap_column. NOTE If the Graphic has multiple images that will pull data from different reports, add one variable called colormap_column1, another called colormap_column2, etc. 5. Click OK. |
6. Double-click the image to open the Associations window. 7. Click , and then enter the following information: • Report ID: Get the report ID from the WebCTRL® Report Editor. • Default Column ID: This is the column whose color is displayed when the graphic first appears. Get the Column ID from the WebCTRL® Report Editor. Leave blank if the graphic will pull data from only one report column. • Column Name Local Variable: Type the name of the variable that you created in step 5 above. Leave blank if the graphic will pull data from only one report column. |
8. If a report uses a variable and you want the colormap to use a different default value than what is defined in the WebCTRL® Report Editor, click in the Report Properties window, type the variable's ID (defined in the Report Editor), and then type the new default value. |
9. If the colormap will show information from more than one report column, add a control (droplist or radio buttons) that will allow the user to select the information they want to see. 10. In the Microblock Path field, enter the local variable that you defined in step 4, enclosing it in $$. 11. Finish the graphic and then test it in the WebCTRL® interface. |