Demo

LocationBox JavaScript Demos

Add Bar Analysis

Add:     Remove:  

Instructions

Use the "Add" button to add a predefined bar analysis on the map. Use "Remove" button to remove the analysis information. Edit the source code to .
See the JavaScript API for more information.

Source Code

The Javascript code for the above map is:

<script language="Javascript" 
	src="http://www.locationbox.com.tr/locationbox/services?
	Key=key&Cmd=APIV2&Typ=JS"></script>

<script language="JavaScript">
var mapper  = new IMapper();
var analysis = new IAnalysis();

function startup() {
  mapper.initMap(40.2, 35.1, 5);
  mapper.addNavigationPanel();
  return;
} 

function add() {
  analysis.createBarAnalysis("IL");

  var sty = { "width": 30, "height": 40, "bars": [ {"name": "Item 1", "color": "#8DD3C7"}, 
                                          {"name": "Item 2", "color": "#FB8072"}, 
                                          {"name": "Item 3", "color": "#BEBADA"} ] };
  analysis.setAnalysisBarStyle(sty);

  var xml = "<table>"+
      "<tr><th>IL</th><th>Item 1</th><th>Item 2</th><th>Item 3</th></tr>"+
      "<tr><td>35</td><td>500.0</td><td>200.0</td><td>1000.0</td></tr>"+
      "<tr><td>17</td><td>300.0</td><td>500.0</td><td>100.0</td></tr>"+
      "<tr><td>55</td><td>1500.0</td><td>800.0</td><td>600.0</td></tr>"+
      "<tr><td>1</td><td>500.0</td><td>200.0</td><td>1000.0</td></tr>"+          
      "</table>";
  analysis.setAnalysisBarData("IL", xml);
  return;
} 

function remove() {
  analysis.removeAnalysis();
  return;
}

Buttons:


  <a href="javascript:add()"><img src="images/add.gif" border=0></a>
  <a href="javascript:remove()"><img src="images/remove.gif" border=0></a>
Notes

You may get "Request string is too long for Oracle Maps' non-AJAX remoting" error while creating a pie analysis. See this post on LocationBox blog.

Download working page
Remember that you need to use your key code as Key attribute.