Re: Can not set Motion Chart default as 'VBAR'

[GFMAG-PM]

Any suggestion? 

[GFMAG-PM]

Before, I use Gadget, but google say they will move to chart and stop service of Gadget. So I have to use Chart.

Can I say google docs chart function is still in development and still exists some bugs? 

[Sergey Grabkovsky]

Hi, the missing "http:" in the links is fine, you don't need to fix that. Can you show me what your code looks like with the state string filled in? I did get it to use the column view as the default, so I don't think this is a bug.

- Sergey

On Wed, Nov 14, 2012 at 11:08 PM, GFMAG-PM <gfma...@reflexshanghai.cn> wrote:

Before, I use Gadget, but google say they will move to chart and stop service of Gadget. So I have to use Chart.

Can I say google docs chart function is still in development and still exists some bugs? 

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/NGZ6AdHeuvcJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[GFMAG-PM]

Hi  Sergey,

Thank you for your reply.

First, for http:, when I not put it, I works, thanks again.

Then, for the code of script, it is:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"http://docs.google.com/spreadsheet/tq?key=0AhF_yr_VlAjjdFRCcDRMNUhGakJ3dkxEUFBYcnQ5NkE&transpose=0&headers=0&range=A1%3AD105&gid=0&pub=1","options":{"showChartButtons":true,"titleTextStyle":{"fontSize":16},"vAxes":[{"useFormatFromData":true,"title":"Left vertical axis title","minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}],"booleanRole":"certainty","title":"Chart title","height":371,"animation":{"duration":500},"width":600,"hAxis":{"useFormatFromData":true,"title":"Horizontal axis title","minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}},

"state":{"yZoomedDataMax":8000,"time":"2006","orderedByX":true,"showTrails":false,"uniColorForNonSelected":false,"yLambda":1,"iconKeySettings":[],"playDuration":15000,"yAxisOption":"2","colorOption":"_UNIQUE_COLOR","xAxisOption":"2","yZoomedIn":false,"sizeOption":"_UNISIZE","orderedByY":false,"xLambda":1,"xZoomedIn":false,"duration":{"timeUnit":"Y","multiplier":1},"xZoomedDataMax":21,"nonSelectedAlpha":0.4,"iconType":"VBAR","dimensions":{"iconDimensions":["dim0"]},"xZoomedDataMin":0,"yZoomedDataMin":0},"view":{},"chartType":"MotionChart","chartName":"Chart 2"} 

</script>

All of the code are from Google docs chart except state, by default it is state:{}; then I copy advanced in chart which set VBAR set unique color, and put it in the {} of state.

Can you make this script display VBAR chart as default?

Many thanks.

On Thursday, November 15, 2012 10:47:32 PM UTC+8, Sergey wrote:

Hi, the missing "http:" in the links is fine, you don't need to fix that. Can you show me what your code looks like with the state string filled in? I did get it to use the column view as the default, so I don't think this is a bug.

- Sergey

On Wed, Nov 14, 2012 at 11:08 PM, GFMAG-PM <gfma...@reflexshanghai.cn> wrote:

Before, I use Gadget, but google say they will move to chart and stop service of Gadget. So I have to use Chart.

Can I say google docs chart function is still in development and still exists some bugs? 

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/NGZ6AdHeuvcJ.

To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

[Sergey Grabkovsky]

It's just as I suspected. The MotionChart needs a string for the state column, not an object. It doesn't look like there are any single quotes in there, so you should be able to just surround your object with single quotes and almost pass it along as is.

-Sergey

/phone

Many thanks.

- Sergey

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/IYWTf0DQVc0J.

To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[GFMAG-PM]

Hi Sergey,

I am not very understanding your meaning. Do you mean put ' ' (single quotes) around {xxxxx}?

Because 

{"yZoomedDataMax":8000,"time":"2006","orderedByX":true,"showTrails":false,"uniColorForNonSelected":false,"yLambda":1,"iconKeySettings":[],"playDuration":15000,"yAxisOption":"2","colorOption":"_UNIQUE_COLOR","xAxisOption":"2","yZoomedIn":false,"sizeOption":"_UNISIZE","orderedByY":false,"xLambda":1,"xZoomedIn":false,"duration":{"timeUnit":"Y","multiplier":1},"xZoomedDataMax":21,"nonSelectedAlpha":0.4,"iconType":"VBAR","dimensions":{"iconDimensions":["dim0"]},"xZoomedDataMin":0,"yZoomedDataMin":0}

is I copy from chart advanced, and it say it is a string.

I also tried put single quotes around {xxxxx}, but still not working.

Can you just show me a very simple example? Thanks a lot

Cheers,

GFMAG-PM

[asgallant]

