Supporters of End User
Web

SharePoint: Interactive Charts using Google Visualization API v2.0

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:MOSS; WSS; 2007; 2010; Javascript and jQuery; Content Editor Web Part; SharePoint Designer; Site Manager/Power User

14.09.2010 Small update to the code to fix the “Initial state” in motion charts, as well as some minor bug fixes. I have moved the files to my home server for you to download. This provides a better solution then manually highlighting and saving 2000+ lines of code. Please note that the file now come in three different “versions”. Read more in the “download section” below.

09.09.2010 Small update to the description regarding update from v2.0 to v2.5. I forgot to mention another field required to be added to the Chart configuration list: ListBaseUrl. This in addition to the already mentioned “ChartFormatters”. I have also removed an alert that was left in the code (line 40).

Christophe notified me of a problem with the 2010 compatibility in sub-site “homepage” – which is a wiki page. The CEWP HTML handling in SP2010 is a bit “different” than in SP2007. When editing the HTML source code, it actually pulls the contents generated by the script into the edit dialog and does not use the content that was originally saved to the CEWP… This is a bit of a headache!. A workaround for the wiki-pages is to use the “Content Link” property for the CEWP and link to a .txt file with the CEWP code placed in a document library (alongside the other scripts).

06.09.2010 Updated the script “ChartUsingGoogleVisualizationAPI.js” and the CEWP code. The version number is notched up to 2.5 and the changes are:

  • Added the ability to chart data from all ascending parent sites and all first level subwebs of current site
  • Added a few formatter options in the UI – refer the linked resources for instructions (thanks to Paulo for the tip).
  • Added new “action” for formatting as % (value*100).
  • The solution is now SharePoint 2010 compatible
  • Enhanced the UI for editing charts – all options and columns are now directly editable.
  • No more need to specify the “userListGuid” and the “userListBaseUrl” in the CEWP code.
  • The naming of the charts in the Chart Configuration list is enhanced – it now prefixes the chartId with “location.pathname” to prevent overwriting an existing chart when reusing the CEWP code in another page (thanks to Christophe for the tip).
  • Edit chart is now done in the standard “Browse mode” and not in “EditPage mode”. The edit button is found in the top left corner of the chart. The button is only visible for users with “Edit page rights” and does not show on printouts.
  • And more…

Note: This update introduces a new column in the configuration list (GoogleVisualization_InteractiveChartsConfig). To reuse the existing Chart configuration list you must add one field of type “Multiple lines of text (Plain text) named “ChartFormatters”. Optionally you can delete the Configuration list and have this solution automatically recreate it for you.

Please note that the CEWP code has changed alongside the code for the file “ChartUsingGoogleVisualizationAPI.js”.

Note about existing charts:
All your existing charts will need to be updated with the new “page id” in the chart configuration list (GoogleVisualization_InteractiveChartsConfig). Look at the new configuration item that is automatically added – copy it’s name and update your existing chart configuration – while deleting the newly added (empty) chart configuration.

Since I posted the previous version of the solution that utilizes the Google Chart Tools / Interactive Charts (aka Visualization API), Google has updated their API and made the previous version more or less obsolete.

NOTE: I have made a “bridge” between Google’s Visualization API and SharePoint. How the charts render or function is up to Google to decide – it is their “product”. Refer to the various configuration options by following the link from the “Edit chart UI”.

Read Google’s terms of Use here.

Google’s Data Policy on these charts:
All code and data are processed and rendered in the browser. No data is sent to any server.

This new release features these chart types:
Area chart | Bar chart | Column chart | Gauge | Geo Map | Line Chart |
Map | Motion Chart | Organizational Chart | Pie chart | Scatter Chart | Table

Other modifications made:

  • All code in one file: “ChartUsingGoogleVisualizationAPI_v2.0.js”
  • In the CEWP: Refer to the above file, jQuery (fixed external link) and the Google jsapi (fixed external link)
  • Chart configuration list is automatically created if it is not already present

The solution is tested in IE8, Google Chrome 5.0.375.127 and Firefox 3.6.8.

Some screenshots:

Not all chart types are presented.

When first adding a chart CEWP to a site, the configuration list is created:

Press OK:

