Databases
StackOverflow2013
Postsdbo
POHow to get a simple line for average on a bar chart in jqPlot
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to get a simple line for average on a bar chart in jqPlot
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload