Bar Graph / Chart using Open Flash Chart (OFC) in JSP

May 3, 2009

Download the Open Flash Chart tool from openflashchart.com

Make sure that the below mentioned 4 files exists in the same directory of the web application.

open-flash-chart.swf
swfobject.js

-  Find the above mentioned two files in the downloaded OFC tool.

bargraph.jsp

<html>
    <meta http-equiv=content-type content="text/html; charset=UTF-8">
    <head>
        <script type="text/javascript" src="swfobject.js"></script>
    </head>
    <body>
        <form name="ind" id="ind">
            <% java.util.ArrayList dataFilesList = new java.util.ArrayList();
            dataFilesList.add("graph.txt");         
            %>

            <%for (int i = 0; i < dataFilesList.size(); i++) {
                String chartFilePath = String.valueOf(dataFilesList.get(i));
                if (i % 3 == 0) {
                    out.print("<br>");
                }
                String divId = "chart" + i;
            %>
            <div id="<%=divId%>">
                This text is replaced by the Flash movie.
            </div>
            <script>
                swfobject.embedSWF(‘open-flash-chart.swf’,'<%=divId%>’,’800′, ’800′,’9.0.0′, ‘expressInstall.swf’,{‘data-file’:'<%=chartFilePath%>’});
            </script>

<%}%>
</form>
</body>
</html>

graph.txt

{"bg_colour" : "#ffffff","title":{"text":"Bar Graph for Course, University wise Strength","style":"{font-size: 15px; color: #567300}"},"y_legend":{"text":"Strength","style":"{color: #567300; font-size: 12px;}"},"x_legend":{"text":"Course, University","style":"{color: #567300; font-size: 12px;}"},"elements":[{"alpha": 0.9, "type":"bar","fill":"#e48701","colour":"#e48701","text":"Course, University wise Strength;","font-size":10,"width":2,"dot-size":4,"halo-size":0,"values":[26986, 9512, 24044, 19443, 26014, 48421, 41894, 105771, 35948, 52127, 17739, 1223, 18715, 1487, 14995, 15411, 9651, 138803, 2798, 390937]}],"x_axis":{"labels": {"rotate": "vertical","labels": ["MS, BENGAL: Strength=26986;", "MS, Madhya pradesh: Strength=9512;", "MTech, ANDHRA PRADESH: Strength=24044;", "MTech, HIMACHAL PRADESH: Strength=19443;", "MTech, UTTAR PRADESH: Strength=26014;", "MTech, Gujarath: Strength=48421;", "MTech, RAJASTHAN: Strength=41894;", "MTech, MANIPAL: Strength=105771;", "MTech, BIHAR: Strength=35948;", "MPhil, Assam: Strength=52127;", "MPhil, Bihar: Strength=17739;", "MPhil, Rajastan: Strength=1223;", "MPhil, Maharashtra: Strength=18715;", "MPhil, Kolkata: Strength=1487;", "MPhil, Orissa: Strength=14995;", "MPhil, KARNATAKA: Strength=15411;", "MPhil, WestBengal: Strength=9651;", "MBBS, KERALA: Strength=138803;", "PHd, Rajasthan: Strength=2798;", "MSc, JHARKAND: Strength=390937;"]}},"y_axis":{"max": 390937,"steps":7818}}

Output

example-barchart

Share and Enjoy:
  • Twitter
  • Google Buzz
  • DZone
  • Digg
  • Reddit
  • Diigo
  • StumbleUpon
  • del.icio.us
  • Yahoo! Buzz
  • Google Bookmarks
  • LinkedIn
  • Mixx
  • email
  • PDF
  • Add to favorites

tags: , ,
posted in Open Flash Chart by shyam

Follow comments via the RSS Feed | Leave a comment | Trackback URL

3 Comments to "Bar Graph / Chart using Open Flash Chart (OFC) in JSP"

  1. ApplyCreditCards wrote:

    I really liked this post. Can I copy it to my site? Thank you in advance.

    [Reply]

  2. KattyBlackyard wrote:

    The article is usefull for me. I’ll be coming back to your blog.

    [Reply]

  3. efe wrote:

    Hi;

    I can only get from String.valueOf(dataFilesList.get(i)) graph.txt. How can i get values that is located in graph.txt. I just copy and paste ur code but the situation is this :(

    Solving this problem would be wonderful :)

    [Reply]

Leave Your Comment

 
Powered by Wordpress and MySQL. Theme by Shlomi Noach, openark.org