Dynamic radar chart invisible

[bodyrock]

My code works if I don't try to create the chart dynamically, but of course I must create it dynamically. Please check out my code at the link below. Any help would be greatly appreciated.

http://stackoverflow.com/questions/14492039/flotr2-dynamic-chart-invisible

[bodyrock]

I was going to post the code here, but it kept getting blocked by the GitHub Markdown.

[cesutherland]

Could you please fork http://jsfiddle.net/cesutherland/ZFBj5/ with your example?

[bodyrock]

Yes, joy when I use static code: http://jsfiddle.net/bodyrock/f4Z6L/

and no joy when I dynamically generate: http://jsfiddle.net/bodyrock/a9tgn/1/

[bodyrock]

Just in case you're curious, this will run in an AJAX page where I pull the XML data down from a webservice (httprequest) and then dynamically generate the JS to spawn the chart just as you see at jsfiddle.

[bodyrock]

Sorry, the jsfiddle for the joyful static radar chart should be http://jsfiddle.net/bodyrock/xsRCY/

[cesutherland]

alert doesn't work either, so this isn't an issue with Flotr2: http://jsfiddle.net/a9tgn/3/

I believe you can do document.createElement('script').innerHTML = 'alert()';, but I'm not sure if that works everywhere.

A better solution would be to write a function which has a data argument and draws the chart. Ship that to the client as a normal script. Use your dynamic request to pull down data only, and call that method with the received data.

Good luck!

[bodyrock]

Thanks for the suggestion, have you ever seen an example of the redesign you are suggesting? That is, to your knowledge, has writing a function (with a data argument) that draws the chart ever been done?

[cesutherland]

Sure! I do that pretty regularly. Here's an example with Envision:

http://humblesoftware.com/envision/demos/ajax

Check it out in the debugger for a better idea of how it works.

[bodyrock]

Would you happen to know an example with Flotr?

[cesutherland]

I don't have one off hand. The basic idea is to call a function like this after the async call with data returns:

function basic(container, data) {

  var
    i, graph;

  // Draw Graph
  graph = Flotr.draw(container, [ data ], {
    xaxis: {
      minorTickFreq: 4
    }, 
    grid: {
      minorVerticalLines: true
    }
  });
}

[bodyrock]

Thanks, that stub will help a lot. I've been having the hardest time trying to read your code, but I'm starting to get it now. I've written thousands of lines of javascript, but never used the anonymous function design pattern before. JSON either. I'm in 'hello world' tutorial mode at the moment, but when I finally get something I'll post a fiddle.