Oracle Maps example - Displaying dynamic BI data as pie charts

Instructions

This demo shows how to draw pie charts on top of the states using dynamically generated XML BI data. For each state that has associated business data, a pie chart is drawn on top of it. You can click on each pie chart to display an info-tip window listing the actual business data for that state.
It uses MapViewer's concept of Non-Spatial Data Provider, which is a custom library that is installed on MapViewer server side. A custom data provider basically feeds any business (Non-Spatial) data to MapViewer, which then joins such data with the Oracle Spatial managed geographic boundary data (such as countries, states et al). In other words, you do not need to store the business specific data in a table in order to render theme as thematic maps using MapViewer. Note that if you do have the business data already stored in the database, then doing thematic mapping can be even easier using MapViewer's built-in thematic mapping support.
In this particular demo, we used the default Non-Spatial Data Proiver that comes with MapViewer. This provider accepts business data in a simple CSV or XML format. The XML format data can be saved on a web server and accessible through a URL by MapViewer, or can be generated in your JavaScript code and sent to MapViewer as part of a Theme-Based FOI layer request. This demo shows how to generate and send XML data from the JavaScript application directly.
This demo also shows how to dynamically define a Pie Chart style for MapViewer to use. You can specify its overall size, number of slices it contains, and the color for each pie slice.

Source code

There are 2 main pieces of code that are of interest in this demo.
1. Setup the dynamic Pie Chart style 
  function setupDynamicPieChartStyle(themebasedfoi)
  {
    var slices = new Array(5);
    slices[0] = new MVPieSlice("Item 1", "2a00ff");
    slices[1] = new MVPieSlice("Item 2", "00ffcb");
    slices[2] = new MVPieSlice("Item 3", "00ff21");
    slices[3] = new MVPieSlice("Item 4", "ccff00");
    slices[4] = new MVPieSlice("Item 5", "ff9900");

    var piechart = new MVPieChartStyle("mypc", 25, slices);

    //now add the piechart style
    themebasedfoi.addStyle(piechart);

    themebasedfoi.setRenderingStyle("mypc");


  }
In the above code, after creating the Pie Chart style using the Oracle Maps API, it is set on the target theme-based FOI layer as the rendering style.

2. Setup a Non-Spaial Data Provider and the actual XML business data on the theme 

  function setupNsdp(themebasedfoi)
  {
    var nsdpInfo = new MVNSDP("defaultNSDP");
    nsdpInfo.setTheme("theme_demo_states");
    nsdpInfo.setKeyColumn("state");

    var xml_data = "<nsdp_xml>"+
  "<table>"+
	"<tr><th>State</th><th>Item 1</th><th>Item 2</th><th>Item 3</th><th>Item 4</th><th>Item 5</th></tr>"+
	"<tr><td>Oregon</td><td>500.0</td><td>200.0</td><td>1000.0</td><td>345.0</td><td>700.0</td></tr>"+
	"<tr><td>California</td><td>624.0</td><td>275.0</td><td>800.0</td><td>154.0</td><td>200.0</td></tr>"+
	"<tr><td>Nevada</td><td>200.0</td><td>396.0</td><td>900.0</td><td>347.0</td><td>400.0</td></tr>"+
	"<tr><td>Arizona</td><td>100.0</td><td>458.0</td><td>10.0</td><td>369.0</td><td>70.0</td></tr>"+
	"<tr><td>Texas</td><td>375.0</td><td>10.0</td><td>800.0</td><td>245.0</td><td>501.0</td></tr>"+
	"<tr><td>Colorado</td><td>469.0</td><td>999.0</td><td>60.0</td><td>545.0</td><td>350.0</td></tr>"+
	"<tr><td>Idaho</td><td>50.0</td><td>167.0</td><td>200.0</td><td>45.0</td><td>842.0</td></tr>"+
	"<tr><td>Iowa</td><td>400.0</td><td>234.0</td><td>1500.0</td><td>845.0</td><td>696.0</td></tr>"+
	"<tr><td>Ohio</td><td>100.0</td><td>555.0</td><td>100.0</td><td>35.0</td><td>444.0</td></tr>"+
	"<tr><td>Michigan</td><td>800.0</td><td>473.0</td><td>300.0</td><td>30.0</td><td>1200.0</td></tr>"+
	"<tr><td>North Dakota</td><td>260.0</td><td>609.0</td><td>50.0</td><td>90.0</td><td>340.0</td></tr>"+
	"<tr><td>New Mexico</td><td>900.0</td><td>108.0</td><td>1000.0</td><td>1345.0</td><td>70.0</td></tr>"+
	"<tr><td>Oklahoma</td><td>1050.0</td><td>168.0</td><td>1500.0</td><td>124.0</td><td>750.0</td></tr>"+
	"<tr><td>Utah</td><td>10.0</td><td>1200.0</td><td>1040.0</td><td>34.0</td><td>600.0</td></tr>"+
	"<tr><td>Wisconsin</td><td>650.0</td><td>500.0</td><td>880.0</td><td>2450.0</td><td>800.0</td></tr>"+
	"<tr><td>Alabama</td><td>440.0</td><td>10.0</td><td>900.0</td><td>34.0</td><td>700.0</td></tr>"+
  "</table>"+
"</nsdp_xml>";

    var ps = new Object();
    ps["xml"] = xml_data;
    nsdpInfo.setParameters(ps);
    themebasedfoi.setNSDP(nsdpInfo);  
  }
Note that the xml data only provide business data for some of the states, and only these have a pie chart displayed. In the above code, we first create a NSDP object (using the Oracle Maps API), tell it the name of the MapViewer pre-defined theme that should be joined with the business data (theme_demo_states in this case). You must also specify a key column from the base table of the pre-defined theme, so that MapViewer can fetch the join key values from the theme's base table. In this case the "state" column will be used to match the business data provided by the Non-Spatial Data Provider.
Next we stuff the actual business data into a JavaScript string variable. The data is in a very simple XML format that follows the HTML Table syntax. Each <tr/> tag corresponds to one business record, in this case it is the sales number for five product items for a particular state. The first <tr> tag however is used to specify the column heading for the business data, which are displayed in the info-window when you click on any pie chart on the map. Note each state record also contains the name of that state. This is the value that MapViewer will use to "join" with the actual state boundary data stored in Oracle Spatial through its "state" table column.
The next step in the above code sets the XML data into the Non-Spatial Data Provider object as the value of the built-in 'xml' parameter. If you store the XML data in a file and make it accessible through a URL, then you should set the URL as the value of a different bult-in parameter named 'xml_url'.
The final step is associating the Non-Spatial Data Provider with the theme-based FOI object, which is performed by the last statement in the above code.