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 EXCEL, the default graphs are reasonable. However if you generate the data in a CSV file, and import to EXCEL locks the file. You could write a macro to format and title.

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.

Tips to make them look better.

• CSS has Margin, border, padding.
• 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.
• 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

• You need to scale and offset the X and Y
• scan the data for min and max
• use a clipping window, so lines remain in the box.
• work out how to organise the data
• CSV lists of data points

My graphics history

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

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.

I brought a Tandy plotter that could be used with the Nascom 2.

http://www.dougrice.plus.com/dev/UART/UART2_Plotter.htm part-emulates a Tandy plotter.

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 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 was floppy based, so it kept the program in memory and compiled from memory. You only had to save occasionally.

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 Turbo C used BGI and VGA resolutions.

green on yellow:

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.