Visualisation de données avec sigma.js

Imatt — Sat, 21 Jul 2012 16:20:23 +0000

Je viens de tomber sur une nouvelle librairie Javascript qui permet de faire de la visualisation de données en réseau (network graph). Je n’ai pas encore eu le temps de l’essayer mais je vais certainement me pencher dessus rapidement.

Voici le type de graphique réalisable :

Je vous laisse regarder les exemples sur cette page :

http://sigmajs.org/

Si quelqu’un à déjà utilisé cette librairie, je serais interessé d’avoir des avis dessus, alors laissez un commentaire.

The post Visualisation de données avec sigma.js first appeared on Undisconnected.

Comment charger des données via Ajax avec Highcharts

Imatt — Wed, 23 May 2012 17:50:02 +0000

J’utilise de plus en plus Highcharts à mon travail et je l’apprécie de plus en plus. Voici un tutoriel qui va vous apprendre à utiliser Highcharts avec ajax. Je vais illustrer ce tutoriel avec un dataset plutôt d’actualité : le prix de l’essence mis en comparaison au prix du pétrole.

Que va t’on apprendre dans ce tutoriel sur Highcharts ?

Comment charger des données via AJAX dans Highcharts
Comment ajouter un 2ème axe Y à un graphique pour comparer des valeurs d’ordre différent.
Comment travailler les labels des axes X et Y
Comment insérer plusieurs séries de données dans un graph

Charger des données via AJAX dans Highcharts

Pour charger des données via AJAX dans Highcharts, il s’agit de construire un objet javascript contenant les options qui vont servir à générer le graph, il suffit donc de déclarer un objet et de lui attribuer les options de bases :

var chart;
var colors = ["#98DF8A", "#FFBB78", "#8C564B"];
var options = {};

options.chart = {
  renderTo: 'essenceChart',
  width: 588,
  height: 400,
  marginTop: 70,
  marginLeft: 100,
  marginRight: 100,
  type:'line'
};

options.credits = {
  enabled: false
};

options.colors = colors;

options.title = {
  text: "Évolution du prix de l'essence et du baryl de pétrole de 1995 à 2012",
  margin: 10
};

options.tooltip = {
  formatter: function() {
    return "Dépense : " + number_format(this.y,3,',',' ') + "€" ;
  }
};

Définition des variables

On créer la variable « chart » qui va servir à instancier le graphique plus tard.
On créer la array « colors » pour définir ses couleurs personnelles et ainsi overwriter les couleurs par défaut.
On créer l’objet « options » qui va contenir tous les paramètres définissant le graphique.

Définition des paramètres du graph

« options.chart » représente les paramètres généraux du graph. On va pouvoir renseigner le type, la taille, les margins, le container …
« options.credits » permet de supprimer le lien vers Highcharts en bas à droite
« options.colors » définit les couleurs à utiliser (couleur par défaut si non renseigné)
« options.title » permet de donner un titre au graphique
« options.tooltip » permet de formater l’affichage du tooltip (étiquette au passage de la souris)

Créer 2 axes Y dans Highcharts

Le but de créer de axe Y est de pouvoir comparer 2 valeurs d’ordre différent. Dans notre exemple, on va comparer le prix de l’essence en euro avec une valeur autour de 1€ et le prix de baryl de pétrole en $ autour de 50$. Vous voyez où je veux en venir ?

options.yAxis = [
  {
    title : {
      text: "Gazoil & Super 95 (€)"
    },
    labels: {
    formatter: function() {
      return this.value +' €';
    },
    style: {
      color: '#000'
    }
  }
  },{
  title: {
    text: "Baryl brent ($US)"
  },
  labels: {
    formatter: function() {
      return this.value +' $';
    },
    style: {
      color: '#8C564B'
    }
  },
  opposite: true
}];

Je pense que la définition de l’objet parle d’elle même, en gros on créer un array contenant deux objets définissant chaque axe. La beauté de Highcharts réside dans le fait qu’elle va s’occuper de mettre à l’échelle les axes en fonction des valeurs fournis, donc rien à faire de ce côté là.

Mettre en place l’axe des X avec une rotation des labels

options.xAxis = {
  categories: [],
  labels: {
    rotation: -45,
		y: 20
  }
};

Encore une fois c’est assez parlant, vous pouvez jouer avec la valeur de rotation du label pour arriver au résultat souhaité.

Insérer plusieurs dataset dans un graphique

Cela se traduit par insérer plusieurs courbe dans notre graphique avec pour chaque courbe ses valeurs propres.

options.series = [
  {
    name: 'Gazoil (€)',
    data: []
  },
  {
    name: 'Super 95 (€)',
    data: []
  },
  {
    name: 'Baryl de pétrole ($US)',
    yAxis: 1,
    data: []
  }
]

Ici nous créons donc un array de series, chaque element de cet array est un objet définissant le nom et le array qui recevra les données via ajax.

Préparation du fichier HTML qui va recevoir le graphique




Undisconnected - Prix essence illustré avec Highcharts

Chargement des données dans Highchart

Pour charger les données en ajax, j’utilise ici la methode get de Jquery pour aller lire le fichier de donnees JSON. Il suffit ensuite de manipuler les données dans votre fonction de callback pour aller nourrir les array de data de chacune de vos series. On en profite pour créer les categories (les labels) qui apparaîtrons sur l’axe des X.

$.getJSON('https://undisconnected.com/sandbox/highcharts-essence/prix-essence.json', function(essence) {

    $.each(essence, function(i,e){

      var theDate = new Date(parseInt(i),0,1);

      options.series[0].data.push(e.gazoil);
      options.series[1].data.push(e.super95);
      options.series[2].data.push(e.brent);
      options.xAxis.categories.push(i);

    })
    console.log(options.categories)
    chart = new Highcharts.Chart(options);

  });

Le resultat

Conclusion

J’espère que vous aurez pris plaisir à suivre ce tutoriel. Highcharts permet de customiser vos graphiques en javascript de manière simple, efficace et rapide. Comme vous le voyez, faire ce graphique n’est pas une tâche ultra complexe et pourtant le résultat obtenu est vraiment interessant.

Ressources :

The post Comment charger des données via Ajax avec Highcharts first appeared on Undisconnected.

visualisation | Undisconnected