Using an External Data Store

    This section introduces CsvDataSourceServlet . CsvDataSourceServlet is an example implementation that uses a CSV file as an external data store. This section also provides step-by-step instructions on how to run and test CsvDataSourceServlet .

    Note: You should complete the Getting Started with Data Sources section before you begin this section.

    Introducing CsvDataSourceServlet

    The CsvDataSourceServlet class is located in the examples package. This class provides an example implementation that uses a CSV file as an external data store. CsvDataSourceServlet inherits from DataSourceServlet , implements generateDataTable() , and must be run within a servlet container.

    A snippet of CsvDataSourceServlet is provided below. The generateDataTable function exposes data to the library. This function creates a data table description, defines the data table columns, and populates the data table with data obtained from a CSV file. The CSV file is read from a URL specified in a requesting visualization's query. The library handles all other actions required to return the data table to the querying visualization.

     /** 
  
 * 
  
 A 
  
 demo 
  
 servlet 
  
 for 
  
 serving 
  
 a 
  
 simple 
 , 
  
 constant 
  
 data 
  
 table 
 . 
  
 * 
  
 This 
  
 servlet 
  
 extends 
  
 DataSourceServlet 
 , 
  
 but 
  
 does 
  
 not 
  
 override 
  
 the 
  
 default 
  
 * 
  
 empty 
  
 implementation 
  
 of 
  
 method 
  
 getCapabilities 
 () 
 . 
  
 This 
  
 servlet 
  
 therefore 
  
 ignores 
  
 the 
  
 * 
  
 user 
  
 query 
  
 ( 
 as 
  
 passed 
  
 in 
  
 the 
  
 'tq' 
  
 url 
  
 parameter 
 ), 
  
 leaving 
  
 the 
  
 * 
  
 query 
  
 engine 
  
 to 
  
 apply 
  
 it 
  
 to 
  
 the 
  
 data 
  
 table 
  
 created 
  
 here 
 . 
  
 * 
  
 * 
  
 @ 
 author 
  
 Nimrod 
  
 T 
 . 
  
 */ 
 public 
  
 class 
  
 CsvDataSourceServlet 
  
 extends 
  
 DataSourceServlet 
  
 { 
  
 /** 
  
 * 
  
 Log 
 . 
  
 */ 
  
 private 
  
 static 
  
 final 
  
 Log 
  
 log 
  
 = 
  
 LogFactory 
 . 
 getLog 
 ( 
 CsvDataSourceServlet 
 . 
 class 
 . 
 getName 
 ()); 
  
 /** 
  
 * 
  
 The 
  
 name 
  
 of 
  
 the 
  
 parameter 
  
 that 
  
 contains 
  
 the 
  
 url 
  
 of 
  
 the 
  
 CSV 
  
 to 
  
 load 
 . 
  
 */ 
  
 private 
  
 static 
  
 final 
  
 String 
  
 URL_PARAM_NAME 
  
 = 
  
 "url" 
 ; 
  
 /** 
  
 * 
  
 Generates 
  
 the 
  
 data 
  
 table 
 . 
  
 * 
  
 This 
  
 servlet 
  
 assumes 
  
 a 
  
 special 
  
 parameter 
  
 that 
  
 contains 
  
 the 
  
 CSV 
  
 URL 
  
 from 
  
 which 
  
 to 
  
 load 
  
 * 
  
 the 
  
 data 
 . 
  
 */ 
  
 @ 
 Override 
  
 public 
  
 DataTable 
  
 generateDataTable 
 ( 
 Query 
  
 query 
 , 
  
 HttpServletRequest 
  
 request 
 ) 
  
 throws 
  
 DataSourceException 
  
 { 
  
 String 
  
 url 
  
 = 
  
 request 
 . 
 getParameter 
 ( 
 URL_PARAM_NAME 
 ); 
  
 if 
  
 ( 
 StringUtils 
 . 
 isEmpty 
 ( 
 url 
 )) 
  
 { 
  
 log 
 . 
 error 
 ( 
 "url parameter not provided." 
 ); 
  
 throw 
  
 new 
  
 DataSourceException 
 ( 
 ReasonType 
 . 
 INVALID_REQUEST 
 , 
  
 "url parameter not provided" 
 ); 
  
 } 
  
 Reader 
  
 reader 
 ; 
  
 try 
  
 { 
  
 reader 
  
 = 
  
 new 
  
 BufferedReader 
 ( 
 new 
  
 InputStreamReader 
 ( 
 new 
  
 URL 
 ( 
 url 
 ) 
 . 
 openStream 
 ())); 
  
 } 
  
 catch 
  
 ( 
 MalformedURLException 
  
 e 
 ) 
  
 { 
  
 log 
 . 
 error 
 ( 
 "url is malformed: " 
  
 + 
  
 url 
 ); 
  
 throw 
  
 new 
  
 DataSourceException 
 ( 
 ReasonType 
 . 
 INVALID_REQUEST 
 , 
  
 "url is malformed: " 
  
 + 
  
 url 
 ); 
  
 } 
  
 catch 
  
 ( 
 IOException 
  
 e 
 ) 
  
 { 
  
 log 
 . 
 error 
 ( 
 "Couldn't read from url: " 
  
 + 
  
 url 
 , 
  
 e 
 ); 
  
 throw 
  
 new 
  
 DataSourceException 
 ( 
 ReasonType 
 . 
 INVALID_REQUEST 
 , 
  
 "Couldn't read from url: " 
  
 + 
  
 url 
 ); 
  
 } 
  
 DataTable 
  
 dataTable 
  
 = 
  
 null 
 ; 
  
 ULocale 
  
 requestLocale 
  
 = 
  
 DataSourceHelper 
 . 
 getLocaleFromRequest 
 ( 
 request 
 ); 
  
 try 
  
 { 
  
 // 
  
 Note 
 : 
  
 We 
  
 assume 
  
 that 
  
 all 
  
 the 
  
 columns 
  
 in 
  
 the 
  
 CSV 
  
 file 
  
 are 
  
 text 
  
 columns 
 . 
  
 In 
  
 cases 
  
 where 
  
 the 
  
 // 
  
 column 
  
 types 
  
 are 
  
 known 
  
 in 
  
 advance 
 , 
  
 this 
  
 behavior 
  
 can 
  
 be 
  
 overridden 
  
 by 
  
 passing 
  
 a 
  
 list 
  
 of 
  
 // 
  
 ColumnDescription 
  
 objects 
  
 specifying 
  
 the 
  
 column 
  
 types 
 . 
  
 See 
  
 CsvDataSourceHelper 
 . 
 read 
 () 
  
 for 
  
 // 
  
 more 
  
 details 
 . 
  
 dataTable 
  
 = 
  
 CsvDataSourceHelper 
 . 
 read 
 ( 
 reader 
 , 
  
 null 
 , 
  
 true 
 , 
  
 requestLocale 
 ); 
  
 } 
  
 catch 
  
 ( 
 IOException 
  
 e 
 ) 
  
 { 
  
 log 
 . 
 error 
 ( 
 "Couldn't read from url: " 
  
 + 
  
 url 
 , 
  
 e 
 ); 
  
 throw 
  
 new 
  
 DataSourceException 
 ( 
 ReasonType 
 . 
 INVALID_REQUEST 
 , 
  
 "Couldn't read from url: " 
  
 + 
  
 url 
 ); 
  
 } 
  
 return 
  
 dataTable 
 ; 
  
 } 
 }

    Running and testing CsvDataSourceServlet

    This section provides instructions on how to run and test CsvDataSourceServlet .

    To run and test CsvDataSourceServlet , create a CSV file, update your web application, and set up a visualization that queries the data source, as described in the following sections:

    Creating a CSV File

    The file csv_example.csv is provided in the <data_source_library_install>/examples/src/html directory. It contains the following values:

    Employee,Manager
