{"id":49033,"date":"2008-09-23T14:13:00","date_gmt":"2008-09-23T14:13:00","guid":{"rendered":"\/2008\/09\/25\/open-flash-chart-ii-javascript-part-3"},"modified":"2010-01-06T23:49:14","modified_gmt":"2010-01-06T23:49:14","slug":"open-flash-chart-ii-javascript-part-3","status":"publish","type":"post","link":"http:\/\/pullmonkey.com\/2008\/09\/23\/open-flash-chart-ii-javascript-part-3\/","title":{"rendered":"Open Flash Chart II &#8211; Javascript (Part 3)"},"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> and <a href=\"http:\/\/pullmonkey.com\/2008\/9\/22\/open-flash-chart-ii-javascript-part-2\">Part 2<\/a>.  In this article, I will discuss how we can change between various charts on the fly - meaning, changing the SWFObject without rerendering the page but this time we can do it without storing everything in javascript variables initially.  We will use an Ajax request to grab our data off the server.<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\">Discussed in 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><a href=\"http:\/\/pullmonkey.com\/2008\/9\/22\/open-flash-chart-ii-javascript-part-2\">Discussed in Part 2<\/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>This article<\/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\" 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_3\", \"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 - original\"}, \"elements\": [{\"type\": \"bar_glass\", \"values\": [1, 2, 3, 4, 5, 6, 7, 8, 9]}]};\n      <\/script><\/p>\n<div id=\"my_chart_js_3\"><\/div>\n<p>\n      <script type=\"text\/javascript\">\n        function load_Load_Original_Chart_my_chart_js_3() {\n          tmp = findSWF(\"my_chart_js_3\");\n          x = tmp.load(Object.toJSON(data_Load_Original_Chart_my_chart_js_3));\n        }\n        var data_Load_Original_Chart_my_chart_js_3 = {\"title\": {\"text\": \"MY TITLE - original\"}, \"elements\": [{\"type\": \"bar_glass\", \"values\": [1, 2, 3, 4, 5, 6, 7, 8, 9]}]};\n      <\/script><a href=\"#\" onclick=\"load_Load_Original_Chart_my_chart_js_3(); return false;\">Load Original Chart (Bar Graph)<\/a>||<script type=\"text\/javascript\">\n        function reload_Load_Chart_from_server_data_my_chart_js_3() {\n          tmp = findSWF(\"my_chart_js_3\");\n          new Ajax.Request('\/projects\/open_flash_chart2\/lines', {\n            method    : 'get',\n            onSuccess : function(obj) {tmp.load(obj.responseText);},\n            onFailure : function(obj) {alert(\"Failed to request \/projects\/open_flash_chart2\/lines\");}});\n        }\n      <\/script><a href=\"#\" onclick=\"reload_Load_Chart_from_server_data_my_chart_js_3(); return false;\">Load Chart from server data (Line Graph)<\/a><br \/>\n<br \/>\n<a href=\"http:\/\/pullmonkey.com\/projects\/open_flash_chart2\">More Open Flash Chart II examples.<\/a><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>28<tt>\r\n<\/tt>29<tt>\r\n<\/tt><strong>30<\/strong><tt>\r\n<\/tt>31<tt>\r\n<\/tt>32<tt>\r\n<\/tt>33<tt>\r\n<\/tt>34<tt>\r\n<\/tt><strong>35<\/strong><tt>\r\n<\/tt>36<tt>\r\n<\/tt>37<tt>\r\n<\/tt>38<tt>\r\n<\/tt>39<tt>\r\n<\/tt><strong>40<\/strong><tt>\r\n<\/tt>41<tt>\r\n<\/tt>42<tt>\r\n<\/tt>43<tt>\r\n<\/tt>44<tt>\r\n<\/tt><strong>45<\/strong><tt>\r\n<\/tt>46<tt>\r\n<\/tt>47<tt>\r\n<\/tt>48<tt>\r\n<\/tt>49<tt>\r\n<\/tt><strong>50<\/strong><tt>\r\n<\/tt>51<tt>\r\n<\/tt>52<tt>\r\n<\/tt>53<tt>\r\n<\/tt>54<tt>\r\n<\/tt><strong>55<\/strong><tt>\r\n<\/tt>56<tt>\r\n<\/tt>57<tt>\r\n<\/tt>58<tt>\r\n<\/tt>59<tt>\r\n<\/tt><strong>60<\/strong><tt>\r\n<\/tt>61<tt>\r\n<\/tt>62<tt>\r\n<\/tt>63<tt>\r\n<\/tt>64<tt>\r\n<\/tt><strong>65<\/strong><tt>\r\n<\/tt>66<tt>\r\n<\/tt>67<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 - original<\/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><tt>\r\n<\/tt>  <span class=\"r\">def<\/span> <span class=\"fu\">some_server_data<\/span><tt>\r\n<\/tt>     title = <span class=\"co\">Title<\/span>.new(<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">Multiple Lines<\/span><span class=\"dl\">&quot;<\/span><\/span>)<tt>\r\n<\/tt><tt>\r\n<\/tt>    data1 = []<tt>\r\n<\/tt>    data2 = []<tt>\r\n<\/tt>    data3 = []<tt>\r\n<\/tt><tt>\r\n<\/tt>    <span class=\"i\">10<\/span>.times <span class=\"r\">do<\/span> |x|<tt>\r\n<\/tt>      data1 &lt;&lt; rand(<span class=\"i\">5<\/span>) + <span class=\"i\">1<\/span><tt>\r\n<\/tt>      data2 &lt;&lt; rand(<span class=\"i\">6<\/span>) + <span class=\"i\">7<\/span><tt>\r\n<\/tt>      data3 &lt;&lt; rand(<span class=\"i\">5<\/span>) + <span class=\"i\">14<\/span><tt>\r\n<\/tt>    <span class=\"r\">end<\/span><tt>\r\n<\/tt><tt>\r\n<\/tt>    line_dot = <span class=\"co\">LineDot<\/span>.new<tt>\r\n<\/tt>    line_dot.text = <span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">Line Dot<\/span><span class=\"dl\">&quot;<\/span><\/span><tt>\r\n<\/tt>    line_dot.width = <span class=\"i\">4<\/span><tt>\r\n<\/tt>    line_dot.colour = <span class=\"s\"><span class=\"dl\">'<\/span><span class=\"k\">#DFC329<\/span><span class=\"dl\">'<\/span><\/span><tt>\r\n<\/tt>    line_dot.dot_size = <span class=\"i\">5<\/span><tt>\r\n<\/tt>    line_dot.values = data1<tt>\r\n<\/tt><tt>\r\n<\/tt>    line_hollow = <span class=\"co\">LineHollow<\/span>.new<tt>\r\n<\/tt>    line_hollow.text = <span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">Line Hollow<\/span><span class=\"dl\">&quot;<\/span><\/span><tt>\r\n<\/tt>    line_hollow.width = <span class=\"i\">1<\/span><tt>\r\n<\/tt>    line_hollow.colour = <span class=\"s\"><span class=\"dl\">'<\/span><span class=\"k\">#6363AC<\/span><span class=\"dl\">'<\/span><\/span><tt>\r\n<\/tt>    line_hollow.dot_size = <span class=\"i\">5<\/span><tt>\r\n<\/tt>    line_hollow.values = data2<tt>\r\n<\/tt><tt>\r\n<\/tt>    line = <span class=\"co\">Line<\/span>.new<tt>\r\n<\/tt>    line.text = <span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">Line<\/span><span class=\"dl\">&quot;<\/span><\/span><tt>\r\n<\/tt>    line.width = <span class=\"i\">1<\/span><tt>\r\n<\/tt>    line.colour = <span class=\"s\"><span class=\"dl\">'<\/span><span class=\"k\">#5E4725<\/span><span class=\"dl\">'<\/span><\/span><tt>\r\n<\/tt>    line.dot_size = <span class=\"i\">5<\/span><tt>\r\n<\/tt>    line.values = data3<tt>\r\n<\/tt><tt>\r\n<\/tt>    y = <span class=\"co\">YAxis<\/span>.new<tt>\r\n<\/tt>    y.set_range(<span class=\"i\">0<\/span>,<span class=\"i\">20<\/span>,<span class=\"i\">5<\/span>)<tt>\r\n<\/tt><tt>\r\n<\/tt>    x_legend = <span class=\"co\">XLegend<\/span>.new(<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">MY X Legend<\/span><span class=\"dl\">&quot;<\/span><\/span>)<tt>\r\n<\/tt>    x_legend.set_style(<span class=\"s\"><span class=\"dl\">'<\/span><span class=\"k\">{font-size: 20px; color: #778877}<\/span><span class=\"dl\">'<\/span><\/span>)<tt>\r\n<\/tt><tt>\r\n<\/tt>    y_legend = <span class=\"co\">YLegend<\/span>.new(<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">MY Y Legend<\/span><span class=\"dl\">&quot;<\/span><\/span>)<tt>\r\n<\/tt>    y_legend.set_style(<span class=\"s\"><span class=\"dl\">'<\/span><span class=\"k\">{font-size: 20px; color: #770077}<\/span><span class=\"dl\">'<\/span><\/span>)<tt>\r\n<\/tt><tt>\r\n<\/tt>    chart =<span class=\"co\">OpenFlashChart<\/span>.new<tt>\r\n<\/tt>    chart.set_title(title)<tt>\r\n<\/tt>    chart.set_x_legend(x_legend)<tt>\r\n<\/tt>    chart.set_y_legend(y_legend)<tt>\r\n<\/tt>    chart.y_axis = y<tt>\r\n<\/tt><tt>\r\n<\/tt>    chart.add_element(line_dot)<tt>\r\n<\/tt>    chart.add_element(line_hollow)<tt>\r\n<\/tt>    chart.add_element(line)<tt>\r\n<\/tt><tt>\r\n<\/tt>    render <span class=\"sy\">:text<\/span> =&gt; chart.to_s<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><\/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\">@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;br\/<\/span><span class=\"dl\">&gt;<\/span><\/span>&lt;br\/&gt;<tt>\r\n<\/tt>    &lt;%= <span class=\"iv\">@chart<\/span>.link_to_ofc_load(<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">Load Original Chart<\/span><span class=\"dl\">&quot;<\/span><\/span>, <span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">my_chart_js_1<\/span><span class=\"dl\">&quot;<\/span><\/span>) <span class=\"s\"><span class=\"dl\">%&gt;<\/span><span class=\"k\"> ||<tt>\r\n<\/tt>    &lt;%= @chart.link_to_remote_ofc_load(&quot;Load Chart from server data&quot;, &quot;my_chart_js_1&quot;, &quot;\/test_it\/some_server_data&quot;) %<\/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_remote_ofc_load<\/b> method that basically creates a <i>link_to_remote<\/i> along with the function that we call to load the chart data into the swfobject chart from the server.  It takes three arguments, the link text, the id of the div whose swf we will load new data into and the url from which to fetch the data.<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\/gallery-js-ajax-2.php\">teethgrinder's tutorial<\/a>.<br \/>\n<br \/>\nGood Luck!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article is a follow on to Part 1 and Part 2. In this article, I will discuss how we can change between various charts on the fly &#8211; meaning, changing the SWFObject without rerendering the page but this time we can do it without storing everything in javascript variables initially. We will use an [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[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\/49033"}],"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=49033"}],"version-history":[{"count":8,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/49033\/revisions"}],"predecessor-version":[{"id":57495,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/49033\/revisions\/57495"}],"wp:attachment":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/media?parent=49033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/categories?post=49033"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/tags?post=49033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}