Closed GoogleCodeExporter closed 8 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
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
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
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
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
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
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:
Original issue reported on code.google.com by
jbr...@cambridge.aero
on 27 May 2011 at 4:01