Charting for SharePoint using Google Visualization API: Update 05.06.2011

I have posted a new version of the “Charting for SharePoint using Google Visualization API” – v2.9.0. The changes are described here, but the background story and the code is found in original article. This post describes the new features in v2.9.0.

You should read the original post found here, the update for v2.8 posted here and the update for v2.8.5 posted here.

Changes from v2.8.5:

  1. Changed the behavior of “Average” to divide the grand total on the number of columns actually containing a value. This means any columns being blank or “null” will not be considered into the “total column count”. Thanks to Ayodele Ayodeji for pointing this out to me.
  2. Changed the “Chart option parser” to use eval on the Chart Options. YES i know it’s not the smartest thing to do, but as the Google Visualization API changes, my crude “option parser” failed to swallow some of the object literation formatted options.
  3. Added new chart types: Combo Chart and Candlestick Chart
  4. Added support for PatternFormat
  5. Pulled the variables: “showFilterInfo”, “showItemCount”, “itemCountPrefix”, “itemCountSuffix”, “labelIfEmpty”, introduced in v.2.8.5 in from the CEWP code and into the Chart configuration. This update should override the CEWP settings and these obsolete settings should not interfere.
  6. Added a few minor GUI tweaks like auto open the configuration for a newly added chart – no more “Table has no columns” error. Changed some of the error message. And a few other small fixes.
  7. Changed the solution to check for any missing columns in the configuration list and add them as needed. No more need to manually add columns to the configuration list when updating from a previous version!
  8. I have changed the code for the “save configuration function” as jQuery v1.6 introduced a new approach on DOM attributes and properties which affected the value returned by .attr(“checked”). This made saving “checked” checkboxes impossible when using jQuery v1.6.x.

NOTE: I have done one change in the way the formatters are targeted to a column. I originally went for a numbering of the columns starting with 1, but changed this to use 0 for the first column. This has to do with the columns being 0-indexed in the DataTable “behind the scenes” and this making things easier. To those of you using formatters now, you might end up with an error message, but it is just a matter of notching the “index” down by one.

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

