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.


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:



Your screen should now look like this:


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.


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.


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.


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.


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.


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


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



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.


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


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


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.


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.


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


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.


Now your screen should look like this again:


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.


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


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.


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


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


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