tenth blog

Posts Mentioning RSS Toggle Comment Threads | Keyboard Shortcuts

• 

  Posted at 7:19 PM on January 26, 2009 Permalink | Reply

  Google Chart API 

  Do you use  charts to graphitize your statistics? Well, you should.  Because, they are easy for your readers, it can be used to grab attention from your readers for what you have to say and also can be used to help you make your point in an easy way.

  There are some useful tools on the web that you can try out.  One of the easiest one is made by Google. There are APIs that anyone can use on their web page.

  How to use Google Chart API

  Charts are dynamically generated. It’s really easy to use.  Google Chart offers different chart types (9 to be exact). You can see the pie chart on the left. It’s just one of them.

  Different charts require different optimizations.But how to embed a chart using Google Chart?

  Google Charts generates images   You request can be made a through a URL.

  For instance, lets say I want to  make a three dimensional(3d) chart for 2008 US Presidential Election results.

  Step 1: URL Format

  http://chart.apis.google.com/chart?&lt;parameter 1>&<parameter 2>&<parameter n>

  This is the basic URL format.  You can view the parameters for different chart types.

  Step 2: Parameter

  All I have to do is to change the parameters. I have two candidates and their results in past election.

  http://chart.apis.google.com/chart?
chs=250x100
&chd=t:53,46
&cht=p3
&chl=Barrack Obama|John Mccain


  First parameter is the chart’s size in pixels, second is the data, third one is the type of chart, and last one is the labels for our data.

  Step 3: Embedding

  To put the graph you made on a web page, all you have to do is to get your customized URL and add it as an image. For those who don’t know how to add an image on a HTML document,  you can check Google Support.

  and here is how the chart looks;

  

  That’s it.

  Some Other Properties

  • Colors used in charts can be changed. Click to view documentation at Google Chart Site.
  • More than 250.000 daily impressions are allowed.
  • Size is customizable.

  Here are some other types of charts;

  

   

  Reply Click here to cancel reply.

  Name (required)

  Email (required)

  Web Site

  Notify me of followup comments via e-mail

   
• 

  Posted at 9:40 PM on July 1, 2008 Permalink | Reply

  Status and Info Message Boxes for your Blog 

  Back in last year, when I was running a gaming clan, I had to design my own small content management system. The application I built was being used my clan members as well. So I had to make it user friendly. The best way to do that is having informational messages in your system to help out your users.

  For instance if your user has performed something,  some message should appear saying that whether the action has been performed successfully or has not been performed. This kind of system messages can be used in your posts as well. Take a look at this example.

  Congratulations!!! You have successfully performed something.

  These info or status messages will add a professional look to your website. I have been working with CSS for sometime now. Now, I know how easy these stuff are.  So I thought I’d make this tutorial.

  Here it goes.

  First thing we need to do is to find a wordpress theme to work with. I’ll just use this blog’s default theme.

  The only trick is that the background color and the border color. So whatever you pick for your background color, you should pick a darker tone of that background color. This is to make the border and the whole thing noticeable.

  Here is our first try, I’ll call this division class “positive”.

  Congratulations!!! You have successfully performed something.

  .positive {
background:#f6f9c7 url('img/icons/ok.png') no-repeat;
background-position:8px 5px;
border:1px solid #d3d6a6;
padding:8px 0px 10px 0px;
text-align:center;
font-family: Tahoma;
font-size: 12px;
font-weight:bold;
}


  Please click here to download

  .download {
background:#f6f9c7 url('img/icons/dl.png') no-repeat;
background-position:8px 5px;
border:1px solid #d3d6a6;
padding:8px 0px 10px 0px;
text-align:center;
font-family: Tahoma;
font-size: 12px;
font-weight:bold;
}

  Stop!!! You have done something wrong!!!

  .stop {
background:#f6f9c7 url('img/icons/stop.png') no-repeat;
background-position:8px 5px;
border:1px solid #d3d6a6;
padding:8px 0px 10px 0px;
text-align:center;
font-family: Tahoma;
font-size: 12px;
font-weight:bold;
}

  This part of our site is under construction. Come back later.

  .att {
background:#f6f9c7 url('img/icons/att.png') no-repeat;
background-position:8px 5px;
border:1px solid #d3d6a6;
padding:8px 0px 10px 0px;
text-align:center;
font-family: Tahoma;
font-size: 12px;
font-weight:bold;
}

  You can change properties of these as you wish. It’s simple CSS. Only thing that might be tricky is the position of our background image.  You can use percent values instead of pixels. But unfortunately, that didn’t work in X direction as I wanted. So i used pixels.

  
background-position:8px 5px;

  First value is the X axis and second value is Y axis. Other than that, there is no tricky part. Feel free to use them. Here is the icon set I used.

  • http://www.icojoy.com/articles/26/