CODEWITHSUNDEEP
javascriptmysqljsphighcharts
Gipa
Gipa

Reputation: 11

Display Highcharts data from mysql database on jsp page

I want to use Highcharts (master/detail example) to display data in .jsp page. Data will dynamically be loaded from mysql database. Does anyone has example on how to do this. Any suggestion, starting from scratch would help, even most basic, meaning you can suggest any data to show on most simplest jsp page.

I appreciate your time and help. Thanks,

Upvotes: 1

Views: 6817

Answers (1)

Rhys
Rhys

Reputation: 2877

You have probably already found the solution for that. If not however this is it.

1) You will need a JDBC connection in your JSP in the form of a <% %> scriptlet or even better a servlet. Im using SQLITE for ease.

Class.forName("org.sqlite.JDBC");
Connection conn = DriverManager.getConnection("jdbc:sqlite:/DBlocation/Dbname");
Statement stat = conn.createStatement();

2) You then want to parse the result via ResultSet into an ArrayList

ArrayList al = new ArrayList();

    // Query DB for dates
    ResultSet rs = stat.executeQuery("select distinct(date) from project_time;");
    while (rs.next()) 
      { 
         al.add(rs.getString("COLUMN_NAME"));
      } 
    rs.close();

3) Next you want to pass this ArrayList back to your JSP Page using RequestDispatcher

RequestDispatcher rd = null;

request.setAttribute("values",al);
rd = request.getRequestDispatcher("chart.jsp");
rd.forward(request,response);

4) On your jsp page you want to get the values passed from your servlet as below and pass them to an iterator

ArrayList valuelist=(ArrayList)request.getAttribute("values");
Iterator valueIterator = valuelist.iterator();

5) Next you need to loop through the iterator in your javascript to generate your graph values.

xAxis: {
                    categories: 
                        [<% while(valueIterator.hasNext()) { out.println("'"+ valueIterator.next() +"',");} %>],                    
                    tickmarkPlacement: 'on',
                    title: {
                        enabled: false
                    }
                },

And thats about it. Hopefully that is clear enough, if not flick me a message and I will help you out further.

Upvotes: 1

Related Questions