Google Chart API with Sharepoint

Posted on 2012-09-10
Last Modified: 2012-09-25

I have set up the google charts API to work with sharepoint using the tutorial provided on: Google Charts API Instructions.

This tutorial uses javascript to connect the sharepoint tables to google charts, and does work really well.

However... I have a graph that is displaying a huge number of decimal places for values on the x (Horizontal) axis. And all of the graphs show the legend.

I believe I should be able to add options to the graphs that match the parameters found here:Google Parameters

However passing these values through the interface provided by the tutorial above has no affect.

Does anybody know how I would modify the javascript to ensure that the legend doesn't show and that there are no decimal places on the axis labels?

(Javascript I'm using can be found on the first link)

Question by:bedsingar
    LVL 1

    Accepted Solution

    Well I know that to get rid of the legend the Google chart has to have the following option set:
    legend: {position: 'none'}

    Open in new window

    Perhaps on the edit page where the charts are located you can add this option (I believe you would add the option "legend" and then change the text box beside the option to "{position: 'none'}" and make sure you put the 's in around none).

    The decimals on the axis may be a result of the data you from your list is not all whole numbers, but you can try fiddling with the hAxis and vAxis gridlines count, minValue, and maxValue  options for the chart.

    I would suggest against trying to modify the JavaScript code Alexander provided as it would be time consuming to figure out his implementation and being sure that your modifications would not break his code.

    If changing the options inside the provided interface does not work then I would suggest creating your own solution if you have the skill or resources. Another option is to find an updated copy of his solution since it was posted at least 2 years ago, and by the look of the screen shots was developed on MOSS 2007.

    Author Comment


    I've given that a go but unfortuantely it doesn't work. (The ledgend remains)

    In regard to the point about the source field / decimal places ... the field is set to number with no decimals. Also I've only populated complete integers into the field.


    LVL 1

    Expert Comment

    Hello Josh,

    I just got my MOSS 2007 environment working again so I will setup the same Google Charts script that you have on your server, and take a closer look at this person's JavaScript. I will let you know if I come up with a solution.

    Author Comment

    SP_Specialist, that would be brilliant thank you.

    I've found the updated scripts too - it's been re-branded and I couldn't find it at work because the author's wordpress blog is blocked by the firewall.

    Any how I'll try with his updated script too and see if the problem still exists .. I'll post back if it solves it.


    Author Closing Comment

    I've upgraded the scripts to the latest version, which accepts the values legend and none. It also resolves the formatting issues & adds a ton of functionality.

    Thanks for your help

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Join & Write a Comment

    The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
    I thought I'd write this up for anyone who has a request to create an anonymous whistle-blower-type submission form created using SharePoint 2010 (this would probably work the same for 2013). It's not 100% fool-proof but it's as close as you can get…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now