Code: Select all
chart1_1 = Highcharts.stockChart('evolutionCas', {
chart: {
type: 'column',
events: {
redraw: function(){
console.log(this.xAxis[0].getExtremes());
},
load: function() {
var extremes = this.xAxis[0].getExtremes();
var maxX = extremes.max;
var minX = extremes.min;
this.xAxis[0].addPlotBand({
color: {
linearGradient: {
x1: 0,
y1: 1,
x2: 1,
y2: 1
},
stops: [
[0, 'rgba(255, 255, 255, 0.0)'],
[1, 'rgba(200, 200, 255, 0.8)']
]
},
from: maxX - (1000 * 60 * 60 * 24 * 6.5),
to: maxX + (1000 * 60 * 60 * 24 * 2.5),
zIndex: 1000
});
}
}
},
rangeSelector: {
buttonTheme: {
width: 120,
style: {
color: '#1C819a',
fontWeight: 'bold'
},
},
enabled: true,
inputEnabled: true,
inputDateFormat: '%e %b %Y',
inputEditDateFormat: '%Y-%m-%e',
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 6,
text: 'Jour',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
groupAll: true,
units: [
['day', [1]]
],
dateTimeLabelFormats: {
day: ["%e %B %Y"],
}
},
events: {
click: function () {
// couleurs des séries avec doublement
jQuery.each(doublement_jour1_1, function(index, value) {
chart1_1.options.series[0].data[value].color = '#003742';
chart1_1.options.series[1].data[value].color = '#005566';
});
jQuery('.highcharts-plot-band').show();
}
}
}, {
type: 'year',
count: 1,
text: 'Semaine',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
groupAll: true,
units: [
['week', [1]]
],
dateTimeLabelFormats: {
week: ["Semaine du %e %B %Y"],
}
},
events: {
click: function () {
// couleurs des séries normales (enlever couleurs doublement)
jQuery.each(doublement_jour1_1, function(index, value) {
chart1_1.options.series[0].data[value].color = '#6db5ce';
chart1_1.options.series[1].data[value].color = Highcharts.getOptions().colors[0];
});
jQuery('.highcharts-plot-band').show();
}
}
}, {
type: 'year',
count: 1,
text: 'Mois',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
groupAll: true,
units: [
['month', [1]]
],
dateTimeLabelFormats: {
week: ["%B %Y"],
}
},
events: {
click: function () {
// couleurs des séries normales (enlever couleurs doublement)
jQuery.each(doublement_jour1_1, function(index, value) {
chart1_1.options.series[0].data[value].color = '#6db5ce';
chart1_1.options.series[1].data[value].color = Highcharts.getOptions().colors[0];
});
jQuery('.highcharts-plot-band').show();
}
}
}, {
type: 'year',
count: 1,
text: 'Année',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
groupAll: true,
units: [
['year', [1]]
],
dateTimeLabelFormats: {
week: ["%B %Y"],
}
},
events: {
click: function () {
// couleurs des séries normales (enlever couleurs doublement)
jQuery.each(doublement_jour1_1, function(index, value) {
chart1_1.options.series[0].data[value].color = '#6db5ce';
chart1_1.options.series[1].data[value].color = Highcharts.getOptions().colors[0];
});
jQuery('.highcharts-plot-band').hide();
}
}
}],
},
legend: {
enabled: true
},
title: {
text: ''
},
series: [{
name: 'Serie 1',
type: 'column',
stacking: 'normal',
dataGrouping: {
type: 'column',
approximation: 'high'
},
color: '#6db5ce',
//index: 1,
legendIndex: 0,
showInNavigator: true
}, {
name: 'Serie 2',
type: 'column',
stacking: 'normal',
dataGrouping: {
type: 'column',
approximation: 'high'
},
color: Highcharts.getOptions().colors[0],
//index: 0,
legendIndex: 1,
showInNavigator: true
},
{
yAxis: 1,
name: 'Serie 3',
type: 'line',
dataGrouping: {
approximation: 'high'
},
color: Highcharts.getOptions().colors[1],
//index: 3,
visible: true,
legendIndex: 3,
showInNavigator: true,
tooltip: {
pointFormatter: function() {
return this.series.name + ': ' + Highcharts.numberFormat(this.y, 0) + ' cas<br/>';
},
},
}
],
exporting: {
buttons: {
contextButton: {
menuItems: ['viewFullscreen', 'printChart', 'separator', 'downloadPNG', "downloadJPEG", "downloadPDF", 'separator', "downloadCSV"]
}
},
chartOptions: {
title: {
text: titreGraph('1-1'),
},
rangeSelector: {
enabled: false,
},
chart:{
marginTop:'75'
}
},
filename:'graph_1-1'
},
credits: {
enabled: false
},
yAxis: [{
title: {
enabled: true,
text: 'Nombre de sujets',
style: {
fontWeight: 'normal'
}
},
opposite: false,
min: 0,
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
}
}
},{
title: {
enabled: true,
text: 'Nombre action',
style: {
fontWeight: 'normal'
}
},
min: 0,
opposite: true
}],
plotOptions: {
column: {
dataLabels: {
enabled: false
}
}
},
tooltip: {
shared: true,
split: false,
xDateFormat: '%d %B %Y',
pointFormatter: function() {
return this.series.name + ': ' + Highcharts.numberFormat(this.y, 0) + ' cas<br/>';
},
footerFormat: '<b>Total </b>: {point.total:,.0f} cas',
},
xAxis: {
dateTimeLabelFormats: {
day: '%e %B'
},
title: {
text: 'Date de déclaration du cas'
},
},
data: {
csv: graph1,
startRow: 34,
itemDelimiter: ',',
firstRowAsNames: false,
seriesMapping: [{
x: 0,
y: 1,
test: 1
}, {
x: 0,
y: 2,
test: 2
}, {
x: 0,
y: 3,
}],
complete: function(options) {
//console.log(options);
jQuery.each(doublement_jour1_1, function(index, value) {
options.series[0].data[value].color = '#003742';
options.series[1].data[value].color = '#005566';
});
}
}
});
//Option 1
chart1_1.xAxis[0].setExtremes(1582848000000, 1594425600000);
//Option 2
//chart1_1.xAxis[0].setExtremes(1598140800000, 1616198400000);
//Option 3
//chart1_1.xAxis[0].setExtremes(1616284800000, 1626480000000);
//Option 4
//chart1_1.xAxis[0].setExtremes(1626566400000, chart1_1.xAxis[0].getExtremes().max);