JQPlot Hide lines from Legend Click
Possible duplicate:
Dynamic fleet chart - show row hide by clicking on text or legend field
I am using JQPlot and I have a question about hiding lines if they were clicked in the legend.
Here is my code:
var plotCustomerSurveyGraph = $.jqplot('CustomerSurveyLineGraph', [[0,1,3,2,3,0,1,3,1,2,3,1,2], [1,2,3,1,1,2,2,3,3,1,2,1,2], [1,2,3,4,4,3,2,2,1,4,3,2,2], [0,1,3,3,1,2,2,1,1,0,0,1,2],[2,2,3,3,4,4,0,2,0,1,1,3,3], [2,2,3,3,1,1,0,1,0,2,3,3,1], [1,3,1,4,3,3,1,2,3,4,1,2,1], [2,1,3,2,1,2,0,1,2,4,2,1,0]],
{
axes:
{
xaxis:
{
label: "Date (Week)",
ticks: ['1','2','3','4','5','6','7','8','9','10','11','12','13']
},
yaxis:
{
label: 'Rating',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
ticks: ['0','1','2','3']
}
},
title:'Customer Survey (Last 3 Months)',
width: 480, height: 480,
legend:{show:true, location: 'e', placement: 'outsideGrid'},
seriesDefaults:
{
rendererOptions: {smooth: true}
},
series:[
{
lineWidth:1,
label:'Staff Appearance',
markerOptions: { size:7, style:'dimaond' }
},
{
lineWidth:1,
label:'Staff Product Knowledge',
markerOptions: { size: 7, style:"dimaond" }
},
{
lineWidth:1,
label:'Staff Friendliness',
markerOptions: { size:7, style:"filledSquare" }
},
{
lineWidth:1,
label:'Staff Wait Time Acceptable',
markerOptions: { size:7, style:"filledSquare" }
},
{
lineWidth:1,
label:'Food Value For Money',
markerOptions: { size:7, style:"filledSquare" }
},
{
lineWidth:1,
label:'Overall Quality of Meal',
markerOptions: { size:7, style:"filledSquare" }
},
{
lineWidth:1,
label:'Cleanliness of the Premises',
markerOptions: { size:7, style:"filledSquare" }
},
{
lineWidth:1,
label:'Ambience and Atmosphere of the Premises',
markerOptions: { size:7, style:"filledSquare" }
}
]
}
);
And here is the graph image:
Is it possible to enable a function to hide / show lines depending on if they were clicked in the legend? If so, can I please help a little to do this?
thank
+3
source to share
1 answer
try it
Add renderer: $.jqplot.EnhancedLegendRenderer
to your code
legend:{
renderer: $.jqplot.EnhancedLegendRenderer,
show:true,
location: 'e',
showSwatches: true,
placement: 'outsideGrid'
}
Example: http://jsfiddle.net/JWhmQ/1379/
+9
source to share