Yes, you would have '{....}' for the state.  The problem is that you have "state" outside the options.  Try this instead:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"http://docs.google.com/spreadsheet/tq?key=0AhF_yr_VlAjjdFRCcDRMNUhGakJ3dkxEUFBYcnQ5NkE&transpose=0&headers=0&range=A1%3AD105&gid=0&pub=1","options":{"showChartButtons":true,"titleTextStyle":{"fontSize":16},"vAxes":[{"useFormatFromData":true,"title":"Left vertical axis title","minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}],"booleanRole":"certainty","title":"Chart title","height":371,"animation":{"duration":500},"width":600,"hAxis":{"useFormatFromData":true,"title":"Horizontal axis title","minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null},"state": '{"xZoomedIn":false,"time":"2006","orderedByX":true,"xAxisOption":"2","xLambda":1,"yZoomedIn":false,"yZoomedDataMax":8000,"iconKeySettings":[],"sizeOption":"_UNISIZE","colorOption":"_UNICOLOR","yZoomedDataMin":0,"nonSelectedAlpha":0.4,"playDuration":15000,"xZoomedDataMin":0,"iconType":"VBAR","dimensions":{"iconDimensions":["dim0"]},"orderedByY":false,"yLambda":1,"duration":{"timeUnit":"Y","multiplier":1},"yAxisOption":"2","showTrails":false,"uniColorForNonSelected":false,"xZoomedDataMax":21}'},"view":{},"chartType":"MotionChart","chartName":"Chart 2"} 
</script>​

[GFMAG-PM]

Hi asgallant,

Amazing ~~~~

THANK YOU VERY VERY VERY MUCH. And Sergey also.

It works well now~~

Thanks again.

GFMAG-PM

[asgallant]

You're welcome.

[Jungle Editor]

I also had the same issue, and your solution worked. Many thanks.

Perhaps the problem is due to the embed code created in Google Spreadsheets. The state option is outside the options tag:
  "options": { ....... },
   "state": {},

   "view": {},
   "chartType": "MotionChart",

   "chartName": "Chart1"

should be as follows right?:
  "options": { .......
   "state": {},

   },
   "view": {},
   "chartType": "MotionChart",

   "chartName": "Chart1"

[Cetacea]

Hello,

I am new to this and am struggling with the same problem. 

I cannot set the initial state string using CHARTS.  It was easy in Gadgets  [Cut and paste] but they are being deprecated and I need to convert a number of gadget based motion chart gadgets to CHARTS.

I don't quite follow/understand EXACTLY what is being changed in the script below? Can you please assist? I have blanked out the same bit in the code xxxx because I am not sure if I should publicise that or not?

• In my initial code, I can see the "state":{}

• I am not sure from "Jungle Editor's" response below or ASGALLANT's response above,  whether I am just making a change to the "state":{} bit, or making changes somewhere else in those lines?

This is my basic code. 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=XXXXXXXXXXXXXXXXXXXXXXXX&transpose=0&headers=1&range=A1%3AF401&gid=1&pub=1","options":{"vAxes":[{"title":"Left vertical axis title","useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null}],"titleTextStyle":{"fontSize":16},"title":"Chart title","booleanRole":"certainty","height":447,"animation":{"duration":500},"width":649,"hAxis":{"title":"Horizontal axis title","useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null}},"state":{},"view":{"columns":[0,1,{"label":"LGA","properties":{"role":"annotation"},"sourceColumn":2},3,{"label":"Metro/Rural","properties":{"role":"annotation"},"sourceColumn":4},{"label":"Region","properties":{"role":"annotationText"},"sourceColumn":5}]},"chartType":"MotionChart","chartName":"Chart1"} </script> 

This next bit is the code from the advanced menu ATER I have set up the starting-state for my CHART:

{"duration":{"multiplier":1,"timeUnit":"Y"},"iconKeySettings":[{"trailStart":"2003","key":{"dim0":"OELLEN"}}],"xZoomedIn":false,"time":"2003","yZoomedDataMin":11.5,"yZoomedIn":false,"xLambda":1,"xAxisOption":"6","showTrails":true,"nonSelectedAlpha":0.4,"yLambda":1,"yZoomedDataMax":58,"colorOption":"2","sizeOption":"7","yAxisOption":"4","iconType":"BUBBLE","playDuration":15000,"orderedByX":false,"orderedByY":false,"xZoomedDataMax":94.4,"uniColorForNonSelected":false,"dimensions":{"iconDimensions":["dim0"]},"xZoomedDataMin":27.2} 

I understand [I think] that this needs to go BETWEEN the brackets of "state":{}   BUT I don't understand if add single quotes simply around the bit I have copied form the ADVANCED window  **OR** if I need to change something else that effects the "options": bit of the code???

I am sorry if I seem vague, I am just VERY new to this.

Any help appreciated.

Cet.

[Jungle Editor]

Hi GFMAG,

You need something like:
{"dataSourceUrl": "//docs.google.com/spreadsheet/..etc.&pub=1",
    "options": {
        "title": "Chart title",
        "width": 600,
        "height": 400,
        "state": '{
                "iconType": "VBAR",
                "playDuration": 34088   
            }',

    },
    "view":{},"chartType":"MotionChart"}

