You can restrict or allow certain people to see these statistics. Manage this restriction easily by visiting the management page of your station and clicking on Settings. Then select privacy settings and from the dropdown: "Who can view stats" you can select anyone in order to make this widget public to anyone.

Clicking on a country enables you also to see in detail the specific regions inside the country of the listeners.

This widget relies on three parts to work:

  1. The Javascript code. The main script needs to be included from radiojar.com. It includes our own version of jQuery that uses the noConflict mechanism to avoid clashing with your own website's jQuery (if present).
  2. The HTML markup. Use the code provided, you can tweak it and add your own elements if you want as long as you keep the basic functioning parts that allow the Javascript code to work.
  3. The CSS. A starter stylesheet file is included inside the plugin. You can overwrite it though by including your own CSS file in the according settings to arrive at a design that matches your website's look & feel.

Check out the live demo below and click to get instructions for using the code on your website.

Listeners Online
Show code Live example on JSFiddle

Include our sample stylesheet, in the <head> of your page:

<link rel="stylesheet" href="//www.radiojar.com/wrappers/api-plugins/v1/css/live-stats.css">
            

Or download it and tweak it to your liking.

Include the following code at the point in your web page where you want to display the listeners map:

<div id="rj-live-stats">
  <section id="listeners" class="label"><span id="listenersNumb"></span> Listeners Online</section>
   <section class="map" id="regionMap">
     <div id='region-map'></div>
   </section>
   <section class="map" id="markerMap">
	<button id="worldMapBtn" class="btn noContent"><i class="icon-globe"></i> World Map</button>
	 <div id='marker-map'></div>
	 <div id="legend"></div>
   </section>
</div>
            

Include the following code just before the closing body tag. Instead of "u0510s7hb", use your station's streamname. You can find it in the management area of your station: select Tools and then Widgets (check out the screenshot to the right for the exact location).

<script type="text/javascript" src="//www.radiojar.com/wrappers/api-plugins/v1/radiojar-min.js"></script>
<script>
rjq('#rj-live-stats').radiojar('liveStats', {
   radiostream: 'u0510s7hb', 

   worldMapColor1: '#99C68E',  // The color of the minimum in the global map view
   worldMapColor2: 'green',    // The color of the maximum in the global map view
   countryMapColor1: 'blue',   // The color of the minimum in the country map view
   countryMapColor2: 'green',  // The color of the maximum in the country map view
   
   autoUpdate: '2',            // Auto-update listeners data time (in minutes - minimum is one minute)
   
   regionMapDiv:'region-map',  // The id of the div that will contain the global map view
   markerMapDiv:'marker-map',  // The id of the div that will contain the country map view(when the user clicks on a country)
   btnID:'worldMapBtn',        // The id of the button that will redirect to the global map view (when on the country map view)
   legendID:'legend',	       // The id of the div that will contain the legend in the country map view (that shows the 'Other cities indication')
   totalListenersID:'listenersNumb'
});
</script>