{"id":57443,"date":"2010-01-05T02:09:16","date_gmt":"2010-01-05T02:09:16","guid":{"rendered":"http:\/\/pullmonkey.com\/?p=57443"},"modified":"2010-02-19T20:31:32","modified_gmt":"2010-02-19T20:31:32","slug":"open-flash-chart-ii-x-axis-date-and-time","status":"publish","type":"post","link":"http:\/\/pullmonkey.com\/2010\/01\/05\/open-flash-chart-ii-x-axis-date-and-time\/","title":{"rendered":"Open Flash Chart II &#8211; X Axis Date and Time"},"content":{"rendered":"<p>I was <a href=\"http:\/\/github.com\/pullmonkey\/open_flash_chart\/issues#issue\/3\">asked how to display date and time for the x axis<\/a> as seen in <a href=\"http:\/\/teethgrinder.co.uk\/open-flash-chart-2\/x-axis-date.php\">this teethgrinder example<\/a> - So here it goes.<\/p>\n<p>Here is the graph we are after in this example:<br \/>\n<script src=\"\/projects\/javascripts\/swfobject.js\" type=\"text\/javascript\"><\/script><\/p>\n<p><script type=\"text\/javascript\"><!--\n      swfobject.embedSWF(\"\/projects\/open-flash-chart-lwc.swf\", \"flash_content_x_axis_date_and_time\", \"600\", \"300\", \"9.0.0\", \"expressInstall.swf\",{\"data-file\":\"\/projects\/open_flash_chart2\/x_axis_date_and_time\"});\n\n\/\/ --><\/script><\/p>\n<p><a href=\"http:\/\/pullmonkey.com\/projects\/open_flash_chart2\">More Open Flash Chart II examples.<\/a><\/p>\n<p>And here is the code (the controller):<\/p>\n<table class=\"CodeRay\" border=\"0\">\n<tbody>\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>5<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>15<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>25<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>35<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>45<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><\/pre>\n<\/td>\n<td class=\"code\">\n<pre ondblclick=\"with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }\"><tt>\r\n<\/tt><span style=\"color:#080;font-weight:bold\">class<\/span> <span style=\"color:#B06;font-weight:bold\">TestItController<\/span> &lt; <span style=\"color:#036;font-weight:bold\">ApplicationController<\/span><tt>\r\n<\/tt>  <span style=\"color:#080;font-weight:bold\">def<\/span> <span style=\"color:#06B;font-weight:bold\">index<\/span><tt>\r\n<\/tt>    <span style=\"color:#33B\">@graph<\/span> = open_flash_chart_object(<span style=\"color:#00D;font-weight:bold\">550<\/span>,<span style=\"color:#00D;font-weight:bold\">300<\/span>,<span style=\"background-color:#fff0f0;color:#D20\"><span style=\"color:#710\">\"<\/span><span>\/test_it\/chart<\/span><span style=\"color:#710\">\"<\/span><\/span>)<tt>\r\n<\/tt>  <span style=\"color:#080;font-weight:bold\">end<\/span><tt>\r\n<\/tt>  <span style=\"color:#080;font-weight:bold\">def<\/span> <span style=\"color:#06B;font-weight:bold\">chart<\/span><tt>\r\n<\/tt>    data1 = []<tt>\r\n<\/tt>    data2 = []<tt>\r\n<\/tt>    year = <span style=\"color:#036;font-weight:bold\">Time<\/span>.now.year<tt>\r\n<\/tt><tt>\r\n<\/tt>    <span style=\"color:#00D;font-weight:bold\">31<\/span>.times <span style=\"color:#080;font-weight:bold\">do<\/span> |i|<tt>\r\n<\/tt>      x = <span style=\"background-color:#fff0f0;color:#D20\"><span style=\"color:#710\">\"<\/span><span style=\"background:#eee;color:black\"><span style=\"font-weight:bold;color:#777\">#{<\/span>year<span style=\"font-weight:bold;color:#777\">}<\/span><\/span><span>-1-<\/span><span style=\"background:#eee;color:black\"><span style=\"font-weight:bold;color:#777\">#{<\/span>i+<span style=\"color:#00D;font-weight:bold\">1<\/span><span style=\"font-weight:bold;color:#777\">}<\/span><\/span><span style=\"color:#710\">\"<\/span><\/span>.to_time.to_i<tt>\r\n<\/tt>      y = (<span style=\"color:#036;font-weight:bold\">Math<\/span>.sin(i+<span style=\"color:#00D;font-weight:bold\">1<\/span>) * <span style=\"color:#60E;font-weight:bold\">2.5<\/span>) + <span style=\"color:#00D;font-weight:bold\">10<\/span><tt>\r\n<\/tt><tt>\r\n<\/tt>      data1 &lt;&lt; <span style=\"color:#036;font-weight:bold\">ScatterValue<\/span>.new(x,y)<tt>\r\n<\/tt>      data2 &lt;&lt; (<span style=\"color:#036;font-weight:bold\">Math<\/span>.cos(i+<span style=\"color:#00D;font-weight:bold\">1<\/span>) * <span style=\"color:#60E;font-weight:bold\">1.9<\/span>) + <span style=\"color:#00D;font-weight:bold\">4<\/span><tt>\r\n<\/tt>    <span style=\"color:#080;font-weight:bold\">end<\/span><tt>\r\n<\/tt><tt>\r\n<\/tt>    dot = <span style=\"color:#036;font-weight:bold\">HollowDot<\/span>.new<tt>\r\n<\/tt>    dot.size = <span style=\"color:#00D;font-weight:bold\">3<\/span><tt>\r\n<\/tt>    dot.halo_size = <span style=\"color:#00D;font-weight:bold\">2<\/span><tt>\r\n<\/tt>    dot.tooltip = <span style=\"background-color:#fff0f0;color:#D20\"><span style=\"color:#710\">\"<\/span><span>#date:d M y#&lt;br&gt;Value: #val#<\/span><span style=\"color:#710\">\"<\/span><\/span><tt>\r\n<\/tt><tt>\r\n<\/tt>    line = <span style=\"color:#036;font-weight:bold\">ScatterLine<\/span>.new(<span style=\"background-color:#fff0f0;color:#D20\"><span style=\"color:#710\">\"<\/span><span>#DB1750<\/span><span style=\"color:#710\">\"<\/span><\/span>, <span style=\"color:#00D;font-weight:bold\">3<\/span>)<tt>\r\n<\/tt>    line.values = data1<tt>\r\n<\/tt>    line.default_dot_style = dot<tt>\r\n<\/tt><tt>\r\n<\/tt>    x = <span style=\"color:#036;font-weight:bold\">XAxis<\/span>.new<tt>\r\n<\/tt>    x.set_range(<span style=\"background-color:#fff0f0;color:#D20\"><span style=\"color:#710\">\"<\/span><span style=\"background:#eee;color:black\"><span style=\"font-weight:bold;color:#777\">#{<\/span>year<span style=\"font-weight:bold;color:#777\">}<\/span><\/span><span>-1-1<\/span><span style=\"color:#710\">\"<\/span><\/span>.to_time.to_i, <span style=\"background-color:#fff0f0;color:#D20\"><span style=\"color:#710\">\"<\/span><span style=\"background:#eee;color:black\"><span style=\"font-weight:bold;color:#777\">#{<\/span>year<span style=\"font-weight:bold;color:#777\">}<\/span><\/span><span>-1-31<\/span><span style=\"color:#710\">\"<\/span><\/span>.to_time.to_i)<tt>\r\n<\/tt>    x.steps = <span style=\"color:#00D;font-weight:bold\">86400<\/span><tt>\r\n<\/tt><tt>\r\n<\/tt>    labels = <span style=\"color:#036;font-weight:bold\">XAxisLabels<\/span>.new<tt>\r\n<\/tt>    labels.text = <span style=\"background-color:#fff0f0;color:#D20\"><span style=\"color:#710\">\"<\/span><span>#date: l jS, M Y#<\/span><span style=\"color:#710\">\"<\/span><\/span><tt>\r\n<\/tt>    labels.steps = <span style=\"color:#00D;font-weight:bold\">86400<\/span><tt>\r\n<\/tt>    labels.visible_steps = <span style=\"color:#00D;font-weight:bold\">2<\/span><tt>\r\n<\/tt>    labels.rotate = <span style=\"color:#00D;font-weight:bold\">90<\/span><tt>\r\n<\/tt><tt>\r\n<\/tt>    x.labels = labels<tt>\r\n<\/tt><tt>\r\n<\/tt>    y = <span style=\"color:#036;font-weight:bold\">YAxis<\/span>.new<tt>\r\n<\/tt>    y.set_range(<span style=\"color:#00D;font-weight:bold\">0<\/span>,<span style=\"color:#00D;font-weight:bold\">15<\/span>,<span style=\"color:#00D;font-weight:bold\">5<\/span>)<tt>\r\n<\/tt><tt>\r\n<\/tt>    chart = <span style=\"color:#036;font-weight:bold\">OpenFlashChart<\/span>.new<tt>\r\n<\/tt>    title = <span style=\"color:#036;font-weight:bold\">Title<\/span>.new(data2.size)<tt>\r\n<\/tt><tt>\r\n<\/tt>    chart.title = title<tt>\r\n<\/tt>    chart.add_element(line)<tt>\r\n<\/tt>    chart.x_axis = x<tt>\r\n<\/tt>    chart.y_axis = y<tt>\r\n<\/tt><tt>\r\n<\/tt>    render <span style=\"color:#A60\">:text<\/span> =&gt; chart, <span style=\"color:#A60\">:layout<\/span> =&gt; <span style=\"color:#038;font-weight:bold\">false<\/span><tt>\r\n<\/tt>  <span style=\"color:#080;font-weight:bold\">end<\/span><tt>\r\n<\/tt><span style=\"color:#080;font-weight:bold\">end<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>And in your view (index.html.erb):<\/p>\n<table class=\"CodeRay\" border=\"0\">\n<tbody>\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><\/pre>\n<\/td>\n<td class=\"code\">\n<pre ondblclick=\"with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }\"><tt>\r\n<\/tt>&lt;script type=<span class=\"s\"><span class=\"dl\">\"<\/span><span class=\"k\">text\/javascript<\/span><span class=\"dl\">\"<\/span><\/span> src=<span class=\"s\"><span class=\"dl\">\"<\/span><span class=\"k\">\/javascripts\/swfobject.js<\/span><span class=\"dl\">\"<\/span><\/span>&gt;&lt;<span class=\"rx\"><span class=\"dl\">\/<\/span><span class=\"k\">script&gt;<tt>\r\n<\/tt>&lt;%= @graph %&gt;<tt>\r\n<\/tt><tt>\r\n<\/tt><\/span><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Good Luck!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I was asked how to display date and time for the x axis as seen in this teethgrinder example &#8211; So here it goes. Here is the graph we are after in this example: More Open Flash Chart II examples. And here is the code (the controller): 1 2 3 4 5 6 7 8 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,26,51,5,9,30],"tags":[42,130,131,52,105,128,40,65,210,211,129],"_links":{"self":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/57443"}],"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=57443"}],"version-history":[{"count":26,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/57443\/revisions"}],"predecessor-version":[{"id":57541,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/posts\/57443\/revisions\/57541"}],"wp:attachment":[{"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/media?parent=57443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/categories?post=57443"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/pullmonkey.com\/wp-json\/wp\/v2\/tags?post=57443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}