HOW TO Display SharePoint List data in Bar Chart format

Embed the following code in a Content Editor Web Part. Also, add the List View Web Parts above the Content Editor Web Part and hide them.

 

The Bar Chart is rendered by the Google Chart API Site.

 

<table>

<tr>

<td>

<div id="RegionReport" class="content"></div>

</td>

<td>&nbsp;&nbsp;&nbsp;</td>

<td>&nbsp;&nbsp;&nbsp;</td>

<td>&nbsp;&nbsp;&nbsp;</td>

<td>&nbsp;&nbsp;&nbsp;</td>

<td>&nbsp;&nbsp;&nbsp;</td>

 

<td>

<div id="TowerReport" class="content"></div>

</td>

</tr>

</table>

 

<script type="text/javascript" src="/sites/ProcurementPMOWave3/JavaScript/jquery-1.3.2.min.js"></script>

 

 

<script type="text/javascript">

 

$("document").ready(function ($) {

 

//Region Bar Chart variables

var RegionBarChartData;

var RegionBarChartLabels;

 

//Tower Bar Chart variables

var TowerBarChartData;

var TowerBarChartLabels;

 

//Current Estimate and counter variables

var CurrentEstimate;

var count;

 

//Initialize variables here

RegionBarChartData = null;

TowerBarChartData = null;

count = 0;

 

 

//Get all Column Totals here

var ArrayTotal=$('#aggr tr > td:not(.ms-vb)');   

var TotalTxt = new (Array);

 

//Loop through Column Totals here

$.each(ArrayTotal, function(i,e)

                {

                TotalTxt[i] = $(e).text().substr($(e).text().indexOf("= ")+2);        

          //Remove $ sign from Current Estimate value

          CurrentEstimate = TotalTxt[i].replace("$","");

 

               

        //alert("Column Total = " + TotalTxt[i]);

 

        if (count <= 4) //These are the Region Current Estimates

 

        //There are 5 Regions (NA, EU, CEEMA, LA, AP)

        //and List Views containing Current Estimates for each

        //REGION are hidden on this page.

        //NOTE: The List Views need to be placed in this sequential

        //order:

        //NA, EU, CEEMA, LA, AP      

    

        {    

       

          if (RegionBarChartData == null)

          {

            RegionBarChartData = "t:" + CurrentEstimate  + "|";

          }

          else

          {

            //Don't need pipe after the

            //5th REGION (AP) Savings Number 

 

            if (count < 4)

            {

              RegionBarChartData += CurrentEstimate + "|";

            }

            else //Last REGION (AP) Current Estimate value

            {

              RegionBarChartData += CurrentEstimate;

            }            

          }

       

         }

 

        else //count > 5. These are the Tower Current Estimates

 

        //There are 8 Towers (Logistics,Ingredients,Commodities

        //Packaging,Ext. Manufacturing,Marketing,Indirect,IS)

        //and List Views containing Current Estimates for each

        //TOWER are also hidden on this page.

        //NOTE: The List Views need to be placed in this sequential

        //order:

        //Logistics,Ingredients,Commodities,Packaging,

        //Ext. Manufacturing,Marketing,Indirect,IS

 

        {

          //alert("TOWER DATA");

 

          if (TowerBarChartData == null)

          {

            TowerBarChartData = "t:" + CurrentEstimate  + "|";

          }

          else

          {

            //Don't need pipe after the

            //8th TOWER (IS) Savings Number 

 

            if (count < 12)

            {

              TowerBarChartData += CurrentEstimate + "|";

            }

            else //Last TOWER (IS) Current Estimate value

            {

              TowerBarChartData += CurrentEstimate;

            }            

          }

 

 

        }

 

 

 

    //Increment counter here

    count = count + 1;

 

    //alert("Count = " + count); 

    //alert("Region Bar Chart Data = " + RegionBarChartData);

    //alert("Tower Bar Chart Data = " + TowerBarChartData);

 

 

//Build REGION and TOWER Bar Chart Labels here

switch(count)

{

//REGION Bar Chart Labels are built here - case 1 thru' 5

case 1: //NA

  RegionBarChartLabels = "t%24" + CurrentEstimate + ",000000,0,0,13|";

  break;

case 2: //EU

  RegionBarChartLabels += "t%24" + CurrentEstimate + ",000000,1,1,13,-1|";

  break;

 

case 3: //CEEMA

  RegionBarChartLabels += "t%24" + CurrentEstimate + ",000000,2,-1,13|";

  break;

 

case 4: //LA

  RegionBarChartLabels += "t%24" + CurrentEstimate + ",000000,3,-1,13|";

  break;

 

case 5: //AP

  RegionBarChartLabels += "t%24" + CurrentEstimate + ",000000,4,-1,13";

  break;

 

//chm=t%24603.3,000000,0,0,13|t%24321.0,000000,1,1,13,-1|t%2478.4,000000,2,-1,13|t%24131.8,000000,3,-1,13|t%2472.5,000000,4,-1,13|t%24322.4,000000,5,-1,13|t%24150.5,000000,6,-1,13|t%24600.9,000000,7,-1,13

 

//Tower Bar Chart Labels are built here - case 5 thru 13

case 6: //Logistics

  TowerBarChartLabels = "t%24" + CurrentEstimate + ",000000,0,0,13|";

  break;

 

case 7: //Ingredients

  TowerBarChartLabels += "t%24" + CurrentEstimate + ",000000,1,1,13,-1|";

  break;

 

case 8: //Commodities

  TowerBarChartLabels += "t%24" + CurrentEstimate + ",000000,2,-1,13|";

  break;

 

case 9: //Packaging

  TowerBarChartLabels += "t%24" + CurrentEstimate + ",000000,3,-1,13|";

  break;

 

case 10: //External Manufacturing

  TowerBarChartLabels += "t%24" + CurrentEstimate + ",000000,4,-1,13|";

  break;

 

case 11: //Marketing

  TowerBarChartLabels += "t%24" + CurrentEstimate + ",000000,5,-1,13|";

  break;

 

case 12: //Indirect

  TowerBarChartLabels += "t%24" + CurrentEstimate + ",000000,6,-1,13|";

  break;

 

case 13: //IS

  TowerBarChartLabels += "t%24" + CurrentEstimate + ",000000,7,-1,13";

  break;

 

default:

  break;

 

}  //end of switch statement

 

     

 

    }); //end of Column Totals looping construct

 

    //alert("Region Bar Chart Data = " + RegionBarChartData);

    //alert("Tower Bar Chart Data = " + TowerBarChartData);

    //alert("Region Bar Chart Labels = " + RegionBarChartLabels);

    //alert("Tower Bar Chart Labels = " + TowerBarChartLabels);

 

//Build the Region Report Image

//It will be rendered from the Google Chart API site

 

var regionReportImage = "<img src='http://chart.apis.google.com/chart?chxl=0:|NA|EU|CEEMA|LA|AP&chxp=0,10,30,50,70,90&chxs=0,676767,15,0,l,676767&chxt=x&chbh=a,5,0&chs=500x300&cht=bvg&chco=3D7930,49188F,FF6A00,1900FF,FFEA00&chds=0,1000,0,1000,0,1000,0,1000,0,1000&chd=" + RegionBarChartData + "&chm=" + RegionBarChartLabels + "&chtt=Region+Report&chts=676767,25' />";

 

//Build the Tower Report Image

//It will be rendered from the Google Chart API site

 

var towerReportImage = "<img src='http://chart.apis.google.com/chart?chxl=0:|Logistics|Ingredients|Commodities|Packaging|Ex+Man|Marketing|Indirect|IS&chxp=0,5,18,31,44,56,68,81,93&chxs=0,676767,15,0,l,676767&chxt=x&chbh=a,5,0&chs=700x300&cht=bvg&chco=C746AC,DE7D8F,00EECA,91D311,570DDE,7777CC,990066,76A4FB&chds=0,1000,0,1000,0,1000,0,1000,0,1000,0,1000,0,1000,0,1000&chd=" + TowerBarChartData + "&chm=" + TowerBarChartLabels + "&chtt=Tower+Report&chts=676767,25' />";

 

 

//Assign the Images to the respective DIV tags

$("#RegionReport").append("<p>"+ regionReportImage +"</p>")

$("#TowerReport").append("<p>"+ towerReportImage +"</p>")

 

 

});

 

 

 

 </script>

 

