jQuery + JSON + Open flash chart, how can I create a chart on the fly?

Question

The JS

SWFlocation = "open-flash-chart.swf";
getMyData = function()
{
    $.post(
        myJsURL, 
        {
            passedval: 1234
        }, 
        function (returned_json) {
            return returned_json;

        },
        "json"
    ); 
}
swfobject.embedSWF(SWFlocation, "myChartDiv", "650", "200", "9.0.0", "", {"get-data":"getMyData"} );

Using firebug, if I hardcode the returned JSON, the chart works fine. But when I request the data as above - i.e. after the page has loaded, I get a 2032 error.

The getMyData method actually requests data from a PHP script that in turn requests data from and extrnal API (a big one like flickr) so there can be a few seconds delay if the results are not currently cached by us. Maybe I'm going about this the wrong way?

Answer 1

Just a guess as I don't use Open Flash Chart but since you're making an async ajax call your getMyData function is not actually returning the json value (the callback function you defined is).

Try preloading (maybe make a synchronous ajax call before the swf embed?) the data and storing it in a var, then have your getMyData function simply return that var.

Answer 2

In Javascript, declair a variable flashvars and a var data like this:

var flashvars = {};
var data;

Also, make sure that you have this function, which is automatically called by swfobject.embedSWF:

 function open_flash_chart_data(){
     return JSON.stringify(data);
     }

Now go to your AJAX-function and change your AJAX-Success-call like this:

success: function(returned_json){
      // we need to set both
      // data and flashvars.ofc
      data=returned_json;
      flashvars.ofc = returned_json;
      swfobject.embedSWF(SWFlocation, "myChartDiv", "650", "200", "9.0.0", "",flashvars);  

I had a similar problem, and it was quite hard to debug that you need both vars data and flashvars in the success callback. If these variables (or function open_flash_chart_data() ) are missing, you'll get Error 2032.

Answer 3

just use $.ajaxSetup({async : false}); before you call $.post();

example

function ajaxchart() {
  $.ajaxSetup({async : false});
  var chart = '';
  var url = "data.php";
  var data = '';
  var callback = function(resp) {
    chart = resp;
  };
  $.post(url, data, callback, 'text');
  return chart;
}
$(function() {
  $("#test").click(function() {
    swfobject.embedSWF("open-flash-chart.swf", "my_chart", "350", "200", "9.0.0", "expressInstall.swf", {"get-data":"ajaxchart"});
  });
});

Answer 4

You have to put the swfobject.embedSWF() into the ajax callback.

like this:

SWFlocation = "open-flash-chart.swf";
init_chart = function()
{
    $.post(
        myJsURL, 
        {
                passedval: 1234
        }, 
        function (returned_json) {
                swfobject.embedSWF(SWFlocation, "myChartDiv", "650", "200", "9.0.0", "", {"get-data":returned_json} );    
        },
        "json"
    ); 
}
init_chart();