chartbeat

Embedding dashboard widgets

Page history last edited by billy chasen 7 mos ago

About this functionality

Aside from the site widgets, you can also embed chartbeat widgets onto any page. However, in order to do this, you need to create an api key that has access to the pages call. Be aware that this call shows all your data.

Embedding

<head> tag includes

The first step is to add the following includes into your <head> tag:

<script src="http://static.chartbeat.com/js/mootools-core.js" type="text/javascript" language="javascript"></script>
<script src="http://static.chartbeat.com/js/mootools-more.js" type="text/javascript" language="javascript"></script>

<script src="http://static.chartbeat.com/js/dashboard.js" type="text/javascript" language="javascript"></script>

     <link rel="stylesheet" type="text/css" href="http://static.chartbeat.com/css/dashboard.css" />

<!--[if IE]>

<script type="text/javascript" src="http://static.chartbeat.com/js/excanvas.js"></script>

<script type="text/javascript" src="http://static.chartbeat.com/js/silverlight.js"></script>

<link rel="stylesheet" type="text/css" href="http://static.chartbeat.com/css/ie.css" />

     <![endif]-->

The first two lines include mootools, a javascript library required by chartbeat.
The next two lines include the main chartbeat javascript and corresponding css.
The IE block contains several special cases to make IE render chartbeat properly.

Note: The dashboard.css file requires some reworking and widgets may look a bit off. We're working on a new version. In the meantime, you can add your own css to fix them.

Add a div

Add a div somewhere on your page where you would like the widget to render itself:

     <div id="sitetotaldiv" style="width: 450px;"></div>

Make the javascript calls

     window.addEvent('domready', function() {

var main_url = "mywebsite.com";

var apikey = "235dda5ffc5b4d42eb12ed85ed69ad01";

superfly.startExternal(main_url, apikey);

superfly.widgetManager.loadSpecificWidget('sitetotal', 'sitetotaldiv');

     }, "javascript");

The first call is simply to tell chartbeat to initialize. You need to change the main_url and apikey to the URL you want to show and respective api key. You can create an api key at http://chartbeat.com/apikeys

The next call adds the widget to the div you created. The first argument is the type of widget to embed. The second argument is the div to put it into.

Note: Wrapping the calls in the 'domready' event is not required, but is safer for compatibility reasons (mostly with IE).

Add 2 files locally

You need to host two files on your website to make flash work properly with an outside domain.

Download http://chartbeat.com/crossdomain.xml and put it at http://yourwebsite.com/crossdomain.xml. If you already have a crossdomain.xml file, you can just add the line:

<allow-access-from domain="*.chartbeat.com" />

Download http://chartbeat.com/dashboard/amcharts_key.txt and put it in the same directory where you're embedding chartbeat. For example, if you embedded chartbeat on http://yourwebsite.com/chartbeat/widgets.html you need to put it at: http://yourwebsite.com/chartbeat/amcharts_key.txt

Available widgets

The current widgets that are available are:

sitetotal: The total number of people on an entire domain, including new vs. returning.
readwriteidle: Visitor activity gauges, displaying who is reading, writing and idle.
domload: Show actual visitor page load times and averages.
geomap: Real world locations displayed for all current visitors.
sitetime: How long people have been on the site, including a breakdown of read/write/idle.
refpie: Pie chart displaying how people are getting to the site.
refdetails: Detailed information regarding how people are getting to the site.
sitemap: A density map of where people are located within the entire website.
livefeed: Live feed of incoming new traffic to the site.
conversation: The latest gossip about your website.