{"id":49032,"date":"2008-09-22T15:17:00","date_gmt":"2008-09-22T15:17:00","guid":{"rendered":"\/2008\/09\/23\/open-flash-chart-ii-javascript-part-2"},"modified":"2010-01-06T23:45:29","modified_gmt":"2010-01-06T23:45:29","slug":"open-flash-chart-ii-javascript-part-2","status":"publish","type":"post","link":"http:\/\/pullmonkey.com\/2008\/09\/22\/open-flash-chart-ii-javascript-part-2\/","title":{"rendered":"Open Flash Chart II &#8211; Javascript (Part 2)"},"content":{"rendered":"<p>This article is a follow on to <a href=\"http:\/\/pullmonkey.com\/2008\/9\/21\/open-flash-chart-ii-javascript-part-1\">Part 1<\/a>.  In this article, I will discuss how we can change between various charts on the fly - meaning, changing the SWFObject without sending a request or rerendering the page.<br \/>\nAs promised there are still more topics to come on OFC and Javascript:<\/p>\n<ul>\n<li><a href=\"http:\/\/teethgrinder.co.uk\/open-flash-chart-2\/tutorial-5.php\">Basics of OFC and Javascript<\/a>. - <b><a href=\"http:\/\/pullmonkey.com\/2008\/9\/21\/open-flash-chart-ii-javascript-part-1\">Last article (part 1)<\/a><\/b><\/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>This article<\/b>, see links under the graph.<\/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>\nHere is the graph and interface we are after in this example:<br \/>\n    <script src=\"\/javascripts\/prototype.js?1222016421\" 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.swf\", \"my_chart_js_2\", \"550\", \"300\", \"9.0.0\");\n      <\/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=\"my_chart_js_2\"><\/div>\n<p>      <script type=\"text\/javascript\">\n        function load_Load_Chart_1_my_chart_js_2() {\n          tmp = findSWF(\"my_chart_js_2\");\n          x = tmp.load(Object.toJSON(data_Load_Chart_1_my_chart_js_2));\n        }\n        var data_Load_Chart_1_my_chart_js_2 = {\"title\": {\"text\": \"MY TITLE\"}, \"elements\": [{\"type\": \"bar_glass\", \"values\": [1, 2, 3, 4, 5, 6, 7, 8, 9]}]};\n      <\/script><br \/>\n      <a href=\"#\" onclick=\"load_Load_Chart_1_my_chart_js_2(); return false;\">Load Chart 1<\/a>||<script type=\"text\/javascript\">\n        function load_Load_Chart_2_my_chart_js_2() {\n          tmp = findSWF(\"my_chart_js_2\");\n          x = tmp.load(Object.toJSON(data_Load_Chart_2_my_chart_js_2));\n        }\n        var data_Load_Chart_2_my_chart_js_2 = {\"title\": {\"text\": \"MY TITLE 2\"}, \"elements\": [{\"type\": \"bar_glass\", \"values\": [9, 8, 7, 6, 5, 4, 3, 2, 1]}]};\n      <\/script><a href=\"#\" onclick=\"load_Load_Chart_2_my_chart_js_2(); return false;\">Load Chart 2<\/a>||<script type=\"text\/javascript\">\n        function load_Load_Chart_3_my_chart_js_2() {\n          tmp = findSWF(\"my_chart_js_2\");\n          x = tmp.load(Object.toJSON(data_Load_Chart_3_my_chart_js_2));\n        }\n        var data_Load_Chart_3_my_chart_js_2 = {\"title\": {\"text\": \"MY TITLE - some new data\"}, \"elements\": [{\"type\": \"bar_glass\", \"values\": [1, 3, 2, 5, 4, 7, 6, 9, 8]}]};\n      <\/script><a href=\"#\" onclick=\"load_Load_Chart_3_my_chart_js_2(); return false;\">Load Chart 3<\/a><\/p>\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>12<tt>\r\n<\/tt>13<tt>\r\n<\/tt>14<tt>\r\n<\/tt><strong>15<\/strong><tt>\r\n<\/tt>16<tt>\r\n<\/tt>17<tt>\r\n<\/tt>18<tt>\r\n<\/tt>19<tt>\r\n<\/tt><strong>20<\/strong><tt>\r\n<\/tt>21<tt>\r\n<\/tt>22<tt>\r\n<\/tt>23<tt>\r\n<\/tt>24<tt>\r\n<\/tt><strong>25<\/strong><tt>\r\n<\/tt>26<tt>\r\n<\/tt>27<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>    chart1 = <span class=\"co\">OpenFlashChart<\/span>.new<tt>\r\n<\/tt>    chart1.set_title(title)<tt>\r\n<\/tt>    chart1.add_element(bar)<tt>\r\n<\/tt><tt>\r\n<\/tt>    title = <span class=\"co\">Title<\/span>.new(<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">MY TITLE 2<\/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>].reverse)<tt>\r\n<\/tt>    chart2 = <span class=\"co\">OpenFlashChart<\/span>.new<tt>\r\n<\/tt>    chart2.set_title(title)<tt>\r\n<\/tt>    chart2.add_element(bar)<tt>\r\n<\/tt><tt>\r\n<\/tt>    title = <span class=\"co\">Title<\/span>.new(<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">MY TITLE - some new data<\/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\">3<\/span>,<span class=\"i\">2<\/span>,<span class=\"i\">5<\/span>,<span class=\"i\">4<\/span>,<span class=\"i\">7<\/span>,<span class=\"i\">6<\/span>,<span class=\"i\">9<\/span>,<span class=\"i\">8<\/span>])<tt>\r\n<\/tt>    chart3 = <span class=\"co\">OpenFlashChart<\/span>.new<tt>\r\n<\/tt>    chart3.set_title(title)<tt>\r\n<\/tt>    chart3.add_element(bar)<tt>\r\n<\/tt><tt>\r\n<\/tt>    <span class=\"iv\">@charts<\/span> = [chart1, chart2, chart3]<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>\nAnd 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><strong>10<\/strong><tt>\r\n<\/tt>11<tt>\r\n<\/tt>12<tt>\r\n<\/tt>13<tt>\r\n<\/tt>14<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\">'<\/span><span class=\"k\">swfobject<\/span><span class=\"dl\">'<\/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\">@charts<\/span>.first.js_open_flash_chart_object(<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">my_chart_js_2<\/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;br\/<\/span><span class=\"dl\">&gt;<\/span><\/span>&lt;br\/&gt;<tt>\r\n<\/tt>    &lt;% <span class=\"iv\">@charts<\/span>.each_with_index <span class=\"r\">do<\/span> |chart, i| <span class=\"s\"><span class=\"dl\">%&gt;<\/span><span class=\"k\"><tt>\r\n<\/tt>      &lt;%= chart.link_to_ofc_load(&quot;Load Chart <\/span><span class=\"il\"><span class=\"dl\">#{<\/span>i + <span class=\"i\">1<\/span><span class=\"dl\">}<\/span><\/span><span class=\"k\">&quot;, &quot;my_chart_js_2&quot;) %<\/span><span class=\"dl\">&gt;<\/span><\/span><tt>\r\n<\/tt>      &lt;%= <span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\"> || <\/span><span class=\"dl\">&quot;<\/span><\/span> <span class=\"r\">if<\/span> i &lt; <span class=\"iv\">@charts<\/span>.size - <span class=\"i\">1<\/span> <span class=\"s\"><span class=\"dl\">%&gt;<\/span><span class=\"k\"><tt>\r\n<\/tt>    &lt;% end %<\/span><span class=\"dl\">&gt;<\/span><\/span><tt>\r\n<\/tt>  &lt;<span class=\"rx\"><span class=\"dl\">\/<\/span><span class=\"k\">body&gt;<tt>\r\n<\/tt>&lt;<\/span><span class=\"dl\">\/<\/span><\/span>html&gt;<tt>\r\n<\/tt><\/pre>\n<\/td>\n<\/tr>\n<\/table>\n<p>In this example, we make use of the <b>link_to_ofc_load<\/b> method that basically creates a <i>link_to_function<\/i> along with the function that we call to load the chart data into the swfobject chart.  It takes two arguments, the link text and the id of the div whose swf we will load new data into.<br \/>\n<br \/>\nFor 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-6.php\">teethgrinder's tutorial<\/a>.<\/p>\n<p>Good Luck!<\/p>\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article is a follow on to Part 1. In this article, I will discuss how we can change between various charts on the fly &#8211; meaning, changing the SWFObject without sending a request or rerendering the page. As promised there are still more topics to come on OFC and Javascript: Basics of OFC and [&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,9,30],"tags":[42,41,52,215,40,210,211,43],"_links":{"self":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/49032"}],"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=49032"}],"version-history":[{"count":5,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/49032\/revisions"}],"predecessor-version":[{"id":57494,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/49032\/revisions\/57494"}],"wp:attachment":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/media?parent=49032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/categories?post=49032"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/tags?post=49032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}