Re: [visualization-api] Motion Chart doesn't display correctly

[MC Get Vizzy]

I think this kind of thing happens when the MotionChart is looking for data to use to size the bubbles and doesn't find it.  Can you send an example in pure javascript that reproduces this problem?

Sorry for the late response.

On Mon, Jul 11, 2011 at 1:52 PM, Steven Cains <ste...@cains.me> wrote:

I've got a strange problem with motion charts. When I try to set the
size of the bubbles in the initial state, they don't show up. Instead
I get little stars, as you can see at the bottom of this page
http://www.cainsretail.com/apple . I can manually set the size via the
dropdown and it works fine. Anyone know how to fix this issue? Thanks!

The data I'm using can be found at
http://cainsretail.appspot.com/users/motionchartdata?retailer=agtjYWluc3JldGFpbHIQCxIIUmV0YWlsZXIYkesgDA
Here's the code:

<script type="text/javascript" src="https://www.google.com/jsapi"></
script>
<script type="text/javascript">
   google.load('visualization', '1', {
       'packages': ['motionchart']
   });
   $(document).ready(function() {
       var motion_chart_loaded = false;
       // visualization 1
       var chart = null;
       var options = {'width':600,'height':
300};options['state']='{"colorOption":"_UNICOLOR","sizeOption":"4","showChartButtons":false,"showSelectListComponent":false,"showSidePanel":false,"showXMetricPicker":false,"showYMetricPicker":false,"showXScalePicker":false,"showYScalePicker":false,"showAdvancedPanel":false}';
       var data_table = new google.visualization.DataTable();
       var motion_chart_inner = '<p><a href="#show_motion_chart"
id="show_motion_chart">Show</a>&nbsp;|&nbsp;<a
href="#hide_motion_chart" id="hide_motion_chart">Hide</a></p><div
id="visualization" style="width:600px;height:300px"></div>'

       function draw_motion_chart(data) {
           data_table.addColumn('string', 'County Name',
'county_name');
           data_table.addColumn('date', 'Month', 'month');
           data_table.addColumn('number', 'Development Score',
'development_score');
           data_table.addColumn('number', 'Employment Rate',
'employment_rate');
           data_table.addColumn('number', 'Labor Force',
'labor_force');
           data_table.addRows(eval('[' + data + ']'));
           chart = new
google.visualization.MotionChart(document.getElementById('visualization'));
           chart.draw(data_table, options);
           $('#show_motion_chart').click(function() {
               $('#visualization').show();
           });
           $('#hide_motion_chart').click(function() {
               $('#visualization').hide();
           });
       };

       function get_motion_chart_data() {
           $.get('users/motionchartdata?retailer={{ retailer_key }}',
function(data) {
               if (data.length > 0) {
                   $('<div/>',
{'html':motion_chart_inner}).appendTo('#motionchart');
                   draw_motion_chart(data);
               }
           });
       }


       get_motion_chart_data();
       motion_chart_loaded = true;
   });
</script>

--
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.

[Riccardo Govoni ☢]

It seems like the 'state' option you are passing to the motion chart is a bit of a mess. It includes settings that should be on the general 'options' object (like 'showChartButtons' , 'showSidePanel', etc...) and is lacking a lot of settings that the motion chart returns you when you query it for its current state (as explained here).

I've set up an example that fixes your problem here http://jsfiddle.net/eSEZr/2/

Note the following. Your options and state read like:

var options = {'width':600,'height': 300};

options['state']='{"colorOption":"_UNICOLOR","sizeOption":"4","showChartButtons":false,"showSelectListComponent":false,"showSidePanel":false,"showXMetricPicker":false,"showYMetricPicker":false,"showXScalePicker":false,"showYScalePicker":false,"showAdvancedPanel":false}';

For starters, a bunch of settings should not be inside the 'state' option. So it should more correctly read:

var options = {'width':600,'height': 300};

options['showChartButtons'] = false;
options['showSelectListComponent'] = false;
options['showSidePanel'] = false;
options['showXMetricPicker'] = false;
options['showYMetricPicker'] = false;
options['showXScalePicker'] = false;
options['showYScalePicker'] = false;
options['showAdvancedPanel'] = false;
options['state'] = '{"colorOption":"_UNICOLOR","sizeOption":"4"}';  

where the 'state' settings contains only what is left from removing the spurious entries. However what is left in the 'state' option is somewhat insufficient. If you query the 'state' from the motion chart via the wrench icon it returns a much longer state string:

options['state'] =  '{"yLambda":1,"duration":{"multiplier":1,"timeUnit":"D"},"xZoomedDataMin":0,"orderedByY":false,"uniColorForNonSelected":false,"iconKeySettings":[],"nonSelectedAlpha":0.4,"yAxisOption":"3","sizeOption":"4","yZoomedIn":false,"xLambda":1,"colorOption":"_UNICOLOR","xZoomedDataMax":153,"dimensions":{"iconDimensions":["dim0"]},"yZoomedDataMax":96.6,"orderedByX":false,"iconType":"BUBBLE","playDuration":15000,"yZoomedDataMin":81.6,"xZoomedIn":false,"time":"2010-04-01","showTrails":true,"xAxisOption":"2"}';

You should use the above state, but if you want to scrub it down to its very minimum (possibly because you want to reuse the same common basic state across different motion charts), this is the minimum set of state settings that works for me (that is, you see the bubbles instead of the stars).
Note however that the MotionChart doesn't expect you to manipulate its state manually, so this kind of practice might break down at any time.

options['state']='{"colorOption":"_UNICOLOR","sizeOption":"4","iconType":"BUBBLE","dimensions":{"iconDimensions":["dim0"]}}'

So the final set of options for your chart should read (as in the example I posted):

  var options = {'width':600,'height': 300};

  options['showChartButtons'] = false;
  options['showSelectListComponent'] = false;
  options['showSidePanel'] = false;
  options['showXMetricPicker'] = false;
  options['showYMetricPicker'] = false;
  options['showXScalePicker'] = false;
  options['showYScalePicker'] = false;
  options['showAdvancedPanel'] = false;
  options['state']='{"colorOption":"_UNICOLOR","sizeOption":"4","iconType":"BUBBLE","dimensions":{"iconDimensions":["dim0"]}}'
  new google.visualization.MotionChart(document.getElementById('chart')).draw(data_table, options);

/R.

[victor noagbodji]

Thanks :)