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