Roger,John
Robert,John
Jane,Roger
Jack,Jane
Bob,Jane

    Copy this file to the <tomcat_home>/webapps/myWebApp directory you created in the Getting Started section.

    Updating Your Web Application on Apache Tomcat

    Follow or adapt the instructions below to update your web application on Apache Tomcat. These instructions are specific to Apache Tomcat on a Windows system:

    1. The web.xml file you previously copied to the WEB-INF directory already contains the definition and mapping required for this example. The lines that define this are:
      <servlet>
  <servlet-name>CSV Example</servlet-name>
  <description>
  CsvDataSourceServlet
  </description>
  <servlet-class>CsvDataSourceServlet</servlet-class>
</servlet>

<servlet-mapping>
  <servlet-name>CSV Example</servlet-name>
  <url-pattern>/csv</url-pattern>
</servlet-mapping>
    2. Start Tomcat, or restart Tomcat if it is already running.
    3. Click the following link: http://localhost:8080/myWebApp/csv?url=http://localhost:8080/myWebApp/csv_example.csv

      The screen displays 6-7 lines of text, depending on your screen width.
      The text begins with google.visualization.Query.setResponse
      and ends with {c:[{v:'Bob'},{v:'Jane'}]}]}});

      This is the response that the example CSV data source sends to a visualization.

    Using a Visualization to View the Data

    The all_examples.html file in the <data_source_library_install>/examples/src/html directory can be used to view a visualization of the data.

    If you view the source of the all_examples.html file, you will see there are three visualizations included in the file. The following snippets reproduce the specification of these visualizations.

    • The following line specifies the csv example covered in this section:
       query 
  
 = 
  
 new 
  
 google 
 . 
 visualization 
 . 
 Query 
 ( 
 'csv?url=http://localhost:8080/myWebApp/csv_example.csv' 
 );
      The following line specifies an organization chart visualization: 
       var 
  
 chart 
  
 = 
  
 new 
  
 google 
 . 
 visualization 
 . 
 OrgChart 
 ( 
 document 
 . 
 getElementById 
 ( 
 'csv_div' 
 ));
    • The following line specifies the simpleexample covered in the Getting Started section:
       var 
  
 query 
  
 = 
  
 new 
  
 google 
 . 
 visualization 
 . 
 Query 
 ( 
 'simpleexample?tq=select name,population' 
 );
      The following line specifies a pie chart visualization: 
       var 
  
 chart 
  
 = 
  
 new 
  
 google 
 . 
 visualization 
 . 
 PieChart 
 ( 
 document 
 . 
 getElementById 
 ( 
 'simple_div' 
 ));
    • The following line specifies the advanced example that is covered in the Defining Capabilities and the Flow of Events section:
      query = new google.visualization.Query('advanced?tableId=planets&tq=select planet,mass');
       The following line specifies a bar chart visualization: 
       var 
  
 chart 
  
 = 
  
 new 
  
 google 
 . 
 visualization 
 . 
 BarChart 
 ( 
 document 
 . 
 getElementById 
 ( 
 'advanced_div' 
 ));

    For more information on how to specify a chart and use the query language, see Introduction to Using Chart Tools and the Query Language Reference .

    Follow, or adapt, the instructions below to view a visualization of the data served by CsvDataSourceServlet :

    1. Copy the all_examples.html file from the <data_source_library_install>/examples/src/html directory to the <tomcat_home>/webapps/myWebApp/ directory.
    2. Click the following link: http://localhost:8080/myWebApp/all_examples.html , you should see the following visualization.


    The Advanced Data Source example is discussed in Defining Capabilities and the Flow of Events .

    Next Steps

    The next example is described in the Defining Capabilities and the Flow of Events section. Alternatively, explore the following links:
    Create a Mobile Website
    View Site in Mobile | Classic
    Share by: