Continuing from a previous post in which I added a Google Map of the visitors to my blog, this post will discuss how to take the same information and present it in a Visifire chart. Visifire is an open source Silverlight charting component which is very easy to use and well documented.

Figure 1 - An example of the Visifire Silverlight chart tracking visitors

This post will use the same component from the previous post, the VisitorsBox.ascx, and modify the code that retrieves the location of the visitor, and add some javascript to render the chart.

First, a JavaScript array is declared which will hold the location information received by the IPHost web site:

var cities=new Array();

This array will have items pushed into it once they are retrireved:

cities.push(new Array(location, addresses[x][1]));

Once again, the code that actually calls the HTML page with the location information is covered in the earlier post.

After the Google Map is populated, the Visifire chart is prepared. To create the Visifire chart we need to do the following:

• Add some HTML code into VisitorsBox.ascx
• Add the Visifire.js and Visifire.xap (SilverLight binary) files to the web server
• Dynamically create an XML file to feed to the Visifire.xap component
• in the JavaScript, create a new Visifre object
• Call the Visifire object's setDataXml method, passing the XML data in
• Call the Visifire objects render method, passing in the id of the HTML layer that the chart is to be rendered to.

The HTML code is straightforward, just a layer with an id attribute:

<div id="VisifireChart"></div>

The Visifire.js can be copied wherever you want, altho the scripts folder seems an obvious candidate. The Visifre.xap file can go in the bin folder.

To create the XML, I have just concatenated a large string. Where it requires the data, I loop thru the cities array and populate the relevant information. Note this is C# code writing out a JavaScript block. Here is the header part of the XML string:

function chart() {
var chartXmlString = ''
    +'<vc:Chart xmlns:vc=\'clr-namespace:Visifire.Charts;assembly=Visifire.Charts\''
+' Width=\'500\' Height=\'300\' BorderThickness=\'0\' Theme=\'Theme3\' ';
+'LightingEnabled=\'False\' ColorSet=\'Picasso\' AnimationType=\'Type5\'>'
+'<vc:Title Text=\'Visitors by location\'/>'
+'<vc:AxisX Title=\'blog.focas.net.au\'>'
+'</vc:AxisX>'
+'<vc:AxisY Title=\'Visitors\'>'
+'</vc:AxisY><vc:DataSeries Name = \'Series1\' RenderAs=\'Column\'>';

Now, to create the data points:

for (var x=0;x<cities.length;x++) {
    chartXmlString+= '<vc:DataPoint AxisLabel=\'' + cities[x][0] + '\' YValue=\'' + cities[x][1] + '\'/>';
}

And close the XML string off:

chartXmlString+='</vc:DataSeries>'
    +'</vc:Chart>';

The following JavaScript code creates the chart, loads the data and renders the chart:

var vChart =new Visifire('Visifire.xap',500,300);
vChart.setDataXml(chartXmlString);
vChart.render('VisifireChart');

And thats all there is to it. As in the previous example, if you take the client side approach, then you have cross site scripting issues. So the site will need to be added to a trusted zone. If this is not suitable then you will need to run the code on the server that retrieves the locations.

Download instructions

The instructions for installing this page are in the earlier post Please remember that In order to view the example for this, you would have to add http://blog.focas.net.au to your trusted zones in Internet Explorer.

visifire.zip (11.06 KB)

Thursday, June 26, 2008 11:15:30 PM (AUS Eastern Standard Time, UTC+10:00)       Comments [3]  dasBlog | Downloads | JavaScript | Webmaster | Silverlight