Gauge – a good KPI:

GeoMap

Column chart – counting unique values per country:


This chart type merges all “lines” where the country is the same, counting “fruits” in the choice column named “Fruit or vegetable”.

Map:

Motion Chart:

The “date” column can be a SharePoint data-column, or a “US formatted” string (still formatted as “Date in the UI”) in the format “mm/dd/yyyy”. Refer to the “Instructions for MotionChart” link in the UI.

Organizational Chart:


This is the data that makes up this chart. Note that it is built with various calculated columns – no need for it to render as HTML in the list – it is “raw data”.

PieChart:

More examples – including custom CAML-queries will be added on request.

The Code:

This is the CEWP 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.4.2/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>
	
Note the <div id=”MyChart1″></div> This is the chart “placeholder”. To add more charts, add more placeholders and add them to the array “arrOfChartContainers”.

The placeholders can be inserted in other CEWP’s as long as they render before the chart is initiated (place them above the “Chart CEWP”).

It is essential that the scripts tags for “jsapi” and “ChartUsingGoogleVisualizationAPI.js” are placed below the script tag that defines the “arrOfChartContainers”.

The code for the file “ChartUsingGoogleVisualizationAPI_v2.0.js”

This link provides you with three different “versions”:

  • ChartUsingGoogleVisualizationAPI_vX.Y.Z.js – Uncompressed code
  • ChartUsingGoogleVisualizationAPI_vX.Y.Z-min.js – Minified using YUI Compressor to reduce the file size
  • ChartUsingGoogleVisualizationAPI_vX.Y.Z-packer.js – Compressed/obfuscated using Dean Edward’s Packer to further reduce the file size

You must update the script name in the CEWP to reflect the version number.

Note:

When new versions are released, they will be placed in a folder with the version number as label. Be sure to download the latest version.

If you are using a browser other than IE, right click the file and select “Save link as” or “Save linked content as…”.

Tip:

To make it convenient for end users to use this charting tool, create a few CEWP’s with your favorite setup (1 placeholder, 4 placeholders in a table form and so on). Export the CEWP and upload it to your web part gallery (in the root of the site collection).

You can now add it as a regular webpart from the “web part selector” in edit page mode.

Enjoy!
Alexander

Comments

Jeff Jones

SharePoint: Interactive Charts using Google Visualization API v2.0

WOOOOW!! That is flat out amazing. Thank you so much for writing this up and sharing it with the community. The screen shots really bring it to life and help show the potential business value. GeoMap would be a great way to visualize that data type and I believe Google Maps is by far the best here.

I will have to download the .JS and give this a try.

Posted 27-Aug-2010 by Jeff Jones
Roger Skauen

SharePoint: Interactive Charts using Google Visualization API v2.0

Thanks for sharing this amazing script to us End Users Alexander.

I just tried it out and it looks real great!

Posted 27-Aug-2010 by Roger Skauen
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi,
I'm glad you liked it :-)

This is a cross post from my blog

I do not have edit access to this article, so please check the original article over at my blog for the most recent updates.

There has been reported and fixed a bug regarding "chart options" using object literals.

I will release bug fixes and enhancements during next week, and this article will stay "one step behind" as i must notify my contact here at EUSP for her to update this article when i have posted updates.

The next release that brings in new feature will most likely be posted during next week.

One of the new features will be the ability to chart data from all ascending parent sites and all first level subwebs of current site.

Alexander

Posted 28-Aug-2010 by Alexander Bautz
Jenny

SharePoint: Interactive Charts using Google Visualization API v2.0

Great article!
Is it supported in SharePoint Foundation? It looks great and Im now trying to make it work on a wikipage within a CEWP, but its not??? Any idea how I can make it work? Or do you have more detailed instructions anywere?

Posted 30-Aug-2010 by Jenny
Dan D'Attilio

SharePoint: Interactive Charts using Google Visualization API v2.0

Alexandar,

Works like a charm! Truly brilliant coding.

I was wondering if we might have more opportunities to change the font, color, etc. for the different chart types from the CEWP interface?

Posted 31-Aug-2010 by Dan D'Attilio
Dan D'Attilio

SharePoint: Interactive Charts using Google Visualization API v2.0

