search

kleanthisk10 / google-motion-charts-with-r

Automatically exported from code.google.com/p/google-motion-charts-with-r
0 stars 0 forks source link

problem setting state -- JSON output problem? #5

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
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

Original issue reported on code.google.com by jbr...@cambridge.aero on 27 May 2011 at 4:01

GoogleCodeExporter commented 9 years ago 
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:
http://code.google.com/apis/chart/interactive/docs/gallery/motionchart.html#Moti
on_Chart_initial_state

Original comment by markus.g...@googlemail.com on 29 May 2011 at 10:51

GoogleCodeExporter commented 9 years ago 
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,"sizeOpt
ion":"_UNISIZE","xZoomedDataMax":111,"xLambda":1,"dimensions":{"iconDimensions":
["dim0"]},"yZoomedDataMax":91,"duration":{"multiplier":1,"timeUnit":"Y"},"ordere
dByX":false,"xZoomedIn":false,"yZoomedDataMin":71,"showTrails":false,"orderedByY
":false,"iconType":"BUBBLE","uniColorForNonSelected":false,"yZoomedIn":false,"no
nSelectedAlpha":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,\\"dimensi
ons\\":{\\"iconDimensions\\":[\\"dim0\\"]},\\"yZoomedDataMax\\":91,\\"duration\\
":{\\"multiplier\\":1,\\"timeUnit\\":\\"Y\\"},\\"orderedByX\\":false,\\"xZoomedI
n\\":false,\\"yZoomedDataMin\\":71,\\"showTrails\\":false,\\"orderedByY\\":false
,\\"iconType\\":\\"BUBBLE\\",\\"uniColorForNonSelected\\":false,\\"yZoomedIn\\":
false,\\"nonSelectedAlpha\\":0.4,\\"yLambda\\":1,\\"time\\":\\"2010\\",\\"yAxisO
ption\\":\\"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":"_UNISI
ZE","xZoomedDataMax":111,"xLambda":1,"dimensions":{"iconDimensions":["dim0"]},"y
ZoomedDataMax":91,"duration":{"multiplier":1,"timeUnit":"Y"},"orderedByX":false,
"xZoomedIn":false,"yZoomedDataMin":71,"showTrails":false,"orderedByY":false,"ico
nType":"BUBBLE","uniColorForNonSelected":false,"yZoomedIn":false,"nonSelectedAlp
ha":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","yZoome
dDataMax":91,"iconKeySettings":[{"LabelY":-124,"LabelX":-160,"key":{"dim0":"Oran
ges"}},{"LabelY":53,"LabelX":37,"key":{"dim0":"Apples"}}],"xZoomedIn":false,"ord
eredByX":false,"showTrails":false,"yZoomedIn":false,"yZoomedDataMin":71,"xZoomed
DataMin":81,"orderedByY":false,"xAxisOption":"3","yAxisOption":"4","uniColorForN
onSelected":false,"duration":{"timeUnit":"Y","multiplier":1},"time":"2009","yLam
bda":1,"xZoomedDataMax":111,"dimensions":{"iconDimensions":["dim0"]},"colorOptio
n":"2","playDuration":15000} ];
  chart.draw(data,options);
}

Original comment by jbr...@cambridge.aero on 29 May 2011 at 2:30

GoogleCodeExporter commented 9 years ago 
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

Original comment by markus.g...@googlemail.com on 29 May 2011 at 6:11

GoogleCodeExporter commented 9 years ago 
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

Original comment by jbr...@cambridge.aero on 29 May 2011 at 7:14

GoogleCodeExporter commented 9 years ago 
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.

Original comment by markus.g...@googlemail.com on 4 Jun 2011 at 4:48

GoogleCodeExporter commented 9 years ago 
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"},"L
abelY":-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,"yZoomed
In":false,"yZoomedDataMin":71,"xZoomedDataMin":81,"yZoomedDataMax":91,"xAxisOpti
on":"3","orderedByY":false,"uniColorForNonSelected":false,"yAxisOption":"4","yLa
mbda":1,"duration":{"multiplier":1,"timeUnit":"Y"},"xZoomedDataMax":111,"iconTyp
e":"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"},"La
belY":-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,"yZoomedI
n":false,"yZoomedDataMin":71,"xZoomedDataMin":81,"yZoomedDataMax":91,"xAxisOptio
n":"3","orderedByY":false,"uniColorForNonSelected":false,"yAxisOption":"4","yLam
bda":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

Original comment by jbr...@cambridge.aero on 4 Jun 2011 at 10:47

GoogleCodeExporter commented 9 years ago 
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"},"La
belY":-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,"yZoomedI
n":false,"yZoomedDataMin":71,"xZoomedDataMin":81,"yZoomedDataMax":91,"xAxisOptio
n":"3","orderedByY":false,"uniColorForNonSelected":false,"yAxisOption":"4","yLam
bda":1,"duration":{"multiplier":1,"timeUnit":"Y"},"xZoomedDataMax":111,"iconType
":"BUBBLE","colorOption":"2"};

Thanks again!
Jeffrey

Original comment by jbr...@cambridge.aero on 4 Jun 2011 at 10:55

Attachments: