Discussion :

[stomerfull]

Bonjour à tous,

J'utilise la libraire highchart pour générer des graphiques à partir des données récupérées depuis une base de données

Le format JSON des données récupérées est comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[
    {
        "nid": "949",
        "date_operation": "08-2012",
        "cac40": "6.0600",
        "VL": "1505.3300",
        "date_legende": "02-08-2012"
    },
    {
        "nid": "929",
        "date_operation": "01-2013",
        "cac40": "2.7000",
        "VL": "86.9300",
        "date_legende": "17-01-2013"
    }
]

Ce que je veux faire c'est d'afficher deux courbes : une pour cac40 et une pour VL sur un seule graphe avec la possibilité de charger dynamiquement les series (name et data)

voici mon script qui n'affiche qu'une seule courbe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
var chart;
(function($) {
 
    jQuery(document).ready(function() {
 
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
				events: {
                load: getDataToDisplay
                },
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/> ,EURO MTS,'+
                        this.x +', '+ this.y +'';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                   name: 'Random data',
                   data: []
               }]
        });
    });
 
})(jQuery);
 
 
function getDataToDisplay()
{
	jQuery.ajax({
            url: "getdatatodisplay",
            datatype: "json",
            success: function(data) {
			data = jQuery.parseJSON(data)
 
				var categories=[];
                var seriesData=[];
				var seriesName=[];
                     jQuery.each(data,function(i, item){
 
                          categories.push(data[i].date_operation);
                          seriesData.push(parseFloat(data[i].cac40));
						  seriesData.push(parseFloat(data[i].VL));
                });
               chart.xAxis[0].setCategories(categories);
               chart.series[0].setData(seriesData);
 
            }
	});
}

J' insiste aussi sur la possibilité de mettre à jour dynamiquement le serie name

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
( series: [{
                   name: 'Random data',
                   data: []
               }])

Merci d'avance pour votre aide

[PP(Team)]

Bonjour,

Voici un exemple qui te montre comment ajouter 2 lignes, libre à toi de l'adapter à tes besoins (à la base j'ai 3 lignes, ne pas faire attention au nombre de paramètres ) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
function lineChart(libelleFlux, categories, legitimate, ads, spams, _step) {
	$(document).ready(function() {
 
		var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
		chart = new Highcharts.Chart({
			chart: {
				//Id de la div qui va recevoir le graphique
				renderTo: 'barChart',
				//Type du graphique : histogramme
				type: 'spline'
			},
			//Titre du graphique
			title: {
				text: libelleFlux
			},
			//On supprime les "crédits"
			credits : {
				text: ''
			},
			//Quels libellés pour la barre des X
			//Pas chargé pour le moment, se fera plus tard
			xAxis: {
				categories: [],
				endOnTick : true,
				labels: {
					rotation: -45,
					step : _step,
					align: 'right'
				}
			},
			//Quels données pour les Y
			yAxis: {
				//A combien commenceront les Y
				min: 0,
				//Quel libellé sur l'axe des Y
				title: {
					text: "",
				},
				//Faut-il mettre un libellé au dessus des barres ?
				stackLabels: {
					//Oui
					enabled: true,
					//Quel style ?
					style: {
						fontWeight: 'bold',
						color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
					}
				}
			},
			//Faut-il mettre une légende ?
			legend: {
				//Quel alignement ?
				align: 'center',
				//En haut, en bas ?
				verticalAlign: 'bottom',
				//Quelle couleur ?
				backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
				//Quelles couleur de bordure ?
				borderColor: '#CCC',
				//Quelle épaisseur ?
				borderWidth: 0,
				shadow: false
			},
			//Au survol de la barre, que faut-il afficher ?
			tooltip: {
				enable : false,
				formatter: function() {
					return '<b>'+ this.x +'</b><br/>'+ this.series.name +': '+ this.y +'<br/>';
				}
			},
			plotOptions: {
				//Peut-on sélectionner un élement d'une barre ?
				allowPointSelect : false,
				line: {
                    dataLabels: {
                        enabled: true,
	                    //Ne pas afficher la valeur si c'est "0".
	                    formatter: function() {
	                        return (this.y== 0 ? '' : this.y);
	                    },
                    },
                    enableMouseTracking: false
                },
                spline: {
                    lineWidth: 2,
                    states: {
                        hover: {
                            lineWidth: 5
                        }
                    },
                    marker: {
                        enabled: false,
                        states: {
                            hover: {
                                enabled: false,
                                symbol: 'circle',
                                radius: 5,
                                lineWidth: 1
                            }
                        }
                    },
                }
			},
			//Quelles données ?
			//pas chargées ici
			series: []
		});
		var categoriesTab = categories.split(";");
		var categoriesArray = new Array();
		for(var i = 0; i< categoriesTab.length;i++)
			{
			categoriesArray.push(categoriesTab[i]);
			}
		chart.xAxis[0].setCategories(categoriesArray);
 
		var spamsTab = spams.split(";");
		var spamsArray = new Array();
		for(var i = 0; i< spamsTab.length;i++)
		{
			var dataTmp = {};
			dataTmp.x = i;
			dataTmp.y = parseInt(spamsTab[i]);
			spamsArray.push(dataTmp);
		}
		chart.addSeries({name: "spams", data: spamsArray, color : '#4572A7'});
		var legitimateTab = legitimate.split(";");
		var legitimateArray = new Array();
		for(var i = 0; i< legitimateTab.length;i++)
		{
			var dataTmp = {};
			dataTmp.x = i;
			dataTmp.y = parseInt(legitimateTab[i]);
			legitimateArray.push(dataTmp);
		}
		chart.addSeries({name: "legitimates", data: legitimateArray, color : '#89A54E'});
		chart.redraw();
	});
}

Les données arrivent sous la forme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

lineChart("titre", "janvier;fevrier;mars;avril", "10;11;12;13","5;6;7;8","20;10;15;5",1);

[stomerfull]

Bonjour ,


Je te remercie pour cet exemple que tu vient de me proposer

ça correspond parfaitement à ce que dont j'ai besoin

Encore merci

[rania90]

Bonjour,
Je débute avec les highcharts et je n'ai pas compris où est ce que je dois créer le template json.
la démarche n'est pas aussi claire pour moi.
Je serai vraiment reconnaissante si vous pouvez me fournir des informations détaillées.
Merci.