Javascript or otherwise for math diagrams?


#1

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


#2

It’s agnostic in terms of that.


#3

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


#4

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)


#5

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!


#6

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!


#7

@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

#8

Here is my setup @amca

  1. I have Chart.js scripts in my <head>
<head>
   ...
    <script src="/js/Chart.bundle.js"></script>
    <script src="/js/utils.js"></script>
</head>
  1. I have code who analyse the csv file and generate a map : {{ $.Scratch.Get "mapStatTotaux" }}

  2. 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>

#9

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


#10

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!


#11

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…


#12

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.


#13

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


#14

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!