Javascript or otherwise for math diagrams?

amca · April 6, 2018, 11:15am

This may be a very niche query, but I’ll ask it anyway. I’m looking for some way of including mathematical diagrams in my posts. Mathjax doesn’t handle diagrams, so I’d need to use a javascript library, something like mathbox, JSXGraph or vis.js. I’m wondering which of these people can recommend, and which is most likely to “play nice” with Hugo? (Or are all javascript libraries the same, from a Hugo perspective?)

I can always create diagrams locally and include them as screenshots, but that’s clumsy, and never looks as nice as a crisp diagram created on the page, so to speak.

Thanks,
Alasdair

RickCogley · April 6, 2018, 11:17am

It’s agnostic in terms of that.

amca · April 6, 2018, 11:19am

Thanks - that’s what I’d guessed, so thank you for confirming it!

divinerites · April 6, 2018, 12:12pm

I’m using http://www.chartjs.org/ but they need the javascript to be “ready” with data and all.
So I’m finishing to write shortcodes to automate CSV files process, so Hugo does all the job for creating the javascript.
As RickGogley said, hugo is just a code generator in that case.

I’ll publish it on discourse when it is ready to be shown (my repository is not a public one)

amca · April 8, 2018, 12:49am

Thanks for that - from a brief hunt about I think that JSXGraph is probably my best bet… I’ll see how I go incorporating it into Hugo. As far as I can tell it’s just a matter of dropping a js and a css file in the right places. (And then using it…) When (and if…) I get round to it I’ll yet you know!

amca · April 14, 2018, 4:08am

Well, I’ve finally got around to trying JSXGraph. I’ve included the script for in the layouts/partials/head.html file of the theme I’m using (Blackburn), right underneath the script that calls mathjax. In my post I’ve tried the code block listed at https://jsxgraph.uni-bayreuth.de/wiki/index.php/Howto_include_JSXGraph_into_web_pages. But all I get is a square in my post which is empty - no JSXGraph material is seen.

I wonder if you would be able to let me know how you included ChartJS in your own blog? Thanks!

RickCogley · April 14, 2018, 6:09am

@amca when you look at the javascript console in your browser, perhaps you can see an error that gives you a hint.

Anecdotal ideas that may or may not help:

is the script conflicting with something else
is the script’s path correct so it’s actually loading
javascripts often target id’s on div elements and one typical flub is to spel the id wrong

divinerites · April 14, 2018, 9:22am

Here is my setup @amca

I have Chart.js scripts in my <head>

<head>
   ...
    <script src="/js/Chart.bundle.js"></script>
    <script src="/js/utils.js"></script>
</head>

I have code who analyse the csv file and generate a map : {{ $.Scratch.Get "mapStatTotaux" }}
I have a partial who does create the graphic. I’ll put it here, even it not accurate for your library, but you’ll get the idea and exact working code.

I create 4 graphics, put them in 4 canvas and show only one @ a time.

HTH.

<!-- AFFICHAGE DU RENDU DES CHIFFRES DE STATISTIQUES -->
<!-- Utilisé dans les modes : line / bar / horizontalBar / radar -->

<!-- Paramètres de taille des canvas -->
{{ $width := 1100 }}
{{ $height := 800 }}
<!-- Les codes des catégories sélectionnée -->
{{ $varCateg := $.Scratch.Get "dict_CODE_CATEG" }}
{{ $varStats := $.Scratch.Get "dict_CODE_STATS" }}

<br>
<button id="swap1" class="button" style="vertical-align:middle"><span>Mode Bar </span></button>
<button id="swap2" class="button" style="vertical-align:middle"><span>Mode horizontalBar </span></button>
<button id="swap3" class="button" style="vertical-align:middle"><span>Mode Line </span></button>
<button id="swap4" class="button" style="vertical-align:middle"><span>Mode Radar </span></button>
<br><br>

<div id="canvas-holder">
    <canvas id="canvas1" width="{{- $width -}}"  height="{{- $height -}}"></canvas>
    <canvas id="canvas2" width="{{- $width -}}"  height="{{- $height -}}"></canvas>
    <canvas id="canvas3" width="{{- $width -}}"  height="{{- $height -}}"></canvas>
    <canvas id="canvas4" width="{{- $width -}}"  height="{{- $height -}}"></canvas>
</div>