41 Comments on “Charting for SharePoint using Google Visualization API: Update 05.06.2011”

    2. Alex,

      I swapped my old 2.85 for the new 2.9.1. Afterwards, I noticed a invalid parameter “ttletextstyle” error, one for each chart, and an invalid parameter “tooltipTextStyle”, one for every chart.

      Are these options still supported?

      Thanks!

    3. “Invalid character” was the error…

      I was using:

      titleTextStyle = {color:”black”,fontName:”Arial”,fontSize:24px}

      tooltipTextStyle = {color:”black”,fontName:”Arial”,fontSize:14px}

      Also, I’m using 2.9.1 with my pre-existing charts. Now it seems to take alot longer to load the charts. For example, the page is blank for 3~4 seconds, then all 6 pop up almost instantaneously.

      Thanks!

    4. Hi,
      Regarding the parameter error, the parameter “fontSize” must be written without the “px” like this:
      {color:”black”,fontName:”Arial”,fontSize:24}

      Regarding load speed i do not think i have done anything that could impact that in this update. If you could do a cross check with v2.8.5 it would be interesting.

      Alexander

    5. Alex,

      I removed the “px”, however the error occurs anyway…

      Any other ideas?

      BTW, I’m busy playing with the Combo Chart, and I’m really liking what you’ve done here. Keep up the good work!

      🙂
      DF

  3. After many hours wrestling with other options this has been a real lifesaver! In particular I am using the querystring variable filter for custom CAML and it worked fine in 2.8.5, but when I tried 2.9.1 I got a javascript error (in Firefox)

    Error: showFilterInfo is not defined
    Source File: [..]ChartUsingGoogleVisualizationAPI.js
    Line: 689

    Inserting “showFilterInfo = true;” before line 689 solves the problem, so it looks like there is something in the javascript that Firefox 4 does not like

  4. Hi Alexander, amazing work!
    I just wonder if possible to load the charts in async mode so the page does not freeze while the chart is loading (the users are mostly using MS-IE, on Mozilla no problem)
    thanks

    1. Hi,
      The “freeze” most likely occurs when the data is being “chewed” by javascript in the browser. Doing the ajax-requst async *could* be possible and may do a little difference. I will look into that in future releases.

      Alexander

      1. Alexander, this is a great tool, thanks!

        I am replying to this comment because I cannot see if elsewhere you have addressed this. I would love if spjs charts supported asynchronous data requests. The freeze that Mike mentions above is due to the ajax calls being made synchronously. The ui will not respond while the synchronous call is being made to the server. Further, only one synchronous call is made at a time. In my case I have a page with three charts and the delay is definitely noticeable by the user.

        Again, thanks for the excellent utility!

      2. Hi,
        As I wrote above, the freezing is most likely due to the processing of the data in the browser, and not only the “download” of the date. You can bring up the developer console and look at the network tab to get an idea of how long the download takes and then see how long the processing takes before the “freeze” ends. Let me know how these numbers look – and how many items you are requesting.

        Did you use the “loading – please wait” overlay to let your users know it is running?

        On a side note, I guess this freeze will be more noticeable in IE, and less in Chrome of Firefox.

        Alexander

  6. I am a big fan of the code you have developed here. During work for a client I encountered a need to serve the charts over HTTPS without the hassle of the mixed content warnings(Internet Explorer Only). After struggling over this for some time, I finally found a solution. Not only do you need a local copy of the jsapi file stored within your HTTPS environment, you also need to make changes to the jsapi code itself. To do this replace all instances of HTTP: within the jsapi code to HTTPS: . This can be done fairly easily using notepad and the replace all command. Now that the secure URLs have been added, you only need to save the file (and remove the .txt extension after) and upload the file and update your chart rendering jsapi code calls. Works like a charm!*
    *One exception to this is the chart type “Map” which I believe needs to reference live data to be rendered accurately. Even with the changes this chart still prompts the mixed content warning. Please note this solution is only for IE.
    Hope this helps!

    2. My apologizes, I didn’t realize that the https source that google provided was actually a different version of the jsapi code. I figured it was just the same code served over an https connection. Storing a local copy of the code located at the google https location seems to work just fine, and removes the need to alter it. Is storing a local copy of the unaltered https jsapi google provides in conflict with the terms of use?

      1. Hi, Following the termes of use provided by Google, you are not allowed to download the API locally.

        Alexander

  7. HI Alexender – what you provided here is great. Our internal developers couldn’t touch what you’ve done here (i’m not a developer, just dabble a bit). One issue I seem to have is the charts not rendering in IE8 for me. Is there a setting or configuration I am missing? Works in Chrome and FF, but only the items are showing in IE8. Thanks

    1. Hi,
      If you mean to put the number on top of the columns, this is not supported in the Google Visualization API.

      Alexander

  11. Pingback: Interactive Charts using Google Visualization API: Examples « SharePoint JavaScripts

  12. Hi,
    Could countries in map views be links to list views (with the country as a filter)? The same could be applied in other views as well. This would allow kind of a ‘drill through’.

    1. Hi,
      I think this is possible using th Google Visualization API, but I have not implemented it here. I will add this to the wish-list for future releases.

      Alexander

  14. If you have some instructions on how to get the motion chart type to function I would appreciate it greatly. According to Google’s instructions the data types required are not allowed together in the GUI interface you show here. I am uncertain as to exactly which information goes where in the interface. Thank you so much for this tool. It has helped immensely.

  15. Hi. I seem to have a problem with 2 things after migrating to SP2010. The Gauge chart does not function any more. It just shows blank in the space I would have had a guage showing.

    Second, for Bar and Column and Pie charts, I can only define one color choice. Anything I put in after the first one is ignored. Such as [“blue”,”green”,”orange”,”purple”], only blue is shown.

    Any help would be greatly appreciated. Thanks for all of the great work.

    1. Hi,
      The gauge chart have some issues in IE, try compatibility mode.

      Regarding the colors, do you have multiple series in the chart? The colors is for the individual series and not for each column in a “one series chart”.

      Alexander

    2. Hi,
      The Google Chart Tools team has pushed a new release candidate today that will fix the Gauge issue. Anticipated production release date is August 17.

      Alexander

  16. I’ve used this tool since 2.6. with great results. I uploaded 2.9.2 (since 2.9.3 hung up) and it renders just fine except for one annoying new issue.
    In org chart, in addition to the root node container, an (empty) container above the root node container shows. This wasn’t the case in previous versions I’ve used. Ideas?

    1. Hi,
      I have made a little change to avoid this in future release, but until then you must clear the value in the text box: “Axis title if series title column is empty” in the chart configuration.

      Alexander

Leave a Reply

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