Jon Gomm – Passionflower
Un peu d’inspiration avec cette chanson aussi mélodique qu’impressionnante techniquement 🙂
Un peu d’inspiration avec cette chanson aussi mélodique qu’impressionnante techniquement 🙂
Highcharts vient de passer en version 4 et pour le coup, relook son site, mais aussi sa librairie graphique. La grosse nouveauté de cette version est en effet la possibilité de faire beau graphique en 3D et ceci toujours avec Javascript.
Pour vous donner envie, voici le type de graphique qu’il est possible de faire très simplement avec Highcharts 4 :
Même si cette fonctionnalité de pouvoir faire des charts en 3D est la nouveauté la plus marquante, il y a aussi quelques belles innovations du côté des types de graphiques. Le design a été légèrement amélioré, les couleurs par défaut sont plus belles et la rapidité d’affichage est améliorée de 10%.
Avec cette nouvelle version, Highcharts fait un pas de géant et écrase vraiment la concurrence grâce aux charts 3D. N’oubliez pas que ce projet est gratuit pour des projets non commerciaux, mais sachez que si vous l’utilisez en entreprise, il vous payer une licence. C’est important pour supporter les développeurs!
La suprême récompense du travail n'est pas ce qu'il vous permet de gagner, mais ce qu'il vous permet de devenir.
Voici un peu d’inspiration pour vous qui travaillez sans relâche 😉 Eh oui des fois, ça fait du bien de s’arrêter et rêver un peu. Je vous relaye donc un article « 33 endroits à visiter avant de mourir » du site Distractify, très bon site pour se distraire au passage!
Le lien pour visionner l’article mais surtout les photos : Le lien ne fonctionne plus 🙁
Je vous ai préparé un tutoriel sur Highchart qui explique comment recharger un graphique avec de nouvelles données saisies dans un formulaire HTML. Dans mon cas, je vais prendre l’exemple de quelqu’un qui saisit des données dans des champs texte et recharger le graphique à l’aide de ces données.
Pour ce tutoriel, nous allons utiliser la structure de fichier suivante :
Données 1 : -
Données 2 : -
Données 3 : -
Données 4 : -
Ici, rien de bien compliqué, on fait juste créer un fichier HTML5 en appelant le fichier main.js et les 2 librairies Highcharts et jQuery. Puis on construit un formulaire.
Le fichier main.js va accueillir le code qui va nous servir à créer le graph mais aussi le code qui va permettre de recharger le graph avec de nouvelles données saisies par l’utilisateur dans un formulaire.
Découpons un peu le code! Premièrement, nous allons mettre en place la fonction qui va générer le graphique au chargement de la page (la première fois). Notez que l’on assigne ce graphique à la variable document.chart, ceci dans le but de pouvoir accéder facilement plus tard à notre variable. (voir la portée des variables en Javascript).
Fonction qui affiche le graphique
var colors = ["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"];
$.displayPieChart = function(colors, data) {
document.chart = new Highcharts.Chart({
chart: {
renderTo: 'pieChart',
width: 598,
height: 450,
marginLeft: 25,
marginRight: 25,
},
colors: colors,
title: {
text: "Il faut manger des fruits",
margin: 10
},
tooltip: {
formatter: function() {
return "Nombre: " + parseInt(this.y) ;
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
return "" + this.point.name.toLowerCase() + "";
}
}
},
series: {
dataLabels: {
enabled: true,
color: 'black',
fontSize: 3
}
}
},
series: [{
type: 'pie',
name: 'fruits',
data: data
}]
});
}
Ensuite, nous allons créer la fonction qui va prendre en charge la lecture du formulaire et le rechargement du graphique en fonction des nouvelles données.
Fonction qui va recharger le graphique
function getDataFromUser(){
var value = [];
var titre = [];
var data = [];
$("#data .value").each(function(i,e){
value.push(parseInt($(e).attr("value")));
});
$("#data .titre").each(function(i,e){
titre.push($(e).attr("value"));
});
$.each(titre, function(i,e){
var inside = [];
inside.push(e);
inside.push(value[i]);
data.push(inside);
})
return data;
}
Quelques explications :
Ici on va aller lire à l’aide de jQuery les valeurs entrées dans le formulaire. On sélectionne, #data .value (la série qui contient les chiffres) et #data .titre (la série qui contient les titres). On insère ces nouvelles données dans des array Javascript à l’aide de la méthode push. On utilise la fonction parseInt pour s’assurer que les valeurs seront bien des integers. Il faudrait pousser plus loin la vérification des données du formulaire dans un cas réel mais pour ce tutoriel, ça suffira amplement.
Finalement : Document ready de jQuery pour binder les actions
$(function() {
var data = getDataFromUser();
$.displayPieChart(colors, data);
$("#button").click(function(){
var data = getDataFromUser();
document.chart.series[0].setData(data);
document.chart.redraw();
})
});
Ce bout de code permet donc dans l’ordre de :
Voici donc le résultat de ce tutoriel sur Highchart, j’espère que ça vous sera utile. N’hésitez pas si vous des questions / remarques en commentaires.