<script>
    var color = Chart.helpers.color;
    var myChartData = {
        labels: [
            {{- range $_key, $_value := $varCateg -}}
                '{{- $_key }} ({{- $_value -}})',
            {{- end -}}
        ],
        datasets: [
            /* on itère sur la map pour chauqe label */
            {{- range $key, $value := ($.Scratch.Get "mapStatTotaux") -}}
                {
                label: "{{ index $varStats $key }}{{- if $.Page.Params.detail_debug -}}({{- $key -}}){{- end -}}",
                backgroundColor: randomColor({ luminosity: 'light', format: 'rgba', alpha: 0.8 }),
                borderColor: window.chartColors.black,
                borderWidth: 1,
                data: [
                    {{- range $value -}}
                        {{- . -}},
                    {{- end -}}
                ]},
            {{- end -}}
        ]
    };
    var myOptions = {
        elements: {
            rectangle: {
                borderWidth: 2,
            }
        },
        responsive: true,
        legend: {
            position: 'bottom',
        },
        title: {
            display: true,
            text: 'Statistiques (somme) par {{ $.Scratch.Get "titre_categ" -}}'
        }
        {{- if eq ($.Scratch.Get "csv_graph_type") "radar" -}}
        ,scale: {
            display: true
        }
        {{- end -}}
    };

    var config1 = {
            type: 'bar',
            data: myChartData,
            options: myOptions
    };
    var config2 = {
            type: 'horizontalBar',
            data: myChartData,
            options: myOptions
    };
    var config3 = {
            type: 'line',
            data: myChartData,
            options: myOptions
    };
    var config4 = {
            type: 'radar',
            data: myChartData,
            options: myOptions,
    };

    window.onload = function() {
        var ctx1 = document.getElementById('canvas1').getContext('2d');
        window.myChart = new Chart(ctx1, config1);
        var ctx2 = document.getElementById('canvas2').getContext('2d');
        window.myChart = new Chart(ctx2, config2);
        var ctx3 = document.getElementById('canvas3').getContext('2d');
        window.myChart = new Chart(ctx3, config3);
        var ctx4 = document.getElementById('canvas4').getContext('2d');
        window.myChart = new Chart(ctx4, config4);
    };

    swap2();

    document.getElementById("swap1").onclick=function(){
        swap1();
    };
    document.getElementById("swap2").onclick=function(){
        swap2();
    };
    document.getElementById("swap3").onclick=function(){
        swap3();
    };
    document.getElementById("swap4").onclick=function(){
        swap4();
    };

    function swap1(){
            canvas1.style.display='block';
            canvas2.style.display='none';
            canvas3.style.display='none';
            canvas4.style.display='none';
    };
    function swap2(){
            canvas1.style.display='none';
            canvas2.style.display='block';
            canvas3.style.display='none';
            canvas4.style.display='none';
    };
    function swap3(){
            canvas1.style.display='none';
            canvas2.style.display='none';
            canvas3.style.display='block';
            canvas4.style.display='none';
    };
    function swap4(){
            canvas1.style.display='none';
            canvas2.style.display='none';
            canvas3.style.display='none';
            canvas4.style.display='block';
    };
</script>

divinerites · April 14, 2018, 9:26am

Oh I forgot, but I have to put the script inline the HTML. Just calling the script doesn’t work.

amca · April 14, 2018, 4:42pm

Many thanks indeed for your code. I don’t fully understand the reason for everything at the moment, but I’ll keep exploring, with your example as a guide. Thank you again!

amca · April 14, 2018, 4:48pm

Thank you; I’ve checked all of those to find nothing I can easily see as an error. It looks as though it’s running fine, except that it’s not! I suspect that it’s the way I’ve called the library in my post, simply with:

<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
 var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10],axis:true});
 board.create('point',[1,1]);
</script>

I may have to wrap all of that in something else to have it render on a page. I’ll keep fiddling…

amca · April 16, 2018, 3:09am

I’ve found a possible source of error. In the conversion to HTML, the identifirer 'box' in the third line of my previous post is turned into

&lsquo;box&rsquo;

which causes the browser to choke on it. At least, when I opened up the browser console, this was an error given. So I need to ensure that this translation of single quote marks into HTML code doesn’t happen… I’ll get back to you.

divinerites · April 16, 2018, 6:48am

I also had to sanitize some JavaScript with safeJS in an other page.

amca · April 17, 2018, 8:12am

I’ve got it all (well mostly) worked out, see

https://numbersandshapes.net/blog/post/exploring_jsxgraph/

for an example. Thank you for all your help!

Topic		Replies	Views
Complete Beginner in Website and Cannot Follow Mathjax Tutorial support typesetting	14	2999	December 27, 2020
Consensus on script to include asciidoc diagrams in hugo posts support asciidoc	3	815	September 4, 2020
How can I embed math equations in my markdown files support typesetting	6	1263	January 28, 2024
What is the canonical way to enable LaTex? support typesetting	10	4116	May 24, 2022
Simple graphs	6	3783	July 14, 2020

Javascript or otherwise for math diagrams?

Related topics