Charting for SharePoint using Google Visualization API: Update 16.08.2011


26.08.2011 v2.9.3.2 has been released with these changes:
Small fix to allow single quotes in chart options. This is necessary to handle “fontName” in IE – it has to be wrapped in double AND single quotes like this:

{color:"red",fontName:"'Arial'",fontSize:14}


24.08.2011 v2.9.3.1 has been released with these changes:

  • For non-site collection administrators on a managed path*, there were a bug with how the baseUrl of the site was found. This led to an error when retrieving the fields for the selected list.
  • For non-site collection administrators, the “Get CAML from selected view” did not work.
  • Due to incompatibility i have removed the possibility to filter the chart on a DateTime column when using “Consume filter from list view web part”.
  • In orgchart there were a blank box added to the top of the “tree”. This is now gone.
  • Better debug – see details below.
  • Added support for a selection handler for use when you want to click the chart and redirect to a filtered list view. See example below.

Managed path

When you are on the root site in your site collection, does the URL look like this:

http://www.contoso.com/default.aspx

or like this:

http://www.contoso.com/sites/mysite/default.aspx

The last one would indicate that you are on a managed path.

Debug
Add this to the CEWP code:

var chartDebug = true;

When you edit the chart, a debug panel will be added to the top of the screen. This might come in handy if you need my help to debug the setup.

Filter example
The script is setup with a “listener” that lets you add a function like this to your CEWP code:

function chartSelectionHandler(data,chart,chartID){
	var selection, item, x, y, z;
	selection = chart.getSelection();
	if(selection.length>0){
		item = selection[0];
		if(item.row!==undefined){
			x = data.getFormattedValue(item.row, 0);
			if(item.column!==undefined){
				z =  data.getFormattedValue(item.row, item.column)
				y = data.getColumnLabel(item.column);
			}
		}
		if(x===undefined && y===undefined && z===undefined){
			return;
		}
		// Create your filter
		alert("These are the variables you can use for your filter:\n\nx = "+x+"\ny = "+y+"\nz = "+z);
		if(confirm("Open filtered list?")){
			if(chartID==='MyChart1'){	
				window.open('/test/English/Charts/Lists/ByStatus/AllItems.aspx?FilterField1=Status&FilterValue1='+x,'','width=1000');
			}else if(chartID==='MyChart2'){	
				window.open('/test/English/Charts/Lists/Coffee2/AllItems.aspx?FilterField1='+y+'&FilterValue1='+z,'','width=1000');
			}
		}
	}	
}

This is meant as an example for those who want to experiment with this feature.



16.08.2011 I have posted a new version of the “Charting for SharePoint using Google Visualization API” – v2.9.3. You find it in the download section below.

These are the changes in this release


Save as template:
I have added a new checkbox to the configuration: “Use display name for list and view”. This one will replace the GUID with the display name for the list and view in the chart configuration. By doing this, the chart will “survive” if the site is saved as a template end restored in another location.

Use this option only if you plan to use the site as a template.

If you have a setup with multiple languages and you have translated the list title, the chart will work only for the language used when the template was saved. You can however revert back to using the GUID as soon as the site has been created from the template by removing the check in “Use display name for list and view” and saving the configuration.

Chart options:
Fixed a bugs where some options starting with 0 – like region for charts – were parsed as a number thus removing the leading 0.

Minor bugfixes:
I have done a few small bugfixes that are to small to mention.


Other articles in this series:


Download

You find the code here

If you use the solution, please consider donating a few dollars.

Regards
Alexander


Donate

77 Responses to “Charting for SharePoint using Google Visualization API: Update 16.08.2011”

  1. Bob Thorne Says:

    Using the Charting for Sharepoint v2.9.3.5 against a list which has 73 items in it’s view. The view is set to display 100 items at a time. However, the chart only displays the first 30 items. Anyway to expand that amount to include more than 30 items?

    • Alexander Bautz Says:

      This sounds strange. If you are not using a custom CAML, The item limit from the view is used. Are you absolutely sure the view have a 100 items limit?

      Alexander

  2. David Says:

    Forgive my ignorance as this may be a simple question. When using a customer CAML filter is there a way to provide a “null” value to show all data? For example, if I am filtering by a person’s first name, I would like to provide the option to show “all” along with the individual name filter.

    • Alexander Bautz Says:

      Hi,
      In CAML you can use

      <IsNull><FieldRef Name='TheFieldInternalName' /></IsNull>
      

      There are however no way of adding a null selection in the custom dropdown. I’ll make a note to add this in a future release.

      Alexander

  3. Jim Says:

    Hi Alexander – just a quick heads up in case this hasn’t been mentioned already. Google seem to have changed their API recently, which may give an error on exisiting column/bar charts Error message is : “Bars series with value domain axis is not supported”. The fix for this is to add a new column to your source list, of type single line of text, and make this the first column (type string) in the charts config.

    Cheers

    Jim

    • Jim Says:

      just to clarify too, the new column does not need to contain any data, and it doesn’t matter what you call it. It just needs to be present as the first item in the config.

    • Alexander Bautz Says:

      Hi,
      This error occurs when you have a column that is NOT of type string as first column in a chart that expects a string column.

      As Google does not have versioning on the chart api (it’s “1″ for production and “1.1″ for release candidate), you are automatically updated to the latest version when they push a new release.

      If you have “business critical” charts you should sign up for the newsletter from the chart team over at Google by going here

      I will do my best to keep this solution updated at all times, but I’m glad to receive bug reports from you all as i cannot monitor and test all charts when a new version is pushed.

      I will implement a method of testing the release candidate (v1.1) in future releases to make it easier to test the charts before the new version is put into production.

      EDIT: Added the missing link.

      Alexander

  4. Help Says:

    Hello

    I am really sorry but I am a bit lost

    1- the download section does not seems to be reachable
    https://bautz.homeserver.com/SharePointJavascript/Scripts/ChartUsingGoogleVisualizationAPI/
    I found that http://spjsfiles.com/ but none file matche the naming in the article
    and there are 20 folders with a lots of js file without any dependancies information

    2- Is there a step by step guide to make that work especially the “Report” List is there a List template or an up to date description somewhere ?
    there is a huge part of update in different post but not a valid up to date document

    Thanks in adavance

  5. Larry W. Virden Says:

    Has anyone figured out a way to use this SPJS_ChartsForSharePoint to display data from a SQL Server?
    I’m a bit confused about how to put the pieces together to actually display my first chart. I have downloaded jquery 1.7.1 and SPJS_ChartsForSharepoint_v3.0 and uploaded them into a document library on SharePoint 2007. I am just not certain what needs to happen next. I have tried reading the various blog entries across time but so far the specific steps to follow haven’t became obvious to me.

    • Alexander Bautz Says:

      First you should get jQuery v1.6.4 as this 1.7.1 does not work with the current solution. Then add a <abbr title="Content Editor Web Part"CEWP to the page where the chart should appear.

      Add this code:

      <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
      arrOfChartContainers = ["MyChart1"];
      </script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
      <script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript" src="/test/English/Javascript/ChartUsingGoogleVisualizationAPI.js"></script>
      

      Remember to change the script src to point to your local files.

      EDIT: Not the http://www.google.com/jsapi – this one is not to be added locally.

      Alexander

  6. Nivardo7c2 Says:

    Hi !

    great page !

    hope you can help me with this.

    I need to substract the total of one column agaist another one, the result will be the data on the third colum

    One of those colums to be substracted is an stacked column

    therefore the data in the third colum should be (sum of Column1 – sum of Column2) = Column 3

    any ideas?

    • Alexander Bautz Says:

      Hi,
      Sorry for the late reply,
      This can be done by adding a calculated column in your SharePoint list and using this new column in your chart.

      Alexander

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

Join 435 other followers