SPJS Charts for SharePoint update 20.09.2012

27.09.2012 v3.3.6 includes these changes:

  • Changed the method for caching the filter values when loading the charts and changing the filter dropdowns. This should fix any errors when you have multiple filtered charts in one page.
  • Added option to override “chart options” set in the GUI by adding an object to the CEWP like this: 
    var chartOptionOverride = {"MyChart1":{"title":"This is the chart title!"}};

See the CEWP code example for v3.3.6 in the download section

In v3.3.5 I have added these features:

  1. Changed the way the chart and the accessories are rendered to keep all items within the “chart container”. This helps in positioning the charts in the page.
  2. Added option to load the chart manually.
  3. Added option to display a placeholder / overlay when the chart is loading. This will prevent the page from looking like it has frozen while loading a heavy chart. The page is still unresponsive – but at least it looks better.
1.

What happens under the hood is that the chart is created in a separate container – dynamically created within the container defined in the CEWP. For those interested, this container is named containerId_chart. Where “containerId” is the id defined in the array “arrOfChartContainers” in the CEWP.

2.

You can delay the loading of the chart by 4000ms (4 seconds) like this:

<div id="MyChart1"></div>
<script type="text/javascript">
/*****************************************************
		Address all containers
*****************************************************/
// All charts must be represented by a container with a unique id. 
// This container  must be present in the page
var arrOfChartContainers = ["MyChart1"];
var loadRC = false;
var allowEval = false;

var loadManually = true;
function manualLoad(){
	loadManually = false;
	spjs_GenerateChart();
}

setTimeout(function(){
	manualLoad();
},4000);

</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/test/English/Charts/Javascript/3.3/SPJS_ChartsForSharePoint_v3.3.5.js"></script>

Or you can make a button and call the chart manually like this:

<input type="button" onclick="manualLoad()" value="Load chart">
<div id="MyChart1"></div>
<script type="text/javascript">
/*****************************************************
		Address all containers
*****************************************************/
// All charts must be represented by a container with a unique id. 
// This container  must be present in the page
var arrOfChartContainers = ["MyChart1"];
var loadRC = false;
var allowEval = false;

var loadManually = true;
function manualLoad(){
	loadManually = false;
	spjs_GenerateChart();
}
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/test/English/Charts/Javascript/3.3/SPJS_ChartsForSharePoint_v3.3.5.js"></script>
3.

To have a placeholder like this while the chart loads:
IMG

You must add this code to your CEWP:

<style type="text/css">
.chartLoadingOverlay{
	font-style:italic;
	color:gray;
	border:1px silver solid;
	background-color:#F5F5F5;
	line-height:250px;
	height:250px;
	width:500px;	
	text-align:center;	
	margin:2px;
}
</style>

<div id="MyChart1"></div>
<script type="text/javascript">
/*****************************************************
		Address all containers
*****************************************************/
// All charts must be represented by a container with a unique id. 
// This container  must be present in the page
var arrOfChartContainers = ["MyChart1"];
var loadRC = false;
var allowEval = false;

var loadManually = true;
function manualLoad(){
	loadManually = false;
	spjs_GenerateChart();
}
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/test/English/Charts/Javascript/3.3/SPJS_ChartsForSharePoint_v3.3.5.js"></script>
<script type="text/javascript">

$.each(arrOfChartContainers,function(i,id){
	$("#"+id).html("<div class='chartLoadingOverlay'>Loading chart please be patient...</div>");
});
setTimeout(function(){
	manualLoad();
},100);
</script>

The setTimeout is necessary to let the browser render the overlay before it freezes while retrieving the data for the chart.

Please note the these features require v3.3.5 of SPJS Charts for SharePoint.

You find the files, and additional information in this article

Alexander

