[Webinar] Learn how to a build a cloud-first strategyRegister Now


Google Chart API with Sharepoint

Posted on 2012-09-10
Medium Priority
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
  • 3
  • 2

Accepted Solution

SP_Specialist earned 1500 total points
ID: 38426376
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

ID: 38428018

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.



Expert Comment

ID: 38428995
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

ID: 38429780
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

ID: 38432135
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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
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…
Suggested Courses

867 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