My favorites | Sign in
Project Home Downloads Wiki Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 5: problem setting state -- JSON output problem?
3 people starred this issue and may be notified of changes. Back to list
Status:  Fixed
Owner:  ----
Closed:  Jun 2011
Cc:  decastillo@gmail.com


 
Reported by jbr...@cambridge.aero, May 27, 2011
Hi:

This may be my lack of knowledge, but I have been trying to set the initial state based on the output of the "Advanced" tab. Something seems to be going awry in the conversion process to JS.

1. If I take the JSON output, convert it to an R list, and assign it to the 'state' element of my options list, it comes out wrapped bogusly with an R-looking 'c(' which doesn't make sense to me or (apparently) JavaScript:

state.json = '{"yZoomedIn":false,"xZoomedDataMax":1451400,[... etc ...]'
state.list = fromJSON(state.json)

options = list()
options[['state']] = state.list
options[['width']] = 600
options[['height']] = 500
options[['showHeader']] = FALSE

chart = gvisMotionChart( [...] options=options)

results in this JavaScript:

// jsDrawChart
function drawChartmerged() {
  var data = gvisDatamerged()
  var chart = new google.visualization.MotionChart(
   document.getElementById('merged')
  );
  var options ={};
options["width"] = [    600 ];
options["height"] = [    500 ];
c("options[\"state\"] = {\n \"yZoomedIn\": false,\n   \"xZoomedDataMax\": 1.4514e+06,\n   \"colorOption\": \"2\",\n   \"duration\": {\n \"timeUnit\": \"Y\",\n   \"multiplier\":      1 \n},\n   \"iconKeySettings\": [\n {\n \"LabelY\":    -14,\n   \"LabelX\":    -91,\n   \"key\": {\n \"dim0\": \"AA+TW\" \n} \n},\n{\n \"LabelY\":      1,\n   \"LabelX\":     24,\n   \"key\": {\n \"dim0\": \"US+HP\" \n} \n},\n{\n \"LabelY\":    -42,\n   \"LabelX\":    -91,\n   \"key\": {\n \"dim0\": \"DL+NW\" \n} \n},\n{\n \"LabelY\":    -13,\n   \"LabelX\":     30,\n   \"key\": {\n \"dim0\": \"UA+CO\" \n} \n},\n{\n \"LabelY\":    -37,\n   \"LabelX\":    -91,\n   \"key\": {\n \"dim0\": \"WN+FL\" \n} \n} \n],\n   \"yLambda\":      1,\n   \"sizeOption\": \"7\",\n   \"showTrails\": false,\n   \"orderedByX\": false,\n   \"xAxisOption\": \"3\",\n   \"yAxisOption\": \"4\",\n   \"yZoomedDataMax\": 1.4985e+08,\n   \"iconType\": \"BUBBLE\",\n   \"dimensions\": {\n \"iconDimensions\": \"dim0\" \n},\n   \"xZoomedIn\": false,\n   \"yZoomedDataMin\": 1.9097e+05,\n   \"xZoomedDataMin\":   5434,\n   \"time\": \"1990\",\n   \"uniColorForNonSelected\": false,\n   \"xLambda\":      1,\n   \"orderedByY\": false,\n   \"nonSelectedAlpha\":    0.4,\n   \"playDuration\":  15000 \n};", 
options["showHeader"] = [ false ];
  chart.draw(data,options);
}

I would expect something more like:
...
options["state"] = {"yZoomedIn": false, ...
...


2. If I leave the state string as JSON, rather than parsing it into a list, and assign naively assign it to 'state' element of the options list, I get lots of escapes before (most of) the quotes in the output JavaScript (but the 'c(' is gone):

options["state"] = [ "{\\"yZoomedIn\\":false, ... \\"playDuration\\":15000}" ];

3. If I run the state JSON through fromJSON() and toJSON() -- just to make sure it's valid to RJSONIO -- and repeat #2, I get similar escape madness (plus RJSONIO's newlines, also escaped once too many times):

options["state"] = [ "{\\n \\"yZoomedIn\\": false,\\n   ...

And Just to verify the back slashes are not in the original JSON in either #2 or #3:

> cat(state.json)
{
 "yZoomedIn": false,
   "xZoomedDataMax": 1.4514e+06,
...

So -- am I doing something wrong? or is there a problem outputting the JavaScript code?

Thanks!
Jeffrey

May 29, 2011
Project Member #1 markus.g...@googlemail.com
It is easier than you think to set the state.
Take the information in state.json and set this as an additional argument in options. You don't have to convert the string into a JSON object, e.g.

M=gvisMotionChart(Fruits, "Fruit", "Year", option=list(state=state.json))

See also:
https://code.google.com/apis/chart/interactive/docs/gallery/motionchart.html#Motion_Chart_initial_state
Status: Accepted
Cc: decastillo@gmail.com
May 29, 2011
#2 jbr...@cambridge.aero
Hi Markus:

Thanks for taking a look at this for me. I think that should be equivalent to my try #2, and when I try it with the Fruits data set, I get the same result:

> state.json='{"xAxisOption":"3","xZoomedDataMin":81,"playDuration":15000,"sizeOption":"_UNISIZE","xZoomedDataMax":111,"xLambda":1,"dimensions":{"iconDimensions":["dim0"]},"yZoomedDataMax":91,"duration":{"multiplier":1,"timeUnit":"Y"},"orderedByX":false,"xZoomedIn":false,"yZoomedDataMin":71,"showTrails":false,"orderedByY":false,"iconType":"BUBBLE","uniColorForNonSelected":false,"yZoomedIn":false,"nonSelectedAlpha":0.4,"yLambda":1,"time":"2010","yAxisOption":"4","iconKeySettings":[{"LabelY":27,"key":{"dim0":"Apples"},"LabelX":42}],"colorOption":"6"}'

> M=gvisMotionChart(Fruits, "Fruit", "Year", options=list(state=state.json))
> plot(M)

producing this JavaScript:

// jsDrawChart
function drawChartMotionChartID6db280db() {
  var data = gvisDataMotionChartID6db280db()
  var chart = new google.visualization.MotionChart(
   document.getElementById('MotionChartID6db280db')
  );
  var options ={};
options["width"] = [    600 ];
options["height"] = [    500 ];
options["state"] = [ "{\\"xAxisOption\\":\\"3\\",\\"xZoomedDataMin\\":81,\\"playDuration\\":15000,\\"sizeOption\\":\\"_UNISIZE\\",\\"xZoomedDataMax\\":111,\\"xLambda\\":1,\\"dimensions\\":{\\"iconDimensions\\":[\\"dim0\\"]},\\"yZoomedDataMax\\":91,\\"duration\\":{\\"multiplier\\":1,\\"timeUnit\\":\\"Y\\"},\\"orderedByX\\":false,\\"xZoomedIn\\":false,\\"yZoomedDataMin\\":71,\\"showTrails\\":false,\\"orderedByY\\":false,\\"iconType\\":\\"BUBBLE\\",\\"uniColorForNonSelected\\":false,\\"yZoomedIn\\":false,\\"nonSelectedAlpha\\":0.4,\\"yLambda\\":1,\\"time\\":\\"2010\\",\\"yAxisOption\\":\\"4\\",\\"iconKeySettings\\":[{\\"LabelY\\":27,\\"key\\":{\\"dim0\\":\\"Apples\\"},\\"LabelX\\":42}],\\"colorOption\\":\\"6\\"}" ];
  chart.draw(data,options);
}

All the backslashes are in the JavaScript code (which makes it croak), but not in the state.json string itself:

> cat(state.json)
{"xAxisOption":"3","xZoomedDataMin":81,"playDuration":15000,"sizeOption":"_UNISIZE","xZoomedDataMax":111,"xLambda":1,"dimensions":{"iconDimensions":["dim0"]},"yZoomedDataMax":91,"duration":{"multiplier":1,"timeUnit":"Y"},"orderedByX":false,"xZoomedIn":false,"yZoomedDataMin":71,"showTrails":false,"orderedByY":false,"iconType":"BUBBLE","uniColorForNonSelected":false,"yZoomedIn":false,"nonSelectedAlpha":0.4,"yLambda":1,"time":"2010","yAxisOption":"4","iconKeySettings":[{"LabelY":27,"key":{"dim0":"Apples"},"LabelX":42}],"colorOption":"6"}

So I think there's something performing extra escaping to the strings before output.

I'm using R version 2.13.0 (2011-04-13) on Mac OS 10.6.7, googleVis 0.2.4 & RJSONIO 0.7-2.

Here's how I can get rid of them as a workaround, but this only seems to fix the output enough to allow the visualization to display. Something in the JSON must be messed up preventing it from setting the actual state:


# remove all the double-backslashes
M$html$chart['jsDrawChart'] = gsub('\\\\', '', M$html$chart['jsDrawChart'] )

# remove the initial double quote
M$html$chart['jsDrawChart'] = sub('= \\[ "[{]"', '= [ {\"', M$html$chart['jsDrawChart'] )

# remove the final double quote
M$html$chart['jsDrawChart'] = sub('[}]" \\];', '} ];', M$html$chart['jsDrawChart'] )


And the output is much better:

> cat(M$html$chart['jsDrawChart'])

// jsDrawChart
function drawChartMotionChartID5f1e6c44() {
  var data = gvisDataMotionChartID5f1e6c44()
  var chart = new google.visualization.MotionChart(
   document.getElementById('MotionChartID5f1e6c44')
  );
  var options ={};
options["width"] = [    600 ];
options["height"] = [    500 ];
options["state"] = [ {"sizeOption":"5","nonSelectedAlpha":0.4,"xLambda":1,"iconType":"BUBBLE","yZoomedDataMax":91,"iconKeySettings":[{"LabelY":-124,"LabelX":-160,"key":{"dim0":"Oranges"}},{"LabelY":53,"LabelX":37,"key":{"dim0":"Apples"}}],"xZoomedIn":false,"orderedByX":false,"showTrails":false,"yZoomedIn":false,"yZoomedDataMin":71,"xZoomedDataMin":81,"orderedByY":false,"xAxisOption":"3","yAxisOption":"4","uniColorForNonSelected":false,"duration":{"timeUnit":"Y","multiplier":1},"time":"2009","yLambda":1,"xZoomedDataMax":111,"dimensions":{"iconDimensions":["dim0"]},"colorOption":"2","playDuration":15000} ];
  chart.draw(data,options);
}

May 29, 2011
Project Member #3 markus.g...@googlemail.com
Jeffery,

There are changes in RJSONIO from version 0.5 to 0.7 which are causing these troubles.
The way toJSON is treating character has changed, which I need to investigate.

Regards,

Markus
May 29, 2011
#4 jbr...@cambridge.aero
Hi Markus:

Downgrading to RJSONIO 0.5-0 did the trick -- thanks for the pointer. It works perfectly and sets the state to boot.

Thanks again,
Jeffrey

Jun 3, 2011
Project Member #5 markus.g...@googlemail.com
The way RJSONIO treats backslashes changed in version 0.7.x and has caused this issue. 
A fix has been applied to applied to googleVis, see revision r199.
Status: Fixed
Jun 4, 2011
#6 jbr...@cambridge.aero
Hi Markus:

The new version has fixed the backslash problem -- gsub()'s a wonderful thing, isn't it??  :) -- thanks!

I still seem to be having trouble setting the initial state. Can you try it and let me know if it works for you?

Based on the "M5" example for the included Fruits data set, gvisMotionChart(Fruits, "Fruit", "Year"), I select Apples and Bananas, move their labels to opposite corners, turn off the "trails" checkbox, and set the time slider to 2009, resulting in this state string:

state.json = '{"xZoomedIn":false,"iconKeySettings":[{"LabelX":-379,"key":{"dim0":"Apples"},"LabelY":-214},{"LabelX":148,"key":{"dim0":"Bananas"},"LabelY":99}],"sizeOption":"5","orderedByX":false,"showTrails":false,"dimensions":{"iconDimensions":["dim0"]},"nonSelectedAlpha":0.4,"time":"2009","playDuration":15000,"xLambda":1,"yZoomedIn":false,"yZoomedDataMin":71,"xZoomedDataMin":81,"yZoomedDataMax":91,"xAxisOption":"3","orderedByY":false,"uniColorForNonSelected":false,"yAxisOption":"4","yLambda":1,"duration":{"multiplier":1,"timeUnit":"Y"},"xZoomedDataMax":111,"iconType":"BUBBLE","colorOption":"2"}'

Generate the plot:

M = gvisMotionChart(Fruits, "Fruit", "Year", options=list(state=state.json) )

Check out the JS:

cat(M$html$chart['jsDrawChart'])

// jsDrawChart
function drawChartMotionChartID7a1f5b15() {
  var data = gvisDataMotionChartID7a1f5b15()
  var chart = new google.visualization.MotionChart(
   document.getElementById('MotionChartID7a1f5b15')
  );
  var options ={};
options["width"] =    600;
options["height"] =    500;
options["state"] = {"xZoomedIn":false,"iconKeySettings":[{"LabelX":-379,"key":{"dim0":"Apples"},"LabelY":-214},{"LabelX":148,"key":{"dim0":"Bananas"},"LabelY":99}],"sizeOption":"5","orderedByX":false,"showTrails":false,"dimensions":{"iconDimensions":["dim0"]},"nonSelectedAlpha":0.4,"time":"2009","playDuration":15000,"xLambda":1,"yZoomedIn":false,"yZoomedDataMin":71,"xZoomedDataMin":81,"yZoomedDataMax":91,"xAxisOption":"3","orderedByY":false,"uniColorForNonSelected":false,"yAxisOption":"4","yLambda":1,"duration":{"multiplier":1,"timeUnit":"Y"},"xZoomedDataMax":111,"iconType":"BUBBLE","colorOption":"2"};
  chart.draw(data,options);
}

This matches what makes it to the browser, but none of the options I specified seem to affect the initial state of the visualization -- not even the simple "time":"2009". (The quotation marks around the numeric "2009" looks odd, but removing them didn't help.)

Could you take a look and see if it works for you?

> packageDescription("googleVis")$Version
[1] "0.2.5"
> packageDescription("RJSONIO")$Version
[1] "0.7-2"


Thanks,
Jeffrey

Jun 4, 2011
#7 jbr...@cambridge.aero
Attached is a screen shot of the initial state I am trying to reproduce (just because it's distinctive).

Here's the code produced with RJSONIO 0.5 installed (which also fails to set the state, but looks consistent with the code above, which is definite progress!):

options["state"] = {"xZoomedIn":false,"iconKeySettings":[{"LabelX":-379,"key":{"dim0":"Apples"},"LabelY":-214},{"LabelX":148,"key":{"dim0":"Bananas"},"LabelY":99}],"sizeOption":"5","orderedByX":false,"showTrails":false,"dimensions":{"iconDimensions":["dim0"]},"nonSelectedAlpha":0.4,"time":"2009","playDuration":15000,"xLambda":1,"yZoomedIn":false,"yZoomedDataMin":71,"xZoomedDataMin":81,"yZoomedDataMax":91,"xAxisOption":"3","orderedByY":false,"uniColorForNonSelected":false,"yAxisOption":"4","yLambda":1,"duration":{"multiplier":1,"timeUnit":"Y"},"xZoomedDataMax":111,"iconType":"BUBBLE","colorOption":"2"};

Thanks again!
Jeffrey


Screen shot 2011-06-04 at 6.47.58 PM.png
43.6 KB   View   Download

Powered by Google Project Hosting