{"id":49027,"date":"2008-09-21T19:15:00","date_gmt":"2008-09-21T19:15:00","guid":{"rendered":"\/2008\/09\/23\/open-flash-chart-ii-javascript-part-1"},"modified":"2010-01-06T23:43:14","modified_gmt":"2010-01-06T23:43:14","slug":"open-flash-chart-ii-javascript-part-1","status":"publish","type":"post","link":"http:\/\/pullmonkey.com\/2008\/09\/21\/open-flash-chart-ii-javascript-part-1\/","title":{"rendered":"Open Flash Chart II &#8211; Javascript (Part 1)"},"content":{"rendered":"<p>This article (and the work behind it -- meaning <b>get the latest from <a href=\"http:\/\/github.com\/pullmonkey\/open_flash_chart\/tree\/master\">github<\/a><\/b>) is generously sponsored by <a href=\"http:\/\/harryseldon.thinkosphere.com\/\">Harry Seldon<\/a> who wants to be able to pass data around using javascript.  There are quite a few benefits to this, learn more from <a href=\"http:\/\/teethgrinder.co.uk\/open-flash-chart-2\/tutorial-5.php\">teethgrinder's tutorial on the same topic<\/a>.<\/p>\n<p>This example opens up a lot of possibilities and I thank Harry for pointing me to it.  So more to come on OFC and Javascript. For a taste of what is to come, check these out:<\/p>\n<ul>\n<li><a href=\"http:\/\/teethgrinder.co.uk\/open-flash-chart-2\/tutorial-5.php\">The one I will go over in this article<\/a>.<\/li>\n<li><a href=\"http:\/\/teethgrinder.co.uk\/open-flash-chart-2\/tutorial-6.php\">Change data on the fly with links<\/a> - <b><a href=\"http:\/\/pullmonkey.com\/2008\/9\/22\/open-flash-chart-ii-javascript-part-2\">Discussed in Part2<\/a><\/b>.<\/li>\n<li><a href=\"http:\/\/teethgrinder.co.uk\/open-flash-chart-2\/tutorial-js.php\">Update and Save data<\/a>.<\/li>\n<li><a href=\"http:\/\/teethgrinder.co.uk\/open-flash-chart\/gallery-js-ajax-2.php\">Ajax calls to server<\/a> - <b><a href=\"http:\/\/pullmonkey.com\/2008\/9\/23\/open-flash-chart-ii-javascript-part-3\">Discussed in Part 3<\/a><\/b>.<\/li>\n<li><a href=\"http:\/\/teethgrinder.co.uk\/open-flash-chart\/gallery-js-2.php\">Manipulate the data through an interface<\/a>.<\/li>\n<li><a href=\"http:\/\/ext-ux-ofcgxt.googlecode.com\/svn\/demo\/Test.html\">Some really cool interfaces<\/a>.<\/li>\n<\/ul>\n<p>Here is the graph we are after in this example:<br \/>\n    <script src=\"\/javascripts\/prototype.js\" type=\"text\/javascript\"><\/script><script type=\"text\/javascript\" src=\"\/projects\/javascripts\/swfobject.js\"><\/script><script type=\"text\/javascript\">\n      swfobject.embedSWF(\"\/projects\/open-flash-chart-lwc.swf\", \"flash_content_js_1\", \"550\", \"300\", \"9.0.0\", \"expressInstall.swf\", {\"get-data\":\"open_flash_chart_data\"}); <\/script>    <script type=\"text\/javascript\">\n      function ofc_ready() {\n      }\n      function open_flash_chart_data() {\n        return Object.toJSON(data);\n      }\n      function findSWF(movieName) {\n        if (navigator.appName.indexOf(\"Microsoft\")!= -1) {\n          return window[movieName];\n        } else {\n          return document[movieName];\n        }\n      }\n      var data = {\"title\": {\"text\": \"MY TITLE\"}, \"elements\":[{\"type\": \"bar_glass\", \"values\": [1, 2, 3, 4, 5, 6, 7, 8, 9]}]};\n    <\/script><\/p>\n<div id=\"flash_content_js_1\"><\/div>\n<p>\n<a href=\"http:\/\/pullmonkey.com\/projects\/open_flash_chart2\">More Open Flash Chart II examples.<\/a><br \/>\n<br \/>\nAnd here is the code (the controller):<\/p>\n<table class=\"CodeRay\">\n<tr>\n<td class=\"line_numbers\" title=\"click to toggle\" onclick=\"with (this.firstChild.style) { display = (display == '') ? 'none' : '' }\">\n<pre>1<tt>\r\n<\/tt>2<tt>\r\n<\/tt>3<tt>\r\n<\/tt>4<tt>\r\n<\/tt><strong>5<\/strong><tt>\r\n<\/tt>6<tt>\r\n<\/tt>7<tt>\r\n<\/tt>8<tt>\r\n<\/tt>9<tt>\r\n<\/tt><strong>10<\/strong><tt>\r\n<\/tt>11<tt>\r\n<\/tt><\/pre>\n<\/td>\n<td class=\"code\">\n<pre ondblclick=\"with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }\"><tt>\r\n<\/tt><span class=\"r\">class<\/span> <span class=\"cl\">TestItController<\/span> &lt; <span class=\"co\">ApplicationController<\/span><tt>\r\n<\/tt>  <span class=\"r\">def<\/span> <span class=\"fu\">index<\/span><tt>\r\n<\/tt>    title = <span class=\"co\">Title<\/span>.new(<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">MY TITLE<\/span><span class=\"dl\">&quot;<\/span><\/span>)<tt>\r\n<\/tt>    bar = <span class=\"co\">BarGlass<\/span>.new<tt>\r\n<\/tt>    bar.set_values([<span class=\"i\">1<\/span>,<span class=\"i\">2<\/span>,<span class=\"i\">3<\/span>,<span class=\"i\">4<\/span>,<span class=\"i\">5<\/span>,<span class=\"i\">6<\/span>,<span class=\"i\">7<\/span>,<span class=\"i\">8<\/span>,<span class=\"i\">9<\/span>])<tt>\r\n<\/tt>    <span class=\"iv\">@chart<\/span> = <span class=\"co\">OpenFlashChart<\/span>.new<tt>\r\n<\/tt>    <span class=\"iv\">@chart<\/span>.set_title(title)<tt>\r\n<\/tt>    <span class=\"iv\">@chart<\/span>.add_element(bar)<tt>\r\n<\/tt>  <span class=\"r\">end<\/span><tt>\r\n<\/tt><span class=\"r\">end<\/span><tt>\r\n<\/tt><\/pre>\n<\/td>\n<\/tr>\n<\/table>\n<p>\nNotice that I do not render the chart object, however I turn it into an instance variable for use in our javascript rendering of our chart.<\/p>\n<p>And in your view (index.html.erb):<\/p>\n<table class=\"CodeRay\">\n<tr>\n<td class=\"line_numbers\" title=\"click to toggle\" onclick=\"with (this.firstChild.style) { display = (display == '') ? 'none' : '' }\">\n<pre>1<tt>\r\n<\/tt>2<tt>\r\n<\/tt>3<tt>\r\n<\/tt>4<tt>\r\n<\/tt><strong>5<\/strong><tt>\r\n<\/tt>6<tt>\r\n<\/tt>7<tt>\r\n<\/tt>8<tt>\r\n<\/tt>9<tt>\r\n<\/tt><\/pre>\n<\/td>\n<td class=\"code\">\n<pre ondblclick=\"with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }\"><tt>\r\n<\/tt>&lt;html&gt;<tt>\r\n<\/tt>  &lt;head&gt;<tt>\r\n<\/tt>    &lt;%= javascript_include_tag <span class=\"sy\">:defaults<\/span>, <span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">swfobject<\/span><span class=\"dl\">&quot;<\/span><\/span> <span class=\"s\"><span class=\"dl\">%&gt;<\/span><span class=\"k\"><tt>\r\n<\/tt>  &lt;\/head<\/span><span class=\"dl\">&gt;<\/span><\/span><tt>\r\n<\/tt>  &lt;body&gt;<tt>\r\n<\/tt>    &lt;%= <span class=\"iv\">@chart<\/span>.js_open_flash_chart_object(<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">my_chart_js_1<\/span><span class=\"dl\">&quot;<\/span><\/span>, <span class=\"i\">550<\/span>,<span class=\"i\">300<\/span>) <span class=\"s\"><span class=\"dl\">%&gt;<\/span><span class=\"k\"><tt>\r\n<\/tt>  &lt;\/body<\/span><span class=\"dl\">&gt;<\/span><\/span><tt>\r\n<\/tt>&lt;<span class=\"rx\"><span class=\"dl\">\/<\/span><span class=\"k\">html&gt;<tt>\r\n<\/tt><\/span><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/table>\n<p>\nI do a lot behind the scenes but if you look, you will see a few new things here.<\/p>\n<ol>\n<li>The data comes from the @chart.js_open_flash_chart_object(...) call which sets up a few javascript callback methods to send the data to the SWF object.  It  takes 3 required arguments div_name (the id of the div that houses the chart), width and height and one optional argument base_url which defaults to \"\/\".<\/li>\n<li>If you look at the HTML source, it is quite a bit different, we simply embed the SWF object.  We do not need to point to the data method since there actually isn't one.<\/li>\n<li>One difference between this Rails example and php example (from teethgrinder) is that prototype which comes standard with rails, has a JSON implementation for javascript, so we do not need the json2.js file, but make sure to include prototype.js in your apps.<\/li>\n<\/ol>\n<p>For more information on the javascript callbacks that I setup here, you will want to view the page source and read about it further over at <a href=\"http:\/\/teethgrinder.co.uk\/open-flash-chart-2\/tutorial-5.php\">teethgrinder's tutorial<\/a>.<\/p>\n<p>Good Luck! and Harry, I hope this helps, otherwise please drop me a line.<\/p>\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article (and the work behind it &#8212; meaning get the latest from github) is generously sponsored by Harry Seldon who wants to be able to pass data around using javascript. There are quite a few benefits to this, learn more from teethgrinder&#8217;s tutorial on the same topic. This example opens up a lot of [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,3,31,26,14,5,28,30],"tags":[42,41,52,215,40,210,211,43],"_links":{"self":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/49027"}],"collection":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/comments?post=49027"}],"version-history":[{"count":21,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/49027\/revisions"}],"predecessor-version":[{"id":57491,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/49027\/revisions\/57491"}],"wp:attachment":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/media?parent=49027"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/categories?post=49027"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/tags?post=49027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}