1,739 articles and 13,381 comments as of Monday, October 25th, 2010

Wednesday, April 29, 2009

Finally: Dynamic charting in WSS, no code required! – Part 3 – Multiple Pie Charts

Multiple Pie Charts

I finally got a script to get multiple Pie Charts on the same page!!!

In the screenshot, I show a hypothetical systems issues list, grouped by priority, status, system and site. You can represent different views of the same list or you can include multiple lists!!!

NOTE 1: avoid group by columns with “(” and “)” symbols as part of its name. Otherwise you should modify the code accordingly, because those are used to isolate the number of items within each group.

NOTE 2: do not use this technique to represent sensitive data, as it travels through the Internet to the Google Charts service.

Here is the process to implement:

1) Plan your page, that is, pre-define how many charts you will need (for some reason, if you add List View web parts AFTER you have inserted the script, new charts might not be rendered).

2) Create the Grouped views that you will need through the default List View, so when you add the list views to the page, you can simply select the desired view from the drop down list.

3) Create a new web part page, add the List View web parts you previously defined, and arrange them (up to down, left to right) in the order you want the charts to appear.

4) Copy the script to your preferred editor and:

  • a) Configure the colors for your charts in the following code line:
    chColor=new Array(”FF6600″,”006600″,”000066″,”C0C0C0″);
    If you plan to use more than 4 charts, add more color codes with the same pattern.
  • b) If you want, change the size (in pixels) and type of chart (”p” or “p3″) in the following portion of the URL for the charts:
    …chart.apis.google.com/chart?cht=p&;chco=”+col+”&;chs=500×150&;chd=t:”+txt+”&;chl=”+txt1
    For more information on how to customize the chart, see http://code.google.com/apis/chart/
  • c) Edit the path at the beginning of the script so it points to your jQuery library store.

5) Insert a CEWP (Content Editor Web Part) on the page, open the toolpane, then Source Editor and paste the script you have just configured. That’s it!

6) You can hide part or all the List Views so the page does not look “congested”. To do so, open the tool pane of the List View web parts, go to the “Layout” section and check “Hidden”.

I hope you enjoy this!

  <div id="jLoadMe" class="content"><strong></strong></div>
  <script src="/jquery/jquery.js"  type="text/javascript">
  // To load jQuery (redefine the path  if necessary)
  </script>
  <script type="text/javascript">
  /*
  * WORKING VERSION 1.0
  * Multiple Pie Charts in SharePoint
  * By Claudio Cabaleyro (2009)
  */
  $("document").ready(function () {
   chColor=new  Array("FF6600","006600","000066","C0C0C0");// add more colors if you include more than 4  ListView web parts
  var ListViewArray =  $('table.ms-listviewtable');
  $(ListViewArray).each (function(j)  {
  var Grp = $(this).find  ('td.ms-gb:contains(':')');
  var coord= new Array();
  var labels= new Array();
  $.each(Grp, function(i,e) {
  var MyIf= $(e).text();
  var txt=  MyIf.substring(MyIf.indexOf('(')+1,MyIf.length-1); // Extract the 'Y'  coordinates
  coord[i]=txt;
  var txt1=  MyIf.substring(MyIf.indexOf(':')+2,MyIf.indexOf("(")-1); // Extract  the labels
  labels[i]=txt1+"("+txt+")"; //add also coordinates for better read
  });
  var txt= coord.join(",");
  var txt1= labels.join("|");
  col= chColor[j];
  // Adjust Chart Properties below - See  Google Charts API for reference
  var vinc= "<IMG  src='http://chart.apis.google.com/chart?cht=p&;chco="+col+"&;chs=500x150&;chd=t:"+txt+"&;chl="+txt1+"'/>";
  if (j%2 == 0)
  ;
  else
  vinc=vinc +"<br>";
  $("#jLoadMe").append(vinc)
  });
  })();
  </script>

 

Claudio Cabaleyro
MOSS 2007 – (almost) no-code solutions

View all entries in this series: ClaudioCabaleyro-Dynamic Charting»
Entries in this series:
  1. Finally: Dynamic charting in WSS, no code required!
  2. Finally: Dynamic charting in WSS, no code required! - Part 2
  3. Finally: Dynamic charting in WSS, no code required! - Part 3 - Multiple Pie Charts
 

Please Join the Discussion

68 Responses to “Finally: Dynamic charting in WSS, no code required! – Part 3 – Multiple Pie Charts”
  1. Patrik Hunter says:

    I cant seem to get this to work for me, I am able to follow the steps in Part 1 and display one chart against my list. But trying to get the Multiple charts is not working for me..I have the 4 views built, added them to a web part page but see no charts after adding the CEWP with the code..any ideas?

  2. john burke says:

    I can’t get this working either. Previous examples with a single chart worked no problem so not sure on why multiple charts not loading.

    The result I get is just the Chrome header with no window displaying anything at all.

    thanks

  3. chris says:

    This is a nice solution. One thing that would be a great addition would be great to have some level of “drill down” available.

  4. Devin Herring says:

    I’m having the same problem. Is there code in the single chart example that needs to be entered in multiple?

  5. Andrew Burhans says:

    I was having the same problem with the charts not showing up. Try making this small change, and it should work for you:

    Change:
    (’td.ms-gb:contains(’:')’);

    To:
    (”td.ms-gb:contains(’:')”);

  6. Claudio says:

    Patrik, John, Devin,

    A potential problem is with “quotes within quotes” in the following selector:

    (’td.ms-gb:contains(’:')’);

    Try replacing the internal single quotes by double quotes or simply replace the above selector by:

    (’td.ms-gb’);

    I have tested the solution with IE and Firefox, but not with other browsers.

    chris,
    Nice idea. I think that we can try adding a “on-click” event to the bar charts redirecting to the underlying list view. I will try to work on it.

    Regards

  7. scott says:

    Very cool idea.
    Is it possible to use other chart types?

  8. john burke says:

    Many thanks. Now got it working. However in addition to the change to the line:
    (’td.ms-gb:contains(’:’)’);

    I have also had to remove each ; following the & on the line to ensure it fits with google charts syntax:
    var vinc= “<IMG src…..

    Again, many thanks.

  9. Jamie says:

    I’m having the same problem, single chart works great, multiple charts..nothing displays.

    I’ve updated the code with Andrew and John’s suggestions, still doesn’t work.

    Anything else I can try?

  10. chris says:

    Scott,
    You had asked:
    “Is it possible to use other chart types?”

    You may want to take a look at the following link;

    http://code.google.com/apis/chart/types.html

    In the code that claudio has provided, you would modify the “cht”, (chart type), definition to change the chart type;

    var vinc= “”;
    if (j%2 == 0)

  11. chris says:

    sorry, part of my post got cut off. find the line that says // Adjust Chart Properties below – See Google Charts API for reference
    and modify accordingly.

  12. john burke says:

    If it helps others I was able to add chart headings and hyperlinks (to the original source data for those that want to drill into this) to the multiple charts. Probably not the most elegant method but did the job for me.

    To do this I added 2 new arrays afer the chColor array setup. One array for titles, one for links. ie.
    chlinks= new array (”url for chart1 here”,”url for chart2 here”…);

    Within the code loop then add lines to extract the title/link for the list group being processed i.e. linktolist= chlinks[j];

    On the line:
    var vinc=”….
    I then added in the necessary additional parts to get:

    var vinc-”“;

    If you add a title then you need to insert the chtt google chart parameter and I also added the chts option as well to highlight the title.

    (Note: I found the multiple charts wtih hyperlinks looked better without the image border but you may want to remove the border=0 bit.

    Claudio, thanks for the excellent articles.

    John

  13. john burke says:

    Oops, text missing from above for some reason. the var vinc line should read (if it submits this time):

    var vinc= ““;

  14. john burke says:

    give up, hopefully you can work it out :-(

  15. Disha says:

    Hello All

    I also try to implement multiple pie chart. First I added 4 different views and on top of all view aded contend editor and added above mentiond scripts.

    But surpsingly last 3 charts are displaying and top 1 chart is not displaying.

    I replaced (’td.ms-gb’) and also remove each ; following the & on the line to ensure it fits with google charts syntax:
    var vinc= “<IMG src…..

    Before this only 4 blank images are displaying, but after this charts are displaying but only 3

    and also

    Any clue

  16. john burke says:

    I had this once with one of mine. I found that the cause of my problem was an ampersand in the group label of the first label on the chart. Because the parsing takes the ampersand as part of the query structure and not literally it fails to generate any data/labels for the chart in question thereby leaving a big gap where your chart should be. I fixed it by simply replacing the ampersand with the word AND in my group labels.

    If its not caused by this though then I don’t know, sorry.

    John

  17. Disha says:

    Hey John

    I am newbie, can you explain in detail? If possible, please provide steps.

  18. john burke says:

    erm… I’m no expert either and will thank Claudio again for his good article – I’ve just tweaked slightly for my own use.

    OK, previous posting was confusing with my reference to labels I think. I was refering to the labels that appear on the chart. These labels come from the text contained within the column by which you are grouping your list view.

    What I was trying to explain was:
    - the charts work based on a list view that has been grouped, which I believe you’re OK with as you’ve already got 3 charts working
    - the text contained within each item in your list for the column used to group the information needs to be alphanumeric text only with no special characters such as apostrophes, ampersands etc (all special characters may not be a problem but I’ve not checked so I exclude all just to be sure). So if you had:
    Col1 Col2 Col3
    Dave blue 24
    John red 25
    Steve blue 27
    And grouped a list view by Col2 ready for your chart, then make sure there are no apostrophes or ampersand characters in any of the list entries in Col2. So the next entry in the list couldn’t be light’blue

    If I’ve still not explained very clearly then apologies and I’ll have to defer to someone else to assist.

  19. Disha says:

    Hello John

    Thanks for rethe repsponse. I checked any group label doesnt have AND, hoever group level have ‘(’ like “(1) High”. I noticed that this particulars view chart is not displaying.

    Let me know how do I resolve this? As this production site I can change the field value from “(1) High” to “High”.

    Please advise

    Disha

  20. Scott says:

    I was able to get three pie charts to display, but I would like to have them three across. Right now they display as two charts in the top row and one on a second row. I inserted my List View web parts up three across. I tried reducing my pixel size, but that did not work. Any idea how to make the pie charts display three across on one line directly above the List View web parts?

  21. Disha says:

    I am also noticed 1 more issue, if any group name having space, it wont display. For Example if group name is “Region Name”, chart wont appear.

    Any idea?

  22. john burke says:

    Scott,
    Near the end of the script are a couple of lines that control the layout by inserting breaks based on a Modulas of 2 calc. You need to change this to a modulas of 3 NOT equal to 0 (but add 1 to j first to account for the 0 value). So it could become if ((j+1) % 3 != 0) …

    Disha,
    Script works fine with space here for lots of charts. I still think your problem relates to having an apostrophe, ampersand of other special character in the group name somewhere – if not a visible one, are there any hidden characters?

  23. Disha says:

    John

    I group by severity which are returning in list as
    Severity:High (12)
    Severity:Medium (4)
    Severity:Low (9)
    Severity:(45) – All those issue where severity is not asssigned.

    In 4 different views there are some record where there is no value assigned so there are returning record count without any group label.

    Any idea

  24. Disha says:

    Here is my code

      // To load jQuery (redefine the path  if necessary)
    
      /*
      * Multiple Pie Charts in SharePoint
      */
      $("document").ready(function () {
       chColor=new  Array("FF6600","006600","000066","C0C0C0");// add more colors if you include more than 4  ListView web parts
      var ListViewArray =  $("table.ms-listviewtable");
      $(ListViewArray).each (function(j)  {
      var Grp = $(this).find  ('td.ms-gb');
      var coord= new Array();
      var labels= new Array();
      $.each(Grp, function(i,e) {
      var MyIf= $(e).text();
      var txt=  MyIf.substring(MyIf.indexOf('(')+1,MyIf.length-1); // Extract the 'Y'  coordinates
      coord[i]=txt;
      var txt1=  MyIf.substring(MyIf.indexOf(':')+2,MyIf.indexOf("(")-1); // Extract  the labels
      labels[i]=txt1+"("+txt+")"; //add also coordinates for better read
      });
      var txt= coord.join(",");
      var txt1= labels.join("|");
      col= chColor[j];
      // Adjust Chart Properties below - See  Google Charts API for reference
      var vinc= "";
    
      if (j%3 == 0)
      ;
      else
      vinc=vinc +"";
      $("#jLoadMe").append(vinc)
      });
      })();
      
  25. Disha says:

    here is top of the code

    // To load jQuery (redefine the path if necessary)

    and there is at endd of code

  26. john burke says:

    this is because there is no label assigned to display. Add a new calculated column which does something like “=IF([Severity]=”",”No Severity Assigned”,[Severity])”. Then change the grouping of your view to use the newly added column.

  27. Disha says:

    Hello All

    Please discard my earlier two poset, I resolved the problem, it is my mistake. Actially after selecting views thne I was doing grouping in view web part, that is why it was not showing.

    Now I want to display title for each chart, can anyone guide me step by step.

    Disha

  28. Disha says:

    FOr each chart title I did followng

    I added following next to chColor array
    chltitle= new Array (”Title 1″,”Title 2″,”Title 3″,”5″);

    Then added following line before var=vinc”"

    title = chltitle[j];

    Then added title in follwing
    var vinc= “”;

    But it is displaying as “title”, not displaying values.

    Any idea whats wrong I am doing here?

    Disha

  29. scott says:

    I have the multi chart version working without titles. I’m trying to follow all of the changes and have to admit that it’s a bit confusing to piece together the mods to add titles.

    Could some repost the entire set of code with the title mod included?

    thanks

  30. Disha says:

    Hello

    I have generated multiple pie chart, but each chart is not displaying as per the value, it is distributing and displayin equalyy diesnt matter what is the values. I have uploaded images on
    http://www.kgfassociates.com/chart.jpeg

    Please let me know how do I display properly. If you see the claudio multiple chart, it is displaying properly.

    Please advise

  31. Disha says:

    Claudio

    If possible please respond mylast 2 post please..

    Disha

  32. eric says:

    John, could you provide a full sample of the code with headins and drill throughs. I think I see waht you are trying to do, but failing to get it right.

  33. john burke says:

    eric,
    I use an 8 chart dashboard with option to have different chart types so see below for how I have it setup:

      // To load jQuery (redefine the path  if necessary)
    
      $("document").ready(function () {
       chColor=new  Array("FF6600","006600","000066","ff0000","ff00ff","FF6600","006600","000066","ff0000","ff00ff");// add more colors if you include more than ListView web parts
    
       listoflinks=new Array("put link 1 here",
                             "put link 2 here",
                             "put link 3 here",
                             "put link 4 here",
                             "put link 5 here",
                             "put link 6 here",
                             "put link 7 here",
                             "put link 8 here");
    
       listoftitles=new Array("title 1","title 2","title 3","titel 4","title 5","title 6","title 7","title 8");
    
       listofcharttypes=new Array("p3","p3","p3","p3","p3","p3","p3","p3");
       listofchartsizes=new Array("460x120","460x120","460x120","470x120","460x120","470x120","460x120","470x120");
    
     var ListViewArray =  $("table.ms-listviewtable");
      $(ListViewArray).each (function(j)  {
    
      if (j!=8&&j!=9)  // skip lists if there are some visible ones you don't need charts for
    {
        var Grp = $(this).find  ("td.ms-gb:contains(':')");
        var coord= new Array();
        var labels= new Array();
        $.each(Grp, function(i,e) {
          var GrpLine= $(e).text();
          coord[i] = GrpLine.substring(GrpLine.indexOf('(')+1,GrpLine.length-1); // Extract the 'Y'  coordinates
          labels[i]=GrpLine.substring(GrpLine.indexOf(':')+2,GrpLine.indexOf("(")-1)+"("+coord[i]+")"; //add values for reference
        });  // this is for end function(i,e) line
    
        // set chart properties based on data - See Google charts API for reference
        var linktolist= "";
        var cht="";     // graph border and close out html for IMG,HREF,DIV
        var vinc= linktolist + cht + chco + chtt + chts + chs + chd + chds+chl+chm+wrapup;
    
    //    if (j==1 || j==5)    // add lines to break up graphs
           var linebreak="";
    //    else
    //       var linebreak="";
    
        if (j%2 == 0)
        ;
        else
        vinc=vinc + "" + linebreak + "";
        $("#jLoadMe").append(vinc)
    };  // end skip for missing some lists
      });  // this is for end function(j) line
      })();
     

    for info, Claudio has now also provided a jschart version with headings and click through so no need to use google charts. See http://www.endusersharepoint.com/?p=1714

    john

  34. eric says:

    Great, thank you. I’m not sure what method will be best to use for our case, so this will help.

  35. drew says:

    I put an alert to see how many tables are in the ListViewArray and it returns 0 even though 3 tables are displayed on the page.

  36. Rob says:

    This is really good stuff.
    How do you suppress the Google title from displaying in your chart web part. Mine is showing “Pie Chart using Google Charting API”? It messes up the alignment of the charts.

    Thanks

  37. Rob says:

    Duh.
    Never mind, I see it.

  38. D.G. says:

    Claudio’s code and the solutions presented are brilliant! This is precisely what we needed, especially the multiple graphs on a single page. We are not coders or developers by any means and since we are a non-profit, we have no budget for SharePoint add-ons like EPM Live, nor do we have budget for developer time.

    A couple of quick(?) questions:

    1) Let’s say we have a list of projects that includes budget information. We want to create a line chart that shows the projects across the x-axis and the budget amounts as data points with the dollar amounts along the y-axis. Using the sum method proposed by Mark Miller doesn’t help here. Neither does using the grouping method that Claudio outlines on his pages. How would we create such a chart?

    2) Let’s say we have the same list of projects from #1. We would again like to do a line chart with the budget information but do a second line on the same graph with Actual Cost for each project; i.e. the underlying question is how do we create multiple lines on a single chart for comparison?

    Best regards-

    Daniel

  39. D.G. says:

    I actually found a problem with the posted code for this. I made the corrections as noted:

    Change
    (’td.ms-gb:contains(’:’)’);
    To
    (’td.ms-gb’);

    And remove all ; from the Google Charts link.

    I have 4 grouped lists and the charts for these display fine. However, before these 4 is a 5th which is blank. That is, there is a blank space, then the 4 graphs. I inserted a debug line to print the value of j because I thought it was just an issue with spacing or something. However, it really thinks there is a chart in that deadspace. j=0 for the first(blank) chart.

    My theory is that the code is picking up it’s own CEWP and trying to display a chart for it. Since there is no data, it displays nothing. Anyone else have this issue?

  40. D.G. says:

    I have a workaround for this problem that displays an initial blank chart. I put the var vinc=”… into an if…else… where I check to see if txt==”. This excludes the first set of data that the remaining logic is picking up from somewhere. Has no one else seen this???

  41. Claudio says:

    Hi D.G.,

    Creating charts using numbers other that count of grouped items require changing the selector:

    (”td.ms-gb:contains(’:')”);

    to something different. Check Bob’s comment on my previous post at http://www.endusersharepoint.com/?p=1537, as he was able to represent column subtotals instead of count of items.

    By the way, and regarding your second comment, there is a transcription problem in the original code: check double and single quotes in the above mentioned selector, because eliminating the colon between single quotes is the probable reason for you getting a blank cell in the dashboard page.

    Hope this helps

  42. Francis Ong says:

    Looking at the post, i have tried and its great. But i still trying to find a way to have a url link to the graph/charts in order for me to drill-down to the tables for more details. Therefore i can leave the graphs/charts as it is on-display and if necessary for the users to click and see the details afterwards.

    Any suggestions.

  43. D.G. says:

    I am still looking for a way to chart a column of values from a list, not the summation or grouped view of those values. No one has been able to answer that for me. E.g. I have a list of 30 different active projects and I want to chart their BAC vs. Actual Cost as two lines on a chart.

    If someone can solve this for me, I will buy them a latté of their choice from Starbucks. :)

  44. john burke says:

    To D.G.

    To get a value for each project I reckon the quickest way is to just do a group view by project name. You’ll then get totals for each project that you can show on your chart without having to change any/much of the code.

    John

  45. Roxanne says:

    Thanks so much for this great series! I am just wondering if you can help me figure how to limit the chart contents to only data in the current web part zone? Is this possible?

  46. Joe Tobey says:

    I am trying to get this to work with no success what so ever. Below is the code that I am using. I borrowed the code sample form john and I am starting with 2 charts, and will build up from there. PLEASE HELP!

    Overall Project Health

    if(typeof jQuery=="undefined"){
                         var jQPath="../javascripts/";
                         document.write("");}
    
      $("document").ready(function () {
       chColor=new  Array("FF6600","006600");// add more colors if you include more than ListView web parts
    
       listoflinks=new Array("Link 1",
                             "Link 2");
    
       listoftitles=new Array("Title 1","Title 2");
    
       listofcharttypes=new Array("p3","p3");
       listofchartsizes=new Array("460x120","460x120");
    
     var ListViewArray =  $("table.ms-listviewtable");
      $(ListViewArray).each (function(j)  {
    
      if (j!=8&amp;&amp;j!=9)  // skip lists if there are some visible ones you don't need charts for
    {
        var Grp = $(this).find  ("td.ms-gb:contains(':')");
        var coord= new Array();
        var labels= new Array();
        $.each(Grp, function(i,e) {
          var GrpLine= $(e).text();
          coord[i] = GrpLine.substring(GrpLine.indexOf('(')+1,GrpLine.length-1); // Extract the 'Y'  coordinates
          labels[i]=GrpLine.substring(GrpLine.indexOf(':')+2,GrpLine.indexOf("(")-1)+"("+coord[i]+")"; //add values for reference
        });  // this is for end function(i,e) line
    
        // set chart properties based on data - See Google charts API for reference
        var linktolist= "";
        var cht="";     // graph border and close out html for IMG,HREF,DIV
        var vinc= linktolist + cht + chco + chtt + chts + chs + chd + chds+chl+chm+wrapup;
    
    //    if (j==1 || j==5)    // add lines to break up graphs
           var linebreak="";
    //    else
    //       var linebreak="";
    
        if (j%2 == 0)
        ;
        else
        vinc=vinc + "" + linebreak + "";
        $("#jLoadMe").append(vinc)
    };  // end skip for missing some lists
      });  // this is for end function(j) line
      })();
    
  47. Joe Tobey says:

    In step 4…what is “THE SCRIPT”?

    4) Copy the script to your preferred editor

  48. john burke says:

    Joe,

    The script is the javascript text listed at the end of the information Claudio… provided a few lines below point the (4) you referred to.

    regards

  49. Joe Tobey says:

    Thanks John…
    I was unable to get that to work, and took an interation of your code posted above and tried to get that to work. Nothing renders on my site…any thoughts?

  50. Joe Tobey says:

    I finally got Cladio’s code to work…all the extra spaces and ‘;’ and sigle quotes where tough to find…I missed one and it threw me. I will now try your code to make them linkable.

    thanks … awesome code!

Trackbacks

Check out what others are saying about this post...
  1. [...] Finally: Dynamic charting in WSS, no code required! – Part 3 – Multiple Pie Charts [...]

  2. [...] Finally: Dynamic charting in WSS, no code required! – Part 3 – Multiple Pie Charts [...]

  3. SharePoint Kaffeetasse 113…

    NoCode Lösungen Create Dynamic Bar and Pie Charts in WSS with any RSS feed: No code required Finally:…

  4. SharePoint Kaffeetasse 113…

    NoCode Lösungen Create Dynamic Bar and Pie Charts in WSS with any RSS feed: No code required Finally…




Notify me of comments to this article:


Speak and you will be heard.

We check comments hourly.
If you want a pic to show with your comment, go get a gravatar!