Du bon usage du setOptions() dans Highcharts

highcharts-logo

Dans mon article précédent, je vous faisais découvrir la librairie Javascript Highcharts très utile pour tracer simplement et rapidement une multitude de types de graphes différents.

Partons du principe que vous ayez besoin de tracer différents graphes mais possédant des attributs communs.
C'est là qu'intervient la méthode setOptions() de Highcharts.

Utilisons le premier graphe de mon article précédent et ajoutons lui deux autres graphes :

<div id="global_graph" style="width: 500px; height: 400px;"></div>
<div id="fixed_graph" style="width: 500px; height: 400px;"></div>
<div id="variable_graph" style="width: 500px; height: 400px;"></div>

Vous noterez dans le code ci-dessus l'utilisation de l'attribut style pour définir la taille des graphes. Ceci ayant été fait dans un souci de simplicité. Bien évidemment, dans le cadre d'un projet, vous utiliseriez une CCS pour paramétrer ces valeurs...

Essayons au passage de factoriser les caractéristiques communes des 3 graphes grâce à la méthode setOptions() offerte par Highcharts :

<script type="text/javascript">
/* Tracé des graphiques */

/* Définissons d'abord un tableau d'options communes */
Highcharts.setOptions({
    chart: {
        type: "line"
    },
    xAxis: {
        categories: [2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015],
        labels: {
            rotation: -45,
            style: {
                fontSize: "13px",
                fontFamily: "Verdana, sans-serif"
            }
        }
    },
    yAxis: {
        title: {
            text: "Euros"
        },
        plotLines: [{
                value: 0,
                width: 1,
                color: "#808080"
            }]
    },
    legend: {
        layout: "vertical",
        align: "right",
        verticalAlign: "middle",
        borderWidth: 0
    },
    credits: {
        enabled: false
    }
});

/* Graphique relatif à la rémunération globale */
var globalRemuneration = new Highcharts.Chart({
    title: {
        text: "Rémunération globale"
    },
    chart: {
        renderTo: "global_graph"
    },
    series: [
        {
            name: "Décile 1",
            data: [79550,84396,72000,67082,79104,79104,71330,82740,98537.1,103854.36,93908]
        },
        {
            name: "Quartile 1",
            data: [101660,102856,94839,87000,100000,105401,100000,110000,123420,136961.41,121705]
        },
        {
            name: "Médiane",
            data: [115700,131712,137278,135776,138763.07,145360,137204,145430,160600,177483,159016]
        },
        {
            name: "Quartile 3",
            data: [189500,193660,198500,174467,181224,176243.61,195357.24,205689.96,239440.81,239421.7,215437]
        },
        {
            name: "Décile 9",
            data: [282020,303398,303398,217900,314443.85,248088,255000,269197.11,361606.01,278168.9,268669]
        }
    ]
});

/* Graphique relatif à la rémunération fixe */
var fixedRemuneration = new Highcharts.Chart({
    title: {
        text: "Rémunération fixe"
    },
    chart: {
        renderTo: "fixed_graph"
    },
    series: [
        {
            name: "Décile 1",
            data: [79180,84396,60000,61560,55000,72000,65520,76000,84000,98754.36,81284]
        },
        {
            name: "Quartile 1",
            data: [90540,99126,89000,75000,87000,94200,96000,101760,113634.51,122006,105802]
        },
        {
            name: "Médiane",
            data: [109910,120000,120594,120000,118303,120000,118503.61,125610,145600,150080.87,141612]
        },
        {
            name: "Quartile 3",
            data: [160000,158154.91,157032,157230,180000,168000,171024,166257,190000,196500,190000]
        },
        {
            name: "Décile 9",
            data: [234740,210000,232700,193530,221437.76,193261.31,200000.04,189000,224762.79,252000,231840]
        }

    ]
});

/* Graphique relatif à la rémunération variable */
var variableRemuneration = new Highcharts.Chart({
    title: {
        text: "Rémunération variable"
    },
    chart: {
        renderTo: "variable_graph"
    },
    series: [
        {
            name: "Décile 1",
            data: [370,400,1305,1096,745.04,4200,2000,2432,6000,5004.72,4967]
        },
        {
            name: "Quartile 1",
            data: [5520,995,9857.84,10661,9216,11211,10269,10401,12047.42,10561.66,10000]
        },
        {
            name: "Médiane",
            data: [26700,19420,25000,15390,25000,23658,31263.28,30363.6,32353.89,21803.17,24553]
        },
        {
            name: "Quartile 3",
            data: [50000,62000,65000,33874,58454,38652,48000,45129.44,99530.77,49051.7,56304]
        },
        {
            name: "Décile 9",
            data: [107760,82500,183145.2,69147.27,110474,62780,82500,104780,136803.1,77713.7,99990]
        }

    ]
});
</script>

A l'issue de l'exécution de votre page, vous devriez obtenir ceci :

global_graph

 

fixed_graph

 

variable_graph

 

Notez comment nous avons réduit de façon drastique le code de chacun des 3 graphes !

Simple rapide et efficace, n'est-ce pas ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.