Author: croberts Date: 2011-06-22 18:39:04 +0000 (Wed, 22 Jun 2011) New Revision: 4848
Modified: trunk/notes/open-flash-chart notes.txt Log: More notes on the open flash chart functionality.
Modified: trunk/notes/open-flash-chart notes.txt =================================================================== --- trunk/notes/open-flash-chart notes.txt 2011-06-22 12:05:19 UTC (rev 4847) +++ trunk/notes/open-flash-chart notes.txt 2011-06-22 18:39:04 UTC (rev 4848) @@ -1,4 +1,4 @@ -Open-Flash-Chart integration in Cumin. +Open-Flash-Chart integration in Cumin.
Source code location and compilation:
@@ -10,4 +10,44 @@
+So, how does cumin use the charts? +In the python code, when you have the need to draw a chart, you might use the code below. + chart = StatFlashChart(app, "submitted", scheduler) + chart.title = "Job totals" + chart.duration.param.default = "3600" + chart.stats = ("JobsSubmitted", "JobsStarted", "JobsCompleted") + charts.add_child(chart) +This code sets up a StatFlashChart that will have the display title of “Job totals”, an initial duration off 1 hour (3600 seconds) and will be charting the stats (See rosemary.xml) JobsSubmitted, JobsStarted and JobsCompleted.
+When that page is rendered, you will see a block of JavaScript like the one below... + + var flashversion = swfobject.getFlashPlayerVersion(); + if (flashversion.major < 9) { + wooly.addPageUpdateListener(function () {if (document.images["main.grid.scheduler.view.body.overview.cycle.charts.submitted"].className == "Loading") return; cumin.updateChart("main.grid.scheduler.view.body.overview.cycle.charts.submitted");}); + cumin.setupChart('main.grid.scheduler.view.body.overview.cycle.charts.submitted', 360); + } else { + swfobject.embedSWF("resource?name=open-flash-chart.swf", "main.grid.scheduler.view.body.overview.cycle.charts.submitted_chart", "360", "120", "9.0.0", "", + {"data-file":"chart.json?agent=com.redhat.grid|scheduler|croberts.redhat.com;object_id=croberts.redhat.com;chart_id=main.grid.scheduler.view.body.overview.cycle.charts.submitted;duration=3600;rpkg=com.redhat.grid;rcls=Scheduler;stat=JobsSubmitted;stat=JobsStarted;stat=JobsCompleted", "id":"main.grid.scheduler.view.body.overview.cycle.charts.submitted"}, {wmode: "opaque"}); + + wooly.addPageUpdateListener(function () { cumin.updateFlashChart('main.grid.scheduler.view.body.overview.cycle.charts.submitted'); }); + window.addEvent('domready',function () { + cumin.setFullpageHandler('main.grid.scheduler.view.body.overview.cycle.charts.submitted', 'flashpage.html?agent=com.redhat.grid|scheduler|croberts.redhat.com;object_id=croberts.redhat.com;chart_id=main.grid.scheduler.view.body.overview.cycle.charts.submitted;duration=3600;rpkg=com.redhat.grid;rcls=Scheduler;stat=JobsSubmitted;stat=JobsStarted;stat=JobsCompleted'); + }); + } + + +The code checks to be sure that the client has at least Flash 9 installed. Assuming that the check passes, the swfobject.embedSWF call is made to embed the flash object on the screen. You will also note that addPageUpdateListener gets called with the cumin.updateFlashChart (found in app.js) function with the chart id as the parameter. When the pageUPdateListener fires, it results in the cumin.updateFlashChart being called, which will make a call to the chart.get_ymax function...this function is actually in the ActionScript code. The mechanism for the callback is setup in main.as: ExternalInterface.addCallback("get_ymax", getYmax); +That maps the external name “get_ymax” to the internal function getYmax. The getYmax() function eventually makes a call back to the JavaScript like this: ExternalInterface.call("got_ymax", id, this.URL, String(yaxis_max), String(yvals_max), String(control_min), String(control_max)); + +The “got_ymax” javaScript function will cause the chart to be reloaded via a call to “chart.reload()”, which is another callback defined in main.as. + +Here is the flow of what happens when the chart is initialized: +main() calls find_data() which looks for the 'data-file' parameter that was passed to the chart when it was embedded. In our case data-file is actually a URL that goes back into Cumin and fetches the JSON-formatted data. It then calls load_external_file with the URL specified in the 'data-file' parameter. + +load_external_file gets the URL and gets the content. It sets up a couple of eventListeners on the loader (IO_ERROR and COMPLETE) and then calls loader.load(). , when it completes, the COMPLETE eventListener will fire (the xmlLoaded function). XmlLoaded() calls parse_json. + +parse_json takes all of the data and goes through all of the values, building the structure required for all of the data points and then calls “build_chart(json)” to generate the actual chart. + +build_chart, first determines whether we are appending values to the current data set or not. If we are appending, it takes care of the appending and then calls resize(). If not either case, it continues on adding various Sprites as necessary depending on the chart type (radar, pie, “regular”). It then calls “resize()”, which will trigger the redrawing of the chart. + +For additional notes and examples, please see the json.help.txt file in <root>cumin/resources. \ No newline at end of file