ChemCharts

ChemCharts for CheapStat

Description

CheapStat is an inexpensive, open-source, programmable potentiostat, as described in CheapStat: An Open-Source, “Do-It-Yourself” Potentiostat for Analytical and Educational Applications.

ChemCharts is a free software package that is intended to supplement the CheapStat hardware system with software for graphing the output from the CheapStat potentiostat. ChemCharts is written using HTML and JavaScript (ECMAScript 6 [2015]), and runs in a web browser.

ChemCharts uses Google Charts to display potentiostat data as a scatter chart. ChemCharts users can select one or two data points to define a line, which is then overlaid on the scatter chart using a Google Charts “ComboChart.” Users can then select one or more additional points, and ChemCharts will calculate the distance from each of these points to the line.

The data generated by CheapStat can be saved to a tab-delimited text file (see Wikipedia: Tab-separated values). ChemCharts uses the Papa Parse CSV parser to read the data file produced by the CheapStat system, since this parser can automatically detect whether a delimiter-separated values file uses commas or tabs as delimiters.

Chart

So far, ChemCharts produces only one type of chart: a scatter chart of potentiostat data, optionally rendered with a line chart overlay.

Start a Potentiostat Chart

This HTML file and supporting JavaScript code is primarily intended to read a CheapStat data file—a tab-separated values (TSV) file—but can also be used to read and graph data from a comma-separated values (CSV) file generated by a spreadsheet program, for example.

The Potentiostat Chart page provides the option of converting the integer values read from a CheapStat potentiostat to current measurements by scaling them using a slope and offset (Y intercept) determined through a calibration process. See CheapStat Current Scaling.

Installation and Use

There are two different ways to use ChemCharts (specifically, to use Potentiostat Chart):

As a local file
You can open the file potentiostat_chart.html by entering a file URL in your browser’s address bar, such as file:///c:/some path/chemcharts/potentiostat_chart.html for a Windows file, or by dragging the file and dropping it onto an open browser window or tab.
This method of using ChemCharts works for the Firefox browser [1], Microsoft Edge (but only by using a file URL, not by using drag-and-drop) [2], and possibly some others, but not for Google Chrome [3] or Opera [4] which, once a data file has been selected, generate the error message that the ChemCharts script file “has been blocked by CORS [Cross-Origin Resource Sharing] policy.”
From a web server
The preferred way to use ChemCharts is to access its pages via a web server.

If you are using ChemCharts in an institutional environment (e.g., a university or business), ask your technical services department to install the ChemCharts files on a web server for you.

If you are a non-institutional user, or if you would prefer to use ChemCharts on your own desktop or laptop computer rather than from an institutional server, you can install the ChemCharts files in the public files area of a web server on your local machine. If your computer is running Apple’s MacOS or OS X or Linux, the Apache web server is probably already installed. If your computer is a Windows machine, you can download and install XAMPP, a free (open source), easy-to-install Apache distribution. Assuming you install XAMPP in the root folder of your C: drive, copy the chemcharts directory (along with the files and sub-directories it contains) to C:\xampp\htdocs\. You should then be able to run ChemCharts by entering the URL \localhost\chemcharts\ in your browser’s address bar.
You could also use ChemCharts by accessing it on a remote server. ChemCharts is hosted by the Augustana Faculty of the University of Alberta (Canada) at https://wagner.augustana.ualberta.ca/chemcharts/. This is a convenient way to use ChemCharts, but it does not allow you to extend or modify the software to suit your particular needs (see Customization below).

Customization

Because this software package is licensed under the Apache License (see below), you are allowed to freely use, modify, and distribute this software product.

In order to extend or modify the software, you will have to know quite a bit about HTML, JavaScript [ECMAScript], jQuery, and Google Charts.

However, there are some options that can be selected or modified without knowing too much about any of the above-listed languages or software packages. There are a few options you might want to change:

Size of the chart
The size of the chart area that Google Charts will use to draw the chart is set in the file css/styles.css. The width and height of the chart area are specified in the #chart_div section of this file. Chart sizes of 1024 x 576 [the default] or 1080 x 600 work well if you have a fairly large screen. You might need to specify a smaller chart size if you are working on a small laptop, for example.
How to calculate the average of a range of numbers
When a potentiostat data file is loaded, ChemCharts scans the data to find the data points with the maximum and minimum Y values—the peaks and valleys of the scatter chart—and marks these points on the graph with upward- and downward-pointing red triangles. It also calculates the X offset between the maximum and minimum peaks (i.e., the highest peak and the lowest valley).
However, in some data sets, there are multiple maximum and/or minimum points. To calculate the X offset between the maximum peak and the minimum valley, ChemCharts has to select a single X coordinate as the average of the X coordinates of the multiple points with the same maximal or minimal Y coordinate.
You can choose to have ChemCharts calculate the average X coordinate as the mean or the median of the X coordinates of the multiple points with the same maximum or minimum Y value by setting the value of the variable average in the file chemcharts_main.js to either math.mean or math.median [the default]. (The math part of these values refers to the Math.js library that is loaded in potentiostat_chart.html. This math library provides the functions math.mean and math.median.)
The size, shape, and color of points in the chart
The size and shape of the points in the scatter chart can be changed by editing the values of the pointSize and pointShape attributes of the scatter_chart_options variable in chemcharts_main.js.
The sizes, shapes, and colors of points marked (or, in Google Charts terminology, “decorated”) as minimum or maximum X or Y values, the start and end of a line, or points selected by the user for which the distance to the line should be calculated can be changed by editing the constants MIN_MAX_PT_SHAPE, MIN_MAX_PT_COLOR, etc., in the file chemcharts_main.js. I suggest that you not change the shape of the min/max points, because the JavaScript code in chemcharts_main.js rotates the [default] triangle shape to point up, down, left, or right to mark the points with maximum and minimum X and Y values. However, you might want to change the size and colors of these “decorated” points if they don’t show up very well on your screen or monitor.

Copyright and Licenses

ChemCharts

Licensed under the Apache License, Version 2.0 (the “License”); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Version: 1.4.5

Date: 2020-11-19

jQuery JavaScript library

Released under the MIT License (MIT), a short, permissive software license. Basically, you can do whatever you want as long as you include the original copyright and license notice in any copy of the software/source.

https://jquery.org/license

See https://jquery.com/