CODEWITHSUNDEEP
flashvisualization
Eli Kern
Eli Kern

Reputation: 319

Why does my Flash-based chart not work from a local file?

This may be a overly simple question for most users. I've created an .html file that contains code for a Flash-based Google Motion Chart. I wrote the code in Google's Code Playground and it works there, but it will not work when I load the local .html file in IE, Firefox or Chrome. I'm aware of the solution suggested by Google here, but this hasn't worked for me.

My code is pasted below:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
  Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['motionchart']});
</script>
<script type="text/javascript">
var visualization;

function drawVisualization() {
  // To see the data that this visualization uses, browse to
  // http://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ
  var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheet/pub?key=0AjjzMkj-NxM0dEdFRWtYWTh6VDRlNGZfRThZN3BVZFE&single=true&gid=0&output=csv');

  // Send the query with a callback function.
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();
  visualization = new google.visualization.MotionChart(document.getElementById('visualization'));
  //visualization.draw(data, {'width': 800, 'height': 400});

  var options = {};
  options['state'] =
    '{"xZoomedDataMin":631152000000,"colorOption":"3","playDuration":15000,"xZoomedIn":false, \
    "sizeOption":"_UNISIZE","duration":{"timeUnit":"Y","multiplier":1}, \
    "uniColorForNonSelected":false,"orderedByY":false,"yAxisOption":"3", \
    "xZoomedDataMax":1230768000000,"yLambda":1,"iconType":"BUBBLE","yZoomedIn":false, \
    "xLambda":1,"orderedByX":false,"yZoomedDataMin":63.16,"nonSelectedAlpha":0.3, \
    "yZoomedDataMax":87.79,"xAxisOption":"_TIME","iconKeySettings":[],"time":"1990", \
    "dimensions":{"iconDimensions":["dim0"]},"showTrails":true};';
  options['width'] = 900;
  options['height'] = 400;
  visualization.draw(data, options);

}


google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="height: 400px; width: 400px;"></div>
 </body>
</html>

​ Thank you all for your help!

Best, Eli

Upvotes: 0

Views: 281

Answers (1)

Aditya Vikas Devarapalli
Aditya Vikas Devarapalli

Reputation: 3473

you can't use the charts offline.

as mentioned here :

Can I use charts offline?

    No; your computer must have live access to http://www.google.com/jsapi in order to use charts. 
This is because the visualization libraries that your page requires are loaded 
dynamically before you use them. The code for loading the appropriate library is part of the
included jsapi script, and is called when you invoke the google.load() method. Our terms of 
service do not allow you to download the google.load or google.visualization code to use 
offline.

and it's also mentioned :

Flash-based charts might not work correctly when accessed from a file location in the browser
(e.g., file:///c:/webhost/myhost/myviz.html) rather than from a web server URL (e.g., http://www.myhost.com/myviz.html).
This is typically a testing issue only; the issue is not a problem when you access the chart from an http:// address.

Upvotes: 1

Related Questions