Using the Google Charts API to Embed Equations (Formulas) in a Web Page

A very handy way to embed equations or formulas in a blog or website is to use the Google Charts API. This is an example from their API documentation:

To embed an equation you either need to know TEX or have an equation editor which will export TEX.

For the quadratic equation above, the Tex representation is

x = \frac{-b \pm \sqrt {b^2-4ac}}{2a}

The Google API creates an image from the text string which is passed to an image server. The Tex description of the equation is inserted after 'http://chart.apis.google.com/chart?cht=tx&chl=’. Once you form the link, you can click on it or copy to your web browser address box to see the image.

http://chart.apis.google.com/chart?cht=tx&chl= x = \frac{-b \pm \sqrt {b^2-4ac}}{2a}

Depending on the browser, the spaces and symbols may need to be replaced with escape sequences to directly call the API:

http://chart.apis.google.com/chart?cht=tx&chl=x%20=%20%5Cfrac%7B-b%20%5Cpm%20%5Csqrt%20%7Bb%5E2-4ac%7D%7D%7B2a%7D

To create a chart which is embedded in a webpage, an image tag is used. The image tag points to a source which is a Google server and it is passed information about how to draw the equation. The Tex description of the equation is inserted after 'http://chart.apis.google.com/chart?cht=tx&chl=’

<img align="middle" src="http://chart.apis.google.com/chart?cht=tx&amp;chl= x = \frac{-b \pm \sqrt {b^2-4ac}}{2a}" />

Since this is an image, all of the things that can be done with an image can be done with the rendered equation. The following table shows a few examples which use some features in the API and in image tag. When adding Google API tags, a lot of problems occur if you do not pay attention to how spaces are used.

Tex sequence	Embeddable HTML code	Rendered equation	Notes
x = \frac{-b \pm \sqrt {b^2-4ac}}{2a}	<img align="middle" src="http://chart.apis.google.com/chart?cht=tx&amp;chl= x = \frac{-b \pm \sqrt {b^2-4ac}}{2a}" />
x = \frac{-b \pm \sqrt {b^2-4ac}}{2a}	<img align="middle" src="http://chart.apis.google.com/chart?cht=tx&chf=bg,lg,20,76A4FB,1,FFFFFF,0&amp;chl= x = \frac{-b \pm \sqrt {b^2-4ac}}{2a}" />		Add background coloring
x = \frac{-b \pm \sqrt {b^2-4ac}}{2a}	<img align="middle" src="http://chart.apis.google.com/chart?cht=tx&chco=FF0000& chl= x = \frac{-b \pm \sqrt {b^2-4ac}}{2a}" />		Change text color
x = \frac{-b \pm \sqrt {b^2-4ac}}{2a}	<img align="middle" src="http://chart.apis.google.com/chart?cht=tx&chco=00FF00&chs=75x100&chl= x = \frac{-b \pm \sqrt {b^2-4ac}}{2a}" />		resized chart with different text color
Pr\left(x|y\right)=\frac{Pr\left(x\cap y\right)}{Pr\left(y\right)}	<img align="middle" src="http://chart.apis.google.com/chart?cht=tx&amp;chl=Pr\left(x|y\right)=\frac{Pr\left(x\cap y\right)}{Pr\left(y\right)}}" />		Different equation for comparison
\nabla\times H=J_{f}+\frac{\partial D}{\partial t	<a href="http://en.wikipedia.org/wiki/Maxwell's_equations"><img align="middle" alt="Ampere’s Circuit Law"  src="http://chart.apis.google.com/chart?cht=tx&amp;chl=\nabla\times H=J_{f}+\frac{\partial D}{\partial t/></a>		Using the alt tag to explain the equation. Put the cursor over the equation to get more information. Click on the image to got to a web site with more information.

---

My favorite way to generate Tex for equations

I use LyX as an equation editor. It can be used on Linux, Windows, and Mac computers. A new file can be started in LyX. The equation mode can be started by selecting the equation mode using this button:

By selecting “View>View Source” from the main menu, a preview of the Tex code for the equation appears in the bottom half of the editor. You can create the equation graphically. Once the equation looks good, the Tex code can be copied and combined with the Google API html codes.