Source

jqplot / examples / stackedBarCategoryVsLinearAxes.html

Full commit
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />
  <link rel="stylesheet" type="text/css" href="examples.css" />
  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
  
  <!-- BEGIN: load jquery -->
  <script language="javascript" type="text/javascript" src="../src/jquery-1.5.1.min.js"></script>

  <!-- END: load jquery -->
  
  <!-- BEGIN: load jqplot -->
  <script language="javascript" type="text/javascript" src="../src/jquery.jqplot.js"></script>
	<script language="javascript" type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.js"></script>
	<script language="javascript" type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.js"></script>
	<script language="javascript" type="text/javascript" src="../src/plugins/jqplot.barRenderer.js"></script>
	<script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.js"></script>
	<script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.js"></script>
		
<script type="text/javascript" language="javascript">
  
 $(document).ready(function(){
      $.jqplot.config.enablePlugins = true;
    var line1 = [6.75, 14, 10.75, 5.125, 10];
    var line2 = [1, 4, 5, 2, 2];

    var line3 = [[1204347600000, 6.75] , [1207022400000, 14], [1209614400000, 10.75], [1212292800000, 5.125], [1214884800000, 10]];
    var line4 = [[1204347600000, 1] , [1207022400000, 4], [1209614400000, 5], [1212292800000, 2], [1214884800000, 2]];

    var tickers = ['2008-03-01', '2008-04-01', '2008-05-01', '2008-06-01', '2008-07-01'];
    plot1 = $.jqplot('chart1', [line1, line2], {
     stackSeries: true,
     legend: {
       show: true,
       location: 'ne'
     },
     title: 'Data per month stack by user',
     seriesDefaults: {
       renderer: $.jqplot.BarRenderer,
       rendererOptions: {
          barWidth: 20
       },
        shadowAngle: 135
     },
     series: [{
       label: 'User1'
     },
     {
       label: 'User2'
     }],
     axes: {
        xaxis: {
         renderer: $.jqplot.CategoryAxisRenderer,
                  ticks: tickers,
                 rendererOptions: {
                   tickRenderer: $.jqplot.CanvasAxisTickRenderer
                 },
         tickOptions: {
           angle: -30
         }
        },
       yaxis: {
         min: 0
       }
     } 
    });
		
		
    plot2 = $.jqplot('chart2', [line3, line4], {
    	stackSeries: true,
    	legend: {
    		show: true,
    		location: 'ne'
    	},
    	title: 'Data per month stack by user',
    	seriesDefaults: {
    		renderer: $.jqplot.BarRenderer,
    		rendererOptions: {
          barWidth: 20
    		},
        shadowAngle: 135
    	},
    	series: [{
    		label: 'User1'
    	},
    	{
    		label: 'User2'
    	}],
    	axes: {
         xaxis: {
         renderer: $.jqplot.DateAxisRenderer,
         rendererOptions: {
           tickRenderer: $.jqplot.CanvasAxisTickRenderer
         },
         tickInterval: '1 month',
         tickOptions: {
           formatString: '%b %Y',
           fontSize: '10pt',
           fontFamily: 'Tahoma',
           angle: -30
         }
        },
    		yaxis: {
    			min: 0
    		}
    	}	
    });	    
    
});

</script>
</head>
<body>
<?php include "nav.inc"; ?>

<div id="chart1" class='plot' style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
<div id="chart2" class='plot' style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
<div id="chart3" class='plot' style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
 
</body>
</html>