Line Chart Widget Extension. Version 1.0

Size: px

Start display at page:

Download "Line Chart Widget Extension. Version 1.0"

Brittney Atkinson
5 years ago
Views:

1 Version 1.0

2 Copyright 2016 PTC Inc. and/or Its Subsidiary Companies. All Rights Reserved. User and training guides and related documentation from PTC Inc. and its subsidiary companies (collectively PTC ) are subject to the copyright laws of the United States and other countries and are provided under a license agreement that restricts copying, disclosure, and use of such documentation. PTC hereby grants to the licensed software user the right to make copies in printed form of this documentation if provided on software media, but only for internal/personal use and in accordance with the license agreement under which the applicable software is licensed. Any copy made shall include the PTC copyright notice and any other proprietary notice provided by PTC. Training materials may not be copied without the express written consent of PTC. This documentation may not be disclosed, transferred, modified, or reduced to any form, including electronic media, or transmitted or made publicly available by any means without the prior written consent of PTC and no authorization is granted to make copies for such purposes. Information described herein is furnished for general information only, is subject to change without notice, and should not be construed as a warranty or commitment by PTC. PTC assumes no responsibility or liability for any errors or inaccuracies that may appear in this document. The software described in this document is provided under written license agreement, contains valuable trade secrets and proprietary information, and is protected by the copyright laws of the United States and other countries. It may not be copied or distributed in any form or medium, disclosed to third parties, or used in any manner not provided for in the software licenses agreement except with written prior approval from PTC. UAUTHORIZED USE OF SOFTWARE OR ITS DOCUMETATIO CA RESULT I CIVIL DAMAGES AD CRIMIAL PROSECUTIO. PTC regards software piracy as the crime it is, and we view offenders accordingly. We do not tolerate the piracy of PTC software products, and we pursue (both civilly and criminally) those who do so using all legal means available, including public and private surveillance resources. As part of these efforts, PTC uses data monitoring and scouring technologies to obtain and transmit data on users of illegal copies of our software. This data collection is not performed on users of legally licensed software from PTC and its authorized distributors. If you are using an illegal copy of our software and do not consent to the collection and transmission of such data (including to the United States), cease using the illegal version, and contact PTC to obtain a legally licensed copy. Important Copyright, Trademark, Patent, and Licensing Information: See the About Box, or copyright notice, of your PTC software. United States Governments Rights PTC software products and software documentation are commercial items as that term is defined at 48 C.F.R Pursuant to Federal Acquisition Regulation (FAR) (a)-(b) (Computer Software) (MAY 2014) for civilian agencies or the Defense Federal Acquisition Regulation Supplement (DFARS) at (a) (Policy) and (a) (Rights in commercial computer software or commercial computer software documentation) (FEB 2014) for the Department of Defense, PTC software products and software documentation are provided to the U.S. Government under the PTC commercial license agreement. Use, duplication or disclosure by the U.S. Government is subject solely to the terms and conditions set forth in the applicable PTC software license agreement. PTC Inc., 140 Kendrick Street, eedham, MA USA

3 Document Revision History... 2 Software Change Log... 3 Prerequisites/Dependencies... 3 Introduction and Installation... 3 Installing the Line Chart Widget Extension... 4 Properties... 5 Using the Line Chart in Run Time... 9 Upgrading an Existing Chart to the ew Chart Widget Extension Upgrading using a Responsive Mashup Upgrading using a Static Mashup Replacing the Original Mashup

4 Document Revision History Revision Date Version Description of Change July 28, Initial version of document. 2

5 Line Chart Widget Extension Software Change Log Version Release Date Changes 1.0 July 28, 2016 Initial release Prerequisites/Dependencies Dependencies If you are using pre-7.2 versions of the D3 Tree and/or D3 etwork extensions, you must upgrade to the latest version(s) before using the Line Chart Widget Extension. This is due to updates to the d3v2 library that are also included in the bar chart widget extension. Prerequisites ThingWorx 6 or later Introduction and Installation The line chart allows you to display a series of data points connected by lines. This data is supplied by a service that emits an infotable. How is this extension different from charts included with ThingWorx? The Line Chart Widget Extension was designed to provide a lighter-weight, faster solution for mainstream applications. There is a line chart widget included as an out-of-the-box widget (within the label chart widget) in ThingWorx. The Line Chart Widget Extension includes some different and enhanced functionality and is described within this document. The Label Chart has some capabilities not duplicated in this Line Chart Extension, such as multiple Y-Axes. Key enhancements include: Much faster loading, drawing, and resizing Improved rendering and anti-aliasing Displays larger data sets (1000 rows) faster than the built-in Label Chart Basic animation with duration setting The line chart will support up to 2000 data points across up to 8 series updated at a rate up to 6 times per minute. 3

Installing the Line Chart Widget Extension 1. From a web browser, launch ThingWorx. 2. Log into ThingWorx as an administrator. 3. Go to Import/Export > Import. 4.

6 Installing the Line Chart Widget Extension 1. From a web browser, launch ThingWorx. 2. Log into ThingWorx as an administrator. 3. Go to Import/Export > Import. 4. Click Choose File and select ChartWidget_ExtensionPackage.zi p. 5. Click Import. OTE: If an Import Successful message does not display, contact your ThingWorx System Administrator. 6. Click Yes to refresh Composer after importing the extension. 4

7 Properties Property ame Description Base Type Default Value Bindabl Localizabl SingleDataSource Use a single data source for all series. BOOLEA true umberofseries Data ChartTitle ShowAxisLabels X-AxisLabel X-AxisField Y-AxisLabel LabelAngle Defined number of series in the chart. Can have up to eight series. Data source. This property is not displayed if SingleDataSerie s is unchecked. The title of the chart. Display major axis labels. Text label for the x-axis. The property that displays on the bottom of the x-axis on the chart. Text label for the y-axis. Tilts values diagonally to a degree. Useful for long values on the x-axis. UMBER 1 IFOTABLE n/a Y STRIG n/a Y Y BOOLEA True STRIG X Axis Y MEUAME n/a Y STRIG Y Axis Y ITEGER 0 5

8 Property ame Description Base Type Default Value Bindabl Localizabl Interpolation The way lines are drawn in the chart Options: Linear: a straight line from each data point. Smooth: Curved lines. Less Smooth: Curved lines, but less smooth. Stepped: staircase format, all lines are vertical or horizontal. STRIG Linear Duration (ms) ChartBodyStyle ChartTitleStyle ChartAxisStyle ChartTitleAlignment The length/speed of transitions when values change in the chart. The overall style of the chart. The default is transparent. The style of the chart title (at the top). The style of the axis grid and outline. The alignment for the title of the chart. Options: Left, Center, and Right. UMBER 500 STYLEDEFIITIO STYLEDEFIITIO STYLEDEFIITIO (transparent ) STRIG Center 6

9 Property ame Description Base Type Default Value Bindabl Localizabl ShowZoomStrip Display zoom control below the chart. BOOLEA False ShowInteractiveGuidelin e FillArea ShowLegend AutoScale X-AxisIntervals OTE: This property is only available in static layouts. Displays an advanced tooltip with series data details under user s mouse. Fill the area below the line with a translucent color that matches the series. Display or hide the legend for multiple series. The legend displays at the top of the chart, and the chart will move if the legend gets larger. Automatically scale the chart to see all data on the y-axis. Preferred x-axis intervals. Options: Auto and One Per Row. Show X-AxisLabels Displays the x- axis labels. BOOLEA False BOOLEA False BOOLEA True BOOLEA True STRIG Auto BOOLEA True 7

10 Property ame Description Base Type Default Value Bindabl Localizabl Show Y-AxisMinMax Displays the y- axis min and max values (highest and lowest data points). BOOLEA True Y-AxisIntervals Y-AxisMinimum Y-AxisMaximum Margins Preferred y-axis intervals. Options: Auto and One-Per- Row. The minimum range for the y- axis. OTE: This setting sets a floor value for data that might all start at a higher value. Values below the minimum will still display. The maximum value for the y- axis. OTE: Values above the maximum will still be displayed. Additional label margin pixel values. This creates a buffer outside of the chart (top, left, bottom, right). This can be useful for displaying long values. STRIG Auto UMBER 0 Y UMBER 100 Y STRIG 0,0,0,0 8

11 Property ame Description Base Type Default Value Bindabl Localizabl DataFieldn Series data fieldn. MEUAME n/a Y DataLabeln SeriesStylen ShowDataLoading DoubleClicked Z-index Visible The label for data fieldn. The style for series stylen. Display the data as it loads. An event is fired when the chart is doubleclicked. The ordering for layering widgets. Display the chart in run time. STRIG n/a Y Y STYLEDEFIITIO n/a BOOLEA True n/a Y UMBER 10 BOOLEA True Y Using the Line Chart in Run Time The line chart is responsive in run time. The legend can be used to view the data in different ways. The example line chart below contains three data series. ote the following run time behaviors: To turn a data series on or off, click the series name in the legend. To view a single data series, double-click it in the legend. 9

12 The line chart above has the three data series displayed. The max Y value is 100, which is the highest overall value found from the three series. In the chart above, Precipitation is clicked in the legend, so Dew Point and Humidity are displayed. The highest value displayed on the Y-axis is 99. The fill color of the line matches the series color. 10

In the chart above, linear interpolation is displayed. The highest Y Axis value is 97.

13 Double-clicking Dew Point in the chart above displays only Dew Point. Its Y axis max value is 99, although the line does not reach that high, due to smoothing interpolation being used. In the chart above, linear interpolation is displayed. The highest Y Axis value is 97. Upgrading an Existing Chart to the ew Chart Widget Extension If you have an existing chart and you want to upgrade to the chart widget extension, use the following steps: 1. Make two copies of your existing mashup containing the chart you wish to replace. 11

2. ame one the working mashup. The other is a backup. You may want to name them with working and backup at the end of their names. Upgrading using a Responsive Mashup 1.

14 2. ame one the working mashup. The other is a backup. You may want to name them with working and backup at the end of their names. Upgrading using a Responsive Mashup 1. Cut the existing chart, add a layout with two rows, and paste the chart in one of the rows. 2. Add a new type chart in the other row. 3. Set up data bindings to match the existing chart. 4. Select Data Sources or Fields and other properties as needed. 5. Preview the working mashup. 6. Verify that both chart graphics look the same. 7. Make a copy of the working mashup don t save it yet. 8. Remove the old chart widget, cut the new chart widget, delete the layout and paste the new chart back in. 9. Go to Replacing the Original Mashup. 12

Upgrading using a Static Mashup 1. Resize the original chart. 2. Add a new Chart Widget Extension. 3. Set up data bindings to match the existing chart. 4.

15 Upgrading using a Static Mashup 1. Resize the original chart. 2. Add a new Chart Widget Extension. 3. Set up data bindings to match the existing chart. 4. Select Data Sources or Fields and other properties as needed. 5. Go to Replacing the Original Mashup. Replacing the Original Mashup 1. Delete the original mashup. 2. Save the copy of the working mashup with the same name as the original mashup. 3. Preview the new mashup. If there are any problems with it, delete it, and make a copy of the backup mashup and save it with the same name as the original mashup. 13

16 OTE: There is not zero-configuration capability in the new charts: the series fields must be selected. If you are replacing a chart that has no series or x-axis assignments, they will need to be added to the new chart. 14

Mail Extension User Guide

Mail Extension User Guide Version 1.1 July 2017 Copyright 2017 PTC Inc. and/or Its Subsidiary Companies. All Rights Reserved. User and training guides and related documentation from PTC Inc. and its subsidiary companies (collectively