Javascript or otherwise for math diagrams?

support
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>