However, the problem with JSXGraph is it involves a large footprint (167 kB of script, even after compression by gzip), which is a killer for mobile devices, especially if you just want to plot a simple graph on your Web page. Yes, the js file is cached by the browser, but a lot of first-time users will hit the back button rather than waiting for a large download. <\/p>\n
Another issue is there is already too much javascript on my pages (and on the Web generally). A typical IntMath page involves:<\/p>\n
- \n
- jQuery<\/strong> for a lot of interaction (92 kB compressed);<\/li>\n
- KaTeX<\/strong> (34 kB) or MathJax<\/strong> (160 kB) for displaying mathematics (I mostly use KaTeX these days);<\/li>\n
- Google ads<\/strong> pull in a whole lot more javascript (it varies on each page, but 400 kB is common).<\/li>\n
- Google Analytics <\/strong>(for optimizing the site, about 18 kB) <\/li>\n<\/ol>\n
All that javascript means a lot to download<\/strong> (more than 50% of the total download for most pages) and puts a load on your device's processor<\/strong>, especially noticeable when viewed on mobile devices. I try to have the minimum amount of javascript on the site (particularly the mobile version), to reduce page load times and processor overhead, but it's a challenge. <\/p>\n
Another issue is that most of the graphs on IntMath don't need to be interactive<\/strong>. The purpose of many of the graphs is to illustrate a concept, or to show main features of a function. So there's no need for a large chunk of javascript, designed for interactivity, just to show a static graph. <\/p>\n
The grapher brief<\/h2>\n
My aim was to produce a grapher with the following characteristics:<\/p>\n
- \n
- Small page load time<\/li>\n
- Not javascript based<\/li>\n
- All the grunt work would be done on the server (not the client device) <\/li>\n
- Produced good looking graphs<\/li>\n
- Displays axis variables (How often did your math teach tell you to "label your axes"? Most graphing software does not include this feature.) <\/li>\n
- Relatively easy to use<\/li>\n<\/ul>\n
Enter svgPHPGrapher... <\/p>\n
svgPHPGrapher<\/h2>\n
svgPHPGrapher<\/em> is based on Peter Jipsen's ASCIIsvg.js, which is a javascript-based SVG (scalable vector graphics) grapher. When he first published this script (around 2005), svg support in browsers was very rudimentary (IE didn't support it at all, of course), so it couldn't be reliably used. But now, all major browsers support svg, including those on mobile devices. <\/p>\n
svgPHPGrapher<\/em> is a highly modificed PHP port of the ASCIIsvg javascript codebase. <\/p>\n
The idea is that some PHP code on your PHP page calls some functions, which create an svg-based image, and it's then printed out to the page. The processing "work" is done on the server, and immediately output. This creates a slightly larger HTML page, but there is no separate file to download, and no javascript involved.<\/p>\n
There is also the option to cache graphs, so if they take a lot of processing time. it needs to only happen once (by the first visitor) and subsequent visitors will see the cached svg image. <\/p>\n
What is SVG?<\/h2>\n
SVG stands for "scalable vector graphics" and it's a method for producing crisp, good looking images at any resolution. Older image formats like GIF, PNG and JPEG are made up of a collection of colored pixels in fixed positions. When you zoom in on such images, you see pixelated edges. But in the case of SVG images, the edges remain crisp. (This is desirable in this age of mobile devices with retina screens, and the requirement to produce scalable images for different screen sizes.)<\/p>\n
For example, here are screen shots from a zoomed-in SVG image (on the left), where you can see the fonts and curves are smooth and attractive, while the one on the right is a zoomed in PNG image of the same subject matter. You can see the shape edges are quite ugly, and the fonts are no better. <\/p>\n
![\"SVG](\"\/blog\/wp-content\/images\/2015\/09\/svg-zoom.png\")
![\"Non-SVG](\"\/blog\/wp-content\/images\/2015\/09\/non-svg-zoom2.png\")
<\/p>\nSVG allows you to describe an image mathematically. For example, an ellipse is created using:<\/p>\n
<ellipse stroke="#165a71" stroke-width="3" fill="#5a9fb5" opacity="0.5" cx = "77.222" cy = "153" rx = "31" ry = "62" ><\/ellipse> <\/code><\/p>\nThe first part includes instructions for colors of edges and the inside (fill), and the last parts describe the center of the ellipse and how far the ellipse extends in the x<\/em>- and y<\/em>- directions. <\/p>\n
By defining shapes in this way, the resulting file size is smaller than a PNG or GIF, and takes less download time.<\/p>\n
Examples<\/h2>\n
Here are some example output graphs. They are real SVG images (not screen shots). You can zoom in on them to see the crisp edges I was talking about above.<\/p>\n
Function Graphs<\/h3>\n
Here's a plot of the hyperbolic cosine function y<\/em> = <\/em>cosh (x<\/em>) . <\/span> (A catenary is the shape traced out by a chain or a rope hanging from 2 fixed points.) <\/p>\n
\n
- KaTeX<\/strong> (34 kB) or MathJax<\/strong> (160 kB) for displaying mathematics (I mostly use KaTeX these days);<\/li>\n