CODE: HOW TO Remove Domain portion from SharePoint User ID

Use the code to below to strip out the DOMAIN\ portion from a SharePoint Active Directory user account:

 

string domainUser = Regex.Replace("domain\\user",".*\\\\(.*)", "$1",RegexOptions.None);

OR

string shortName = System.IO.Path.GetFileNameWithoutExtension(ResourceLoginName);

 

 

 

 

CODE: Procurement site home page (jQuery/List Web Service/HTML/JavaScript)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>Untitled Page</title>

</head>

<body>

 

<span id="spnGrid">&nbsp;</span>

<br>

<table>

<tr>

<td valign=bottom>Key:</td>

<td><IMG src='Procurement%20Pictures/red_key.png' width='21' height='19' border='none'>Significant Delay/No Progress</td>

<td><IMG src='Procurement%20Pictures/yellow_key.png' width='21' height='19' border='none'>Moderate Progress/Some Delay</td>

<td><IMG src='Procurement%20Pictures/green_key.png' width='21' height='19' border='none'>Good Team Traction/Progress</td>

<td><IMG src='Procurement%20Pictures/notapp_key.png' width='21' height='19' border='none'>Not Applicable</td>

</tr>

</table>

<script type="text/javascript" src="JavaScript/jquery-1.3.2.min.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

        var soapEnv =

            "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \

                <soapenv:Body> \

                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \

                        <listName>Tower and Region Status</listName> \

                        <viewFields> \

                            <ViewFields> \

                              <FieldRef Name='Form_x0020_Type' /> \

                              <FieldRef Name='Tower' /> \

                              <FieldRef Name='Region' /> \

                              <FieldRef Name='_Status' /> \

                              <FieldRef Name='NA_x0020_Status' /> \

                              <FieldRef Name='EU_x0020_Status' /> \

                              <FieldRef Name='LA_x0020_Status' /> \

                              <FieldRef Name='CEEMA_x0020_Status' /> \

                              <FieldRef Name='AP_x0020_Status' /> \

                           </ViewFields> \

                        </viewFields> \

                    </GetListItems> \

                </soapenv:Body> \

            </soapenv:Envelope>";

        $.ajax({

            url: "_vti_bin/lists.asmx",

            type: "POST",

            dataType: "xml",

            data: soapEnv,

            complete: buildStatusChart,

            contentType: "text/xml; charset=\"utf-8\""

        });

    });

