Graphic Images, TikZ

Create a graph using tikz.

Return to the PG docs home

Complete Code

Download file: TikZImages.pg

POD for Macro Files

PG problem file

Explanation

DOCUMENT();

loadMacros('PGstandard.pl', 'PGML.pl', 'PGtikz.pl', 'PGcourse.pl');

Preamble

We use PGtikz.pl to generate the graph,

$graph_image = createTikZImage();
$graph_image->tikzLibraries("arrows.meta");

# Randomization
$a = non_zero_random(-6, 6);    # horizonatal translation
$b = random(-4, 4);             # vertical translation

$graph_image->BEGIN_TIKZ
\tikzset{>={Stealth[scale=1.5]}}
\filldraw[
    draw=LightBlue,
    fill=white,
    rounded corners=10pt,
    thick,use as bounding box
] (-11.5,-11.5) rectangle (11.5,11.5);
\draw[<->,thick] (-11,0) -- (11,0) node[above left,outer sep=4pt]{\(x\)};
\draw[<->,thick] (0,-11) -- (0,11) node[below right,outer sep=4pt]{\(y\)};
\foreach \x in {-10,-8,...,-2,2,4,...,10}
    \draw[thin] (\x,5pt) -- (\x,-5pt) node[below]{\(\x\)};
\foreach \y in {-10,-8,...,-2,2,4,...,10}
    \draw[thin] (5pt,\y) -- (-5pt,\y) node[left]{\(\y\)};
\draw[<->,red] plot[domain={-3.2+$a}:{3.2+$a}] (\x,{pow(\x-$a,2)+$b});
END_TIKZ

Setup

  • The createTikZImage() function creates an image to be built using tikz. By default an svg image will be generated, which will generally look better than a png image.
  • In certain cases the svg creation methods do not give the correct output, and so in those cases a png image may be generated instead by adding $graph_image->ext('png');.
  • The command \tikzset{>={Stealth[scale=1.5]}} scales the arrows by a factor of 1.5.
  • The command that starts with \filldraw creates a nice background of the graph with contrast to the rest of the problem page.
  • The $graph_image->tikzLibraries("arrows.meta"); will load the arrows.meta Tikz library.
  • The variables $a and $b are defined for use in the TikZ code that follows. If the TikZ code references non-existent pg variables the image creation fails silently.
  • The actual tikz image is built between $graph_image->BEGIN_TIKZ and END_TIKZ
BEGIN_PGML

>> [@ image($graph_image, width => 400, tex_size => 600) @]* <<

END_PGML

Statement

This is how to insert the tikz image. Note the width and tex_size parameters can change the size of the image on the web and as hardcopy.

  • the width option is the size in pixels of the image on the screen.
  • the tex_size option is the scale factor for hardcopy where 1000 is the full width of either the page or the column. This image will be 60% of the page width.

If the problem times out then often there is a problem with the tikz commands. Troubleshooting is often needed by running the same code in a latex file and compiling it.

BEGIN_PGML_SOLUTION
Solution explanation goes here.
END_PGML_SOLUTION

ENDDOCUMENT();

Solution

A solution should be provided here.