Bonjour à tous,
voila alors j'ai un projet en cours dans lequel je dois afficher des données ( que je recupere dans les fichiers .csv) via highchart et plus particulierement sur un master detail chart.
jusque la tout va bien, je recupere tout parfaitement et tout s'affiche niquel. Le probleme est que je recupere des "date de livraisons, qui se caracterise par des "traits" dans le master chart a une date donnée et je voudrais , que lorsque l'on selectionne dans le detail chart une section avec une date de livraison, que celle ci s'affiche dans le detail chart. ce que je n'arrive pas à faire.
ceci est un lien vers Highcharts ( pour avoir une idéee de ce qu'est un master detail chart ) :
https://www.highcharts.com/demo/dynamic-master-detail
donc je vous mets mon code highcharts:
function printEvolution($container, $title, $csvfilename, $csvfilename_delivery)
{
global $colors;
printHeadJavaScript();
print "
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type=\"text/javascript\">
var masterChart, detailChart, masterSeries = new Array();
$(document).ready(function() {
var options = {
chart: {
renderTo: 'master-container',
defaultSeriesType: 'area',
zoomType: 'x',
marginLeft: 70,
marginRight: 20,
height : 150,
events: {
// listen to the selection event on the master chart to update the
// extremes of the detail chart
selection: function(event) {
var extremesObject = event.xAxis[0],
min = extremesObject.min,
max = extremesObject.max,
detailData = [],
xAxis = this.xAxis[0];
// reverse engineer the last part of the data
jQuery.each(this.series, function(i, series) {
var detailData = [];
jQuery.each(series.data, function(j, point) {
if (point.x > min && point.x < max) {
detailData.push({
x: point.x,
y: point.y
});
}
});
detailChart.series[i].setData(detailData);
});
// move the plot bands to reflect the new detail span
xAxis.removePlotBand('mask-before');
xAxis.addPlotBand({
id: 'mask-before',
from: Date.UTC(2006, 0, 1),
to: min,
color: 'rgba(0, 0, 0, 0.2)'
});
xAxis.removePlotBand('mask-after');
xAxis.addPlotBand({
id: 'mask-after',
from: max,
to: Date.UTC(2008, 11, 31),
color: 'rgba(0, 0, 0, 0.2)'
});
return false;
}
}
},
title: {
text: null
},
exporting: {
enabled: false
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%e %b %y', this.value);
}
},
plotLines: []
},
yAxis: [
{
gridLineWidth: 0,
labels: {
enabled: false
},
title: {
text: null
},
min: 0.6,
showFirstLabel: false,
}],
plotOptions: {
area: {
//stacking: 'normal',
lineWidth: 0.5,
marker: {
enabled : false
}
},
column: {
zIndex: 100
}
},
legend: {
backgroundColor: '#FFFFFF',
align: 'center',
verticalAlign: 'bottom',
shadow: true
},
tooltip: {
formatter: null
/* function() {
return 'On <b>' + Highcharts.dateFormat('%e. %b %y', this.x) +'<b>: <br/>'+ this.y +
' Defects <br/>for <b>' + this.series.name +'</b> state';
}*/
},
series: []
};
function createMaster() {
// -----------------------------------------
// Parcours du fichier contenant les données
// -----------------------------------------
$.get(\"$csvfilename\", function(data) {
// Split the lines
var lines = data.split('\\n');
var datesArr = new Array();
$.each(lines, function(lineNo, line) {
var items = line.split(';');
// header line containes date mm/dd/yy
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) {
datesArr.push(Date.parse(item));
}
});
// the rest of the lines contain data with their name in the first position
} else {
var aSerie = {
data: []
};
aSerie.type = 'area';
if (lineNo == 1) {
aSerie.color = '".$colors['Opened']."';
aSerie.legendIndex = 1;
} else if (lineNo == 2) {
aSerie.color = '".$colors['Corrected']."';
aSerie.legendIndex = 2;
} else if (lineNo ==3) {
aSerie.color = '".$colors['Validated']."';
aSerie.legendIndex = 3;
} else if (lineNo == 4) {
aSerie.color = '".$colors['Rejected']."';
aSerie.legendIndex = 4;
}
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
aSerie.name = item;
} else {
aSerie.data.push([datesArr[itemNo-1], parseFloat(item)]);
}
});
options.series.push(aSerie);
masterSeries.push(aSerie.data);
}
});
//masterChart = new Highcharts.Chart(options);
// -----------------------------------------------------
// Parcours du fichier contenant les dates de livraison
// -----------------------------------------------------
$.get(\"$csvfilename_delivery\", function(data) {
var plotline = {
color: '#000000',
width: 2,
zindex:1,
label: {
text: '',
align: 'center',
verticalAlign: 'middle',
rotation: 90
},
zIndex : 100
};
// Split the lines
var lines = data.split('\\n');
$.each(lines, function(lineNo, line) {
var items = line.split(';');
plotline.value = Date.parse(items[0]);
plotline.label.text = items[1];
masterChart.xAxis[0].addPlotLine(plotline);
});
});
masterChart = new Highcharts.Chart(options);
});
}
function createDetail(masterChart) {
var detailData = [],
detailStart = Date.UTC(2010, 7, 1);
// reverse engineer the last part of the data
/*
jQuery.each(masterChart.series, function(i, series) {
var detailData = [];
jQuery.each(series.data, function(j, point) {
if (point.x > detailStart) {
detailData.push({
x: point.x,
y: point.y
});
}
});
detailChart.series[i].setData(detailData);
});*/
var optionsDetail = {
chart: {
// marginBottom: 120,
renderTo: 'detail-container',
defaultSeriesType: 'area',
//renderTo: 'container',
reflow: false,
marginLeft: 50,
zoomType: 'xy',
marginRight: 20,
// style: {
// position: 'absolute'
// }
},
credits: {
enabled: false
},
subtitle: {
text: 'Select an area by dragging across the lower chart'
},
title: {
text: '$title'
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%e %b %y', this.value);
}
},
plotLines: [{
color: '#000000',
width: 2,
zindex:1,
label: {
text: '',
align: 'center',
verticalAlign: 'middle',
rotation: 90
},
zIndex : 100
}]
},
yAxis: [
{
labels: {
style: {
color: '#89A54E'
}
},
title: {
text: 'Defects nb',
style: {
color: '#89A54E'
}
}
}],
plotline : {
color: '#000000',
width: 2,
zindex:1,
label: {
text: '',
align: 'center',
verticalAlign: 'middle',
rotation: 90
},
zIndex : 100
},
plotOptions: {
area: {
//stacking: 'normal',
lineWidth: 0.5,
marker: {
enabled : false
}
},
column: {
zIndex: 100
}
},
legend: {
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
shadow: true
},
tooltip: {
formatter: function() {
return 'On <b>' + Highcharts.dateFormat('%e. %b %y', this.x) +'<b>: <br/>'+ this.y +
' Defects <br/>for <b>' + this.series.name +'</b> state';
},
shared: true
},
series: [{
name : 'Open',
color: '".$colors['Opened']."',
data: detailData,
}, {
name : 'Corrected or Validated',
color: '".$colors['Corrected']."',
data: detailData,
}, {
name : 'Closed',
color: '".$colors['Validated']."',
data: detailData,
}, {
name : 'Rejected',
color: '".$colors['Rejected']."',
data: detailData,
},{
name : 'Delivery',
type: 'column',
pointStart: detailStart,
color: '#000000',
data: detailData,
}],
};
// create a detail chart referenced by a global variable
detailChart = new Highcharts.Chart(optionsDetail);
}
// make the container smaller and add a second container for the master chart
var \$container = $('#container')
.css('position', 'relative');
var \$detailContainer = $('<div id=\"detail-container\">')
.css({ borderLeft: '20px', height: '80%', width: '100%' })
.appendTo(\$container);
var \$masterContainer = $('<div id=\"master-container\">')
.css({ borderLeft: '20px', height: '20%', width: '100%' })
.appendTo(\$container);
createMaster();
createDetail(masterChart);
});
</script>";
}
desolée si l'indentation est horrible ^^
donc voila un apercu de ce que ca donne:
https://www.cjoint.com/?BHgkZUtjifz
voila j'espere que j'ai bien expliquer mon probleme
merci de votre aide
Afficher la suite