function buildStatusChart(xData, status) {

        var imgPkgNASrc, imgPkgEUSrc, imgPkgLASrc, imgPkgCEEMASrc, imgPkgAPSrc;

        var imgComNASrc, imgComEUSrc, imgComLASrc, imgComCEEMASrc, imgComAPSrc;

        var imgIngNASrc, imgIngEUSrc, imgIngLASrc, imgIngCEEMASrc, imgIngAPSrc;

        var imgLogNASrc, imgLogEUSrc, imgLogLASrc, imgLogCEEMASrc, imgLogAPSrc;

        var imgManNASrc, imgManEUSrc, imgManLASrc, imgManCEEMASrc, imgManAPSrc;

        var imgIndNASrc, imgIndEUSrc, imgIndLASrc, imgIndCEEMASrc, imgIndAPSrc;

        var imgIfsNASrc, imgIfsEUSrc, imgIfsLASrc, imgIfsCEEMASrc, imgIfsAPSrc;

        var imgMktNASrc, imgMktEUSrc, imgMktLASrc, imgMktCEEMASrc, imgMktAPSrc;

       

        var imgCapNASrc, imgCapEUSrc, imgCapLASrc, imgCapCEEMASrc, imgCapAPSrc;

              

        var imgNASrc, imgEUSrc, imgLASrc, imgCEEMASrc, imgAPSrc, imgCapSrc;

        var imgSrcArray = new Array();

        $(xData.responseXML).find("z\\:row").each(function() {

     

//Get NA Region Status

    if ($(this).attr("ows_Region") == "NA")

        {

        imgNASrc = getImageSource($(this).attr("ows__Status"));          

        }

//Get EU Region Status

    if ($(this).attr("ows_Region") == "EU")

        {

        imgEUSrc = getImageSource($(this).attr("ows__Status"));          

        }

 

//Get LA Region Status

        if ($(this).attr("ows_Region") == "LA")

        {

          imgLASrc = getImageSource($(this).attr("ows__Status"));

        }

//Get CEEMA Region Status

        if ($(this).attr("ows_Region") == "CEEMA")

        {

            imgCEEMASrc = getImageSource($(this).attr("ows__Status"));

        }

//Get AP Region Status

if ($(this).attr("ows_Region") == "AP")

        {

            imgAPSrc = getImageSource($(this).attr("ows__Status"));

        }

//Get Packaging Tower Status for all 5 Regions

if ($(this).attr("ows_Tower") == "Packaging")

{

         //Get Packaging NA Status

        imgPkgNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));

        //Get Packaging EU Status       

        imgPkgEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));       

        //Get Packaging LA Status

     imgPkgLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));       

        //Get Packaging CEEMA Status

     imgPkgCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));

        //Get Packaging AP Status

        imgPkgAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));       

}

//Get Commodities Tower Status for all 5 Regions

if ($(this).attr("ows_Tower") == "Commodities")

{

        //Get Commodities NA Status

        imgComNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));

        //Get Commodities EU Status       

        imgComEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));       

        //Get Commodities LA Status

     imgComLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));       

        //Get Commodities CEEMA Status

     imgComCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));

        //Get Commodities AP Status

        imgComAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));        

}

//Get Ingredients Tower Status for all 5 Regions

if ($(this).attr("ows_Tower") == "Ingredients")

{

        //Get Ingredients NA Status

        imgIngNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));

        //Get Ingredients EU Status        

        imgIngEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));       

        //Get Ingredients LA Status

     imgIngLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));       

        //Get Ingredients CEEMA Status

     imgIngCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));

        //Get Ingredients AP Status

        imgIngAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));       

}

 

//Get Logistics Tower Status for all 5 Regions

if ($(this).attr("ows_Tower") == "Logistics")

{

        //Get Logistics NA Status

        imgLogNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));

        //Get Logistics EU Status       

        imgLogEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));       

        //Get Logistics LA Status

     imgLogLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));       

        //Get Logistics CEEMA Status

     imgLogCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));

        //Get Logistics AP Status

        imgLogAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));       

}

//Get Manufacturing Tower Status for all 5 Regions

if ($(this).attr("ows_Tower") == "External Manufacturing")

{

        //Get Manufacturing NA Status

        imgManNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));

        //Get Manufacturing EU Status       

        imgManEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));       

        //Get Manufacturing LA Status

     imgManLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));       

        //Get Manufacturing CEEMA Status

     imgManCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));

        //Get Manufacturing AP Status

        imgManAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));       

}

//Get Indirect Tower Status for all 5 Regions

if ($(this).attr("ows_Tower") == "Indirect")

{

        //Get Indirect NA Status

        imgIndNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));

        //Get Indirect EU Status       

        imgIndEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));       

        //Get Indirect LA Status

     imgIndLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));        

        //Get Indirect CEEMA Status

     imgIndCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));

        //Get Indirect AP Status

        imgIndAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));       

}

//Get IS Tower Status for all 5 Regions

if ($(this).attr("ows_Tower") == "IS")

{

        //Get IS NA Status

        imgIfsNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));

        //Get IS EU Status       

        imgIfsEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));       

        //Get IS LA Status

        imgIfsLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));       

        //Get IS CEEMA Status

     imgIfsCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));

        //Get IS AP Status

        imgIfsAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));       

}

 

//Get Marketing Tower Status for all 5 Regions

if ($(this).attr("ows_Tower") == "Marketing")

{

        //Get Marketing NA Status

        imgMktNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));

        //Get Marketing EU Status       

        imgMktEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));       

        //Get Marketing LA Status

        imgMktLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));       

        //Get Marketing CEEMA Status

     imgMktCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));

        //Get Marketing AP Status

        imgMktAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));       

}

 

//Get Capex Status for all 5 Regions

if ($(this).attr("ows_Tower") == "Capex")

{

        //Get Marketing NA Status

        imgCapNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));

        //Get Marketing EU Status       

        imgCapEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));       

        //Get Marketing LA Status

        imgCapLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));       

        //Get Marketing CEEMA Status

     imgCapCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));

        //Get Marketing AP Status

        imgCapAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));       

}

    

//Store Packaging Tower Images

if(typeof(imgPkgNASrc) !== 'undefined' && imgPkgNASrc != null)

{

 imgSrcArray["PkgNA"] = imgPkgNASrc;

}

if(typeof(imgPkgEUSrc) !== 'undefined' && imgPkgEUSrc != null)

{

 imgSrcArray["PkgEU"] = imgPkgEUSrc;

}

if(typeof(imgPkgLASrc) !== 'undefined' && imgPkgLASrc != null)

{

 imgSrcArray["PkgLA"] = imgPkgLASrc;

}

if(typeof(imgPkgCEEMASrc) !== 'undefined' && imgPkgCEEMASrc != null)

{

 imgSrcArray["PkgCEEMA"] = imgPkgCEEMASrc;

}

if(typeof(imgPkgAPSrc) !== 'undefined' && imgPkgAPSrc != null)

{

 imgSrcArray["PkgAP"] = imgPkgAPSrc;

}

//Store Commodities Tower Images

if(typeof(imgComNASrc) !== 'undefined' && imgComNASrc != null)

{

 imgSrcArray["ComNA"] = imgComNASrc;

}

if(typeof(imgComEUSrc) !== 'undefined' && imgComEUSrc != null)

{

 imgSrcArray["ComEU"] = imgComEUSrc;

}

if(typeof(imgComLASrc) !== 'undefined' && imgComLASrc != null)

{

 imgSrcArray["ComLA"] = imgComLASrc;

}

if(typeof(imgComCEEMASrc) !== 'undefined' && imgComCEEMASrc != null)

{

 imgSrcArray["ComCEEMA"] = imgComCEEMASrc;

}

if(typeof(imgComAPSrc) !== 'undefined' && imgComAPSrc != null)

{

 imgSrcArray["ComAP"] = imgComAPSrc;

}

//Store Ingredients Tower Images

if(typeof(imgIngNASrc) !== 'undefined' && imgIngNASrc != null)

{

 imgSrcArray["IngNA"] = imgIngNASrc;

}

if(typeof(imgIngEUSrc) !== 'undefined' && imgIngEUSrc != null)

{

 imgSrcArray["IngEU"] = imgIngEUSrc;

}

if(typeof(imgIngLASrc) !== 'undefined' && imgIngLASrc != null)

{

 imgSrcArray["IngLA"] = imgIngLASrc;

}

if(typeof(imgIngCEEMASrc) !== 'undefined' && imgIngCEEMASrc != null)

{

 imgSrcArray["IngCEEMA"] = imgIngCEEMASrc;

}

if(typeof(imgIngAPSrc) !== 'undefined' && imgIngAPSrc != null)

{

 imgSrcArray["IngAP"] = imgIngAPSrc;

}

//Store Logistics Tower Images

if(typeof(imgLogNASrc) !== 'undefined' && imgLogNASrc != null)

{

 imgSrcArray["LogNA"] = imgLogNASrc;

}

if(typeof(imgLogEUSrc) !== 'undefined' && imgLogEUSrc != null)

{

 imgSrcArray["LogEU"] = imgLogEUSrc;

}

if(typeof(imgLogLASrc) !== 'undefined' && imgLogLASrc != null)