--- Above has most options removed to make it clearer... but it should work with similar structure and particularly the placement of "state" and the single quotes.
--- In your editor you'll need a good javascript syntax highlighter to check all the brackets and braces match up...

Good luck!
Jungle editor

[asgallant]

When dealing with MotionCharts, "state" goes inside the options, and it takes a JSON string, not a javascript object, so enclosing the state in quotes is necessary.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=XXXXXXXXXXXXXXXXXXXXXXXX&transpose=0&headers=1&range=A1%3AF401&gid=1&pub=1","options":{"vAxes":[{"title":"Left vertical axis title","useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null}],"titleTextStyle":{"fontSize":16},"title":"Chart title","booleanRole":"certainty","height":447,"animation":{"duration":500},"width":649,"hAxis":{"title":"Horizontal axis title","useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null},"state":'{"duration":{"multiplier":1,"timeUnit":"Y"},"iconKeySettings":[{"trailStart":"2003","key":{"dim0":"OELLEN"}}],"xZoomedIn":false,"time":"2003","yZoomedDataMin":11.5,"yZoomedIn":false,"xLambda":1,"xAxisOption":"6","showTrails":true,"nonSelectedAlpha":0.4,"yLambda":1,"yZoomedDataMax":58,"colorOption":"2","sizeOption":"7","yAxisOption":"4","iconType":"BUBBLE","playDuration":15000,"orderedByX":false,"orderedByY":false,"xZoomedDataMax":94.4,"uniColorForNonSelected":false,"dimensions":{"iconDimensions":["dim0"]},"xZoomedDataMin":27.2}'},"view":{"columns":[0,1,{"label":"LGA","properties":{"role":"annotation"},"sourceColumn":2},3,{"label":"Metro/Rural","properties":{"role":"annotation"},"sourceColumn":4},{"label":"Region","properties":{"role":"annotationText"},"sourceColumn":5}]},"chartType":"MotionChart","chartName":"Chart1"} </script> 

[Cetacea]

Hello to asgallant and Jungle Editor,

Thanks for your assistance but I am still UNABLE to successfully display a starting state??

I am going to include the EXACT code I use, please advise if I am displaying anything I should not?

Jungle Editor, I was not sure I could follow your advice, I was confused about placement of code?

I am sorry for the confusion. 

asgallant, I believed I have followed your instructions exactly, but NOTHING displays if I try to insert the STATE STRING that I copy from the ADVANCED tab from the Google Chart as per your instructions.

Just to clarify, here are the steps I am following:

1. Establish Google Spreadsheet and insert Motion Chart of Data [All works fine]

2. I use the PUBLISH CHART tab and get code which I copy and paste in to html page.

The code I get is: I note that the STATE section is like this:  "state":{},

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0Am_AcfeQZNjCdFU4Y2ctNXFodE5aMmdPWGdVeXp3NVE&transpose=0&headers=1&range=A1%3AH289&gid=0&pub=1","options":{"vAxes":[{"title":"Left vertical axis title","useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null}],"titleTextStyle":{"fontSize":16},"title":"Chart title","booleanRole":"certainty","height":818,"animation":{"duration":0},"width":1110,"hAxis":{"title":"Horizontal axis title","useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null}},"state":{},"view":{"columns":[0,1,{"label":"Urban/Rural","properties":{"role":"annotation"},"sourceColumn":2},3,4,{"label":"Region","properties":{"role":"annotation"},"sourceColumn":5},6,7]},"chartType":"MotionChart","chartName":"Chart1"} </script>

3. I publish this html page with code as above and CHART displays perfectly in browser on web.

4. I now attempt to SET the STARTING/INITIAL STATE of this chart so that it is better configured for users.

5. I reconfigure the CHART so that it is setup with the position I want it to start in.

6. I understand that I need to place the code that I copy from the SETTINGS > Advanced >Advanced tab. This is the "State string"

7. When I set the chart and copy this code, this is what I get:

The State string is:

{"yAxisOption":"3","duration":{"multiplier":1,"timeUnit":"Y"},"iconKeySettings":[],"xZoomedIn":false,"time":"2003","xAxisOption":"6","yZoomedDataMin":42.1,"yZoomedIn":false,"xLambda":1,"showTrails":true,"yLambda":1,"yZoomedDataMax":88.5,"sizeOption":"4","xZoomedDataMax":94.4,"iconType":"BUBBLE","playDuration":15000,"nonSelectedAlpha":0.4,"colorOption":"2","orderedByY":false,"uniColorForNonSelected":false,"orderedByX":false,"dimensions":{"iconDimensions":["dim0"]},"xZoomedDataMin":27.2}

8. I now COMBINE these two WITHIN the BRACKETS of the STATE but must also add COMMAS, this is what you marked in RED is it not? 

9. This is what I do.  I have marked my/your additions in RED, following what I understand your advice to be. I have marked my pasted code in purple

My additions are:

• I add an inverted Single COMMA after the COLON at the end of state  E.G. = "state":'
• I paste the State String between the two brackets{} 
• I note that the State string begins with its OWN bracket, this means the STATE section begins like this - "state":'{{"yAxisOption  Should there be TWO brackets here?
• I add an inverted Single COMMA at the end of the pasted State String E.G = xZoomedDataMin":27.2}'} and finish with two brackets with an inverted COMMA between them. EG - }'}
• The combined code is below. When I publish this to the web, NOTHING displays?? I get no error message ?

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0Am_AcfeQZNjCdFU4Y2ctNXFodE5aMmdPWGdVeXp3NVE&transpose=0&headers=1&range=A1%3AH289&gid=0&pub=1","options":{"vAxes":[{"title":"Left vertical axis title","useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null}],"titleTextStyle":{"fontSize":16},"title":"Chart title","booleanRole":"certainty","height":818,"animation":{"duration":0},"width":1110,"hAxis":{"title":"Horizontal axis title","useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null}},"state":'{{"yAxisOption":"3","duration":{"multiplier":1,"timeUnit":"Y"},"iconKeySettings":[],"xZoomedIn":false,"time":"2003","xAxisOption":"6","yZoomedDataMin":42.1,"yZoomedIn":false,"xLambda":1,"showTrails":true,"yLambda":1,"yZoomedDataMax":88.5,"sizeOption":"4","xZoomedDataMax":94.4,"iconType":"BUBBLE","playDuration":15000,"nonSelectedAlpha":0.4,"colorOption":"2","orderedByY":false,"uniColorForNonSelected":false,"orderedByX":false,"dimensions":{"iconDimensions":["dim0"]},"xZoomedDataMin":27.2}'},"view":{"columns":[0,1,{"label":"Urban/Rural","properties":{"role":"annotation"},"sourceColumn":2},3,4,{"label":"Region","properties":{"role":"annotation"},"sourceColumn":5},6,7]},"chartType":"MotionChart","chartName":"Chart1"} </script>

I am sorry for my limited understanding, but I am trying to get my head around the necessary changes I need to make to respond to the deprecation of Google Gadgets and converts to charts.

You help is appreciated.

Cet

[asgallant]

This might be easier to understand if we break the object out into a more readable format:

{

See where "state" is (bold and in red)?  It is in the wrong place.  We have to move it so that it is inside "options":

{

Then, we want to add the state you saved from the editor:

{

            "label": "Urban/Rural",

            "properties": {

                "role": "annotation"

            },

            "sourceColumn": 2

        },

        3, 4, {

            "label": "Region",

            "properties": {

                "role": "annotation"

            },

            "sourceColumn": 5

        },

        6, 7]

    },

    "chartType": "MotionChart",

    "chartName": "Chart1"

}