64 Comments on “SPJS Charts for SharePoint update 20.09.2012”

  1. Hello Alexander,

    Thank you very much for this update!
    I just have 2 questions:

    My chart has filters and after loading message disappear, shows me the message “No items found”.
    If I remove the filtes it is working properly.

    I am using tabs from Christopher solution (easytabs) , and on the other tabs I am not calling the containers, just positionating them on the CEWP, like the example above

    [sourcecode language=”language="javascript”]
    <table>
    <tr>
    <td>
    <div id="Chart_1"></div>
    </td>
    <td>
    <div id="Chart_2"></div>
    </td>
    </tr>
    </table>

    I am just referencing the “Chart_1” and “Chart_2” on the variable “arrOfChartContainers” in another CEWP (so I am calling just once in one CEWP).

    So I understand that there’s no way to include the loading feature on these CEWP, it’s that right? Because as Easytabs has cookies on the script, if I am looking a tab that contains a CEWP without the loading script and aftes goes to any link and come backs to the page, it will open to me the last tab that I was, and this tab does not have the loading feature, which will cause to have the page as blank while loading the charts

    I appreciate your help!
    Congrats for the solution again!

    RS

    1. The overlay will not interfere with the filter. I presume your filter is wrong, and therefore you get no hits. Are you sure you have the correct values in the filter?

      Regarding the overlay and Christophe’s easy tabs: When you switch tabs, you are NOT loading the web part from the server, all web parts are loaded on page load, but they are hidden by the script. Switching tabs will hide all other, and unhide the tabs found in the zone you select.

      When having multiple tabs in a page, you are supposed to have the CEWP with the script in the bottom of the page, and have all container IDs in the array “arrOfChartContainers”. The actual container (<div> or <span>) can be placed in another CEWP.

      Alexander

    2. I am using 2 filters in a single chart and they were working properly in the version 3.3
      I have the correct values in filters, I have tried to recreate the filters but still with the same message…with the “no items found” message on the screen I select a different filter and data is showed and after if I come back to the default filter values (the one that is load first) the data is visible and does not show the message.

      I have tried to recreated the filters and it still the same… I recreate them separately and just one filter of 2 works fine with the loading.. any idea?

      I totally agre with you and I understand related to Easytabs, I was not using the main CEWP in the bottom… this was causing the error! Thanks for that

    3. I have retested and the scenarios is:
      If you have 2 charts in the same page and they have different filters (could be from the same list or not) will shows the message “No items found”.

      Example: Chart_1 have filter A and Chart_2 have filter B will display the message, if both have filter A or B (without using the “filterAdditionalCharts” function) it will work properly. If Chart_1 have filter A AND B and Chart_2 have filter A OR B will display the message.

    4. Hi,
      Do you use different urlKey values for the various filters? The {filter:urlKey} used in the Custom CAML must be unique for that chart to prevent the filters from interfering with each other.

      If you do have different urlKey, please send me some screenshots of your filter and your charts.

      Alexander

    5. Hello,

      I am not using different urlKey for these charts… as they have the same column name and I have created them automatically based on column name, all the charts have created with the same urlKey.
      I have 5 charts in the same page:
      – 3 charts has double filter (1 chart is from list “1” and have the column “A” and “B” and 2 charts are from list “2” and have have the column “A” and “B”)
      – 2 charts has one filter each one (1 chart is from list “3” and have the column “A” and the other chart is from list “4” and have the column “A”)
      So basically A have the same columan name in all lists (also the same urlKey) and B have the same column (and urlKey) in all lists.

      I have added a column “B” to the list “3” and “4” and have configured them on my filter, so basically all the charts with the same filters (“A” and “B”) and also with the same urlKeys worked for me with the “Loading message”.
      But this is not what I want because I want the 2 charts with only filter “A”.

      I have updated now my charts adding a “_(+ numeral sequence)” to each urlKey, so now I have urlKeys: “A_1″,”B_1″,”A_2″,”B_2″,”A_3″,”B_3″,”A_4″,”B_4″,”A_5″,”B_5” and just one of the charts worked fine after the “Loading message” disappears.. all other charts are with the message “No items found”.

      I am going to send the screen shot by mail anyway.

      Thanks
      RS

  2. I start to use this tool to make chart for people. it is a excellent tool. quick easy yet very powerful, lots of variety. I like it a lot.

    recently, I want to add javascript variable to the title options of a chart I could not find how to concatenate string and variable.

    e.g. “the purchase order of”+product.

    1. Hi,
      Thank you for the “beer money”. I’ll add a method of override a chart option from the API in the CEWP code in v3.3.6.

      In this way you can construct the “title option” in the CEWP code and it will be used in your chart.

      I’ll try to get it posted tomorrow.

      Alexander

    2. Oh thanks for your reply, my client like my work from SPJS Chart made by you. I have actually did that by program the CEWP Title. I forgot that possibility before ask you. But your extra function would make your project more perfect,

  3. Hi Alex,

    I have been using SPJS Charts for SharePoint for some time and love it. I do however have one problem, it works fine with IE7, however users who are using IE8 the charts will only populate vertically one under each other and not horizontally as per the code. Can you help?

    Cheers

    Peter

    1. Hi,
      I guess this has to do with the layout of the chart containers. Try putting them in a table structure like this:

      <table style="width: 100%">
	<tr>
		<td>
			<div id="MyChart1"></div>
		</td>
		<td>
			<div id="MyChart2"></div>
		</td>
	</tr>
</table>

      Alexander

  4. Great update Alex! Question, im trying to figure out a way to load each individual container separately using the Load Chart button so the user can elect which charts they want to view.

    I was thinking i could tailor the manual load function some how but couldnt figure it out.

    Thogughts?

    1. also how would we add in the loading chart overlay in when the load chart button is clicked?

      Just combining the code bypasses the button and i tried adding the code to the function but may have done it wrong.

    2. sorry one last thing. Is there a way to build a calculated field?

      I.E. A table is setup to combine strings by title and sum the field called time. I’d like to add a 3rd column to divide the sum of time by 60 like you can normally do in pivot tables.

    4. Load individual charts manually like this:

      <style type="text/css">
.chartLoadingOverlay{
	font-style:italic;
	color:gray;
	border:1px silver solid;
	background-color:#F5F5F5;
	line-height:250px;
	height:250px;
	width:500px;	
	text-align:center;	
	margin:2px;
}
</style>

<input type="button" value="load number 1" onclick="load_manual('MyChart1')">
<input type="button" value="load number 2" onclick="load_manual('MyChart3')">
<div id="MyChart1"></div>
<div id="MyChart3"></div>
<script type="text/javascript">
/*****************************************************
		Address all containers
*****************************************************/
// All charts must be represented by a container with a unique id. 
// This container  must be present in the page
var arrOfChartContainers = ["MyChart1","MyChart3"];
var loadRC = false;
var allowEval = false;
var loadManually = true;

function load_manual(id){
	arrOfChartContainers = [id];
	$.each(arrOfChartContainers,function(i,id){
		$("#"+id).html("<div class='chartLoadingOverlay'>Loading chart please be patient...</div>");
	});
	loadManually = false;
	setTimeout(function(){
		spjs_GenerateChart();
	},100);
}

</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/test/English/Charts/Javascript/3.3/SPJS_ChartsForSharePoint_v3.3.6.js"></script>

      Alexander

    6. Thanks for the code. It works great except if the table returns no items the overlay stays too.

      Regarding the calculated field no. i wish. The way the information is setup. when a ticket on list “A” is updated it creates a line item on staging table list “B” which is used to feed to access for reporting and also fed to these charts to do real time auditing before the reports are generated… how ever the more i think about it. it’s not that big of a deal currently.

      1. Which version of the script are you using? I think this should have been fixed in v3.3.5, but I might have been in 3.3.6 (which is in BETA).

        Alexander

    8. Ok tried the beta and that fixed the over lay issue.

      1 last thing regarding the individual loading. If i wanted to load specific groups would it flow the same?

      I.E.

    10. The button:

      <input type="button" value="load number 1" onclick="load_manual(['MyChart1','MyChart3'])">

      The function:

      function load_manual(idArr){
	arrOfChartContainers = idArr;
	$.each(arrOfChartContainers,function(i,id){
		$("#"+id).html("<div class='chartLoadingOverlay'>Loading chart please be patient...</div>");
	});		
	loadManually = false;
	setTimeout(function(){
		spjs_GenerateChart();
	},100);
}

      Alexander

    11. Hey Alex,

      I’m encountering an issue with using the charts on one of my lists. When i pick a view for it, the field options don’t populate. Any thoughts?

    13. No error messages and yes they are all created in sharepoint itself. Is there a restriction on the number of views associated to a list with this tool? It has a really large population.

    14. Hi,
      I’m not aware of any limit regarding list views. Try selecting the view and select “Use custom CAML”, then click “get CAML from selected view”.

      Alexander

  5. Fantastic tool for us being thrust into the lions den on sharepoint without the proper training. One quick question that i cant seem to find an answer to – How do i change my column chart into a stacked chart?
    Thanks in advance.
    RD

      2. In the Edit Chart GUI you find a section called “Options”. Hit “Add new option” and fill in the text boxes.

        Alexander

  6. Alex,

    “is3d” is not an available option for the google charts from the core package, is that correct? If so is there anyway to have charts in 3d?

    Thanks
    RS

    2. I have seen some screenshots in your blog with columns charts in 3d but I could imagine that this is from an version befor the core packages…

      Thanks anyway!
      RS

      1. when i use the “COLORS” option and specify any color (hex or other) i get

        Edit chart
        Loading Edit Chart GUI – Please wait…
        Unable to get value of the property ‘color’: object is null or undefined

        any suggestions?

    1. np dude, you deserve more than that, I am a reader from your blog since 2009, so I am using your tricks since them and this is the first time I have contributed, enjoy your beer!

      SPJS is an awesome solution!

    2. Hey Alex,

      I’m encountering an issue with using the charts on one of my lists. When i pick a view for it, the field options don’t populate. Any thoughts?

  9. Hi Alex,
    Nice job, you have done very well.
    I was making you of the pie chart and I observed that it doesn’t display any percentage label if the value is just equals to 1.

  10. Hi Alexander

    I love this solution – thank you so much for sharing. I full intend to buy you a beer… but first, I am struggling to apply colors to my pie charts? Could you help me with the syntax? Do I use colors? Or slices?

    Many thanks in advance.

    Neal

    1. Hi,
      I’m glad you liked the solution. Use this format:

      Option: colors
      Value: [“red”,”#004411″]

      Please note that you must provide an array with teh same lenght as your series.

      Ensure you use double quotes.

      Alexander

  11. Hi Sorry Alexander,

    Beer money is on its way, I promise. But in the meantime a slight issue-ette: when I place more than one chart on a page, only the last one is rendered.

    I’m using a CEWP which references a different version of your CEWP.txt for each chart (with different chart containers defined in each). What am I doing wrong?

    Thanks

    Neal

  13. Hi Alexander,

    I was wondering if I need some special caml to use a list view where the view uses a filter where Created By = [Me]. Any information you can share would be much appreciated. Thank you sir.

    1. I’m wondering this too.

      I’m thinking it’s similar to the CAML for a single drop down, but it will need to filter for the 2nd value (Me):

      {filter:Market}

      *maybe the code for the second filter [me] would go here?*

      I tried someone similar and could not get it to work. It would be nice to see an example of CAML with multiple filters.

    3. Hi,
      If you select a view, and do not use custom CAML, you get what is shown in the view. Please note that you get the first “page” only. So if you have more items than the page size (30 or 100 items), you should increase the page size, or use a custom CAML.

      To harvest the CAML from a view, select the view and click “use custom CAML”, then click the “get caml from selected view”.

      Alexander

    4. Thank you both for your responses. I have had the chart load successfully for my results, but for others, it will not work. They have read permissions to my script library and to ensure the view is working properly, its loaded in a LVWP below the chart. The only thing I can think of is that my script lib is on a sibling site of the one I am rendering the chart on. With that said, the only difference is I am site manager of both but the users are not. Any suggestions?

    6. Hi,
      You will have to check that the users can access the scripts. It seems like a permission issue.

      Does the users get any error messages?

      Alexander

    7. Alexander,

      Thank you again for the reply. I am happy to say I had some sort of error that was turning on content approval even after I had turned it off several times. I recreated the doc lib and all was good. Thanks again for your help and your work, you are an end users genie just granting wishes left and right.

  14. Firstly, fantastic work! That said, I’m new to Google’s visualization API and the make-or-break question for me is: Does this implementation transmit any of the actual chart’s source-data to Google?

    1. Thank you, No data is sent to Google.

      You can read the data policy for the charts if you click the link “Instructions for […] Chart” to the right of the “options” heading in the GUI.

      Alexander

  15. Hi, Thanks for the fantastic work!
    I am using this code to plot data on google maps.
    Want to know how customize the icons. I need custom icons based on some conditions. Please help me on this.
    Many Thanks

  16. Great tool for quick charting. I have used this many times and have recently run into a problem. I am trying to add a new chart to a new view on a list that is already running some charts, but for some reason nothing happens when i click on the “Save” button for the config menu. I am also unable to update any existing graphs but they still render fine with the old configuration. Any suggestions?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.