{

 imgSrcArray["LogLA"] = imgLogLASrc;

}

if(typeof(imgLogCEEMASrc) !== 'undefined' && imgLogCEEMASrc != null)

{

 imgSrcArray["LogCEEMA"] = imgLogCEEMASrc;

}

if(typeof(imgLogAPSrc) !== 'undefined' && imgLogAPSrc != null)

{

 imgSrcArray["LogAP"] = imgLogAPSrc;

}

//Store Manufacturing Tower Images

if(typeof(imgManNASrc) !== 'undefined' && imgManNASrc != null)

{

 imgSrcArray["ManNA"] = imgManNASrc;

}

if(typeof(imgManEUSrc) !== 'undefined' && imgManEUSrc != null)

{

 imgSrcArray["ManEU"] = imgManEUSrc;

}

if(typeof(imgManLASrc) !== 'undefined' && imgManLASrc != null)

{

 imgSrcArray["ManLA"] = imgManLASrc;

}

if(typeof(imgManCEEMASrc) !== 'undefined' && imgManCEEMASrc != null)

{

 imgSrcArray["ManCEEMA"] = imgManCEEMASrc;

}

if(typeof(imgManAPSrc) !== 'undefined' && imgManAPSrc != null)

{

 imgSrcArray["ManAP"] = imgManAPSrc;

}

//Store Indirect Tower Images

if(typeof(imgIndNASrc) !== 'undefined' && imgIndNASrc != null)

{

 imgSrcArray["IndNA"] = imgIndNASrc;

}

if(typeof(imgIndEUSrc) !== 'undefined' && imgIndEUSrc != null)

{

 imgSrcArray["IndEU"] = imgIndEUSrc;

}

if(typeof(imgIndLASrc) !== 'undefined' && imgIndLASrc != null)

{

 imgSrcArray["IndLA"] = imgIndLASrc;

}

if(typeof(imgIndCEEMASrc) !== 'undefined' && imgIndCEEMASrc != null)

{

 imgSrcArray["IndCEEMA"] = imgIndCEEMASrc;

}

if(typeof(imgIndAPSrc) !== 'undefined' && imgIndAPSrc != null)

{

 imgSrcArray["IndAP"] = imgIndAPSrc;

}

//Store IS Tower Images

if(typeof(imgIfsNASrc) !== 'undefined' && imgIfsNASrc != null)

{

 imgSrcArray["IfsNA"] = imgIfsNASrc;

}

if(typeof(imgIfsEUSrc) !== 'undefined' && imgIfsEUSrc != null)

{

 imgSrcArray["IfsEU"] = imgIfsEUSrc;

}

if(typeof(imgIfsLASrc) !== 'undefined' && imgIfsLASrc != null)

{

 imgSrcArray["IfsLA"] = imgIfsLASrc;

}

if(typeof(imgIfsCEEMASrc) !== 'undefined' && imgIfsCEEMASrc != null)

{

 imgSrcArray["IfsCEEMA"] = imgIfsCEEMASrc;

}

if(typeof(imgIfsAPSrc) !== 'undefined' && imgIfsAPSrc != null)

{

 imgSrcArray["IfsAP"] = imgIfsAPSrc;

}

//Store Marketing Tower Images

if(typeof(imgMktNASrc) !== 'undefined' && imgMktNASrc != null)

{

 imgSrcArray["MktNA"] = imgMktNASrc;

}

if(typeof(imgMktEUSrc) !== 'undefined' && imgMktEUSrc != null)

{

 imgSrcArray["MktEU"] = imgMktEUSrc;

}

if(typeof(imgMktLASrc) !== 'undefined' && imgMktLASrc != null)

{

 imgSrcArray["MktLA"] = imgMktLASrc;

}

if(typeof(imgMktCEEMASrc) !== 'undefined' && imgMktCEEMASrc != null)

{

 imgSrcArray["MktCEEMA"] = imgMktCEEMASrc;

}

if(typeof(imgMktAPSrc) !== 'undefined' && imgMktAPSrc != null)

