Histogramme separé pour les abonnement avec options tarifaires

Bonjour, encore bravo pour votre travail ( je mets de la pommade, cela peut toujours servir).

C'est certainement déjà en cours d'éleboration car j'ai vu quelque variable sur votre code qui me le fait penser.
Une image vaut mieux qu'un long discours:
![graph](https://cloud.githubusercontent.com/assets/7100439/3142227/2647818a-e9b2-11e3-89bf-8e2bfe8b5395.png)
On arrive plus facilement avoir les évolutions.

```php
function init_chart2(data) {
    "use strict";

    // Préparation des séries de données
    var graphSeries = [];

    var max_size = 0;
    $.each(data.series, function (serie_name,serie_title) {
        max_size = Math.max(max_size,data[serie_name+"_data"].length);
    });
    var total_courant = new Array(max_size);
    for(var i=0;i<max_size;i++){
    	total_courant[i] = 0;
    }
    
    // Période courante
    $.each(data.series, function (serie_name, serie_title) {
    	
    	for(var i=0;i<data[serie_name+"_data"].length;i++){
        	total_courant[i]+=data[serie_name+"_data"][i];
        	total_courant[i] = parseFloat(total_courant[i].toFixed(2));
        }
    	
        graphSeries.push({
            name : serie_title,
            data : data[serie_name + "_data"],
            color : data[serie_name + "_color"],
            type: data[serie_name + "_type"], // 'column',
            stack : serie_name, // 'histo',
            /*events: {
                click: function (e) {
                    var newdate = new Date();
                    newdate.setTime(data.debut);
                    newdate.setDate(newdate.getDate() + e.point.x);
                    console.log(newdate);
                }
            },*/
            dataLabels: {
                enabled: true,
                color: '#FFFFFF',
                rotation: -45,
                y: 13,
                formatter: function () {
                    if (this.y !== 0) {
                        return this.y;
                    }
                    return "";
                },
                style: {
                    font: 'normal 13px Verdana, sans-serif',
                    textShadow: '0 0 3px black',
                }
            },
           // type: 'column',
            visible: (data[serie_name + "_data"].reduce(function (a, b) { return a + b; }, 0) !== 0),
            showInLegend: (data[serie_name + "_data"].reduce(function (a, b) { return a + b; }, 0) !== 0)
        });
    });

    graphSeries.push({
        name : "Total",
        data : total_courant,
        color : '9FB6CD',
       stack : 'total',
        events: {
            click: function (e) {
                //console.log (e.point.series.name);
                //console.log (e.point.category);
                //console.log (e.point.x);
                //console.log (Highcharts.dateFormat('%A, %b %e, %Y', data.debut));
                //console.log (data.debut);
                var newdate = new Date();
                newdate.setTime(data.debut);
                newdate.setDate(newdate.getDate() + e.point.x);
                console.log(newdate);
            }
        },
        dataLabels: {
            enabled: true,
            color: '#FFFFFF',
           rotation: -45,
            y: 13,
            formatter: function () {
                if (this.y !== 0) {
                    return this.y;
                }
                return "";
            },
            style: {
                font: 'normal 13px Verdana, sans-serif',
                textShadow: '0 0 3px black',
            }
        },
        type: 'column',
        visible: (total_courant.reduce(function(a, b) { return a + b; }, 0) !== 0),
        showInLegend: (total_courant.reduce(function(a, b) { return a + b; }, 0) !== 0)
    });
    
    
    $.each(data.series,function(serie_name,serie_title){
    	  // Période précédente
        graphSeries.push({
            name : serie_title + " precedente",
            data : data.PREC_data_detail[serie_name],
            color : data[serie_name+"_color"],//$.xcolor.opacity(data.PREC_color,data[serie_name + "_color"],0.1),
            type: data.PREC_type, // 'spline',
            stack: serie_name +"prec", // 'previous',
            visible: (data.PREC_data_detail[serie_name].reduce(function (a, b) { return a + b; }, 0) !== 0),
            showInLegend: (data.PREC_data_detail[serie_name].reduce(function (a, b) { return a + b; }, 0) !== 0)
        });
    });
    // Période précédente
    graphSeries.push({
        name : "Total " +data.PREC_name,
        data : data.PREC_data,
        color : '#999999',
        type: data.PREC_type, // 'spline',
        stack: "total_prec", // 'previous',
        visible: (data.PREC_data.reduce(function (a, b) { return a + b; }, 0) !== 0),
        showInLegend: (data.PREC_data.reduce(function (a, b) { return a + b; }, 0) !== 0)
    });

    Highcharts.setOptions(hcTheme);
    return {
        chart: {
            type: 'column', // Used for 3D representation (look at plotOptions)
            defaultSeriesType: 'column',
            options3d: {
                enabled: data.show3D,
                alpha: 15,
                beta: 15,
                depth: 50
            },
            renderTo: 'chart2',
            events: {
                load: function (chart) {
                    this.setTitle(null, {
                        text: 'Construit en ' + (new Date() - start) + 'ms'
                    });
                    if ($('#chart2_legende').length) {
                        if (data.subtitle.length > 0) { $('#chart2_legende').show(); }
                        $("#chart2_legende").html(data.subtitle);
                    }
                    this.debut = data.debut;
                    init_chart2_navigation(data.duree, data.periode);
                }
            },
            ignoreHiddenSeries: false
        },
        title: {
            text : data.title
        },
        subtitle: {
            text: 'Construit en...'
        },
        plotOptions: {
            column: {
                stacking: true, // 'normal',
                // When 3D and spline, don't do stacking
                //stacking: data.show3D ? (data.PREC_type === "column") : (data.PREC_type === "spline"),
                depth: 50,
                grouping: true,
                groupZPadding: 20
            }
            /*spline: {
                stacking: true, // 'normal',
                depth: 50,
            }*/
        },
        xAxis: [{
            labels: {
                formatter: function () {
                    //if (this.axis.categories[this.values] === null) {
                    if (this.axis.categories.indexOf(this.value) === -1) {
                        return "";
                    }
                    return this.value;
                }
            },
            categories: data.categories
        }],
        yAxis: {
            opposite: false,
            title: {
                text: 'kWh'
            },
            labels: {
                formatter: function () {
                    return this.value; // + ' kWh';
                }
            }
        },
        tooltip: {
            useHTML: true,
            formatter: function () {
                var tooltip;

                var thisSerieName = this.series.name;
                var thisPtX = this.point.x;
                var thisPtY = this.point.y;
                var trouve = false;
                
                $.each(data.PREC_data_detail, function (PREC_data_name) {
	                if (thisSerieName == PREC_data_name+" precedente") 
	                	trouve= (trouve || true);
	                else
	                	trouve = (trouve || false);
               });
               if(thisSerieName == "Total "+data.PREC_name)
            	   trouve = (trouve || true);
               
               if(!trouve) { // Période courante
                    // Date & Consommation
                    tooltip = '<span style="color:' + this.series.color + '"><b>Détails de la période</b></span><br />';
                    tooltip += '<span><b>' + data.optarif[Object.keys(data.optarif)[0]] + ' </b></span><br />';
                    tooltip += '<b>' + this.key + ' </b> ~ <b> Total : ' + Highcharts.numberFormat(this.point.stackTotal, 2) + ' kWh</b><br />';

                    // Abonnement
                    tooltip += 'Abonnement : ' + Highcharts.numberFormat(data.prix.ABONNEMENTS[thisPtX], 2) + ' Euro<br />';

                    // Taxes
                    tooltip += 'Taxes :<br />';
                    $.each(data.prix.TAXES, function (serie_name, serie_data) {
                        tooltip += serie_name + ' : ' + Highcharts.numberFormat(data.prix.TAXES[serie_name][thisPtX], 2) + ' Euro<br />';
                    });

                    // Coût détaillé
                    tooltip += 'Consommé :<br />';
                    $.each(data.series, function (serie_name, serie_title) {
                        // Ici, on est hors de porté du "this" de la fonction formatter.
                        // On utilise donc les variables nécessaire (thisPtX...)
                        if (data.prix.TARIFS[serie_name][thisPtX] !== 0) {
                            tooltip += '<span style="color:' + data[serie_name + "_color"] + '">';
                            if ((serie_title === thisSerieName) && (Object.keys(data.series).length > 1)) {
                                tooltip += "* ";
                            }
                            tooltip += serie_name + ' : ' + Highcharts.numberFormat(data.prix.TARIFS[serie_name][thisPtX], 2) + ' Euro';
                            tooltip += ' (' + data[serie_name + "_data"][thisPtX] + ' kWh)<br />';
                            tooltip += '</span>';
                        }
                    });

                    // Coût total
                    tooltip += '<b>Total : ' + Highcharts.numberFormat(data.prix.TOTAL[thisPtX], 2) + ' Euro<b>';
                } else { // Période Précédente
                    // Date & Consommation
                    tooltip = '<span style="color:' + data.PREC_color + '"><b>Détails de la période précédente</b></span><br />';
                    tooltip += '<span><b>' + data.optarif[Object.keys(data.optarif)[0]] + ' </b></span><br />';
                    tooltip += '<b>' + this.key + ' </b> ~ <b> Total : ' + Highcharts.numberFormat(this.y, 2) + ' kWh</b><br />';

                    // Abonnement
                    tooltip += 'Abonnement : ' + Highcharts.numberFormat(data.PREC_prix.ABONNEMENTS[thisPtX], 2) + ' Euro<br />';

                    // Taxes
                    tooltip += 'Taxes :<br />';
                    $.each(data.PREC_prix.TAXES, function (serie_name, serie_data) {
                        tooltip += serie_name + ' : ' + Highcharts.numberFormat(data.PREC_prix.TAXES[serie_name][thisPtX], 2) + ' Euro<br />';
                    });

                    // Coût détaillé
                    tooltip += 'Consommé :<br />';
                    $.each(data.series, function (serie_name, serie_title) {
                        // Ici, on est hors de porté du "this" de la fonction formatter.
                        // On utilise donc les variables nécessaire (thisPtX...)
                        if (data.PREC_prix.TARIFS[serie_name][thisPtX] !== 0) {
                            tooltip += '<span style="color:' + data[serie_name + "_color"] + '">';
                            if ((serie_title === thisSerieName) && (Object.keys(data.series).length > 1)) {
                                tooltip += "* ";
                            }
                            tooltip += serie_name + ' : ' + Highcharts.numberFormat(data.PREC_prix.TARIFS[serie_name][thisPtX], 2) + ' Euro';
                            tooltip += ' (' + data.PREC_data_detail[serie_name][thisPtX] + ' kWh)<br />';
                            tooltip += '</span>';
                        }
                    });

                    // Coût total
                    tooltip += '<b>Total : ' + Highcharts.numberFormat(data.PREC_prix.TOTAL[thisPtX], 2) + ' Euro<b>';
                }
                return tooltip;
            }
        },
        series: graphSeries,
        legend: {
            enabled: true
        }
    };
}

```

J'ai essayé d'être le moins "destructeur" possible sur votre code pour que vous puissiez debugger facilement.
 Sur ma version avec la version 4.2dev j'utilise xcolor.opacity pour calculer la couleur des versions précédentes mais sur celui si cela ne semble pas marcher et j'ai pas trop cherché non plus (je deteste debugger).

Pour le "recalculPuissance" la valeur retournée pourrait être arrondi (round) car sinon on a des valeurs avec chiffres après la virgule.