Stacked Bar with Line

Stacked Bar with Line

<h1> Total Sales vs Target </h1> 

<table>
<tr>
<td valign='top'>	
<div id="stackedcolumnwithline"  style="width:600px;height:400px" >
</div>
</td>
<td valign='top'>
<div id='labels'></div>
</td>
</tr>
</table>



<script>

function PlotStackedColumnWithLine( data , id)
{

    $.plot($(id), data , { 
		series: { stack: true },
		colors: ["red", "orange", "black"],
		xaxis: { 
        ticks: 5,
		tickFormatter: function(x) {
			var Months=new Array("Jan-11","Feb-11","Mar-11","Apr-11","May-11","Jun-11","Jul-11","Aug-11","Sep-11","Oct-11","Nov-11","Dec-11");            
			return Months[x] ;
		 }
		},
		legend: { 
			show: true,
			backgroundOpacity: 0.8,
			container: "#labels",
			labelFormatter: function(label, series) {
			  return '<span>'+ label + '</span>';
			}		
		}		
	});
	
}


function getSales()
{
var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>SalesList</listName> \
                        <viewFields> \
			<ViewFields> \
                            <FieldRef Name='Title' /> \
                            <FieldRef Name='Jan' /> \
                            <FieldRef Name='Feb' /> \
                            <FieldRef Name='Mar' /> \
                            <FieldRef Name='Apr' /> \
                            <FieldRef Name='May' /> \
                            <FieldRef Name='Jun' /> \
                        </ViewFields> \
                        </viewFields> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>";
        $.ajax({ 
            url: "<Path To Your Server>/_vti_bin/lists.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: processSalesReport,
            contentType: "text/xml; charset=\"utf-8\""
        });
}

function processSalesReport(xData, status)
{
	var salesData = [ ];
	var lineItem; 
	$(xData.responseXML).find("z\\:row").each(function() {
           
            try 
            { 
			  var Title =  $(this).attr("ows_Title");
			  var Jan =  getFloatValue($(this).attr("ows_Jan"));
			  var Feb =  getFloatValue($(this).attr("ows_Feb"));
			  var Mar =  getFloatValue($(this).attr("ows_Mar"));
			  var Apr =  getFloatValue($(this).attr("ows_Apr"));
			  var May =  getFloatValue($(this).attr("ows_May"));
			  var Jun =  getFloatValue($(this).attr("ows_Jun"));
			  
			  d1 = [ [0,Jan],[1,Feb],[2,Mar],[3,Apr],[4,May],[5,Jun]];
			  if (Title != "Target")
			  {
				  lineItem =  setbars (Title, d1 ); 
			  }
			  else
			  {
				  lineItem = {
						data: d1,
						label: Title,
						lines: { show: true, steps: false },
						stack: null
					};
			  }
				
			  salesData.push(lineItem);  
            }
           catch (e)
           {
                    alert(e.description );
            }
        });			
				
             PlotStackedColumnWithLine( salesData,"#stackedcolumnwithline");    
}

function roundNumber(num, dec) {
  var result = String(Math.round(num*Math.pow(10,dec))/Math.pow(10,dec));
  if(result.indexOf('.')<0) {
		result+= '.';
  }
  while(result.length- result.indexOf('.')<=dec) {result+= '0';}
  if (dec==0)
     result = result.replace('.','');
  return result;
}

function getFloatValue(n)
{
   x = parseFloat(n);
   if (isNaN(x))
   { 
	x = 0;
   }
   return parseFloat(roundNumber(x,2));
}

function setbars(title, d)
{
   var bardata = {
		  label: title, 
		  data: d,
		  bars: { 
			  show: true ,
			  lineWidth: 0,
			  barWidth: 0.4, 
			  fill: true, 
			  fillColor: { colors: [ { opacity: 0.9 }, { opacity: 0.9 } ] }		  
		  }
		};
	return	bardata;  
}

getSales();

</script>