GraphThoughts

Graph Thoughts

Plotting nice graphs is not easy. Mine look clumsy and I am trying to work out how to improve them.

At work you used Microsoft EXCEL, the default graphs are reasonable. However if you generate the data in a CSV file, and import to EXCEL,it locks the CSV file, so you cannot dynamicaly update the data.

You could write a macro to format and title and reload the data.

I like using the HTML CANVAS and import data and process using javascript. http://www.dougrice.plus.com/dev/graphs/graphPi.htm imports measurements from two rapsberry Pi. A cron job triggers a measurement every 15 minutes.

Tips to make them look better.

• CSS has Margin, border, padding. Use these to position the graph.
• 2 x margin = ( width - step * interval ) , where step is based on the data to be plotted

• pick colors carefully
• A graticule needs to be grey or thin lines, so it does not swamp or dominate
• data lines need bolder lines to stand out

• have a border and ticks.
• A keyline border can help
• consider backgrounds using pastle shades

• The ticks should be spaced to aid understanding of the plotted data
• The ticks should be plotted starting from the base line towards the edges
• Keep the number of major ticks to between 5 and 20 so you can understand them
• Scopes used x1,x2,x5 and mV,V,10V,100V

• At school, the Y-axis went up
• Most screens, 0,0 is top left, so Y goes down
• You need to scale and offset the X and Y
• scan the data for min and max to work out the scale factors
• Quantise dataMin and dataMax to suit the graph ticks and graticule
• scaleFactor = (value-dataMin)/(dataMax-dataMin)*(plotterMax-plotterMin)
• an offset is needed

• One gotcha:- Quantize the imtermediate calulations.
• I was using GD to resize a photo by multiplying x by a ratio to get y.
• Quantize y to an integer so boxes use integer width and height
• I had to quantize the results so that the new x and y were integers so my keyline borders fitted.

• use a clipping window, so lines remain in the box

• work out how to organise the data
• CSV lists of data points

• I can write a file filled with data
• I wrap the data in a JavaScript? function call. dataF("csvlist,0,2,3,5,4")

• The Webpage does not lock the file, so your data generator can append new data
• Import this file in a webpage run off the desktop
• Use JavaScript? to process it and present it

My graphics history

My second computer was the NASCOM 2. It had a very limited graphics, back and white 180x75 and used BASIC.

You could draw graphs on a printer by padding out the left of the line and printing * or +

 20 PRINT TAB(40+SIN(A)*20);"*"

You really need functions and procedures so Microsoft 8K Basic and my code went nowhere.

What does GOSUB 2000 mean? There was no REM statement at 2000 saying what the subroutine did!

The NASCOM used Tape for storage and did not have a file system. I suppose I could have printed to tape and read off the tape.

In the early 1980's I brought a Tandy CGP115 plotter that could be used with the Nascom 2.

http://tandy.wiki/CGP-115 - tandy CGP115 four colour plotter

http://www.dougrice.plus.com/dev/UART/UART2_Plotter.htm part-emulates the CGP115 Tandy plotter using HTML CANVAS.

I brought a copy of TurboPascal? that ran on an Amstrad 664 and another copy for the IBM XT computer.

I was clearing out and found the Turbo Pascal 3.0 manual, and thought why not write a sampler in Turbo Pascal Graphics.

http://www.dougrice.plus.com/dev/graphs/GPHDEMO.PAS is a demo using TurboPascal? 3.0

Turbo Pascal 3.0 was floppy based, so it kept the program in memory and compiled from memory. You only had to save occasionally.

It was Turbo for the time!

Turbo Pascal offered a screen size of 640x200 and in Hi Res mode you could plot in black and white.

The "black" could be one of the 16 dos colours.

The "White" was green.

It had a 320x200 mode that offered more colours.

Later on Borland Pascal and C used BGI and VGA resolutions.

green on yellow:

To center the graph, you need to work out m, based on width, step, interval

  | m | step x interval | m |
  |         width           |

  // horizontal
  width = 640
  step = 10
  interval = 55 ticks

  m = ( width - step x inteval ) / 2

Else work out from the middle.

Graphs in Text books

When you look at 1970's text books and technical papers that are printed black and white.

The graphs tend to have border and ticks.

Possibly, they had a base line for each axis.

The ticks should be plotted starting from the base line towards the edges.

If the graph has a graticule, it needs to be grey, not black.

HTML CANVAS and SVG offer plotting on web pages.

I import the data in a function call, and plot it.

I can import a file of Javascript functions written by a batch file and plot, possibly use a timer to refresh.

You end up with a scale factor and offset to map your data onto the media.

I suppose you can scan the data and find the MIN and MAX for X and Y and the media dimensions to calculate the fiddle factor.

GD and LUA

20 years ago PHP and LUA had API that used the GD library.

http://www.dougrice.plus.com/Erlangs/adsl.htm used LUA and GD to plot data.

http://www.dougrice.plus.com/Erlangs/adsl_Appendix.htm#l24 - has links to LUA and GD documentation.

https://www.ittner.com.br/lua-gd/manual.html - GD manual for LUA.

I suppose a knowledge of Technical drawing might equip you to lay out a diagram. A graphics and art degree could help with picking colours.

HTML CANVAS and JavaScript?

The HTML CANVAS provides a way to plot graphs.

The image can be saved a png file

http://www.dougrice.plus.com/dev/graphs/graph1sample.htm

http://www.dougrice.plus.com/dev/graphs/graphPi.htm - plots temperatures

You have use the techniques used in TurboPascal? or use a library like flot.

FLOT

I was told about FLOT a long time ago: https://www.flotcharts.org/

Using FLOT: http://www.dougrice.plus.com/dev/dtmfCode/pcm2/flotscope.htm

HTML offers the CANVAS, and you have to use JavaScript? which I used in the example above.

It was not obvious how to use it as there is no HTML to write to the CANVAS. You have to use JavaScript?.

I was looking at how Tommy Thorn's Nascom 2 emulator worked.

http://www.dougrice.plus.com/nascom2/JavaScriptNascom2/jsnascom.html

drawScreenByte?() in http://www.dougrice.plus.com/nascom2/JavaScriptNascom2/nascom.js uses HTML CANVAS.

https://www.w3schools.com/html/html5_canvas.asp is a really good place to learn about it.

http://www.dougrice.plus.com/dev/graphs/graph1sample.htm tries to write some simple graphs.

http://www.dougrice.plus.com/dev/graphs/graph1pie.htm does a pi chart.

You can use SVG:

 http://www.dougrice.plus.com/rt004/sr3/reportSVG.svg

http://ccgi.dougrice.plus.com/cgi-bin/wiki.pl?Webpages_And_JavaScript_Simulations has some experiments

GD and PHP

PHP supports the GD graphics and is enabled on some web servers. I wrote a script that would plot data uploaded in the query string.

http://www.dougrice.plus.com/rt004/sr3/pnggraph.php.txt

Example

http://ccgi.dougrice.plus.com/pnggraph.php?key=yValues,yValues1,yValues2,yValues3,yValues4,yValues5&title=title&xScale=small+text&yScale=small+text&xLabel=LabelText&yLabel=LabelText&yValues=1.3,2,1,1.2,4.5&yValues1=1.4,3.1,2.3,4.1,5&yValues2=0.5,2,3,4,5&yValues3=4.5,2,3,1.4,1.1&yValues4=1,2.9,1.3,4.5,2.5&yValues5=3,4,3.5,4.5,2.5

http://www.dougrice.plus.com/g.htm collects some examples.

http://www.dougrice.plus.com/rt004/sr3/reportCsv.htm

http://ccgi.dougrice.plus.com/cgi-bin/wiki.pl?OnlineTools has examples.

I downloaded this using a right mouse click.

conclusions

Using some consideration of placing the graph on the paper makes it look better.

To center the graph, you need to work out margin m, based on width, step and interval

  | m | step x interval | m |
  |         width           |

  m = ( width - step x inteval ) / 2

One gotcha when using GD to resize and add a keyline border was multiplying by a ratio and not making the result and integer.

Pick colours so that the data lines are not swamped by the clutter of a gris or ticks and keyline boxes.

FLOT was a useful find.

Preparing photos for display has helped.