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