QCSPCChartJSTS

SPC Control Chart Tools for JavaScript/TypeScript

Add variable control charts (X-Bar R, X-Bar Sigma, Individual Range, Median Range, EWMA, MA, MAMR, MAMS and CuSum charts), attribute control charts (p-, np-, c-, u-, and DPMO charts), frequency histograms, normal probability and Pareto charts to your web site using the SPC Control Chart Tools for JavaScript/TypeScript.

Above is an interactive XBar-R chart created using these tools. The scrollbar, tool tips, and toggle buttons on the right all work to customize the chart.

The QCSPCChart for JavaScript/TypeScript software represents an adaptation of the QCSPCChart library to the JavaScript and the HTML5 user interface framework.

Written around the HTML5 Canvas graphics framework, and organized as JavaScript ES6 module imports , the resulting JavaScript library is completely independent of all third part libraries. The result is an easy to use, interactive, SPC Charting package which will run on any computer which supports a modern browser, running under Windows or Linux.A modern browser is considered one that supports HTML5, and particularly the HTML5 Canvas element. This includes: IE (9+), Firefox (1.5+), Safari (1.3+), Chrome, and Opera (9+). It can be inserted as JavaScript in Asp.Net and MVC applications.

Typical users are SPC engineers and other quality control professionals creating JavaScript based web applications that will be used to monitor critical quality factors in manufacturing, process, and service industries. The feature rich toolkit includes templates for the most common SPC control chart types: variable control charts (X-Bar R, X-Bar Sigma, Individual Range, Median Range, EWMA, MA, MAMR, MAMS and CuSum charts), attribute control charts (p-, np-, c-, u-, and DPMO-charts), frequency histograms, normal probability charts and Pareto diagrams. The software will automatically calculate SPC control limits using historical data for the supported variable control chart and attribute control chart types. Alarms can be generated for standard +3 sigma control limits, or standard SPC rule sets (WECO, Nelson, Juran, Hughes, Gitlow, AAIG, Westgard and Duncan). Alarms can be color highlighted in the SPC charts and table. It will also calculate process capability ratios (Cp, Cpl, Cpu, Cpk and Cpm) and process performance indices (Pp, Ppl, Ppu and Ppk). Users are able to interact with charts: adding annotations, defining custom tool-tips and editing notes. There is no comparable product for JavaScript/TypeScript available at any price.

Relation to QCSPCChart for JavaScript (JS-SPC2-DEVR)

We (Quinn-Curtis) have a related product which is also written in JavaScript. It is called the QCSPCChart for JavaScript. You will find the original product description here. It utilizes a framework available from Google called GWT (Google Web Toolkit), where you can write your source code in the Java programming language, and the resulting source code is transpiled into JavaScript. In addition, GWT also includes many additional support libraries necessary to transpile Java code into JavaScript. The downside of this approach for us is that due to name mangling and optimization, the functions in the resulting JavaScript library are not callable from JavaScript running in a browser, or from an external JavaScript file. Instead, the creation of charts using the QCSPCChart library takes place using a JSON template. This limits the overall programmability of web applications using the QCSPCChart library. After 5 years we feel that this product, along with GWT, has run its course, and we are replacing it with, this, the QCSPCChart for JavaScript/TypeScript software. Since QCSPCChart for JavaScript/TypeScript is written entirely in TypeScript, with no dependencies on external libraries, it is a better choice for developers going forward.

Have any questions ? Contact: info@quinn-curtis.com

Links

Ordering Information

License Information

JavaScript Web Application – A pretty elaborate website written around these tools. It uses the WordPress framework to host the SPC charts. (Requires an HTML5 compatible browser, with JavaScript enabled)

User Manual – View the QCSPCChart user manual using Adobe Acrobat.

