Demo of custom tikzjax

2025.01.05

1 min to read

By customizing tikzjax, we can use Latex with pgfplots to make custom graphs. Imagine we have data like the following (truncated):

    <div class="copy-button-box">
        <button class="copy-button" state="copy" data="Auslenkung,Bx,By,Bz%0a0,-73.1,83.8,10.2%0a5,-46.8,70.2,-1.3%0a10,-27.5,60.5,-4.0">
            <i class="bi bi-copy"></i>
        </button>
    </div>



    <pre><code>Auslenkung,Bx,By,Bz

0,-73.1,83.8,10.2 5,-46.8,70.2,-1.3 10,-27.5,60.5,-4.0

First, we need to use the shortcode {{< tikz/enable >}} to enable tikzjax compilation for this page. Then we use the code

    <div class="copy-button-box">
        <button class="copy-button" state="copy" data="%7b%7b%3c%20tikz/pgf%20%3e%7d%7d%0a%5cpgfplotstableread[col%20sep=comma]%7b%0aAuslenkung,Bx,By,Bz%0a0,-73.1,83.8,10.2%0a5,-46.8,70.2,-1.3%0a10,-27.5,60.5,-4.0%0a15,-16.2,53.5,-4.9%0a20,-5.9,51.2,-5.8%0a25,5.4,50.1,-6.7%0a%7d%5cDataPosOne%0a%5cpgfplotstableread[col%20sep=comma]%7b%0aAuslenkung,Bx,By,Bz%0a0,-25.3,56.0,6.7%0a5,-16.3,52.3,4.8%0a10,-5.0,50.3,3.3%0a15,4.9,49.1,2.3%0a20,15.4,48.8,1.8%0a25,27.8,50.5,1.4%0a%7d%5cDataPosTwo%0a%5ccentering%0a%5cbegin%7btikzpicture%7d%0a%20%20%20%20%5cbegin%7baxis%7d[width=%5ctextwidth,%20legend%20pos=outer%20north%20east,%20legend%20style=%7bcells=%7balign=left%7d%7d]%0a%20%20%20%20%20%20%20%20%5caddplot%20&#43;[only%20marks,%20mark=x,%20blue]%20plot%20table%20[x=Auslenkung,%20y=Bx]%20%7b%5cDataPosOne%7d;%0a%20%20%20%20%20%20%20%20%5caddlegendentry%7bPosition%201%20%280%5c,mm%29%7d;%0a%0a%20%20%20%20%20%20%20%20%5caddplot%20[no%20marks,%20domain=0:10,%20blue!70!white,%20dashed,%20forget%20plot]%20%7b-49.2&#43;2.18*x%7d;%0a%20%20%20%20%20%20%20%20%5caddplot%20[no%20marks,%20domain=10:25,%20blue!70!white]%20%7b-49.2&#43;2.18*x%7d;%0a%20%20%20%20%20%20%20%20%5caddlegendentry%7blin.%20reg.%20of%20pos.%201%20%5c%5c%20%2810%5c,mm%20bis%2025%5c,mm%29%7d;%0a%0a%20%20%20%20%20%20%20%20%5caddplot%20[only%20marks,%20mark=x,%20red]%20plot%20table%20[col%20sep=comma,%20x=Auslenkung,%20y=Bx]%20%7b%5cDataPosTwo%7d;%0a%20%20%20%20%20%20%20%20%5caddlegendentry%7bPosition%202%20%28%5cSI%7b10%7d%7b%5cmm%7d%29%7d;%0a%0a%20%20%20%20%20%20%20%20%5caddplot%20[no%20marks,%20domain=0:25,%20red!70!white]%20%7b-26.2143&#43;2.11714*x%7d;%0a%20%20%20%20%20%20%20%20%5caddlegendentry%7blin.%20reg.%20of%20pos.%202%7d;%0a%20%20%20%20%5cend%7baxis%7d%0a%5cend%7btikzpicture%7d%0a%7b%7b%3c%20/tikz/pgf%20%3e%7d%7d">
            <i class="bi bi-copy"></i>
        </button>
    </div>



    <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span>{{&lt; tikz/pgf &gt;}}

\pgfplotstableread[col sep=comma]{ Auslenkung,Bx,By,Bz 0,-73.1,83.8,10.2 5,-46.8,70.2,-1.3 10,-27.5,60.5,-4.0 15,-16.2,53.5,-4.9 20,-5.9,51.2,-5.8 25,5.4,50.1,-6.7 }\DataPosOne \pgfplotstableread[col sep=comma]{ Auslenkung,Bx,By,Bz 0,-25.3,56.0,6.7 5,-16.3,52.3,4.8 10,-5.0,50.3,3.3 15,4.9,49.1,2.3 20,15.4,48.8,1.8 25,27.8,50.5,1.4 }\DataPosTwo \centering \begin{tikzpicture} \begin{axis}[width=\textwidth, legend pos=outer north east, legend style={cells={align=left}}] \addplot +[only marks, mark=x, blue] plot table [x=Auslenkung, y=Bx] {\DataPosOne}; \addlegendentry{Position 1 (0,mm)}; \addplot [no marks, domain=0:10, blue!70!white, dashed, forget plot] {-49.2+2.18x}; \addplot [no marks, domain=10:25, blue!70!white] {-49.2+2.18x}; \addlegendentry{lin. reg. of pos. 1 \ (10,mm bis 25,mm)}; \addplot [only marks, mark=x, red] plot table [col sep=comma, x=Auslenkung, y=Bx] {\DataPosTwo}; \addlegendentry{Position 2 (\SI{10}{\mm})}; \addplot [no marks, domain=0:25, red!70!white] {-26.2143+2.11714*x}; \addlegendentry{lin. reg. of pos. 2}; \end{axis} \end{tikzpicture} {{< /tikz/pgf >}}

To produce the figure