Merci beaucoup pour ton aide ! Ça fonctionne impeccable.
Ci-joint les codes pour le redox et la teneur en sel si ça intéresse du monde :
SEL
<div style="width:400px;min-height : 100px;" class="cmd #history# tooltips cmd-widget conso#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
<div id="container2" style="width: 300px;height: 100px; margin: 1em auto;"></div>
<style>
#container2 .highcharts-title {
font-size: 15px !important;
fill: #FFF !important;
color: #FFFFFF !important;
}
#container2 .highcharts-tracker {
margin-top: -10px; : -10px !important;
}
</style>
<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);
$('#container2').highcharts({
chart: {
type: 'lineargauge',
inverted: true
},
navigation: {
buttonOptions: {
enabled: false
},
},
title: {
text: 'Teneur en Sel'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
yAxis: {
min: 0.0,
max: 9.0,
tickPositions: [0,2.5,3.0,4.0,4.5,8.0],
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: 2.5,
to: 3.0,
color: 'orange' // yellow
}, {
from: 3.0,
to: 4.0,
color: 'green'// green
}, {
from: 4.0,
to: 4.5,
color: 'orange'// yellow
},{
from: 0,
to: 2.5,
color: '#DF5353' // red
},{
from: 4.5,
to: 8.0,
color: '#DF5353' // red
}]
},
xAxis: {
labels: {
enabled: false
},
tickLength: 1,
min: 0,
max: 10
},
series: [{
name: 'SEL',
data: [#state#],
animation: true,
marker: {
symbol: false
},
showInLegend: false,
color: 'red',
dataLabels: {
enabled: true,
useHTML: true,
y: 25,
align: 'center',
style: {
color: 'white'
}
}
}]
});
</script>
</div>
REDOX
<div style="width:400px;min-height : 100px;" class="cmd #history# tooltips cmd-widget conso#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
<div id="container3" style="width: 300px;height: 100px; margin: 1em auto;"></div>
<style>
#container3 .highcharts-title {
font-size: 15px !important;
fill: #FFF !important;
color: #FFFFFF !important;
}
#container3 .highcharts-tracker {
margin-top: -10px; : -10px !important;
}
</style>
<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);
$('#container3').highcharts({
chart: {
type: 'lineargauge',
inverted: true
},
navigation: {
buttonOptions: {
enabled: false
},
},
title: {
text: 'REDOX'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
yAxis: {
min: 0.0,
max: 1000,
tickPositions: [350,500,650,750,900,1000],
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: 650,
to: 750,
color: 'green'// green
}, {
from: 750,
to: 900,
color: 'orange' // yellow
}, {
from: 500,
to: 650,
color: 'orange' // yellow
},{
from: 350,
to: 500,
color: '#DF5353' // red
},{
from: 900,
to: 1000,
color: '#DF5353' // red
}]
},
xAxis: {
labels: {
enabled: false
},
tickLength: 1,
min: 0,
max: 10
},
series: [{
name: 'REDOX',
data: [#state#],
animation: true,
marker: {
symbol: false
},
showInLegend: false,
color: 'red',
dataLabels: {
enabled: true,
useHTML: true,
y: 25,
align: 'center',
style: {
color: 'white'
}
}
}]
});
</script>
</div>