We can then condense that down into a 1-line block to use with the script:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js">

{"dataSourceUrl": "//docs.google.com/spreadsheet/tq?key=0Am_AcfeQZNjCdFU4Y2ctNXFodE5aMmdPWGdVeXp3NVE&transpose=0&headers=1&range=A1%3AH289&gid=0&pub=1","options": {"vAxes": [{"title": "Left vertical axis title","useFormatFromData": true,"minValue": null,"viewWindow": {"min": null,"max": null},"maxValue": null}, {"useFormatFromData": true,"minValue": null,"viewWindow": {"min": null,"max": null},"maxValue": null}],"titleTextStyle": {"fontSize": 16},"title": "Chart title","booleanRole": "certainty","height": 818,"animation": {"duration": 0},"width": 1110,"hAxis": {"title": "Horizontal axis title","useFormatFromData": true,"minValue": null,"viewWindow": {"min": null,"max": null},"maxValue": null},"state": '{"yAxisOption":"3","duration":{"multiplier":1,"timeUnit":"Y"},"iconKeySettings":[],"xZoomedIn":false,"time":"2003","xAxisOption":"6","yZoomedDataMin":42.1,"yZoomedIn":false,"xLambda":1,"showTrails":true,"yLambda":1,"yZoomedDataMax":88.5,"sizeOption":"4","xZoomedDataMax":94.4,"iconType":"BUBBLE","playDuration":15000,"nonSelectedAlpha":0.4,"colorOption":"2","orderedByY":false,"uniColorForNonSelected":false,"orderedByX":false,"dimensions":{"iconDimensions":["dim0"]},"xZoomedDataMin":27.2}'},"view": {"columns": [0, 1, {"label": "Urban/Rural","properties": {"role": "annotation"},"sourceColumn": 2},3, 4, {"label": "Region","properties": {"role": "annotation"},"sourceColumn": 5},6, 7]},"chartType": "MotionChart","chartName": "Chart1"}

</script>

[Cetacea]

Hello,

I sent a direct reply by accident, I did mean to post it here.

Sorry about that.

Cet.

[Cetacea]

Yeeehhhaaaaaa!!

Hello asgallant,

I just went back over my code again and realised I made a simple error, leaving the final </script>  of the last line....... I am sorry for the confusion.

Thanks again for your patient assistance for beginners, it makes this forum/community a very valuable resource.  Sharing your knowledge like this is greatly appreciated.

I am sure I am not able to return the favour, but I do hope my sincere thanks is enough!

Kind regards

Cet.

On Tuesday, 26 February 2013 17:07:53 UTC+11, asgallant wrote:

[asgallant]

Excellent, I'm glad you found the solution.

[Cetacea]

I spoke too soon... I think I have officially lost my mind.

I have been able to duplicate YOUR code and make a change to it, but if I do MY OWN code with what I believe to be EXACTLY the same changes/modifications, it does not EVEN LOAD on the page???

I am lost. The minute I try to add an initial state, everything just BREAKs and stops working?? The change from Gadgets to Charts appears a lot more difficult than I thought? I know I am only making a simple error, but I cannot seem to identify it?

I don't understand the structure of the code, so am trying to copy EXACTLY what you have done to ensure I don't make an error, but obviously I am doing something wrong.

Could it be something to do with the way I am editing text? I am not sure about line breaks or spaces? 

This was your original:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js">
{"dataSourceUrl": "//docs.google.com/spreadsheet/tq?key=0Am_AcfeQZNjCdFU4Y2ctNXFodE5aMmdPWGdVeXp3NVE&transpose=0&headers=1&range=A1%3AH289&gid=0&pub=1","options": {"vAxes": [{"title": "Left vertical axis title","useFormatFromData": true,"minValue": null,"viewWindow": {"min": null,"max": null},"maxValue": null}, {"useFormatFromData": true,"minValue": null,"viewWindow": {"min": null,"max": null},"maxValue": null}],"titleTextStyle": {"fontSize": 16},"title": "Chart title","booleanRole": "certainty","height": 818,"animation": {"duration": 0},"width": 1110,"hAxis": {"title": "Horizontal axis title","useFormatFromData": true,"minValue": null,"viewWindow": {"min": null,"max": null},"maxValue": null},"state": '{"yAxisOption":"3","duration":{"multiplier":1,"timeUnit":"Y"},"iconKeySettings":[],"xZoomedIn":false,"time":"2003","xAxisOption":"6","yZoomedDataMin":42.1,"yZoomedIn":false,"xLambda":1,"showTrails":true,"yLambda":1,"yZoomedDataMax":88.5,"sizeOption":"4","xZoomedDataMax":94.4,"iconType":"BUBBLE","playDuration":15000,"nonSelectedAlpha":0.4,"colorOption":"2","orderedByY":false,"uniColorForNonSelected":false,"orderedByX":false,"dimensions":{"iconDimensions":["dim0"]},"xZoomedDataMin":27.2}'},"view": {"columns": [0, 1, {"label": "Urban/Rural","properties": {"role": "annotation"},"sourceColumn": 2},3, 4, {"label": "Region","properties": {"role": "annotation"},"sourceColumn": 5},6, 7]},"chartType": "MotionChart","chartName": "Chart1"}
</script>

This is a new piece that I am trying to publish.  

This is simply the code that I cut and paste from the "publish chart" dialogue on Google. 