{

 imgSrcArray["MktAP"] = imgMktAPSrc;

}

 

//Store Capex Tower Images

if(typeof(imgCapNASrc) !== 'undefined' && imgCapNASrc != null)

{

 imgSrcArray["CapNA"] = imgCapNASrc;

}

if(typeof(imgCapEUSrc) !== 'undefined' && imgCapEUSrc != null)

{

 imgSrcArray["CapEU"] = imgCapEUSrc;

}

if(typeof(imgCapLASrc) !== 'undefined' && imgCapLASrc != null)

{

 imgSrcArray["CapLA"] = imgCapLASrc;

}

if(typeof(imgCapCEEMASrc) !== 'undefined' && imgCapCEEMASrc != null)

{

 imgSrcArray["CapCEEMA"] = imgCapCEEMASrc;

}

if(typeof(imgCapAPSrc) !== 'undefined' && imgCapAPSrc != null)

{

 imgSrcArray["CapAP"] = imgCapAPSrc;

}

 

//Store NA Region Image

if(typeof(imgNASrc) !== 'undefined' && imgNASrc != null)

{

 imgSrcArray["NA"] = imgNASrc;

}

//Store EU Region Image

if(typeof(imgEUSrc) !== 'undefined' && imgEUSrc != null)

{

 imgSrcArray["EU"] = imgEUSrc;

}

//Store LA Region Image

if(typeof(imgLASrc) !== 'undefined' && imgLASrc != null)

{

 imgSrcArray["LA"] = imgLASrc;

}

//Store CEEMA Region Image

if(typeof(imgCEEMASrc) !== 'undefined' && imgCEEMASrc != null)

{

 imgSrcArray["CEEMA"] = imgCEEMASrc;

}

//Store AP Region Image

if(typeof(imgAPSrc) !== 'undefined' && imgAPSrc != null)

{

 imgSrcArray["AP"] = imgAPSrc;

}

});

var spnElement= document.getElementById("spnGrid");

//Construct table HTML here

var tableHtml = "";

tableHtml = "<TABLE border='1' cellspacing='0' cellpadding='1'";

tableHtml += "<TBODY>";

//Construct Top row here

tableHtml += "<TR>"

tableHtml += "<TD>&nbsp;</TD>";

tableHtml += "<TD valign=top><A HREF='Tower%20and%20Region%20Status/Forms/Region%20Status.aspx'>Region Status</A></TD>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Logistics.aspx'>Logistics</A><br><A HREF='Procurement%20Forms/Forms/Logistics.aspx'><IMG src='Procurement%20Pictures/cargocontainers_thumb.png' width='77' height='58' border='none'></A></TD>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Ingredients.aspx'>Ingredients</A><br><A HREF='Procurement%20Forms/Forms/Ingredients.aspx'><IMG src='Procurement%20Pictures/ingredient_thumb.png' width='77' height='58' border='none'></A></TD>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Commodities.aspx'>Commodities</A><br><A HREF='Procurement%20Forms/Forms/Commodities.aspx'><IMG src='Procurement%20Pictures/corn_thumb.jpg' width='77' height='58' border='none'></A></TD>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Packaging.aspx'>Packaging</A><br><A HREF='Procurement%20Forms/Forms/Packaging.aspx'><IMG src='Procurement%20Pictures/cardboardboxes_thumb.png' width='77' height='58' border='none'></A></TD>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Manufacturing.aspx'>Ex Man</A><br><A HREF='Procurement%20Forms/Forms/Manufacturing.aspx'><IMG src='Procurement%20Pictures/dairyfactory_thumb.png' width='77' height='58' border='none'></A></TD>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Marketing.aspx'>Marketing</A><br><A HREF='Procurement%20Forms/Forms/Marketing.aspx'><IMG src='Procurement%20Pictures/bullhorn_thumb.jpg' width='77' height='58' border='none'></A></TD>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Indirect.aspx'>Indirect</A><br><A HREF='Procurement%20Forms/Forms/Indirect.aspx'><IMG src='Procurement%20Pictures/paperclips_thumb.png' width='77' height='58' border='none'></A></TD>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/IS.aspx'>IS</A> <br><A HREF='Procurement%20Forms/Forms/IS.aspx'><IMG src='Procurement%20Pictures/is.png' width='77' height='58' border='none'></A></TD>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Capex%20Tower%20view.aspx'>Capex</A> <br><A HREF='Procurement%20Forms/Forms/Capex%20Tower%20view.aspx'><IMG src='Procurement%20Pictures/Capex.jpg' width='77' height='58' border='none'></A></TD>";

 

