Pill Chart : Demo avec les options par dafaut

Démo de l'affichage du graphe en forme de "pillule". Les styles CSS sont basiques

Age des participants

Tranche d'ageNombre
< 10 ans20
entre 10 et 15 ans45
entre 15 et 25 ans60
entre 25 et 40 ans50
entre 40 et 60 ans15
60 ans et plus10

HTML:
<h3>Age des participants</h3>
<div id="pill_1" class="pillChart"></div>
JS :
$(function() {
	new PillChart({
		containerId: 'pill_1',
		data: [ {
			label: "< 10 ans",
			value: 20,
			width: '20px',
			cssAttr: "background-color: #69C8FF;"
		}, {
			label: "entre 10 et 15 ans",
			value: 45,
			width: '45px',
			cssAttr: "background-color: #8AABB0;"
		}, {
			label: "entre 15 et 25 ans",
			value: 60,
			width: '60px',
			cssAttr: "background-color: #86A965;"
		}, {
			label: "entre 25 et 40 ans",
			value: 50,
			width: '50px',
			cssAttr: "background-color: #EEA638;"
		}, {
			label: "entre 40 et 60 ans",
			value: 15,
			width: '15px',
			cssAttr: "background-color: #DB844E;"
		}, {
			label: "60 ans et plus",
			value: 10,
			width: '150px',
			cssAttr: "background-color: #DB4D4B;"
		} ],
		updateCallback: function(obj){alert("clicked on : "+obj.label );}
	}).draw();
});

Pill Chart : Démo avec plus d'options

Stock atelier #45






HTML:
<h3>Stock atelier #45</h3>
<div id="pill_2" class="pillChart"></div>
JS :
new PillChart({
	containerId: 'pill_2',
	data: [ {
		id: "cahiers_10x25",
		label: "Nb cahiers 10x25",
		value: 25,
		width: '25px'
	}, {
		id: "cahiers_25x25",
		label: "Nb cahiers 25x25",
		value: 50,
		width: '50px'
	}, {
		id: "classeurs_32x12",
		label: "Nb classeurs 32x12",
		value: 150,
		width: '150px'
	} ],
	updateCallback: function(obj){alert("clicked on : "+obj.label );},
	legend: {
		cols: 3,
		lines: 1,
		title: "Legende des couleurs",
		labels: ["Nb cahiers 10x25", "Nb cahiers 25x25", "Nb classeurs 32x12"]
	}
}).draw();