Changing default settings for each chart. Motion Chart

[Cristian]

Hi,
I am using options['state'] to set my default setting in my Motion
Chart visualization. [VBAR, _UNIQUE_COLOR, _ALPHABETICAL, etc] {that
part is working great}

When I select a BUBBLE graph instead of a BAR graph I want it to
default to "xAxisOption":"_TIME". I am at a lost here. I have no idea
where to begin to look
.
I'm thinking that there might be a way to add a listener to know when
a different graph is selected and then assign the defaults o force the
property I need then, but I can't find anything about it.

I would appreciate any help you guys give me or point me in the right
direction.

Thanks,

-Cristian




PS: I'm loading my points from a CSV file. In Mozilla, Safari, Chrome
everything works, but when I try it in IE nothing... any ideas? I'm
posting this question in another thread.

[Riccardo Govoni ☢]

I don't think the motionchart was ever designed to let you tweak its state at runtime. According to this paragraph the state should be treated as a sort of black box which you configure once.

To still do what you're trying to, you could listen for statechange events. When they fire, extract the current state from the motionchart, parse it to figure out if the chart turned into a BUBBLE one, tweak the state setting the xAxisOption as you need it and redraw the motion chart with the altered state. Being a flash chart, I suspect the redraw might cause some ugly flickering, though.

-- R.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
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.

[Cristian]

Hi Riccardo,
Thank you for the clarification and the link.
now I'm having trouble getting the listener to work. I added this code
toward the end.

google.visualization.events.addListener(chart, 'statechange',
stateHandler);

function stateHandler() {
if(!getState())
{ alert(getState());
}

but nothing happens. if I don't check for null and just alert a
message then I see my alert message called several times and when i
change graphs. I'm having trouble retrieving the state. I also tried
chart.getState() but no lock.
Any tips?

Again Thank you.. your help is deeply appreciated.

-C

On Sep 29, 4:24 am, Riccardo Govoni ☢ <battleho...@gmail.com> wrote:
> I don't think the motionchart was ever designed to let you tweak its state
> at runtime. According to this

> paragraph<http://code.google.com/apis/chart/interactive/docs/gallery/motionchar...>

> the
> state should be treated as a sort of black box which you configure once.
>
> To still do what you're trying to, you could listen for

> statechange<http://code.google.com/apis/chart/interactive/docs/gallery/motionchar...>events.

> When they fire, extract the current state from the motionchart,
> parse it to figure out if the chart turned into a BUBBLE one, tweak the
> state setting the xAxisOption as you need it and redraw the motion chart
> with the altered state. Being a flash chart, I suspect the redraw might
> cause some ugly flickering, though.
>
> -- R.
>

[Riccardo Govoni ☢]

The example you wrote is not going to work because getState() is not a global function, but chart.getState() should work.

Are the chart and the stateHandler defined in the same scope as your snippet seems to suggest (that, if you put a breakpoint inside the stateHandler function, is 'chart' defined? ).

If you could post a larger snippet showing how you create the motion chart and set up the listener, that would help in troubleshooting the issue.

-- R.

[Cristian]

Hi Riccardo,
I do think I had a scope problem with 'chart', but still no love for
getState().
I'm copying most of my code in here, just removing some comments and
state options...

Thanks for helping me out on this.

// I moved most of my variables to the hight scope level for testing//
//------------------------------------------------------
<script type="text/javascript">

var allText =[];
var allTextLines = [];
var txtFile;
var chart ;
var options = {};
var data;

if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
txtFile=new XMLHttpRequest();
}
else
{ // code for IE6, IE5
txtFile=new ActiveXObject("Microsoft.XMLHTTP");
}

txtFile.open("GET", "dataFile.csv", true);

txtFile.onreadystatechange = function()
{
if (txtFile.readyState == 4 && txtFile.status == 200)
{
allText = txtFile.responseText;
allTextLines = allText.split(/\r\n|\n|,|\r/);
}
}

txtFile.send(null);

google.load('visualization', '1', {'packages':['motionchart']});
google.setOnLoadCallback(drawChart);

function drawChart() {

data = new google.visualization.DataTable();
data.addColumn('string', 'Indicator');
data.addColumn('date', 'Date');
data.addColumn('number', 'Value');

var totalNumberOfLines = allTextLines.length;

for (var i =0 ; i< totalNumberOfLines ; i=i+3)
{ //hard parsing
data.addRows([[allTextLines[i].toString(),new Date (allTextLines[i
+1]),parseFloat(allTextLines[i+2])]]);
}

chart = new
google.visualization.MotionChart(document.getElementById('chart_div'));

options['width'] = 600;
options['height'] = 300;
chart.draw(data, options);
google.visualization.events.addListener(chart, 'statechange',
selectHandler);
}
function selectHandler()
{
if(!chart.getState())
{
alert(chart.getState());
}
}
</script>
--------

On Sep 29, 2:06 pm, Riccardo Govoni ☢ <battleho...@gmail.com> wrote:
> The example you wrote is not going to work because getState() is not a
> global function, but chart.getState() should work.
>
> Are the chart and the stateHandler defined in the same scope as your snippet
> seems to suggest (that, if you put a breakpoint inside the stateHandler
> function, is 'chart' defined? ).
>
> If you could post a larger snippet showing how you create the motion chart
> and set up the listener, that would help in troubleshooting the issue.
>
> -- R.
>

[asgallant]

chart isn't in scope for your selectHandler function.  Try passing the function directly:

google.visualization.events.addListener(chart, 'statechange', function() { 
    if(!chart.getState()) { 
        alert(chart.getState()); 
    } 
});

[Cristian]

Hi Guys,
Sorry I took a couple of days off. I'm back. :)
I tried inserting the the function right in the listener, but I still
get the chart.getState null. What I find estrange is that I have that
I have IF ( char.getState is not null) then alert message and I when
the message popups it says :null.
Any thought?

Thank you,

-Cristian

[asgallant]

My guess is that you forgot the parenthesis at the end of chart.getState().  If you leave them out, it returns the function itself, which isn't null as long as it is defined.

[Cristian]

Hi Drew,

I have the parenthesis there. When I step through I see the value as
null. getState sends me to :M.getChart=function(){return this.d!=g?
m.getElementById(this.d):g}
where the value evaluated inside the ternary and return in the "false"
case is null. g=null

<script type="text/javascript" src="https://www.google.com/jsapi"></
script>
<script type="text/javascript">
var chart ;
//....load file and parce data...

google.load('visualization', '1', {'packages':['motionchart']});
google.setOnLoadCallback(drawChart);


function drawChart() {

//..... set dataTable...

chart = new
google.visualization.MotionChart(document.getElementById('chart_div'));

options['state' = '......//lots ....';

options['width'] = 600;
options['height'] = 300;

chart.draw(data, options);

google.visualization.events.addListener(chart, 'statechange',

function () {
if(!chart.getState())
{
alert(chart.getState());
}
});
</script>
</head>

Thanks you,

-C

[asgallant]

Since the getState() method returns a serialized JSON string, the if statement: if(!chart.getState()) will evaluate to true only if the getState() method is returning null, so the subsequent alert(chart.getState()); call will never show anything other than null.

[Cristian]

Mmm ok... I haven't done anything with JSON before. Is there a way to
invoke something like

Json.deserialized(chart.getState()) or
chart.getState().toString(); or
while (chart.getState()[i] is not null) console.log(chart.getState()
[i]); i++;

from the examples I found online, it lookes like you needed to know
the original structure of the serialization in order to deserialized.


What I am trying to accomplish is to have a "default" [x-axis]
selection[order] for the bubble and a different for the bar graph.
something like this example http://code.google.com/apis/chart/interactive/docs/gallery/motionchart.html

Right now I have it setup so it Starts with a bar graph with x-axis
order alphabetical. If I change to bubble stays alphabetical. I would
like it to change to Time when I click bubbles, and alphabetical when
I click bars.

I hope it makes sense.

Thank you...

-C

On Oct 3, 3:34 pm, asgallant <drew_gall...@abtassoc.com> wrote:
> Since the getState() method returns a serialized JSON string, the if
> statement: if(!chart.getState()) will evaluate to true only if the
> getState() method is returning null, so the subsequent alert(chart.getState(

> )); call will never show anything other than null.

[asgallant]

Hmm...I don't work much with motion charts, but I think what you want to be testing for is the iconType property.  Something like this, maybe?

google.visualization.events.addListener(chart, 'statechange', function () {

    var state = chart.getState();
    if (state['iconType'] = 'BUBBLE') {
        // change to time
    }
    else if (state['iconType'] = 'VBAR') {
        // change to alphabetical
    }
});

I think that there is another type ('BUBBLE_BAR') that marks the transitional state in between the two.

[Cristian]

Hi,
I keep trying different things, trying to change the scope chart. I
tried your code and just for testing I put alert() messages to see if
it went inside the if statements, but never got there.
Using the debugger I see that the value of state is always null and it
doesn't show any 'components' inside. Is there another setting that
needs to be enable or "library" imported in order to
access .getState() ?


Thank you,

-C

PS: I hope you don't mind if I send you a link showing you what I'm
seeing.

[asgallant]

Well it looks like some recent update broke the getState() function.  I can't get it to return anything other than null, even when working with the example on the viz playground.