This works fine on my site.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0Am_AcfeQZNjCdFU4Y2ctNXFodE5aMmdPWGdVeXp3NVE&transpose=0&headers=1&range=A1%3AH289&gid=0&pub=1","options":{"vAxes":[{"title":"Left vertical axis title","useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null}],"titleTextStyle":{"fontSize":16},"title":"Chart title","booleanRole":"certainty","height":413,"animation":{"duration":0},"width":700,"hAxis":{"title":"Horizontal axis title","useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null}},"state":{},"view":{"columns":[0,1,{"label":"Urban/Rural","properties":{"role":"annotation"},"sourceColumn":2},3,4,{"label":"Region","properties":{"role":"annotation"},"sourceColumn":5},6,7]},"chartType":"MotionChart","chartName":"Chart1"} </script>

I then collect the code from the initial-state dialogue.I simply cut and paste. This is how google presents it.

{"nonSelectedAlpha":0.4,"duration":{"multiplier":1,"timeUnit":"Y"},"yAxisOption":"3","xZoomedIn":false,"time":"2003","playDuration":15000,"yZoomedDataMin":42.1,"yZoomedIn":false,"xLambda":1,"iconKeySettings":[{"trailStart":"2003","key":{"dim0":"OELLEN"}}],"showTrails":true,"yLambda":1,"yZoomedDataMax":88.5,"dimensions":{"iconDimensions":["dim0"]},"sizeOption":"4","xZoomedDataMax":94.4,"orderedByY":false,"iconType":"BUBBLE","xAxisOption":"6","colorOption":"2","uniColorForNonSelected":false,"orderedByX":false,"xZoomedDataMin":27.2}

I THINK I should be removing the first CURLY BRACKET that I have marked in RED above before I add it to the state section?

When I paste the initial state code in to the STATE section, I have this:

This does not even load on my website, it will not display??

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0Am_AcfeQZNjCdFU4Y2ctNXFodE5aMmdPWGdVeXp3NVE&transpose=0&headers=1&range=A1%3AH289&gid=0&pub=1","options":{"vAxes":[{"title":"Left vertical axis title","useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null}],"titleTextStyle":{"fontSize":16},"title":"Chart title","booleanRole":"certainty","height":413,"animation":{"duration":0},"width":700,"hAxis":{"title":"Horizontal axis title","useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null}},"state":'{"nonSelectedAlpha":0.4,"duration":{"multiplier":1,"timeUnit":"Y"},"yAxisOption":"3","xZoomedIn":false,"time":"2003","playDuration":15000,"yZoomedDataMin":42.1,"yZoomedIn":false,"xLambda":1,"iconKeySettings":[{"trailStart":"2003","key":{"dim0":"OELLEN"}}],"showTrails":true,"yLambda":1,"yZoomedDataMax":88.5,"dimensions":{"iconDimensions":["dim0"]},"sizeOption":"4","xZoomedDataMax":94.4,"orderedByY":false,"iconType":"BUBBLE","xAxisOption":"6","colorOption":"2","uniColorForNonSelected":false,"orderedByX":false,"xZoomedDataMin":27.2}'},"view":{"columns":[0,1,{"label":"Urban/Rural","properties":{"role":"annotation"},"sourceColumn":2},3,4,{"label":"Region","properties":{"role":"annotation"},"sourceColumn":5},6,7]},"chartType":"MotionChart","chartName":"Chart1"} </script>

I have marked in red the two changes that I believe mimic what you did?

I have tried to troubleshoot this and look for differences. When I look at your code, there appears to spaces in areas where I have none?? for example,  after "state" as in:

"state": '{"yAxisOption"

When I am pasting my text, there appears to be no gap?

"state":'{"

Does this make a difference?

I also notice that when I paste your code there appears to be three distinct lines?

The first line in my editor shows:

1 <script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js">

The second shows:

2 {"dataSourceUrl": "//docs.   etc etc etc etc

The third shows:

3 </script>

I am on mac and using a simple text editor.

I am lost and really confused about what error I am making? 

Any help appreciated?

regards

Cet.

[asgallant]

There are two things that prevented your code from working.  The first is that there is a syntax error somewhere in the js you posted (I'm not sure where it is, but that's the type of error I see when I run the code).  The second is that you put the "state" outside the options when it needs to go inside the options.  Here is the fully expanded version (with your initial state):

        "state": '{"nonSelectedAlpha":0.4,"duration":{"multiplier":1,"timeUnit":"Y"},"yAxisOption":"3","xZoomedIn":false,"time":"2003","playDuration":15000,"yZoomedDataMin":42.1,"yZoomedIn":false,"xLambda":1,"iconKeySettings":[{"trailStart":"2003","key":{"dim0":"OELLEN"}}],"showTrails":true,"yLambda":1,"yZoomedDataMax":88.5,"dimensions":{"iconDimensions":["dim0"]},"sizeOption":"4","xZoomedDataMax":94.4,"orderedByY":false,"iconType":"BUBBLE","xAxisOption":"6","colorOption":"2","uniColorForNonSelected":false,"orderedByX":false,"xZoomedDataMin":27.2}'

    },

    "view": {

        "columns": [0, 1, {

            "label": "Urban/Rural",

            "properties": {

                "role": "annotation"

            },

            "sourceColumn": 2

        },

        3, 4, {

            "label": "Region",

            "properties": {

                "role": "annotation"

            },

            "sourceColumn": 5

        },

        6, 7]

    },

    "chartType": "MotionChart",

    "chartName": "Chart1"

}

</script>

and the collapsed version:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js">{"dataSourceUrl": "//docs.google.com/spreadsheet/tq?key=0Am_AcfeQZNjCdFU4Y2ctNXFodE5aMmdPWGdVeXp3NVE&transpose=0&headers=1&range=A1%3AH289&gid=0&pub=1","options": {"vAxes": [{"title": "Left vertical axis title","useFormatFromData": true,"minValue": null,"viewWindow": {"min": null,"max": null},"maxValue": null}, {"useFormatFromData": true,"minValue": null,"viewWindow": {"min": null,"max": null},"maxValue": null}],"titleTextStyle": {"fontSize": 16},"title": "Chart title","booleanRole": "certainty","height": 818,"animation": {"duration": 0},"width": 1110,"hAxis": {"title": "Horizontal axis title","useFormatFromData": true,"minValue": null,"viewWindow": {"min": null,"max": null},"maxValue": null},"state": '{"nonSelectedAlpha":0.4,"duration":{"multiplier":1,"timeUnit":"Y"},"yAxisOption":"3","xZoomedIn":false,"time":"2003","playDuration":15000,"yZoomedDataMin":42.1,"yZoomedIn":false,"xLambda":1,"iconKeySettings":[{"trailStart":"2003","key":{"dim0":"OELLEN"}}],"showTrails":true,"yLambda":1,"yZoomedDataMax":88.5,"dimensions":{"iconDimensions":["dim0"]},"sizeOption":"4","xZoomedDataMax":94.4,"orderedByY":false,"iconType":"BUBBLE","xAxisOption":"6","colorOption":"2","uniColorForNonSelected":false,"orderedByX":false,"xZoomedDataMin":27.2}'},"view": {"columns": [0, 1, {"label": "Urban/Rural","properties": {"role": "annotation"},"sourceColumn": 2},3, 4, {"label": "Region","properties": {"role": "annotation"sourceColumn": 5},6, 7]},"chartType": "MotionChart","chartName": "Chart1"}</script>

For reference, this is not the standard way of building a chart.  Also, the spaces and lines don't mean anything: you can have 0 spaces, 1 space, 100 spaces, 50 lines, it doesn't matter.

[Cetacea]

Ok,

Sorry to be a bother.

I just don't seem to get the change from Gadgets to charts. As a beginner, this is a big step and will break lots of motion charts based on Gadgets.

I will try and source some assistance for beginners.

Thanks again for trying to help me.

Cet

[asgallant]

You're not bothering me, I like helping people get to know the API and how it works >;o)

If you have questions, keep asking.

[Cetacea]

Hello asgallant,

Ok, thanks very much, I thought I might have worn out my welcome.....

I have just spent the last hour composing a detailed question to you, showing the logical steps I was making. I realise I am doing something wrong but could not find the issue.

Just prior to me publishing my question I noted one CURLY BRACKET extra in my code to the left of "state". It seems I was missing this change?

I believe I have corrected my error and can now load the initial states correctly.

This is an incredible relief because I was at a loss to find what I was doing wrong?

