Sunday, January 1, 2012

yogi_Publish A Spreadsheet Interactive Chart In A Web Site


Yogi Anand, D.Eng, P.E.                                         Google Spreadsheet                            www.energyefficientbuild.com
user normfisher said:
I'm attempting to embed charts created on a spreadsheet on a page in my Wordpress site using the publish chart function.
I'm attempting to embed charts created on a spreadsheet on a page in my Wordpress site using the publish chart function. The chart displayed on the webpage after pasting the code is pretty messed up. Most of the data is missing. What does displayed is mixed up. 
Here's my spreadsheet: https://docs.google.com/spreadsheet/ccc?key=0AoW4uvn3aibIdDEwMjRCVjQ2MUFzSHp5OEgwME5HVVE
Here's the page it's displaying on: http://teamfisher.com/test-page/
I'm using mac osx and see the same result in safari and firefox. Would appreciate any suggestions.
Thanks.
--------------------------------------------
I checked it out in my blog post by publishing an Interactive Chart ... and the published chart is fine. I think what you need to do in your web site is to make sure that you adjust the values of the width and height parameters to suit the space you allocate to the chart in your website.

here is the script for the interactive chart without the opening angle bracket before script, and without the closing angle bracket after javascript"
script src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js" type="text/javascript"
{"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AkHBcyclu11AdFRsXzRpaUVTR0lxbm9GRG1CaTU5aGc&transpose=1&headers=1&range=A1%3AG3&gid=0&pub=1","options":{"reverseCategories":false,"series":{"0":{"color":"#000000"}},"title":"Five year history of residential sales and listings - Saskatoon MLS\u00ae","backgroundColor":"#FFFFFF","legend":"bottom","logScale":false,"hAxis":{"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null},"hasLabelsColumn":true,"reverseAxis":false,"isStacked":false,"width":600,"height":371},"state":{},"view":"{\"columns\":[0,1,2]}","chartType":"BarChart","chartName":"Chart2"}
/script
and finally without the opening and closing angle brackets for /script


and


here is the script for the interactive chart without the opening angle bracket before script, and without the closing angle bracket after javascript"
script src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js" type="text/javascript"
{"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AkHBcyclu11AdFRsXzRpaUVTR0lxbm9GRG1CaTU5aGc&transpose=1&headers=1&range=A1%3AG3&gid=0&pub=1","options":{"reverseCategories":false,"series":{"0":{"color":"#000000"}},"title":"Five year history of residential sales and listings - Saskatoon MLS\u00ae","backgroundColor":"#FFFFFF","legend":"bottom","logScale":false,"hAxis":{"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null},"hasLabelsColumn":true,"reverseAxis":false,"isStacked":false,"width":800,"height":371},"state":{},"view":"{\"columns\":[0,1,2]}","chartType":"BarChart","chartName":"Chart2"}
/script
and finally without the opening and closing angle brackets for /script


2 comments:

  1. I'm trying to do this on Wordpress, but it's not working (I've just got a free blog). I'm not sure it's possible, which is a bit sad, but not that sad, because it doesn't really matter...

    ReplyDelete
  2. Hi richard:
    What I have presented is what I tested in Blogger ... sorry, I have not tested it in WordPress.

    Cheers!
    Yogi
    Cloud Computing -- Google Docs Way
    yogi--anand-consulting.blogspot.com

    ReplyDelete