QCRTGraphJSTS
Real-Time Graphics Tools for JavaScript/TypeScript
Add scrolling graphs, meters, bar graphs, gauges, annunciators, dynamic text, and UI controls to web pages using JavaScript and TypeScript.
The QCRTGraph for JavaScript/TypeScript software represents an adaptation of the QCRTGraph real-time graphics library to the JavaScript and the HTML5 user interface framework. The entire QCRTGraph library is written using the TypeScript language, which is a superset of JavaScript. The resulting TypeScript code is transpiled into JavaScript, resulting in a pure JavaScript version of the library. The library can be called from JavaScript within a browser, from JavaScript files external to the browser, or by TypeScript files which have been transpiled into their JavaScript equivalents.
Click on one of the thumbnails below to see the actual size real-time display executing as JavaScript
Above are real-time displays built using these tools. Click on the thumbnail to see the actual real-time display executing as JavaScript. All are example programs included with the software.
The software integrates the QCChart2D charting software with real-time data structures and specialized rendering routines. It is designed for on-the-fly rendering of the real-time data using new specialized classes for scrolling graphs, gauges (bar graphs), meters, annunciators and text. Plot objects created using the QCChart2D classes can be freely mixed with the new Real-Time Graphics Tools for JavaScript/TypeScript classes. Advanced user interface features such as zooming and tool-tips can used with real-time scrolling charts. A process variable class manages real-time data, an unlimited number of alarms. Real-Time displays can be printed using the browsers built-in printing capability.
Links
Real-Time Graphics Tools for JavaScript/TypeScript User Manual – View the QCRTGraph user manual using Adobe Acrobat.
Download Trial Version (27 MB) – Download a full-featured, 30-day trial version. of the software.Have any questions ? Contact: info@quinn-curtis.com
Related Quinn-Curtis Products
| Product Platform | .Net | WPF | Java | JavaScript/Typescript |
|---|---|---|---|---|
| QCChart2D | QCChart2D for .Net | QCChart2D for WPF | QCChart2D for Java | QCChart2D for JavaScript/Typescript |
| QCRTGraph | QCRTGraph for .Net | QCRTGraph for WPF | QCRTGraph for Java | QCRTGraph for JavaScript/Typescript |
| QCSPCChart | QCSPCChart for .Net | QCSPCChart for WPF | QCSPCChart for Java | QCSPCChart for JavaScript/Typescript |
Design Considerations
- Updates of data classes are asynchronous with rendering of graphics to the screen.
- Real-Time plot objects are derived from QCChart2D plot objects resulting in standardized methods for setting plot object properties.
- Any standard plot type from the QCChart2D software package, both simple and group plot types, can be implemented as scrolling graphs.
- There are no limits on the number of process variable channels, no limits on the number of alarm limits associated with a process variable, no limits on the number of real-time plots in a graph.
- The update of real-time objects will not interfere or overwrite other objects and will follow the z-order precedence established when the graph was created.
Feature Summary
- Includes the QCChart2D Charting Tools for JavaScript/TypeScript – The Real-Time Graphics Tools for JavaScript/TypeScript includes the complete QCChart2D Charting Tools JavaScript/TypeScript .
- Based on HTML5 – The software places charts in standard HTML5 Canvas elements, placed anywhere on the web page. As many canvas elements as you need can be combined on the same page, each with one or more charts.
- Develop under Windows or a Linux variant -Compatible with all JavaScript and/or TypeScript Development environments. We utilize Microsoft Visual Code for both Windows and Ubuntu.
- ES6 module loading – It uses the ES6 asynchronous module loading specification for JavaScript, and all JavaScript and all calls into the library can be localized to the module, preventing any namespace collision of function names.
- Compatible with Angular – The library can be integrated into Angular apps, using a canvas element in an Angular HTML template, and the chart building code in the behind code TypeScript file.
- Self contained – No third party libraries needed – The software is entirely written in TypeScript, resulting in provide better reliablity, performance and scalability.
- Process Variable and Alarms – Real-time data is stored in RTProcessVar classes. The RTProcessVar class is designed to represent a single process variable, complete with limit values, an unlimited number of high and low alarms, historical data storage, and descriptive strings for use in displays.
- Single Value Indicators – A single value indicator is a real-time display object that is attached to a single RTProcessVar object. This includes single channel bar indicators (which includes solid, segmented, custom and pointer bar indicators), meter indicators (which includes meter needles, meter arcs and meter symbol indicators), single channel annunciator indicators, panel meter indicators and scrolling graph plots based on a QCChart2D SimplePlot chart object.
Multi-color gradients can be mapped to bars in the RTMultiBarIndicator
- Multiple Value Indicators – A multiple value indicator is a real-time display object that is attached to a group of RTProcessVar objects. This includes multiple channel bar indicators (which includes solid, segmented, custom and pointer bar indicators), multiple channel annunciator indicators, panel meter indicators organized in a grid, and scrolling graph plots based on a QCChart2D GroupPlot chart object.
- Alarm Indicators – Alarm indicators are used to display alarm lines, symbols and fill areas for the RTProcessVar objects associated with the single value and multiple value indicator classes.
- Panel Meter Indicators – The RTPanelMeter derived classes are special cases of the single value indicator classes that are used throughout the software to display real-time data in a text format. Panel meters are available for numeric values, string values, time/date values and alarm
- Meter Axis Objects – Meter indicators needed new classes to support the drawing of meter axes, meter axis labels and meter alarm objects.
- Form Control Classes – The RTControlButton class implements on/off colors and on/off text for momentary, toggle and radio button style buttons. The RTTrackBar class adds real-world scaling, axes, labels and the classic track bar . RTControlButton and RTTrackBar objects can be group together in a grid, organizing the control objects functionally and visually.
- Scroll Frame – A scroll frame manages constant rescaling of coordinate systems of plot objects that are displayed in a scrolling graph. Revision 2.0 adds a vertical scroll frame to the software.
- Process Variable Viewer – the RTProcessVarViewer class displays the historical data of a process variable in a grid like table.
- Documentation and Demo/Example Programs – The software includes a comprehensive 400 page user manual with many programming examples, XML help for every class. Every programming example, and example program is presented in C# and Visual Basic.
Real-Time Graphics Tools for JavaScript/TypeScript Developer Licensing
- Our license agreement can be found here.
- The QCRTGraph Developer License is available in a Developers Version (model # JSTS-RTG-DEVR) that does not time out. Free updates for two years.
- The QCRTGraph Developer License is licensed to a single individual. It cannot be used by multiple people at the same company, unless a separate license is purchased for each person. Site licenses are also available. Contact sales@quinn-curtis.com with details of how many seats you wish to purchase and we will respond with a quote.
- The QCRTGraph software does not use a redistributable license. The basic developer license permits you to include QCRTGraph as part of your web application and incorporate it on multiple web sites, royalty free.
Real-Time Graphics Tools for JavaScript/TypeScript Redistributable Licensing
- The QCRTGraph Software does not use a redistributable license. he basic developer license permits you to include QCRTGraph as part of your web application and incorporate it on multiple web sites, royalty free. We do not allow developers to use this software to create a graphics toolkit (a library or any type of graphics component that will be used in combination with a program development environment) for resale to other developers.
Custom Programming Services
- QCRTGraph is an extremely powerful and flexible software package. It contains over 1500 methods and properties in more than 150 classes. The user manual and help file documentation are more than 1500 pages. This can be overwhelming to the average programmer who wants to start programming today and have the prototype of an application working in a week.
- The variety of user interfaces for real-time graphics applications is as diverse as the industries using the software. The end-user of an application in the automotive industry expects to interact with the real-time display in a manner different than that of an end-user involved in real-time stock trading. The same can be said for other industries: health care, semiconductors, quality control, biotechnology, etc.
- That is why we have written so many outstanding example programs, pulled from a wide variety of industries using many different styles of user interface.
- We know that your application may be similar to, but still uniquely different from any of our example programs. To that end we offer our programming services to write for you a custom example program that demonstrates how to code the real-time display format and user interface you want. That jump start to your project can save you many weeks of work and make you look like a real-time graphics programming genius. All you have to be able to do is describe in detail what you want the example to do.
Doesn’t have the features you need ? Let us know what those are so we can add them in a subsequent release. Contact: info@quinn-curtis.com
The Real-Time Graphics Tools for JavaScript/TypeScript includes the QCChart2D Charting Tools for JavaScript/TypeScript . There is no need to order both.
Ordering Information
Click here to go to Download Ordering
| Description | Model # | Price |
| QCRTGraph Developer License for JavaScript/TypeScript | JSTS-RTG-DEVR | $600 |
