I have successfully implemented a chart in jsf that dynamically generates based on user input selection from a drop-down list. However, I am now facing the challenge of enabling multiple item selections at once to display multiple lines on the chart simultaneously. I understand that I need to use another jsf component instead of a dropdown list, but I'm unsure how to pass multiple data series to Highcharts for this purpose. Here is a snippet of the code I currently use to generate the chart based on a single item selection:
$('#container').highcharts({
chart: {
zoomType: 'xy',
spacingRight: 20
},
title: {
text: ''
},
xAxis: {
startOnTick:true,
showFirstLabel: true,
endOnTick : true,
showLastLabel:true,
categories: dateAndTimeArray,
tickInterval: 20,
labels:{
rotation:0.1,
align: 'left',
step: 12,
enabled: true
},
style: {
fontSize: '8px'
}
},
yAxis: {
title: {
text: 'Measurement value'
}
},
tooltip: {
xDateFormat: '%Y-%m-%d',
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
type: 'line',
name: 'Value',
data: chartData,
marker: {
enabled: false
}
}]
});