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

I have been having the following error occuring a lot in the dasBlog eventlog.

System.Web.HttpException: Validation of viewstate MAC failed. If this application is hosted by a Web Farm or cluster, ensure that <machineKey> configuration specifies the same validationKey and validation algorithm. AutoGenerate cannot be used in a cluster. ---> System.Web.UI.ViewStateException: Invalid viewstate.

As this blog is not hosted on a web farm, I searched high and low, but hadn't found anyone else reporting the same problem. After some further investigation, I think I have found the cause. It is always on the CommentView.aspx page. I tried adding comments in various browsers, and that worked without a hitch. So in frustration I did what I should have done in the first place, i.e. completely read the error message. In most instances there was an interesting user agent string such as MRSPUTNIK 1, 5, 0, 19 SW. This is mentioned in a lot of forum entries as a harvester or scraper. I suspect it is trying to post a spam message on the comments page, but because it hasn't followed the normal process, it doesn't contain the view state that the page was accepting. This is almost certainly a bot, and this is why there is no viewstate to decrypt from a previous page. I also checked the IP address, and port number. The ip addresses had many forum entries. One example was 89.149.205.199. I found an interesting site called IPillion which traces IP addresses. So adding that IP address to the url gives http://www.ipillion.com/?ip=89.149.205.199 which reports this IP address as sending lots of spam comments.

So it seems that dasBlog is sort of preventing the spam comments, altho accidentally. I hope this entry helps others having the same issue, as I couldn't find anyone using dasBlog who had the same problem, or had traced it to spammers using bots.
 

Tuesday, June 17, 2008 11:07:26 PM (AUS Eastern Standard Time, UTC+10:00)       Comments [6]  Webmaster | dasBlog