Adding CSS Based Chart to Blog post

Some time we want to display some information in in visual chart form in our blog post. For this most of the time we are using some flash based chart of charts images. But for displaying different chart to blog post we can use Google Chart Tools apis in our posts.

You can do many thing with this chart api if you are a developer. But my post is for blogger?s who want to simple show some information as chart.

Google Chart Tools provides apis to create different dynamic chart. This charts are based on javascript lib and css.

Google Chart Tools provides many different types of chart and anyone can use them in there web application and blog posts.

Here I am writing method to use Pie, Bar and line charts in your blog post. But you can use other also may be I will explain them in other post.

Using Pie chart in blog post:


Here is code to generating above pie chart.

For creating pie chart put below code in you blog post html and put your chart data in variable var data = google.visualization.arrayToDataTable([[??,??],[?w?,22]?] etc as given below and put you chart title in var option title variable.

<script type="text/javascript" src=""></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        var options = {
          title: 'My Daily Activities'
        var chart = new
        chart.draw(data, options);
 <div id="chart_div" style="width: 450px; height: 300px;"></div>

To resize chart you have to change size of div id=“chart_div” and for doing positioning you have to use HTML and css in Chart div.

You can refer Google Chart for creating other chart types and options.

Here is another chart

<div><script type="text/javascript" 
      google.load('visualization', '1', {packages: ['corechart']});
    </script><script type="text/javascript">
      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
          ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 
'Papua New Guinea', 'Rwanda', 'Average'],
          ['2004/05',  165, 938, 522,  998, 450, 614.6],
          ['2005/06',  135, 1120,  599, 1268, 288,  682],
          ['2006/07',  157,  1167,  587,  807,  397,  623],
          ['2007/08',  139, 1110, 615,  968, 215,  609.4],
          ['2008/09',  136,   691,   629, 1026, 366, 569.6]
        var options = {
          title : 'Monthly Coffee Production by Country',
          vAxis: {title: "Cups"},
          hAxis: {title: "Month"},
          seriesType: "bars",
          series: {5: {type: "line"}}
        var chart = new google.visualization.ComboChart(
        chart.draw(data, options);
  <div style="width: 450px; height: 300px"

Leave a Reply

Your email address will not be published. Required fields are marked *