{"id":45838,"date":"2008-07-25T16:55:00","date_gmt":"2008-07-25T16:55:00","guid":{"rendered":"\/2008\/07\/25\/using-a-database-to-populate-an-open-flash-chart-graph"},"modified":"2009-08-30T04:38:50","modified_gmt":"2009-08-30T04:38:50","slug":"using-a-database-to-populate-an-open-flash-chart-graph","status":"publish","type":"post","link":"http:\/\/pullmonkey.com\/2008\/07\/25\/using-a-database-to-populate-an-open-flash-chart-graph\/","title":{"rendered":"Using a database to populate an Open Flash Chart graph"},"content":{"rendered":"<p>Just got <a href=\"http:\/\/pullmonkey.com\/2008\/7\/23\/open-flash-chart-ii-plugin-for-ruby-on-rails-ofc2#comment-45837\">Archie Smuts comment asking how to populate a Open Flash Chart graph using results from a database<\/a>. <\/p>\n<p>Just for reference, the code that follows represents this graph:<br \/>\n<script type=\"text\/javascript\" src=\"\/projects\/javascripts\/swfobject.js\"><\/script><\/p>\n<div id=\"flash_content_1217004188.58147\"><\/div>\n<p>    <script type=\"text\/javascript\">\n      swfobject.embedSWF(\"\/projects\/open-flash-chart.swf\", \"flash_content_1217004188.58147\", \"600\", \"300\", \"9.0.0\", \"expressInstall.swf\",{\"data-file\":\"%2Fprojects%2Fopen_flash_chart2%2Fusing_database\"});\n    <\/script><br \/>\n    <noscript><br \/>\n      <object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http:\/\/fpdownload.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=8,0,0,0\" width=\"600\" height=\"300\" id=\"chart_1217004188.58145\" align=\"middle\"><param name=\"allowScriptAccess\" value=\"sameDomain\" \/><param name=\"movie\" value=\"\/projects\/open-flash-chart.swf?data=%2Fprojects%2Fopen_flash_chart2%2Fusing_database\" \/><param name=\"quality\" value=\"high\" \/><param name=\"bgcolor\" value=\"#FFFFFF\" \/><embed src=\"\/projects\/open-flash-chart.swf?data=%2Fprojects%2Fopen_flash_chart2%2Fusing_database\" quality=\"high\" bgcolor=\"#FFFFFF\" width=\"600\" height=\"300\" name=\"chart_1217004188.58145\" align=\"middle\"  allowScriptAccess=\"sameDomain\" type=\"application\/x-shockwave-flash\" pluginspage=\"http:\/\/www.macromedia.com\/go\/getflashplayer\" id=\"chart_1217004188.58145\" \/><\/object><br \/>\n    <\/noscript><\/p>\n<p>Examples for version 2 are <a href=\"\/projects\/open_flash_chart2\/\">here<\/a>.<\/b><\/p>\n<p>Using the new version of Open Flash Chart, here is an example for you to follow:<\/p>\n<ul>\n<li>Start a rails app and install the plugin per <a href=\"http:\/\/pullmonkey.com\/2008\/7\/23\/open-flash-chart-ii-plugin-for-ruby-on-rails-ofc2\">these instructions<\/a>.<\/li>\n<li>The results table that I am working with has these rows:<br \/>\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>\n<\/tt>2<tt>\n<\/tt>3<tt>\n<\/tt>4<tt>\n<\/tt><strong>5<\/strong><tt>\n<\/tt>6<tt>\n<\/tt><\/pre>\n<\/td>\n<td class=\"code\">\n<pre ondblclick=\"with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }\"><tt>\n<\/tt><span class=\"co\">Result<\/span>.create(<span class=\"sy\">:student_name<\/span> =&gt; <span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">Jack<\/span><span class=\"dl\">&quot;<\/span><\/span>, <span class=\"sy\">:subject<\/span> =&gt; <span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">History<\/span><span class=\"dl\">&quot;<\/span><\/span>, <span class=\"sy\">:test_score<\/span> =&gt; <span class=\"i\">97<\/span><tt>\n<\/tt><span class=\"co\">Result<\/span>.create(<span class=\"sy\">:student_name<\/span> =&gt; <span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">Jack<\/span><span class=\"dl\">&quot;<\/span><\/span>, <span class=\"sy\">:subject<\/span> =&gt; <span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">Science<\/span><span class=\"dl\">&quot;<\/span><\/span>, <span class=\"sy\">:test_score<\/span> =&gt; <span class=\"i\">85<\/span>)<tt>\n<\/tt><span class=\"co\">Result<\/span>.create(<span class=\"sy\">:student_name<\/span> =&gt; <span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">Jill<\/span><span class=\"dl\">&quot;<\/span><\/span>, <span class=\"sy\">:subject<\/span> =&gt; <span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">History<\/span><span class=\"dl\">&quot;<\/span><\/span>, <span class=\"sy\">:test_score<\/span> =&gt; <span class=\"i\">92<\/span>)<tt>\n<\/tt><span class=\"co\">Result<\/span>.create(<span class=\"sy\">:student_name<\/span> =&gt; <span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">Jill<\/span><span class=\"dl\">&quot;<\/span><\/span>, <span class=\"sy\">:subject<\/span> =&gt; <span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">Science<\/span><span class=\"dl\">&quot;<\/span><\/span>, <span class=\"sy\">:test_score<\/span> =&gt; <span class=\"i\">57<\/span>)<tt>\n<\/tt><tt>\n<\/tt><\/pre>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<li>Create a controller, mine is test_it:<br \/>\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>\n<\/tt>2<tt>\n<\/tt>3<tt>\n<\/tt>4<tt>\n<\/tt><strong>5<\/strong><tt>\n<\/tt>6<tt>\n<\/tt>7<tt>\n<\/tt>8<tt>\n<\/tt>9<tt>\n<\/tt><strong>10<\/strong><tt>\n<\/tt>11<tt>\n<\/tt>12<tt>\n<\/tt>13<tt>\n<\/tt>14<tt>\n<\/tt><strong>15<\/strong><tt>\n<\/tt>16<tt>\n<\/tt>17<tt>\n<\/tt>18<tt>\n<\/tt>19<tt>\n<\/tt><strong>20<\/strong><tt>\n<\/tt>21<tt>\n<\/tt>22<tt>\n<\/tt>23<tt>\n<\/tt>24<tt>\n<\/tt><strong>25<\/strong><tt>\n<\/tt>26<tt>\n<\/tt>27<tt>\n<\/tt>28<tt>\n<\/tt>29<tt>\n<\/tt><strong>30<\/strong><tt>\n<\/tt>31<tt>\n<\/tt>32<tt>\n<\/tt>33<tt>\n<\/tt>34<tt>\n<\/tt><strong>35<\/strong><tt>\n<\/tt>36<tt>\n<\/tt>37<tt>\n<\/tt>38<tt>\n<\/tt>39<tt>\n<\/tt><strong>40<\/strong><tt>\n<\/tt>41<tt>\n<\/tt>42<tt>\n<\/tt>43<tt>\n<\/tt>44<tt>\n<\/tt><strong>45<\/strong><tt>\n<\/tt>46<tt>\n<\/tt>47<tt>\n<\/tt>48<tt>\n<\/tt>49<tt>\n<\/tt><\/pre>\n<\/td>\n<td class=\"code\">\n<pre ondblclick=\"with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }\"><tt>\n<\/tt><span class=\"r\">class<\/span> <span class=\"cl\">TestItController<\/span> &lt; <span class=\"co\">ApplicationController<\/span><tt>\n<\/tt>  <span class=\"r\">def<\/span> <span class=\"fu\">index<\/span><tt>\n<\/tt>    <span class=\"iv\">@graph<\/span> = open_flash_chart_object(<span class=\"i\">600<\/span>,<span class=\"i\">300<\/span>,<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">\/test_it\/graph_code<\/span><span class=\"dl\">&quot;<\/span><\/span>)<tt>\n<\/tt>  <span class=\"r\">end<\/span><tt>\n<\/tt><tt>\n<\/tt>  <span class=\"r\">def<\/span> <span class=\"fu\">graph_code<\/span><tt>\n<\/tt>    <span class=\"c\"># we will have bars for each student subject combo<\/span><tt>\n<\/tt>    bars   = []<tt>\n<\/tt><tt>\n<\/tt>    <span class=\"c\"># random colors to chose from<\/span><tt>\n<\/tt>    colours = [<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">#459a89<\/span><span class=\"dl\">&quot;<\/span><\/span>, <span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">#9a89f9<\/span><span class=\"dl\">&quot;<\/span><\/span>]<tt>\n<\/tt><tt>\n<\/tt>    <span class=\"c\"># the results<\/span><tt>\n<\/tt>    results = <span class=\"co\">Result<\/span>.find(<span class=\"sy\">:all<\/span>)<tt>\n<\/tt><tt>\n<\/tt>    <span class=\"c\"># group by subject and use subject as the key<\/span><tt>\n<\/tt>    results.group_by(&amp;<span class=\"sy\">:subject<\/span>).each <span class=\"r\">do<\/span> |subject, result|<tt>\n<\/tt>      <span class=\"c\"># 3d bar graph, could be any bar graph though<\/span><tt>\n<\/tt>      bar = <span class=\"co\">Bar3d<\/span>.new<tt>\n<\/tt>      bar.set_key(subject, <span class=\"i\">3<\/span>)<tt>\n<\/tt>      bar.colour = colours[bars.size]<tt>\n<\/tt>      bar.values = result.map(&amp;<span class=\"sy\">:test_score<\/span>)<tt>\n<\/tt>      bars &lt;&lt; bar<tt>\n<\/tt>    <span class=\"r\">end<\/span><tt>\n<\/tt><tt>\n<\/tt>    <span class=\"c\"># some title<\/span><tt>\n<\/tt>    title = <span class=\"co\">Title<\/span>.new(<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">Test Results<\/span><span class=\"dl\">&quot;<\/span><\/span>)<tt>\n<\/tt><tt>\n<\/tt>    <span class=\"c\"># labels along the x axis, just hard code for now, but you would want to dynamically do this<\/span><tt>\n<\/tt>    x_axis = <span class=\"co\">XAxis<\/span>.new<tt>\n<\/tt>    x_axis.labels = [<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">Jack<\/span><span class=\"dl\">&quot;<\/span><\/span>, <span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">Jill<\/span><span class=\"dl\">&quot;<\/span><\/span>]<tt>\n<\/tt><tt>\n<\/tt>    <span class=\"c\"># go to 100% since we are dealing with test results<\/span><tt>\n<\/tt>    y_axis = <span class=\"co\">YAxis<\/span>.new<tt>\n<\/tt>    y_axis.set_range(<span class=\"i\">0<\/span>, <span class=\"i\">100<\/span>, <span class=\"i\">10<\/span>)<tt>\n<\/tt><tt>\n<\/tt>    <span class=\"c\"># setup the graph<\/span><tt>\n<\/tt>    graph = <span class=\"co\">OpenFlashChart<\/span>.new<tt>\n<\/tt>    graph.bg_colour = <span class=\"s\"><span class=\"dl\">'<\/span><span class=\"k\">#ffffcc<\/span><span class=\"dl\">'<\/span><\/span><tt>\n<\/tt>    graph.title = title<tt>\n<\/tt>    graph.x_axis = x_axis<tt>\n<\/tt>    graph.y_axis = y_axis<tt>\n<\/tt>    graph.elements = bars<tt>\n<\/tt><tt>\n<\/tt>    render <span class=\"sy\">:text<\/span> =&gt; graph.to_s<tt>\n<\/tt>  <span class=\"r\">end<\/span><tt>\n<\/tt><span class=\"r\">end<\/span><tt>\n<\/tt><tt>\n<\/tt><\/pre>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<li>Create a view, mine is index.html.erb for the test_it controller:<br \/>\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>\n<\/tt>2<tt>\n<\/tt>3<tt>\n<\/tt>4<tt>\n<\/tt><\/pre>\n<\/td>\n<td class=\"code\">\n<pre ondblclick=\"with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }\"><tt>\n<\/tt>&lt;script type=<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">text\/javascript<\/span><span class=\"dl\">&quot;<\/span><\/span> src=<span class=\"s\"><span class=\"dl\">&quot;<\/span><span class=\"k\">\/javascripts\/swfobject.js<\/span><span class=\"dl\">&quot;<\/span><\/span>&gt;&lt;<span class=\"rx\"><span class=\"dl\">\/<\/span><span class=\"k\">script&gt;<tt>\n<\/tt>&lt;%= @graph %&gt;<tt>\n<\/tt><tt>\n<\/tt><\/span><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<p>\nHope that helps.<br \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Just got Archie Smuts comment asking how to populate a Open Flash Chart graph using results from a database. Just for reference, the code that follows represents this graph: Examples for version 2 are here. Using the new version of Open Flash Chart, here is an example for you to follow: Start a rails app [&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,26,14,5,9,30],"tags":[42,41,52,40,210,211,43,50],"_links":{"self":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/45838"}],"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=45838"}],"version-history":[{"count":2,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/45838\/revisions"}],"predecessor-version":[{"id":57352,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/45838\/revisions\/57352"}],"wp:attachment":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/media?parent=45838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/categories?post=45838"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/tags?post=45838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}