21 avril 2020

php & ChartJS: présenter 4 suites mathématiques

Par ghaliano
Afficher la suite de fibonachi en utilisant chartjs et php
Afficher la suite de fibonachi en utilisant chartjs et php

Notre outil pour les diagrammes

Présentation chartJS

Chartjs est une librairie javascript permettant la génération de diagramme simple mais flexible pour les concepteurs et les développeurs et le mélange et faire correspondre les graphiques à barres et à courbes pour fournir une distinction visuelle claire entre les jeux de données.

4 raisons pour utiliser chartJS

Open source: chartJS est un projet communautaire, le code source est ouvert

Immense choix de graphiques : Visualisez vos données de 8 manières différentes; chacun d’eux animé et personnalisable.

HTML5: Excellentes performances de rendu sur tous les navigateurs modernes (IE11 +).

Responsive: Redessine les graphiques lors du redimensionnement de la fenêtre pour une granularité d’échelle parfaite.

On va affiché quoi au juste ?

Enfaite qui dit diagramme dit Data! et dans ce tutorial, on va utiliser une classe que j’ai écrit (elle date depuis 2015) pour générer des données relatives à des suites mathématiques

Les suites sont des séquences de nombres qui sont calculées en fonction des valeurs des nombres précédents de la séquence.

Il existe plusieurs types de suites mathématiques. Cette classe peut calculer les valeurs des numéros de séquence de plusieurs types de suite.

Actuellement, cette classe php peut calculer plusieurs types de suite mathématiques : suite géométrique, suite arithmétique, fibonacci, collatz, cauchy

La classe php

J’ai modifier le script de base pour que chaque fonction de suite retourne un tableau avec deux clés x et y (utile après pour pouvoir afficher les données sur les axes de chartJS)

<?php

/**
 *
 * This class calculate some popular progressions
 * Supported progression:
 * fibonnaci
 * collatz
 * cauchy
 * conway
 * arithmetic
 * goemtric
 *
 * @author Ghali Ahmed<contact@devindependant.com>
 * @version 1.0
 */
final class AwesomeProgression
{
    /**
     * U(n+1) = U(n) + p;
     */
    public static function arithmetic($from, $to, $p = 1)
    {
        //U0 = $from
        $n = 0;
        $labels = [];
        $progression = [$from];
        while ($n < $to) {
            $labels[] = $n;
            $progression[] = $progression[$n] + $p;
            $n++;
        }

        return [
            'x' => $labels,
            'y' => $progression
        ];
    }

    /**
     */
    public static function geometric($from, $to, $p)
    {
        //U0 = $from
        $n = 0;
        $labels = [];
        $progression = [$from];
        while ($n < $to) {
            $labels[] = $n;
            $progression[] = $progression[$n] * $p;
            $n++;
        }

        return [
            'x' => $labels,
            'y' => $progression
        ];
    }

    /**
     * U(0) = 0;
     * U(1) = 1;
     * U(2) = 1;
     * U(n) = U(n-1) + U(n-2)
     */
    public static function fibonnaci($to)
    {
        $n = 2;
        $labels = [0,1];
        $progression = [0, 1];
        while ($n < $to) {
            $labels[] = $n;
            $progression[] = $progression[$n - 1] + $progression[$n - 2];
            $n++;
        }

        return [
            'x' => $labels,
            'y' => $progression
        ];
    }

    /**
     * U(0) = arbitrary positive integer:
     * If the number is even, divide it by two.
     * If the number is odd, triple it and add one.
     */
    public static function collatz($from, $to)
    {
        //U0 = $from
        $n = 0;
        $labels = [];
        $progression = [$from];
        while ($n < $to) {
            $labels[] = $n;
            $progression[] = $progression[$n] % 2 ? (3 * $progression[$n] + 1) : ($progression[$n] / 2);
            $n++;
        }

        return [
            'x' => $labels,
            'y' => $progression
        ];
    }

    /**
     * U(0) = a
     * U(n+1) = (U(n) + a/U(n))/2
     * Always U(n+1) < U(n)
     */
    public static function cauchy($from, $to)
    {
        //U0 = $from
        $n = 0;
        $labels = [];
        $progression = [$from];

        while ($n < $to) {
            $labels[] = $n;
            $progression[] = ($progression[$n] + ($from / $progression[$n])) / 2;
            $n++;
        }

        return [
            'x' => $labels,
            'y' => $progression
        ];
    }

    /**
     * Claculate any arithemtic progression
     */
    public static function progression($from, $to, $pattern)
    {
        $n = 0;
        $labels = [];
        $progression = [$from];
        while ($n < $to) {
            $labels[] = $n;
            $progression[] = eval(sprintf("return %s;", str_replace('%s', '$progression[' . $n . ']', $pattern)));
            $n++;
        }

        return [
            'x' => $labels,
            'y' => $progression
        ];
    }
}

Commençant déjà par d’inclusion la librairie Chartjs dans la balise <head>

<head>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css"
          crossorigin="anonymous">
</head>

Utilisation de la classe et génération des données

Veuillez choisir votre suite

$data = AwesomeProgression::arithmetic(1, 10, 2);
$data = AwesomeProgression::geometric(1, 10, 2);
$data = AwesomeProgression::fibonnaci(20);
$data = AwesomeProgression::cauchy(-50,50);
$data = AwesomeProgression::collatz(100,50);

Script chartjs

<script>

    var data = {
        labels: <?php echo json_encode($data['x'])?>,
        datasets: [{
            backgroundColor: "rgb(210, 116, 0, 0.70)",
            borderColor: "rgb(210, 116, 0)",
            data: <?php echo json_encode($data['y'])?>,
            label: 'Suite de geometrique'
        }]
    };

    var chart = new Chart('line_chart', {
        type: 'line',
        data: data,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        suggestedMin: 0,
                        suggestedMax: 100,
                        stepSize: 10
                    }
                }]
            }
        }
    });
</script>

et voici le résultat