Download Trial Version (14 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

Key Benefits

• Fast development time because of the use of advanced templates for the most common SPC Control charts
• Unlimited number of charts within a single HTML page, using multiple HTML5 Canvas elements in <div> blocks
• Charts have no limits on the number of data points or time frame
• Integrated histograms and tables displays require no programming
• Integrate with your database because the software is programmed using JavaScript.
• Program your application using JavaScript, or TypeScript.
• The interactive portions of the software works with mouse-driven workstations, and touch-driven tablets and phones.
• Never miss an alarm condition, alarms can be strongly highlighted in charts and tables
  Differences between this and Workstation Versions of QCSPCChart
• 100% of the software is client side JavaScript. As such, it has no access to the client computer file system.
• There are no data log files of SPC data.
• There is no integrated printing of charts. Any printing will have to be handled through the browser.

Feature Summary

• The software is compatible with any editor you use to write and debug your JavaScript code. We recommend The Visual Studio Code IDE, for both Windows and Linux, downloadable for free from Microsoft here: https://code.visualstudio.com .
• Based on the JavaScript HTML5 Canvas Graphics Drawing Framework – Compatible with JavaScript components and elements.
• All exported public functions are callable from JavaScript and TypeScript – The software is organized as an ES6 module, and the public/exported functions of the library are callable in their own namespace.
• Asp.Net and MVC compatible – Since the software is pure JavaScript, it can be inserted into traditional and MVC Asp.Net applications. Examples provided.
• 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. Read an excerpt from out manual about how it integrates with Angular here.
• Compatible with NextJS (next.js) – The library can be dynamically loaded and called within a NextJS *.js page. Read this white paper for details: https://quinn-curtis.com/Docs/QCSPCChart_NextJS.pdf .
• Independent of all third party libraries – The source code of the software is written in TypeScript and transpiled (compiled) into pure JavaScript. There are no third party libraries to complicate the module loading sequence.
• Variable Control Chart Templates -Variable Control Chart Templates – X-Bar R – (Mean and Range), X-Bar Sigma, (Mean and Sigma), Median and Range, X-R (Individual Range Chart), EWMA (exponentially weighted moving average), MA (moving average), MAMR (moving average / moving range), MAMS (moving average / moving sigma) and CuSum. A special version of the X-Bar Sigma chart supports variable sample sub-group sizes.

• 

• 

• 

• 

• 

• 

• 

• 

• 

Variable Control charts from our examples

• Attribute Control Chart Templates – p-Chart (Fraction or Percent of Defective Parts, Fraction or Percent Non-Conforming), np-Chart (Number of Defective Parts, Number of Non-Conforming), c-Chart (Number of Defects, Number of Non-Conformities ), u-Chart (Number of Defects per Unit, Number of Non-Conformities Per Unit ), and DPMO-Chart (Number of Defects per Million). The p-Chart and u-Chart templates come in versions which support variable subgroup sample sizes.

Attribute Control charts from our examples

• Other SPC Chart Templates – Frequency Histograms, Normal Probability Plots with probability scales and axes, and Pareto Diagrams.

• Integrated Table Support – Sampled values, calculated data values and alarm status values can be part of the SPC Control chart. Every sample subgroup has a pop-up notes text edit box where an operator can add observations.

• Integrated Frequency Histograms – The variable control charts and attribute control charts can display a frequency histogram, with an optional normal curve-fit, of the process variable side by side with the main SPC chart.

• Customize Chart Objects – All of the plot objects created in the SPC chart templates are accessible to the programmer, allowing tremendous flexibility in the look of the SPC charts.

• Process Capability Ratios and Process Performance Indices – Automatic calculation and display of process capability ratios (Cp, Cpl, Cpu, Cpk and Cpm) and process performance indices (Pp, Ppl, Ppu and Ppk)

• Variable SPC Control Limits – Control limits can either be fixed, and can vary with time. Variable control limits can be specified manually, or calculated automatically as the result of control charts which use a subgroup variable sample size.

• SPC Control Limit Calculations – SPC Control limits can be set explicitly, as the result of your own calculations, or the limits can be automatically calculated at 1-, 2- and 3- sigma levels using our own internal routinesMultiple SPC Control Limits – Control limits can be placed at 1-sigma, 2-sigma and 3 sigma levels for high and low SPC control limits.

• Western Electric (WECO), Nelson, Juran, Hughes, Gitlow, AAIG, Westgard and Duncan Rules – The software will automatically calculate and process the alarm limits for the Western Electric Runtime Rules (WE 1, 2, 3 and 4), and Supplemental (Trending) rules (WE 5, 6, 7, and 8). It will also process Nelson, Juran, Hughes, Gitlow, AAIG, Westgard and Duncan rule sets. Rule parameters (N of M exceed +-2 sigma for example) for any of the standard rule sets can be customized. Mix and match rules from different rule sets to create you own custom rule set. You can also define custom rules using our standardized rule templates. Details about the rules sets can be found  here.

• Data Tooltips – Integrated data tooltips display chart data values in a popup window.

• Alarm Features – There is a new status line in the table section that gives a direct indication of whether or not the corresponding process variable is in, or out of, alarm. The status line has a tooltip, so if you click on an alarm, a pop-up box will show you details. Optionally, the entire column associated with a sample interval can be color highlighted to indicate an alarm condition. Alarm details can be automatically logged to the notes log. The symbol used to plot a process variable point in the primary and secondary charts can be made to change color in the event of an alarm.

• Control Limit Alarm Events – Alarm events can be triggered whenever a process variable exceeds an SPC control limit.

• Integrated Scrolling – A scroll bar option permits the user to window in on 8-20 sample subgroups at a time, from a much larger collection of measurement data, representing hundreds or even thousands of subgroups, and move through the data, similar to paging through a spreadsheet. The scroll bar controls both the table and chart scrolling.

• Integrated Zooming -The horizontal scrollbar can be replaced (toggled on/off actually) using the UI, with a zoom window, by clicking on the z-button in the lower right corner. The user will be able to scroll the charts by dragging the transparent blue zoom window left or right, or expand the x-axis scale by dragging the left or right edge of the zoom window.

• Toggle Buttons for Chart Elements – Toggle buttons can be used to turn on/off the display of the table rows and either of the charts.

• Dynamic Updates of SPC Charts – SPC Charts can be updated and control limits re-calculated in real-time.Auto-Scaling – The y-axes of the SPC charts can be auto-scaled to display all data and control limits, or the minimum and maximum value of the y-axis can be explicitly set.

• Documentation and Demo/Example Programs – The software includes a comprehensive 350 page user manual with many programming examples.

SPC Control Chart Tools for JavaScript/Typescript Developer Licensing

• Our license agreement can be found here.

• The SPC Control Chart Tools for JavaScript/TypeScript Developer License is available in a Developers Version (model # JSTS-SPC2-DEVR) that does not time out. Free updates for two years.

• The SPC Control Chart Tools for JavaScript/TypeScript 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. If multiple developers are working on a single web site, you will need a Developer License for each developer. 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 SPC Control Chart Tools software does not use a redistributable license. The basic developer license permits you to include QCSPCChart as part of your web application and incorporate it on multiple web sites, royalty free.

SPC Control Chart Tools for JavaScript/TypeScript Redistributable Licensing

• The SPC Control Chart Tools software does not use a redistributable license. The basic developer license permits you to include QCSPCChart as part of your web application and incorporate it on multiple web sites, royalty free. You cannot, however, utilize this software to create a toolkit for other developers to use as part of a development system. That would be effectively competing against us, and we can’t let you use this software for that purpose, unless of course you negotiate a special licensing deal from us.

Custom Programming Services

• The variety of user interfaces for charting applications is as diverse as the industries using the software. The end-user of an application at a drug company expects to interact with the chart in a manner different than that of an end-user in the automotive industry.
• 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 chart 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 chart programming genius. All you have to be able to do is describe in detail what you want the example to do.
• Using SPC Control Chart Tools for JavaScript/TypeScript , our range of expertise includes JavaScript, TypeScript, JSON, Java, C++, VB, and C# programming languages. For more information or a quote, please contact our sales department at sales@quinn-curtis.com.

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

Ordering Information

Click here to go to Download Ordering

Description	Model #	Price
SPC Control Chart Tools Developer License for JavaScript/TypeScript	JSTS-SPC2-DEVR	$600