{"id":374,"date":"2008-12-19T22:48:03","date_gmt":"2008-12-19T22:48:03","guid":{"rendered":"http:\/\/dalelane.co.uk\/blog\/?p=374"},"modified":"2008-12-20T00:17:19","modified_gmt":"2008-12-20T00:17:19","slug":"drawing-pretty-graphs-with-open-flash-chart","status":"publish","type":"post","link":"https:\/\/dalelane.co.uk\/blog\/?p=374","title":{"rendered":"Drawing pretty graphs with Open Flash Chart"},"content":{"rendered":"<p>I&#8217;m keen for young people that Solent Youth Action works with to have access to information about how the charity runs. I&#8217;d like for us to be as transparent as possible, and as a geek, one of the ways that I am working on this is by putting more stuff on our website.<\/p>\n<p>We put our <a target=\"_blank\" href=\"http:\/\/solentyouthaction.org.uk\/sites\/default\/files\/Solent%20Youth%20Action%20Accounts%202008.pdf\">Financial Statements<\/a> online so that people could see where we get our money from, and how we spend it. But it&#8217;s a dry document &#8211; a twenty-two page PDF of numbers and accounting blurb. <\/p>\n<p>While it is important for this information to be available, it&#8217;s not easily accessible to many like this. Tonight I had a play with presenting it as <a target=\"_blank\" href=\"http:\/\/solentyouthaction.org.uk\/?q=finances\">animated online graphs<\/a> using the awesome Open Flash Chart. <\/p>\n<p>The <a target=\"_blank\" href=\"http:\/\/teethgrinder.co.uk\/open-flash-chart-2\/\">Open Flash Chart site<\/a> has very clear tutorials and a ton of examples, so I wont waste time here by going into detail explaining how to use it. <\/p>\n<p>But it&#8217;s worth highlighting just how simple it is &#8211; drop the swf file into a directory on your webserver, then point it at a JSON file with your data (either by URL, or by reference in your HTML). That&#8217;s pretty much it. <\/p>\n<p>The most complicated bit was copying figures out of the Financial Statements document and pasting it into <a href=\"http:\/\/solentyouthaction.org.uk\/thirdparty\/openflashchart\/data\/081219_finance_expenditure.json\" target=\"_blank\">a JSON text file<\/a>. Even this was fairly quick. <\/p>\n<p>Flash graphs are not as accessible as something like <a href=\"http:\/\/code.google.com\/apis\/chart\/\" target=\"_blank\">Google Chart images<\/a> because they require Flash to be installed. However, I hope the visual flair they add makes up for this, and will help grab the attention of our volunteers.<\/p>\n<p>I created a couple of quick charts to show <a target=\"_blank\" href=\"http:\/\/solentyouthaction.org.uk\/?q=finances\">our income and expenditure<\/a>, but there are many more examples of how to use it <a href=\"http:\/\/ofcgwt.googlecode.com\/svn\/demo\/Demo.html\" target=\"_blank\">here<\/a> and <a href=\"http:\/\/teethgrinder.co.uk\/open-flash-chart-2\/area-hollow.php\" target=\"_blank\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m keen for young people that Solent Youth Action works with to have access to information about how the charity runs. I&#8217;d like for us to be as transparent as possible, and as a geek, one of the ways that I am working on this is by putting more stuff on our website. We put [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[320,318,319,82],"class_list":["post-374","post","type-post","status-publish","format-standard","hentry","category-code","tag-flash","tag-graphs","tag-open-flash-chart","tag-solent-youth-action"],"_links":{"self":[{"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts\/374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=374"}],"version-history":[{"count":0,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts\/374\/revisions"}],"wp:attachment":[{"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dalelane.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}