title: How to get a simple line for average on a bar chart in jqPlot
body: <p>I am working with a bar chart in jqPlot where I need to show the average with a separate line on the chart. My question is how to do that? Would I need to use a Line chart for this? I have looked at few Line chart examples but they are shown as a trend in the bar chart which starts from the very first bar on the chart rather than showing the average.What I need is plotting a line using the average of all those bars displayed on the chart (screen shots as below)</p>
  
  <p><img src="https://i.stack.imgur.com/607I3.jpg" alt="enter image description here"> </p>
  
  <p>My JSON string to plot the data is as follows: </p>
  
  <pre><code>        var commonOption= {    
              title: '' 
              ,stackSeries: true    
              ,captureRightClick: true    
              ,seriesDefaults:{      
                  renderer:$.jqplot.BarRenderer      
                  ,rendererOptions: {          
                      barMargin: 15          
                      ,highlightMouseDown: true   
                      ,fillToZero: true               
                  },      
                  pointLabels: {
                      show: true
                      ,formatString: '%.1f'
                      ,seriesLabelIndex:1
                      ,hideZeros:false
                  }
              }   
              ,seriesColors: ['#A9CB5E']
              ,axes: {      
                  xaxis: {          
                      tickOptions:{angle:-45}
                      ,tickRenderer: $.jqplot.CanvasAxisTickRenderer
                      ,renderer: $.jqplot.CategoryAxisRenderer
                      ,ticks: []
                  },      
                  yaxis: {   
                      labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                      ,padMin: 0
                      ,pad: 1.1
                      , label: 'Percentage (%)'
                      ,rendererOptions: { forceTickAt0: true}
                      //,min: 0
                      //,tickOptions:{formatString: '%.0f'},
                  } 
              }    
              ,negativeSeriesColors:['#F08080']   
              /*,legend: {
                  show: true 
                  ,location: 'e'
                  ,placement: 'outsideGrid'
              }*/
              ,highlighter:{
                  show: true
                  ,tooltipLocation: 's'
                  ,yvalues: 2
                  ,bringSeriesToFront:true
                  ,showMarker:false
                  ,tooltipAxes: 'y'
                  ,formatString: "%n%s"
              }
              ,cursor:{
                  show: true
                  ,zoom:true
                  ,showTooltip:false
                  ,constrainZoomTo: 'y'
              }
              ,grid:{
                  background: '#f8f8f8'
              }               
          };  
  </code></pre>