jqPlot Stacked Bar and Line Chart Examples

The plot(s) on this page use the following plugins:

<script type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
line1 = [4, 2, 9, 16];
line2 = [3, 7, 6.25, 3.125];
plot1 = $.jqplot('chart1', [line1, line2], {
    stackSeries: true,
    legend: {show: true, location: 'nw'},
    title: 'Unit Revenues: Acme Traps Division',
    seriesDefaults: {renderer: $.jqplot.BarRenderer,rendererOptions: {barWidth: 50}},
    series: [{label: '1st Qtr'}, {label: '2nd Qtr'}],
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer, 
            ticks:['Red', 'Blue', 'Green', 'Yellow']
        }, 
        yaxis: {
            min: 0, 
            max: 20, 
            numberTicks:5, 
            tickOptions:{formatString:'$%.2f'}
        }
    }
});
line1 = [[4, 1], [2, 2], [9, 3], [16, 4]];
line2 = [[3, 1], [7, 2], [6.25, 3], [3.125, 4]];
plot2 = $.jqplot('chart2', [line1, line2], {
    stackSeries: true, 
    legend: {show: true, location: 'se'},
    title: 'Unit Sales: Acme Decoy Division',
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer, 
        shadowAngle: 135, 
        rendererOptions: {barDirection: 'horizontal', barWidth: 40}
    },
    series: [
        {label: 'Noisy'}, 
        {label: 'Quiet'}
    ],
    axes: {
        yaxis: {
            renderer: $.jqplot.CategoryAxisRenderer, 
            ticks: ['Q1', 'Q2', 'Q3', 'Q4']
        },
        xaxis: {min: 0, max: 20, numberTicks:5}
    }
});
line1 = [[2006,4], [2007,2], [2008,9], [2009,16]];
line2 = [[2006,3], [2007,7], [2008,6.25], [2009,3.125]];
plot3 = $.jqplot('chart3', [line1, line2], {
  stackSeries: true,
  legend: {show: true, location: 'nw'},
  title: 'Acme Company Unit Sales',
  seriesDefaults: {fill:true, showMarker: false},
  series: [
    {label: 'Traps Division'}, 
    {label: 'Decoy Division'}
  ],
  axes: {
      xaxis: {
          ticks:[2006,2007,2008,2009], 
          tickOptions:{formatString:'%d'}
      }, 
      yaxis: {min: 0, max: 20, numberTicks:5}
  }
});