Label Chart Widget for blogger - Using Google Charts API

Are you interested in showing your blogs label count as a chart, like the one available in my blog? Then follow the below and you can achieve it by some scripts and the Google Chart API.

If you are not familiar with Google Chart API, then check it here.

Then the script for the Widget is as follows.

<b:widget id='LabelChart' locked='false' title='Label Chart' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='LabelChartDiv'/>
<script type='text/javascript'>
var LabelArray = new Object;
var i=0;
<b:loop values='data:labels' var='label'>
var LabelName = "<data:label.name/>";
LabelArray[LabelName] = <data:label.count/>;
i++
</b:loop>
var LabelChartDivObj = document.getElementById('LabelChartDiv');
var ChartLocation = 'http://chart.apis.google.com/chart?chs=230x75&chd=t:';
var j=0;
for (LabelCount in LabelArray)
{
j++;
if(j<i)
{
ChartLocation = ChartLocation + LabelArray[LabelCount] + ',';
}
else
{
ChartLocation = ChartLocation + LabelArray[LabelCount];
}
}
ChartLocation = ChartLocation + '&cht=p&chl=';
j=0;
for (LabelCount1 in LabelArray)
{
j++;
if(j<i)
{
ChartLocation = ChartLocation + escape(LabelCount1) + '['+ LabelArray[LabelCount1] + ']|';
}
else
{
ChartLocation = ChartLocation + escape(LabelCount1) + '['+ LabelArray[LabelCount1] + ']';
}
}
LabelChartDivObj.innerHTML = '<img src=' + ChartLocation + '>';
</script>
</div>
</b:includable>
</b:widget>

To add the above widget script, you need to go to your blogger 'Dashboard'. Then go for 'Layout' and 'Edit HTML' as shown in the below image.

Then go for 'Edit Template' section and check the 'Expand Widget Templates' checkbox.

Now copy the above script and paste it in your template code near your normal label widget. You can find this by searching the below script.

<b:widget id="'Label1'" locked="'false'" title="'Labels'" type="'Label'">

Note: ID of the widget will not be same, it can be different.

The Label widget will be having some standard code and will be end with </b:widget>.

Now you paste the above copied code below this end line and save your template.

Thats all. You have made a colorful chart displaying your label counts.

Caution: Before editing your template, always take a copy of your old template. If some thing goes wrong while editing you can always revert back.

ASP .NET AJAX Timer control : Processing client script on Tick event

Timer Control is a very handy ASP.NET AJAX Extension control used to 'Performs asynchronous or synchronous Web page postbacks at a defined interval'.

This control has good set of features associated with it. But still i feel there is no option to process the client scripts on the Timer's Tick event.

The below given script explains a workaround to the above issue.

// Access the Timer control.

var TestTimer = $find('<%= TestTimer.ClientID %>');

/* Override the '_doPostback' (method called to fire the server Tick event)

method with your own function. */

TestTimer._doPostback = TimerTick;

// Overridden Timer Tick Function

function TimerTick()

{

// Here this is called on every timer tick event..

// So do your client processing here..

alert('Timer Client Click');

// Finally do the async postback..

var ClientTimerId = '<%= tAutoSave.ClientID %>';

// Now call the Asyncpost back method..

// Replace the client id's with the Unique Id..

__doAsyncPostBack(TestTimer, ClientTimerId.replace(/\_/g, '$'),'');

}

// Method to do async post back..

function __doAsyncPostBack(sourceElement, eventTarget, eventArgument)

{

// Here we need to do an async post back...

// Get the Form

var form = Sys.WebForms.PageRequestManager.getInstance()._form;

// Set Event target and the event arguments..

form.__EVENTTARGET.value = eventTarget;

form.__EVENTARGUMENT.value = eventArgument;

// Set the async post back as true..

Sys.WebForms.PageRequestManager.getInstance()._postBackSettings.async = true;

// Set source element..

Sys.WebForms.PageRequestManager.getInstance()._postBackSettings.sourceElement = sourceElement;

// Call the form submit..

Sys.WebForms.PageRequestManager.getInstance()._onFormSubmit();

}