The code that is first generated from google spreadsheet is this: I was *NOT* moving/deleting the bracket immediately before the "state", marked in red... 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0Am_AcfeQZNjCdFU4Y2ctNXFodE5aMmdPWGdVeXp3NVE&transpose=0&headers=1&range=A1%3AH289&gid=0&pub=1","options":{"vAxes":[{"title":"Left vertical axis title","useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null}],"titleTextStyle":{"fontSize":16},"title":"Chart title","booleanRole":"certainty","height":795,"animation":{"duration":0},"width":1555,"hAxis":{"title":"Horizontal axis title","useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null}},"state":{},"view":{"columns":[0,1,{"label":"Urban/Rural","properties":{"role":"annotation"},"sourceColumn":2},3,4,{"label":"Region","properties":{"role":"annotation"},"sourceColumn":5},6,7]},"chartType":"MotionChart","chartName":"Chart1"} </script>

Now that I have corrected this, all the Charts are now loading and showing their initial state as set. 

Thanks again for your patience and offer of support.  It is fantastic.

Regards

Cet.

[asgallant]

I'm glad to hear that you got it all worked out.

[RitaCCD]

Hi Asgallant, 

I am having exactly the same issue, my state string is not "recognized" and because of that the motion chart is always displayed in the default settings. I have looked through the code many times and I don't think my case is bracket/paretesis issue. Can you take a look?

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AmvhaBjDaruTdC1jV0hYSV85a2F4ZU9JVG51Mk41Snc&transpose=0&headers=1&range=A1%3AF103&gid=0&pub=1","options":{"vAxes":[{"useFormatFromData":true,"title":"Left vertical axis title","minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null}],"titleTextStyle":{"fontSize":16},"booleanRole":"certainty","title":"Chart title","height":519,"animation":{"duration":0},"width":831,"hAxis":{"useFormatFromData":true,"title":"Horizontal axis title","minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null},"state":{"orderedByY":false,"yZoomedIn":false,"orderedByX":false,"xLambda":1,"colorOption":"2","time":"2003","sizeOption":"5","iconKeySettings":[],"duration":{"timeUnit":"Y","multiplier":1},"xZoomedIn":false,"xZoomedDataMax":81726000,"yZoomedDataMax":42427,"xZoomedDataMin":319000,"xAxisOption":"2","dimensions":{"iconDimensions":["dim0"]},"yAxisOption":"3","playDuration":15000,"yZoomedDataMin":0,"uniColorForNonSelected":false,"yLambda":1,"iconType":"BUBBLE","nonSelectedAlpha":0.4,"showTrails":false}},"view":{},"chartType":"MotionChart","chartName":"Chart 1"} </script>

Thanks in advance

Rita

[asgallant]

You entered the "state" as an object, but the MotionCharts expect to receive it as a string.  Enclose it with single-quotes and it should work:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AmvhaBjDaruTdC1jV0hYSV85a2F4ZU9JVG51Mk41Snc&transpose=0&headers=1&range=A1%3AF103&gid=0&pub=1","options":{"vAxes":[{"useFormatFromData":true,"title":"Left vertical axis title","minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null}],"titleTextStyle":{"fontSize":16},"booleanRole":"certainty","title":"Chart title","height":519,"animation":{"duration":0},"width":831,"hAxis":{"useFormatFromData":true,"title":"Horizontal axis title","minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null},"state":'{"orderedByY":false,"yZoomedIn":false,"orderedByX":false,"xLambda":1,"colorOption":"2","time":"2003","sizeOption":"5","iconKeySettings":[],"duration":{"timeUnit":"Y","multiplier":1},"xZoomedIn":false,"xZoomedDataMax":81726000,"yZoomedDataMax":42427,"xZoomedDataMin":319000,"xAxisOption":"2","dimensions":{"iconDimensions":["dim0"]},"yAxisOption":"3","playDuration":15000,"yZoomedDataMin":0,"uniColorForNonSelected":false,"yLambda":1,"iconType":"BUBBLE","nonSelectedAlpha":0.4,"showTrails":false}'},"view":{},"chartType":"MotionChart","chartName":"Chart 1"} </script>

[asgallant]

Sorry, I think I left a introduced a typo in there somewhere.  Use this instead:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js">{"dataSourceUrl": "//docs.google.com/spreadsheet/tq?key=0AmvhaBjDaruTdC1jV0hYSV85a2F4ZU9JVG51Mk41Snc&transpose=0&headers=1&range=A1%3AF103&gid=0&pub=1","options": {"vAxes": [{"useFormatFromData": true,"title": "Left vertical axis title","minValue": null,"viewWindow": {"min": null,"max": null},"maxValue": null}, {"useFormatFromData": true,"minValue": null,"viewWindow": {"min": null,"max": null},"maxValue": null}],"titleTextStyle": {"fontSize": 16},"booleanRole": "certainty","title": "Chart title","height": 519,"animation": {"duration": 0},"width": 831,"hAxis": {"useFormatFromData": true,"title": "Horizontal axis title","minValue": null,"viewWindow": {"min": null,"max": null},"maxValue": null},"state": '{"orderedByY": false,"yZoomedIn": false,"orderedByX": false,"xLambda": 1,"colorOption": "2","time": "2003","sizeOption": "5","iconKeySettings": [],"duration": {"timeUnit": "Y","multiplier": 1},"xZoomedIn": false,"xZoomedDataMax": 81726000,"yZoomedDataMax": 42427,"xZoomedDataMin": 319000,"xAxisOption": "2","dimensions": {"iconDimensions": ["dim0"]},"yAxisOption": "3","playDuration": 15000,"yZoomedDataMin": 0,"uniColorForNonSelected": false,"yLambda": 1,"iconType": "BUBBLE","nonSelectedAlpha": 0.4,"showTrails": false}'},"view": {},"chartType": "MotionChart","chartName": "Chart 1"}</script>

[RitaCCD]

Thank you so much. 

Feel a bit stupid for not noticing that! 

Thanks once again for the help!

Rita