Wednesday, September 22, 2010

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>

 

No comments: