Tutorial 4: Convert Line Chart (colored dashed lines)

This tutorial shows how to convert a line chart with colored dashed curves to data. First start the Chart2Data App and select the Line / Scatter Chart icon. The tutorial is shown in expert mode (dark blue background). If you start Chart2Data for the first time the app is in Wizard mode by default (dark purple background). You can change the user mode in the App settings. Note: in case you change the user mode during a chart conversion process the new setting will be saved but will not be active since the user mode cannot be changed during a chart conversion process. The new setting will become active once you reach the start page again and choose a chart category.

tutorial_4_1

First open an Image by clicking / tapping on the large folder icon in the image area. You can find the image used for this tutorial in the downloads section. The filename of the image is:

2_colored_dashed_lines_grey_grid.PNG

tutorial_4_2

Your screen should now look like this:

tutorial_4_2b

Now zoom in on the lower left corner by using the two-fingered touch gesture or the Ctrl-Key plus mouse-wheel. Then click / tap the edit-box called Px. coord. y (lower left corner data area) to highlight it.

tutorial_4_3

Next click /tap the lower left corner of the data area in the chart (in this case it’s the origin of the chart) in order to transfer the pixel coordinates into the corresponding edit-boxes. Note: In case you would like to exactly reproduce the results of this tutorial, you have to make sure that you pick the same x- and y-coordinates as shown in this tutorial.

tutorial_4_3b

Then navigate the pointer in the upper right corner of the data area of the chart and click / tap the edit-box called Px. coord. y (upper right corner data area) to highlight it.

tutorial_4_4b

Next click /tap the upper right corner of the data area in the chart in order to transfer the pixel coordinates into the corresponding edit-boxes.

tutorial_4_4c

Let’s continue with setting the limits of the x- and y-scales. We start with lower limit value of the y-scale. Click / tap the edit box called y-Value (lower limit scale) and set it to “0” using the (Onscreen-)Keyboard.

tutorial_4_5

Now we set the upper scale limit of the y-axis accordingly to “70”.

tutorial_4_6

Now let’s continue to set the scale limits for the x-axis.

tutorial_4_7

tutorial_4_8

Now we choose the color of the line, we want to convert by clicking twice on the checkbox Remove color. This will active the preserve color function (the name of the checkbox is changed to Preserver color). Since our job is to convert dashed lines, we have to convert the chart curve by curve. It is explained below why we cannot do this in one step using the multiple lines options.

tutorial_4_9

Let’s zoom in on the blue dashed line to pick the color.

tutorial_4_10

Now we can preprocess the image by clicking / tapping on the Next button (arrow pointing to the right).

tutorial_4_11

The image preprocessing my take a while depending on your machine’s processor. On this second screen we do not need to do much, since we already set the correct scale limit values. The scaling of both axes is linear, so we leaving the scaling for both axes at “linear”.

We choose the selection Single curve (column scan) since we need to convert a dashed line. Unforatunately we cannot use the option Multiple curves (column scan) because the pattern recognition algorithm used in the Multiple curves options would not recognize a dashed curve as one curve. Instead it turns each “dash” into an individual curve. Therefore we need to convert our 2 dashed curves chart in two steps as decsribed below.

tutorial_4_12

Now Chart2Data will start the conversion process. This should not not take long, because this conversion options is the fastest, since it only averages the coordinates of all black pixels in a column (or row when using row scan).

When the conversion process is finished, a screen appears prompting for a filename of the output file.

tutorial_4_13

We choose a name for the output file, i. e. line_ouput_dashed_blue.csv.

tutorial_4_14

In the results we can recognize the dash pattern because we find regions with no y-values (NaN), because the chart does not provide any data in these gaps. This is unfortunate but no tragedy. In case you would like to plot the data in a spreadsheet, you can choose “solid line” as plotting option and the gaps will disappear. If you need real numbers for values that are located in a gap you can use interplotation algorihms to fill the gaps.

Now let’s convert the missing second curve. Click / tap twice on the back button (in the upper left corner of the screen) to get back to the image preprocessing page.

tutorial_4_15

Now your screen should look like this again:

tutorial_4_15b

Now click / tap on the Selected Color view control in order to activate the control (a yellow frame will indicate the activation). Move you pointer to the dashed red curve.

tutorial_4_16

Click / tap on a red pixel of the dashes line in order to select the color.

tutorial_4_17

Now only the red dashed curve is preprocessed and turned into a black line. We start the conversion procress again by clicking /tapping the Next button.

tutorial_4_18

We choose the corresponding file name for the output file: line_output_dashed_red.csv

tutorial_4_19

The results page is now showing the results of the second converted dashed line.

tutorial_4_20

Now we can import both output files into our spreadsheet software and plot both curves.