3

I'd like to convert a simple piece of LaTeX code which is basically some text with some centered graphs in between. This is a dummy version of the code I'd like to convert to HTML:

\documentclass{article}
\usepackage{lmodern}
\usepackage{pgfplots}
\usepackage{lipsum}
\pgfplotsset{compat=1.9}

\begin{document}
\lipsum
\begin{center}
    \begin{tikzpicture}
        \begin{axis}[
            ybar stacked,
            ymin=0, ymax=35,
            width=9cm,
            height=6cm,
            symbolic x coords={Zimbabwe, France, Italy, Kenya, Germany},
            xtick=data,
            bar width=15pt,
            axis lines*=left,
            ytick={0,5,...,35},
            xticklabel style={
                text height=1.5ex,font=\footnotesize
            },
            yticklabel style={
                font=\footnotesize
            },
            ymajorgrids,
            xlabel={ ... ... ... ... ... , 2004-2009},
            xlabel style={yshift=5.8cm,xshift=.9cm},
            ]
            \addplot[fill=gray!50] coordinates {
                (Zimbabwe,16)
                (France,30)
                (Italy,10)
                (Kenya,5)
                (Germany,20)
            };
        \end{axis}
    \end{tikzpicture}
\end{center}
\end{document}

I tired with latex4ht, which I used in the past, but it seems that it does not work with the PGFplot code.

So my question is: how do you convert PGFplot graphs to html? Thanks for your help

3

There is a lot of ways to get html and svg graphics with tikz and tex4ht. In my opinion, best way is to use tikz externalization library to do the conversion. With this library, standalone pdf image is created for every tikz picture, and some external command can then be used to convert this pdf image to svg. I had great success with inkscape doing this job, with other applications, like imagemagick I found some problems and result was not correct. So you need to install inkscape in order to get this working.

First, create package which will set externalization for us, myexternalize.sty:

\usetikzlibrary{external}
\tikzset{
    tex4ht inc/.style={
        /pgf/images/include external/.code={%
            \includegraphics[]{##1.svg}%
        }

    }
}

\tikzset{
 external/system call/.add={}                                                
      {; inkscape -z -f "\image.pdf" -l "\image.svg"
            }    
}
\@ifpackageloaded{tex4ht}{
    \tikzexternalize[mode=only graphics]
    \tikzset{tex4ht inc}
}{
    \tikzexternalize
}

This package creates new tikz style, tex4ht inc, which will be used with tex4ht. With pdflatex, pdf file is exported and inscape is called in command line mode to convert this pdf image to svg.

Now we need some configuration for tex4ht, in order to be able to include svg images, file myexternalize.4ht:

\Configure{graphics*}  
         {svg}{  
          {\Configure{Needs}{File: \Gin@base.svg}\Needs{}}
          \Picture[\csname a:GraphicsAlt\endcsname]{\csname Gin@base\endcsname.svg \csname a:Gin-dim\endcsname}%  
         }  

now you can include myexternalize package in your document:

\documentclass{article}
\usepackage{lmodern}
\usepackage{pgfplots}
\usepackage{lipsum}
\pgfplotsset{compat=1.9}
\usepackage{myexternalize}
....

and then compile the document with

pdflatex -shell-escape documentname

to get svg files. -shell-escape option is important, otherwise conversion cant work! now you can compile file to html:

htlatex documentname

you can see the result here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.