Here is an example where the "trend line" is the average of the planned and actual, built as a line above the histogram:
All I did was add a third series with trend data. In the parameters of the series, I set "renderer" for two rows of bars, leaving the third line by default. Fiddle here (you have to cache JS files since jqplot does not allow hotlinking).
var planned = [70000,90000,120000,100000,]; var actual = [80000,80000,150000,120000]; var trend = [75000, 85000, 140000, 110000]; var xAxis = ['Jan', 'Feb', 'Mar', 'Apr']; $(function() { $.jqplot('chart1', [planned, actual, trend], BarChart()); }); function BarChart() { var optionsObj = { title: 'Departmental Savings', axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, ticks: xAxis, }, yaxis: { tickOptions: { showMark: false, formatString: "%d" }, }, }, grid: { borderColor: "#fff", background: "#FFF", drawGridlines: false, shadow: false }, series: [ {label:'Planned',renderer:$.jqplot.BarRenderer}, {label: 'Actual',renderer:$.jqplot.BarRenderer}, {label: 'Mean of Planned and Actual'} ], legend: { show: true, location: 'nw' }, seriesDefaults:{ shadow: false, rendererOptions:{ barPadding: 0, barMargin: 10, barWidth: 25, } }, }; return optionsObj; }