Digitize Charts#

Highlevel Workflow#

  1. Load image file or PDF document.
  2. Select the appropriate axes type (e.g. XY, Bar, Polar etc.) and follow steps to calibrate the axes.
  3. Click on data points manually or setup an auto-extraction algorithm.
  4. Export digitized values as a CSV or copy and paste to another tool.

To setup auto-extraction algorithms:

  1. Use the mask tools like box, pen and erase to paint over the data points / curves / bars and define the region of interest (ROI).
  2. Select the approximate color and color distance.
  3. Specify the algorithm and parameters. Refine parameters or repeat previous steps as necessary.

Loading Images#

There are multiple ways to load an image or a PDF document into WebPlotDigitizer:

  • Drag & Drop: Image can be dragged and dropped from the file browser on to the image viewing area of the application.
  • File Menu -> Load Image: Browse for a file on the hard disk to load.
  • Copy-Paste from Clipboard: An image selected by copying in a PDF or an image viewer can be pasted on to the software via a simple copy-paste operation.

Supported Image and Document Formats#

  • Images: WebPlotDigitizer relies on the image formats supported by the HTML5 canvas element. Most browsers support common image formats such as JPEG, PNG, BMP and GIF. For popular browsers, you can refer to Wikipedia for a list of supported image formats.
  • PDF: WebPlotDigitizer supports loading multipage PDF documents.
  • TIFF: Tiff documents are not yet supported. Please convert these images to JPG or PNG format.

Axes Calibration#

Input Format for Calibration Values#

Like most computer programs, WebPlotDigitizer accepts integers (e.g. 1, 2, 3 etc.) or floating point numbers (e.g. 3.14159). Some extra things to keep in mind are as follows:

  • Fractions: Fractions are not computed as numbers. Entering 1/2 (for example), will not be considered as 0.5.
  • Exponentials: The caret symbol (^) is not recognized and the values have to be entered as 1.45e-10 for 1.45 x 10-10 (for example).
  • Dates: Dates have to be entered in the format shown below during calibration. Note that final digitized values can be formatted in multiple formats as shown here.
Date Format Examples
Year, Month, Date and Time yyyy/mm/dd hh:ii:ss 2012/10/23 05:11:06.25
Year, Month, Date and Hour yyyy/mm/dd hh 2012/10/23 05
Year, Month and Date yyyy/mm/dd 2012/10/23, 2012/10/5 or 2012/10/05
Year, Month yyyy/mm 2012/10 or 1989/5
Year yyyy 2012

Calibrate 2D XY Axes#

Screenshot of XY Calibration

Calibration Steps:

  1. Click on four points with known values to calibrate the axes:
    • Two points on one of the axes and two on the other axis (x1, x2, y1, y2).
    • For better accuracy during the digitization process, pick the points that are as far away from each other as possible
  2. Enter the values at (x1, x2) and (y1, y2) into the sidebar on the right:
    • Select the appropriate scale: linear, log or date axis
    • For dates and exponential values (e.g. 10^-5), please enter the values in the required input format.
  3. Click the Calibrate button to save the calibration

For best accuracy, you may want to make fine adjustments to the location of the calibration points:

  • Keyboard: Select the point with your mouse/touchpad and then press arrow keys to move the point. SHIFT+arrow keys makes the points move faster
  • Drag with mouse/touchpad: After all 4 points have been selected, you can also drag the calibration points with your mouse/touchpad
  • Zooming into the image can help improve the accuracy

Calibrate Bar Chart Axes#

Screenshot of Bar Calibration

  1. Select the Bar Chart option when calibrating the axes and follow the instructions to select two points on the continuously varying data axis that is along the bars.
  2. Specify the values at these two points so that WebPlotDigitizer can map any pixel location in the image to the corresponding data value.

NOTE: Bar Charts vs. Histograms

The bar chart axes is suited to typical bar charts where one axis has discrete categories (e.g. Apple, Banana etc.) and the other axis has continuously varying values (e.g. Quantity).

For histograms, the data is represented using bars but both the axes have continuously varying values. Use the 2D (X-Y) Plot axes for calibrating histograms.

Calibrate Polar Diagram Axes#

Screenshot of Polar Calibration

  1. Provide three known points including the center of the polar diagram as shown in the screenshot above.
  2. Select the axes orientation and the angle units. For log-polar diagrams, you can select the log scale option in the radial direction. Dates cannot be used for values for polar plots (yet).

Calibrate Ternary Diagram Axes#

Screenshot of Ternary Calibration

Mark the three corners as shown in the instructions and then specify the range of variables and orientation of the diagram.

Calibrating Maps/Microscope Images#

This axes type can be used for images that only have a reference scale (e.g. microscope images or maps).

  • Click on the two ends of the scale bar and enter the scale value. You can also specify the label to be used for the unit.
  • The origin for the values is assumed to be located at the top left of the image with positive y-axis pointing downwards. The (x,y) values for the digitized points are scaled using the value entered during calibration.

Image Calibration (Align to Image Pixels)#

Use this plot type to work with generic images. If you select this type, the software will just do a 1:1 mapping from the image pixels to data values. This plot type is useful when the exact pixel locations of the image features are required instead of them mapped to some other scale.

Circular Chart Recorder Calibration#

Screenshot of CCR Calibration

Circular chart recorder data is plotted on a circular chart by a fixed pen which is also moving in a circular path. To map the image pixels to data values for this, we need to estimate the center and scaling for the circular motion of the chart paper and the pen.

To do this mapping, 5 distinct points are needed to be specified (also shown in the screenshot above):

  • First three points are used to locate the pen so they must lie on the same time axis, but with varying radial positions.
  • The next two points are used to locate the chart center. These points should be specified at the same radial position as the third point in the previous step but at different times. For best accuracy, select points as far apart from each other as possible.
  • Adjust points until the green arc aligns well with the radial axis and the red circle aligns with the circular time axis as shown in the screenshot.

Once the points are selected, specify the rotation direction of the chart paper, total rotation time and the starting time for the recorder in the right sidebar.

Grid Removal#

  1. Select the "Remove Grid" option from the Axes item in the left sidebar.

  2. A new set of controls will appear on the right side of the interface.

  3. Define the region of interest (optional):

    • Click the "Box" button.
    • Mark a rectangular region on the image where you want to perform grid removal.
    • Use the "Clear" button to delete the selection if needed.
    • The "View" button displays the box selection.

  4. Select the grid color:

    • Click the "Pick" button.
    • Specify the color of the grid lines.
    • If "Background Mode" is unchecked, select the foreground color of the grid lines.
    • Adjust the color distance value next to the "Pick" button for better detection.
    • Use the "Test" button to check the color detection.

  5. Set horizontal and vertical parameters:

    • Adjust the "X%" and "Y%" values to specify the percentage of height or width taken up by grid lines.
    • Use higher values for solid lines and lower values for dotted or dashed lines.
    • Uncheck the horizontal or vertical option to turn off detection in that direction.

  6. Run the grid removal:

    • Click the "Detect" button to execute the grid removal process.

  7. Fine-tune the results:

    • If the results are not satisfactory, adjust the parameters and click "Detect" again.
    • Use the "Reset" button to restore the original image if needed.

Remember that the default settings are optimized for charts with solid horizontal and vertical black grid lines. You may need to experiment with different settings for best results on your specific image.

Data Extraction#

Manual Data Extraction#

Use Manual data extraction controls to manually click on data points of interest, delete them, or adjust their positions. These controls are useful for capturing a small number of data points or adjusting the output of an automatic extraction algorithms.

  1. Add Point (A):

    • Click the "Add Point" button or press the ‘A’ key.
    • Click in the image area to add data points.
    • Any point added on the image will automatically be converted from on-screen pixels to data values using the axes calibration.

  2. Adjust Point (S):

    • Click the "Adjust Point" button or press the ‘S’ key.
    • Click on an existing data point to select it.
    • Reposition the selected point using the cursor keys on the keyboard. Press Shift+Cursor key for a faster rate of movement.

  3. Delete Point (D):

    • Click the "Delete Point" button or press the ‘D’ key.
    • Click on a previously added data point to delete it.

  4. Clear Data:

    • Click the "Clear Data" button on the left sidebar.
    • This deletes all data points added on the image for the current dataset but does not clear the axes calibration.

  5. View Data:

    • Click the "View Data" button on the left sidebar.
    • This shows a popup dialog where the collected data can be viewed, exported to a CSV file, or plotted using Plotly.

  6. Edit Labels (only for 2D Bar Plots):

    • Click the "Edit Labels" button.
    • Edit the labels for data points by clicking on them.

Automatic Data Extraction Algorithms#

WebPlotDigitizer provides various automatic data extraction algorithms to facilitate the efficient digitization of data from images. These algorithms primarily rely on distinguishing the color of data points or curves from the background. Here’s a summary of how to set up these algorithms:

1. Define a Region of Interest (RoI)#

  • Tools: Use the Box, Pen, and Erase tools to mark the area containing the data of interest.
  • Purpose: This step limits the algorithm's search to the specified region, improving accuracy and performance. If skipped, the entire image is used.

2. Color Selection#

  • Color Picker: Use the color picker to select the color of the data points or curves.
  • Foreground/Background: Specify either the foreground color (color of the markers/curves) or the background color (everything other than the background is considered useful data).
  • Color Distance: Adjust the color distance and use the Filter button to test the color selection.

3. Choose and Configure an Algorithm#

  • Averaging Window:
    • Usage: Suitable for continuous curves and spaced data points.
    • Parameters: Adjust the size of the moving window (∆X and ∆Y) based on the thickness of the curves or size of the data points.
  • X Step with Interpolation:
    • Usage: Available for 2D (X-Y) axes plots; identifies data points at regular X-axis intervals.
    • Parameters: Specify the interval (∆X) and use cubic splines for interpolation. Adjust smoothing for noisy plots.
  • Custom Independents:
    • Usage: Available for 2D (X-Y) axes plots (without dates); allows specifying custom X values.
    • Parameters: Enter X values in square brackets (e.g., [1, 2, 3, 4]) and adjust Curve Width for thicker curves.
  • X Step:
    • Usage: A simplified version of X Step with Interpolation, without cubic splines.
    • Parameters: Adjust Line Width for the y-direction thickness of the curve.
  • Template Matching:
    • Usage: Useful for dense scatter plots and multiple markers of the same color but different shapes.
    • Templates: Specify a template by clicking near a sample marker or drawing a bounding box.
    • Threshold: Adjust the matching threshold to control the detection sensitivity.
  • Bar Charts and Histograms:
    • Parameters: Adjust ∆X for multiple detections per bar and ∆Val for noisy charts.
  • Blob Detector:
    • Usage: Counts objects, determines centroids, calculates areas, and first moments of continuous objects.
    • Parameters: Define Min Diameter and Max Diameter for the objects to be detected.