tableHtml += "</TR>";

//Construct NA row here

tableHtml += "<TR>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/NAOnly.aspx'>NA</A><br><A HREF='Procurement%20Forms/Forms/NAOnly.aspx'><IMG src='Procurement%20Pictures/na.gif' width='77' height='40' border='none'></A></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["NA"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["LogNA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IngNA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ComNA"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["PkgNA"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ManNA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["MktNA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IndNA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IfsNA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["CapNA"]+ "' width='27' height='27'></TD>";

tableHtml += "</TR>";

//Construct EU row here

tableHtml += "<TR>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/EUOnly.aspx'>EU</A><br><A HREF='Procurement%20Forms/Forms/EUOnly.aspx'><IMG src='Procurement%20Pictures/europe_western77x40.gif' width='77' height='40' border='none'></A></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["EU"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["LogEU"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IngEU"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ComEU"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["PkgEU"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ManEU"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["MktEU"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IndEU"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IfsEU"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["CapEU"]+ "' width='27' height='27'></TD>";

tableHtml += "</TR>";

//Construct LA row here

tableHtml += "<TR>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/LAOnly.aspx'>LA</A><br><A HREF='Procurement%20Forms/Forms/LAOnly.aspx'><IMG src='Procurement%20Pictures/LA.gif' width='77' height='40' border='none'></A></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["LA"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["LogLA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IngLA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ComLA"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["PkgLA"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ManLA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["MktLA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IndLA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IfsLA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["CapLA"]+ "' width='27' height='27'></TD>";

tableHtml += "</TR>";

//Construct CEEMA row here

tableHtml += "<TR>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/CEEMAOnly.aspx'>CEEMA</A><br><A HREF='Procurement%20Forms/Forms/CEEMAOnly.aspx'><IMG src='Procurement%20Pictures/CEEMA77x40.gif' width='77' height='40' border='none'></A></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["CEEMA"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["LogCEEMA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IngCEEMA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ComCEEMA"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["PkgCEEMA"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ManCEEMA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["MktCEEMA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IndCEEMA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IfsCEEMA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["CapCEEMA"]+ "' width='27' height='27'></TD>";

tableHtml += "</TR>";

//Construct AP row here

tableHtml += "<TR>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/APOnly.aspx'>AP</A><br><A HREF='Procurement%20Forms/Forms/APOnly.aspx'><IMG src='Procurement%20Pictures/asia-pac77x40.gif' width='77' height='40' border='none'></A></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["AP"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["LogAP"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IngAP"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ComAP"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["PkgAP"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ManAP"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["MktAP"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IndAP"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IfsAP"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["CapAP"]+ "' width='27' height='27'></TD>";

tableHtml += "</TR>";

//Construct closing table tags

tableHtml += "</TBODY>";

tableHtml += "</TABLE>";

//Assign the tableHTML code to the span tag INNER HTML property to display it

spnElement.innerHTML = tableHtml ;

}

function getImageSource(statusValue)

    {

        var imgSrc;

        if (statusValue == "Red")

            {

                imgSrc= "Procurement%20Pictures/red.png";

            }

            else if

            (statusValue == "Yellow")

            {

                imgSrc= "Procurement%20Pictures/yellow.png";

            }

            else if

            (statusValue == "Green")

            {

                imgSrc= "Procurement%20Pictures/green.png";

            }

            else

            {

                imgSrc= "Procurement%20Pictures/notapp.png";

            }

        return imgSrc;

    }

</script>

 

 

</body>

</html>