Oh I figured it out. Just add an option with the name of the parameter.

Posted 02-Sep-2010 by Dan D'Attilio
Matt

SharePoint: Interactive Charts using Google Visualization API v2.0

I have gotten this implemented but I am wondering if there is a way to specify the colors of the lines or bars on the chart. I know there is the option for colors but I cannot seem to get it to work.

Posted 07-Sep-2010 by Matt
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Yes, with the v2.5 it is.

Alexander

Posted 07-Sep-2010 by Alexander Bautz
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi,
It is supposed to support all "options" available in the Google Chart API. What code is it you you cannot get to work?

Alexander

Posted 07-Sep-2010 by Alexander Bautz
Matt

SharePoint: Interactive Charts using Google Visualization API v2.0

It is not code per say but more just the option for colors: Under configuration options there is a line listed for:
colors | Array of strings | default colors | The colors to use for the chart elements. An array of strings, where each element is an HTML color string, for example: colors:['red','#004411'].

Within the CEWP in the edit page view I click Add new option. for Option Name I type in Colors, for value I try typing in a string of colors but then nothing happens when I save.

Posted 07-Sep-2010 by Matt
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi,
I have no problem using the "option" you provided
Option : colors
Value: ['red','#004411']

Please send me some screenshots - you find my email in the top of the code.

Alexander

Posted 07-Sep-2010 by Alexander Bautz
Mike

SharePoint: Interactive Charts using Google Visualization API v2.0

I must be missing something - I can't get this to work. I added a CEWP to a list, added the code and the file link but I don't get anything. I have been successful with color coding lists, hide fields, etc. Is that all I'm required to add? Any help would be greatly appreciated.

Posted 08-Sep-2010 by Mike
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi,
Please verify that your file is saved with a .js extension and that the link in the CEWP is correct

PS: Save it in UTF-8 format (no biggie but there was a corrupt (c) in the copyright statement caused by ANSI format).

Alexander

Posted 08-Sep-2010 by Alexander Bautz
Kirill

SharePoint: Interactive Charts using Google Visualization API v2.0

It looks fantastic. Absolutely genius!
With that said, I am obviously not the one as I can't get it to work. The ".js" script is on the site, referenced in the CEWP at the bottom of the page. Another CEWP with code is up top... Nothing shows up. Your script shows in both webparts or am I missing something?
Any help would be greatly appreciated

Anyway, THANK YOU

K

Posted 08-Sep-2010 by Kirill
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

HI,
I'm not sure what you mean by "The “.js” script is on the site, referenced in the CEWP at the bottom of the page. Another CEWP with code is up top…"

Try using the provided CEWP code-sample. Modify the script src for the file "ChartUsingGoogleVisualizationAPI.js".

Does it work?

Alexander

Posted 08-Sep-2010 by Alexander Bautz
Kirill

SharePoint: Interactive Charts using Google Visualization API v2.0

Alex,

So what I mean is:
1. I have two CEWP on the page. One (placeholder) has the following code:


Another one, positioned at the bottom of the page, has the following code:



/*****************************************************
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"];



"

And nothing happens other than the message on the top CEWP when not in Edit mode: "Table has no columns"

Thank you,

Kirill

Posted 09-Sep-2010 by Kirill
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi,
Read here how to post code in comments

Please repost the code.

Alexander

Posted 09-Sep-2010 by Alexander Bautz
Daniel

SharePoint: Interactive Charts using Google Visualization API v2.0

hello
Sorry for my bad English, but I'm french ...
First a big congratulations and thank you for this script is great, everything is OK
I use the chart type "Line Chart" and I would just like to know if it is possible to display values at each point in the graph or on the last point and not just passing the mouse cursor
Thank you for your answers

Daniel

Posted 16-Sep-2010 by Daniel
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi,
I repeat my answer as i wrote over at my blog:
Hi Daniel,
Your English is perfect - keep in mind I'm Norwegian!

I cannot help you with your request as the charts are created using Google's Visualization API, and it currently does not support this option.

I hope they will make this possible in future releases, and if they do, i will implement it in this solution.

Alexander

Posted 17-Sep-2010 by Alexander Bautz
Mohan Taneja

SharePoint: Interactive Charts using Google Visualization API v2.0

I had used Google Visualization gadget to display international offlice locations for a company around the globe.


Here is the link:
http://mohantaneja.blogspot.com/2010/06/visually-stunning-map-with-color.html

Copy and paste the code in a CEWP.

Note:
Have written comments in the javscript code to explain all the methods and parameters.


-- Mohan

Posted 20-Sep-2010 by Mohan Taneja
Tom

SharePoint: Interactive Charts using Google Visualization API v2.0

Alexander,

Hi. I am still trying to implement your "bridge" between Google's Visualization API and SharePoint. As you may recall, I am the one who is trying to accomplish this with SharePoint 2003. (Sorry but I work for the government and that is what I have to work with.)

Anyway, I couldn't get your version 2.0 to work so I am trying to use your most recent version, v2.5. I would greatly appreciate it if you could answer these questions:

1) Does the CEWP code only contain 11 lines of code now? (I don't see any reference to the SharePoint list/data source for the CEWP?)
2) Does the CEWP(s) have to reside on the same page as the list?
3) Are the "interaction.js" and "stringBuffer.js" scripts still needed? Or is "ChartUsingGoogleVisualizationAPI_v2.6.1.js" the only script needed under the /test/English/Javascript" document folder?
4) When I try to run "ChartUsingGoogleVisualizationAPI_v2.6.1.js" I get a Windows Script Host error for Line 1, Char 1, Code 800A1391". Any idea what is causing this? (I am using Explorer 7)

I am not a programmer by training, so please forgive all the questions. Thank you in advance,
Tom

Posted 21-Sep-2010 by Tom
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi,

Q1: No more need for referring other lists
Q2: The data is pulled in using a webservice call. The CEWP has to be in the page where you want the chart to display, but the list itself can be anywhere within the site collection.
Q3: No more need for these.
Q4: Not sure, but update to v2.6.3 as v2.6.1 and v2.6.2 had some bugs.


Alexander

Posted 21-Sep-2010 by Alexander Bautz
DoubleD

SharePoint: Interactive Charts using Google Visualization API v2.0

Alexander
I'm running IE7 on version 2.6.4. It seems the bridge is working partially: creates the list but stops and gives me an alert:
'The package "()" is NOT loaded.
Review the CEWP code and add the chart type to the packages array."
Can you assist?
DD

Posted 22-Sep-2010 by DoubleD
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi,
Did you create the list using v2.6.4 or earlier version? - refer the version comment where you downloaded this version.

Alexander

Posted 22-Sep-2010 by Alexander Bautz
DoubleD

SharePoint: Interactive Charts using Google Visualization API v2.0

I used the 2.6.4 version for creating the list.
DD

Posted 22-Sep-2010 by DoubleD
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

I have released a new version (v.2.6.5). This intends to fix an empty web selector for those on a managed path.

Please test it and let me know if it fixes this issue or not.

Alexander

Posted 23-Sep-2010 by Alexander Bautz
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi,
Look at the latest release (v2.6.5). It is not supposed to fix this issue, but still...

Take a look at the Chart configuration list - find your "chart" and delete the list item. It will be recreated when you refresh your chart. Maybe it fixes your problem.

Alexander

Posted 23-Sep-2010 by Alexander Bautz
Cesar H

SharePoint: Interactive Charts using Google Visualization API v2.0

Alexander.

I used the new version (v.2.6.5), but still appears the legend of "Table not has columns", I am using Sharepoint 2007. I have checked the creation of the list is correct, has all the variables with their respective specifications.

Would request your support in order to solve this problem called "Table not has columns"

Sorry but my English is very little. Thank you very much.

César H.

Posted 27-Sep-2010 by Cesar H
Cesar H

SharePoint: Interactive Charts using Google Visualization API v2.0

Researching on the problem of "Table has no columns", and using HTTP Debugging tool, it identifies in / _vti_bin / list.asmx with error code 500, which reads:

soap:ServerException of type 'Microsoft.SharePoint.SoapServer.SoapServerException' was thrown.Value does not fall within the expected range.

Requested their support and indicated that I am working with sharepoint2007.

Greetings.

Posted 28-Sep-2010 by Cesar H
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi,
Look here for a screenshot of the "error"

It is at the bottom of the article.

It is in fact no error as it is the initial state when you create a new chart.

I suspect that your problem is that the image that enables you to enter the edit chart GUI is not rendered. Can you provide some details on which site you are adding this chart to? - is it a MOSS publishing page?

If the problem is the missing image, please edit the script and change line 20 from:
hasEditPageRights = $("*[id$='_MenuItem_EditPage']").length==1;
to
hasEditPageRights = true;

I will update the script in the next release to fix this issue.

I have some problems with the server that hosts the scripts, so please use this url to obtain updates

Alexander

Posted 28-Sep-2010 by Alexander Bautz
Kirill

SharePoint: Interactive Charts using Google Visualization API v2.0

Alex has been of great help. He actually took time responding to my emails and we got the issue with MOSS 2007 Publishing pages resolved. I am using the charts to manage and report progress on a huge project with close to 200 resources actively working on tasks around the world. It works like a charm

THANK YOU

With respect,

Kirill Karmi

Posted 29-Sep-2010 by Kirill
EndUserSharePoint

SharePoint: Interactive Charts using Google Visualization API v2.0

Kirill - This will make a GREAT case study if you can put together an article with screenshots. Seeing how Alex's solution looks in the "real world" will be extremely helpful. -- Mark

Posted 29-Sep-2010 by EndUserSharePoint
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi,
I have some trouble with the DNS for the server where i host the scripts. Please use this link until i get it sorted out

Alexander

Posted 30-Sep-2010 by Alexander Bautz
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

And there it was fixed already!

Alexander

Posted 30-Sep-2010 by Alexander Bautz
Michael

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi, Alexander, Great Work.

Have installed your solution. works fine...

but unfortunately: Editing the chart to change something the List field is empty. When I try to sleect a list i only got some other stuff like

...
Reporting Metadata
Reporting Templates
MYCompany SharePoint Site
.... ....

After saving the editing job without any changes the chart is empty. Looking at the config file for this list der LIST GUID was gone.

The select site rolldown was always empty,
the select list rolldown shows the above mentioned choices, but no lists.

Deleting the config for this list and restarting works always, but only for the first edit of a chart.

Any Ideas?
Kind regards
Michaek

Posted 30-Sep-2010 by Michael
Michael

SharePoint: Interactive Charts using Google Visualization API v2.0

Sorry, just read your blog after posting the part above.
2.6.4 works with the list selectio, also i can see this site up/down arrows at the select site rolldown (nothing there with 2.6.5)

Will need some try and error test to understand all capabilities.
Thanx again
Michael

Posted 30-Sep-2010 by Michael
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi,
As you have read, i have some trouble with the site selector. v2.6.5 ONLY works for site collection administrators.

v.2.6.4 breaks if on a managed path...

I'm working on an update to fix this.

Alexander

Posted 30-Sep-2010 by Alexander Bautz
mike

SharePoint: Interactive Charts using Google Visualization API v2.0

This is a great tool for me, thanks! I know very little about any kind of coding, but I was able to follow your instructions and get it working. I am using a column chart to display quantities over time. Is there any way I can setup a drop down that will allow users who come to my site to select what columns they want to see? For example: I have info on the quantity of apples, oranges, and bananas delivered every week. But they want to just see apples. Is it easy to add a pull-down to select just apples that will automatically refresh the chart? Thank you.

Posted 30-Sep-2010 by mike
Matt Bramer

SharePoint: Interactive Charts using Google Visualization API v2.0

I'm trying to get this setup on a simple web page that I've built from the ground up. I just created a blank .aspx page and added a web part zone. Then opened the page and added the code above into a CEWP. I changed the reference to the ChartVisualisationAPI.js to my own stored in a Doc Library. I know all of these references work fine because when I inspect the DOM, I see them getting loaded. My problem lies in the last line of code:

strArr.push("
I'm getting this error below. Can you help me fix this?
Uncaught SyntaxError: Unexpected token ILLEGAL

Posted 02-Oct-2010 by Matt Bramer
Matt Bramer

SharePoint: Interactive Charts using Google Visualization API v2.0

Nevermind Alexander. The copy and past cut out about 300 lines of your script.
Thanks for sharing your hard work! I'm going to go get a raise now :D

Posted 02-Oct-2010 by Matt Bramer
Kirill

SharePoint: Interactive Charts using Google Visualization API v2.0

Unfortunately, the screenshot and detailed description piece is not going to work due to some legal restrictions I am working under. But I can tell you that:
We are deploying and configuring agents on close to 1000 servers. Each server can be addressed as a project as it will go through 6 steps (Validation, Push, Configuration, Testing, Migration and Production) with a logical workflow for each and every one of those steps (Not Started, In Progress, Passed or Failed, Out of Scope). The work is performed by tens of offshore resources all working on SharePoint to update the progress of their personal scope, report issues and such. I have created a Management Dashboard showing overall progress by Application (the deployment covers 3 major organizational solutions) – Gauge charts and by deployment progress in every area (Bar Chart). The information is being plotted from SharePoint lists. My management is absolutely flabbergasted, I can tell you that

Posted 04-Oct-2010 by Kirill
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi,
This would be possible using the motion chart that has this feature built in. Other than that it is not possible.

Alexander

Posted 05-Oct-2010 by Alexander Bautz
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

I have updated the script to v2.6.6 as v2.6.5 unintentionally made it impossible for other than site collection administrators to select site. This update fixes this issue.

For uses that are not site collection administrators, the loading of the site selector may take a few seconds extra.

The check for edit page rights has been removed due to feedback from users that had problems editing charts. To restrict editing of the charts, manage user right for the configuration list - all users must have at least read access!

Alexander

Posted 05-Oct-2010 by Alexander Bautz
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi,
Glad you liked it :-)

Alexander

Posted 05-Oct-2010 by Alexander Bautz
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi,
Look at the newest release (v2.6.6) as it is intended to fix the site selector issue.

Alexander

Posted 05-Oct-2010 by Alexander Bautz
Michael

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi Alexander,
has downloaded 2.6.6.js and put it at a document library at my subsite.

Editing an existing graphic (made with 2.6.4) ask apporx 5 or 6 times for user/password, then starting the editor view.

Unfortunatly it show only the company parent site http://portal.mycompany.com instead of my subsite
http://portal.mycompany.com/Testsubsite
After that I am not able to chosse lists from my sub, I can only, if existing there, use lists from parent.

Sorry for this issue :(
Kind Regards
Michael

Posted 06-Oct-2010 by Michael
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi,
I need some more information...

Are you site collection administrator?
Do you have access to all subsites when you browse using the web browser?
Does your site reside on a managed path?

I really thought i had nailed it this time...

Alexander

Posted 06-Oct-2010 by Alexander Bautz
Michael

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi,
first trial to answer your Questions:
No
Yes
must ask the IT-colleague

In other words: I will come back asap after talking with the professionals.
Thx a lot
Michael

Posted 06-Oct-2010 by Michael
Michael

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi, back again.

Portal Admin colleagues tested with his privileges my setup. His reply: Did work without questions for name/password and show functional content at the dropdowns..

So we will check my user rights during next days.

Regards

Michael

Posted 06-Oct-2010 by Michael
Dan D'Attilio

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi Alex, I have the same issue...I can only choose from lists in the parent site even though I have site collection privileges and I am using v2.6.6. I always get this message....
"A column is missing in the Chart Configuration List. Refer the change llg in the original blog post to add the missing field. Optionally you can delete the Chart configuration list and have it automatically recreated.
The chart cannot be saved until this issue is fixed."
I did delete the chart configuration list but no luck. I was wondering if you were working on a new version for site selection and associated lists?

Posted 06-Oct-2010 by Dan D'Attilio
Dan D'Attilio

SharePoint: Interactive Charts using Google Visualization API v2.0

Oh, I was able to solve the issue by deleting the config list, then re-creating it with 2.6.6, and then chaging the path to use 2.5.4 instead. Working well now.
2.6.6 looks good though -- again, incredibly impressive technique!
Thanks
Dan

Posted 06-Oct-2010 by Dan D'Attilio
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi,
I still have these issues with the site selector and even though all is OK in my testsites - both as site collection administrator and not, users still experience various errors. I posted v2.6.7 last night which tries out one small fix.

Could you test that version and let me know if it does any differences?

Alexander

Posted 07-Oct-2010 by Alexander Bautz
Alexander Bautz

SharePoint: Interactive Charts using Google Visualization API v2.0

Look at the comment above regarding v2.6.7 - could you also test that one?

It might not do any difference, but i cannot recreate this error myself and need your help to try out different approaches.

Alexander

Posted 07-Oct-2010 by Alexander Bautz
Michael

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi, Alexander
2.6.7 tested, still asking for password, show only portal main site.
didnt help to host jquery and 2.6.7 local.
deleted the old (previous) chart.config file...didnt hel, setting up an new chart always stay at the main site (portal.mycompany.com)

btw: with .4 there was two small arrows for up and down with the site selection, they disappears with .5 and greater (!?)
Thanx for support.
Kind regards
Michael

Posted 07-Oct-2010 by Michael
Dan D'Attilio

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi Alex,
2.6.8 works perfectly in 2010! This is a work of genius and it is really kind of you to share this with other Sharepoint users.
Thank you again!
Dan

Posted 07-Oct-2010 by Dan D'Attilio
Theiss-B. Zsolt

SharePoint: Interactive Charts using Google Visualization API v2.0

Hi Alexander!

Great work! Thanks for sharing!

Can I use it with XML/RSS feeds instead of Sharepoint lists?

Zsolt

Posted 15-Oct-2010 by Theiss-B. Zsolt
DoubleD

SharePoint: Interactive Charts using Google Visualization API v2.0

2.6.7. worked for me. The result is my site collection has a real punch. Thanks for sticking with this project.
Great job.
I did experience one glitch however: I added some html to an org chart similar to that shown in the Org Chart example however it didn't render...just got the text. I tried as both a calculated column and directly in the list. Is there some other script or other things that need to be added to get the html to actually render?

Posted 16-Oct-2010 by DoubleD
chuck

Walk Through Help

I must be an idiot because I can't seem to follow the directions and make it work. I have a page, I added the initial code into the content owner, I believe I uploaded the other files as well. But not being well versed I obvious seem to be missing he obvious.
 
Can someone assist me and walk me through this?

Posted 25-Apr-2011 by chuck
Alexander Bautz

Re: Walk Through Help

Hi,
The only file you have to upload is the file "ChartUsingGoogleVisualizationAPI.js".
 
The file you downloaded does have another name - incoroprating the version number. Please verify that you refer the correct file.
 
Alexander

Posted 26-Apr-2011 by Alexander Bautz
chuck

Got it thanks

See I knew I wasn't following directions, all better thanks for helping with the obvious.

Posted 26-Apr-2011 by chuck
seb

Issues with implementation

Hi,
 
I try to implement your Js script on a CEWP on a specific web part. I didn't see anything, it's just empty page. I have upload the last ChartUsingGoogleVisualizationAPI.js files and change on the CEWP the link to this files.

Posted 02-May-2011 by seb
Bart Louwagie

Not getting linke between older & newer article

Hi Alexander
 
I am newbie in SharePoint. We have just installed SP 2010 Enterprize. I got your script to show "configuration list created"   It now show "Table has no columns" . I have read prior postings where others ask the same question, still don't get it. You write"
Since I posted the previous version of the solution that utilizes the Google Chart Tools / Interactive Charts (aka Visualization API), Google has updated their API and made the previous version more or less obsolete.
Does the above mean I should still try to read the older articles and paste scripts from there or should I not look at that at all?
 
Any change to give a small example of steps to create a chart once the script has installed?
 
Thank you so much for the great contribution !
 
Bart
 

Posted 16-May-2011 by Bart Louwagie
Alexander Bautz

RE: Issues with implementation

Look at the post above yours. Check the script src to confirm your location of the script.
 
Alexander

Posted 16-May-2011 by Alexander Bautz
Alexander Bautz

RE: Not getting linke between older & newer article

Hi,
The "Table has no columns" "error" just tells you that you haven't configured the chart yet. Look at the screenshots in the srticle as they show the configuration for that chart.
 
Alexander

Posted 16-May-2011 by Alexander Bautz
Bart Louwagie

RE: Not getting link between older & newer article

Hi Alexander Thanks for the reply. - I see the great screenshots in this article, but the do not show for me. Only the red " Table has no columns " - I read all of this article more than a few times. Any chance for an example of what to put in that section of your script? Or do I need to copy the hundreds of lines of your older article here?

Posted 17-May-2011 by Bart Louwagie
Bart Louwagie

Found answer to "Table has no columns"

What eluded me for the longest time was that I could not see the screens with the configuration. Here is the trick: Once you have created the list by running the CWEP above, there is a small triangle (in my case grey, pointing down). When you mouse over that triangle, the "edit chart" text becomes visible. It took me hours to find that. Sorry to Alexander and thanks for the great work. Then you can really start :-) Bart

Posted 17-May-2011 by Bart Louwagie
Alexander Bautz

RE: Found answer to "Table has no columns"

Hi,
I'm glad you figured it out. I do have some more information regarding this solution over at my site. I do not have edit reights to this article and cannot keep it up to date in any easy way.

<a href="http://sharepointjavascript.wordpress.com/2010/08/26/interactive-charts-using-google-visualization-api-v2-0/">You find more information here</a>, <a href="http://sharepointjavascript.wordpress.com/2011/03/27/charting-for-sharepoint-using-google-visualization-api-update-27-03-2011/">here</a> and <a href="http://sharepointjavascript.wordpress.com/2011/05/05/charting-for-sharepoint-using-google-visualization-api-update-05-05-2011/">here</a>

Alexander

Posted 17-May-2011 by Alexander Bautz
Bart Louwagie

Tip on where to find the control options

Hi,
 
If you try to use the Javascript API parameters as options, it will not work.
 
 
 
Once you found a few, the rest follows.
Bart
 

Posted 17-May-2011 by Bart Louwagie
Alexander Bautz

RE: Tip on where to find the control options

Hi,
You find a link to the configuration options for the selected chart type in the chart config - to the right of the "Options-heading".
 
Alexander

Posted 17-May-2011 by Alexander Bautz
Bart Louwagie

charting seems to be limited to 30 items

Hi Alexander
 
- Both on the Map and bar chart, the system seems to only pick the first 30 items. Can this be overriden so I can load a lot more data?
 
Bart

Posted 17-May-2011 by Bart Louwagie
Alexander Bautz

RE: charting seems to be limited to 30 items

This has to do with the selected view. If you have paging configured, only that number of items will display. Select a non-paged view or use custom CAML.
 
Alexander

Posted 17-May-2011 by Alexander Bautz
NikKal

Scatter Chart - Dot size as a 3rd dimension?

Is it possible to illustrate a 3rd dimension of data with an increased size of the dots in a scatter chart? If so, how? I´ve been trying to achieve this by adding my three data series which are: probability (value 1-9), impact (1-9) and ranking which is the product of the other variables. But all I end up with is another dot, same size, which represent the ranking. This will be used for a risk assessment chart in a project dashboard. Thanks in advance.

Posted 03-Aug-2011 by NikKal
i:0e.t|liveid|000340019bd65452@live.com

Is there a way to perform this type of functionality using SQL data?

I have a need to do similar type charting, but with data from sql server instead of sharepoint lists.
 
Has anyone figured out a method to do that?  Thank you.

Brant Brisson

Connection refused trying to download code

It looks like you have built a wonderful tool for bringing Google Charts to Sharepoint, thanks for all of the effort.  Unfortunately, I cannot download the code from your home server, I keep getting a connection refused.  Can the code be downloaded from anywhere else?

Posted 18-Oct-2012 by Brant Brisson
Alexander Bautz

RE: Connection refused trying to download code

You find an updated article with an alternate download location here: http://sharepointjavascript.wordpress.com/2012/02/03/spjs-charts-for-sharepoint-v3-x/ Alexander

Posted 18-Oct-2012 by Alexander Bautz
Roley

SharePoint: Interactive Charts using Google Visualization API v2.0

Is it possible to add in hyperlinks into the Maps so that the tool tip displays a hyperlink sourced from the list?

Posted 18-Apr-2013 by Roley

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: