Aide pour amélioration d'un widget linear-gauge

Salut à tous

J’ai récupérer un code sur le forum pour m’indiquer sur un barre graphe le Ph de mon Ondilo Ico.
Le voici :

<div style="width:320px;min-height : 130px; " class="cmd #history# tooltips cmd-widget conso#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
<div id="container4" style="width: 300px;height: 65px; margin: 1em auto; "></div>

<script>
      /**
     * Highcharts Linear-Gauge series plugin
     */
    (function (H) {
        var defaultPlotOptions = H.getOptions().plotOptions,
            columnType = H.seriesTypes.column,
            wrap = H.wrap,
            each = H.each;

        defaultPlotOptions.lineargauge = H.merge(defaultPlotOptions.column, {});
        H.seriesTypes.lineargauge = H.extendClass(columnType, {
            type: 'lineargauge',
            //inverted: true,
            setVisible: function () {
                columnType.prototype.setVisible.apply(this, arguments);
                if (this.markLine) {
                    this.markLine[this.visible ? 'show' : 'hide']();
                }
            },
            drawPoints: function () {
                // Draw the Column like always
                columnType.prototype.drawPoints.apply(this, arguments);

                // Add a Marker
                var series = this,
                    chart = this.chart,
                    inverted = chart.inverted,
                    xAxis = this.xAxis,
                    yAxis = this.yAxis,
                    point = this.points[0], // we know there is only 1 point
                    markLine = this.markLine,
                    ani = markLine ? 'animate' : 'attr';

                // Hide column
                point.graphic.hide();

                if (!markLine) {
                    var path = inverted ? ['M', 0, 0, 'L', -5, -5, 'L', 5, -5, 'L', 0, 0, 'L', 0, 0 + xAxis.len] : ['M', 0, 0, 'L', -5, -5, 'L', -5, 5,'L', 0, 0, 'L', xAxis.len, 0];                
                    markLine = this.markLine = chart.renderer.path(path)
                        .attr({
                        fill: series.color,
                        stroke: series.color,
                            'stroke-width': 1
                    }).add();
                }
                markLine[ani]({
                    translateX: inverted ? xAxis.left + yAxis.translate(point.y) : xAxis.left,
                    translateY: inverted ? xAxis.top : yAxis.top + yAxis.len -  yAxis.translate(point.y)
                });
            }
        });
    })(Highcharts);
  
  
  $('#container4').highcharts({
        chart: {
            type: 'lineargauge',
            inverted: true
    },
    navigation: {
buttonOptions: {
  enabled: false
  },
 },
       title: {
          text: ''
        },
    
    credits: {
        enabled: false
    },
     legend: {
        enabled: false
    },
    yAxis: {
       min: 0.0, 
        max: 15.0,
      tickPositions: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14],
            tickLength: 1,
            tickWidth: 1,
            tickColor: '#C0C0C0',
            gridLineColor: '#C0C0C0',
            gridLineWidth: 1,
            minorTickInterval: 5,
            minorTickWidth: 1,
            minorTickLength: 5,
            minorGridLineWidth: 0,
            startOnTick: true,
            endOnTick: true,
                  labels: {
                format: '{value}'
            },
              labels: {
            enabled: true
        },
        opposite: false,
        title: {
            text: null
        },                                                            
        plotBands: [{
            from: 0,
            to: 1,
            color: '#F01617'
        },{
            from: 1,
            to: 2,
            color: '#F3670D'
        }, {
            from: 2,
            to: 3,
            color: '#FAC600'
        }, {
            from: 3,
            to: 4,
            color: '#F4EF00'
        },{
            from: 4,
            to: 5,
            color: '#B1D416'
        },{
            from: 5,
            to: 6,
            color: '#81C637'
        },{
            from: 6,
            to: 7,
            color: '#48BA41'
        },{
            from: 7,
            to: 8,
            color: '#29AA43'
        },{
            from: 8,
            to: 9,
            color: '#0FB668'
        },{
            from: 9,
            to: 10,
            color: '#00B8B6'
        },{
            from: 10,
            to: 11,
            color: '#3F8ECE'
        },{
            from: 11,
            to: 12,
            color: '#3652A5'
        },{
            from: 12,
            to: 13,
            color: '#574EA1'
        },{
            from: 13,
            to: 14,
            color: '#63429D'
        }]
    },

    xAxis: {
        labels: {
            enabled: false
        },
        tickLength: 1,
        min: 0,
        max: 10
    },

    series: [{
      name: 'PH',  
      data: [#state#],
        animation: true,
                marker: {
            symbol: false
        },
        showInLegend: false,
        color: 'white',
        dataLabels: {
            enabled: true,
            useHTML: false,
                             y: -2,
                align: 'center',

            style: {
                color: 'white'
            }
        }
    }]

});
</script>

</div>

Le souci que j’ai c’est déja que je ne sais pas ou mettre le nom de l’objet automatiquement.
Ensuite je cherche à afficher la valeur 15 , je n’arrive que à mettre de 0 à 14 et le dernier marqueur ne veut pas afficher 15.
Et pour finir, il est énorme quand il est sur le dashboard ou le design . Je n’arrive pas à le réduire et le rendre fonctionnel avec moins d’espace.
Si un féru de script passe par là je le remercie d’avance pour m’aider à améliorer le script.

Dernière demande comment faites vous pour tester vos scripts. J’ai testé plusieurs site sur le net mais sans satisfaction.

Bon week-end

Bonjour,

De ma très ancienne expérience de dev web, je dirais que pour le problème de largeur,
il faut jouer sur le paramètre width de la div mais je peux me tromper:

<div style="width:320px;min-height : 130px; "

pour l’histoire de la valeur 15, ça doit être cette partie, je ne vois pas de section from 14 … to 15 (à compléter) :

    yAxis: {
       min: 0.0, 
        max: 15.0,
      tickPositions: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14],
            tickLength: 1,
            tickWidth: 1,
            tickColor: '#C0C0C0',
            gridLineColor: '#C0C0C0',
            gridLineWidth: 1,
            minorTickInterval: 5,
            minorTickWidth: 1,
            minorTickLength: 5,
            minorGridLineWidth: 0,
            startOnTick: true,
            endOnTick: true,
                  labels: {
                format: '{value}'
            },
              labels: {
            enabled: true
        },
        opposite: false,
        title: {
            text: null
        },                                                            
        plotBands: [{
            from: 0,
            to: 1,
            color: '#F01617'
        },{
            from: 1,
            to: 2,
            color: '#F3670D'
        }, {
            from: 2,
            to: 3,
            color: '#FAC600'
        }, {
            from: 3,
            to: 4,
            color: '#F4EF00'
        },{
            from: 4,
            to: 5,
            color: '#B1D416'
        },{
            from: 5,
            to: 6,
            color: '#81C637'
        },{
            from: 6,
            to: 7,
            color: '#48BA41'
        },{
            from: 7,
            to: 8,
            color: '#29AA43'
        },{
            from: 8,
            to: 9,
            color: '#0FB668'
        },{
            from: 9,
            to: 10,
            color: '#00B8B6'
        },{
            from: 10,
            to: 11,
            color: '#3F8ECE'
        },{
            from: 11,
            to: 12,
            color: '#3652A5'
        },{
            from: 12,
            to: 13,
            color: '#574EA1'
        },{
            from: 13,
            to: 14,
            color: '#63429D'
        }]
    },