Conversion des graphiques

Appizy utilise la bibliothèque Charts.js afin de recréer les graphiques de vos tableurs. Les typologies de graphiques compatibles avec Appizy sont :

• Graphique en histogramme,
• Graphique en radar,
• Graphique en nuages de points,
• Graphique en barres,
• Graphique en secteurs ou anneaux.

Edition des graphiques

Appizy génère un code facilement lisible et donc éditable après la conversion. Si vous disposez de connaissances de base en langages HTML et JavaScript, vous serez en mesure de modifier vous-même votre application web.

Pour modifier les graphiques, ouvrez le fichier et cherchez où les graphiques ont été créés. Vous pouvez pour cela effectuer une recherche avec le terme new Chart. Voici quelques cas de figure et exemples de modification possibles, basés sur la documentation Chart.js.

Echelle de valeurs

Les graphiques ont par défaut une échelle dynamique. Si vous souhaitez fixer l’échelle de votre graphique, et notamment la longueur de l’axe vertical, vous pouvez ajouter des valeurs minimales et maximales ainsi :

var chart = new Chart(ctx, {
    // ...
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    min: 0,
                    max: 1
                }
            }]
        }
    }
    // ...
});

Pour plus d’informations sur les réglages des axes dans cet article.

Formattage des valeurs

Deux exemples de formattage des valeurs sur l’axe des Y. Formattage monétaire euro :

var chart = new Chart(ctx, {
    // ...
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    callback: function(value, index, values) {
                        return value + ' €';
                    }
                }
            }]
        }
    }
    // ...
});

Format pourcentage :

var chart = new Chart(ctx, {
    // ...
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    callback: function(value, index, values) {
                        return value * 100 + '%';
                    }
                }
            }]
        }
    }
    // ...
});

Plus d’information sont disponibles sur la documentation de Chart.js.