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.