google.visualization.datatable Change Font Style

I was trying to create a Datatable using google.visualization.datatable API yesterday for my related post widget. It came out quite well and at the end I found that the headerRow (the title of the data table) has a font that looked like a odd man out. I decided to change the header row font, when I realized that the documentation on the API did not cover that with an example. In this blog post, I will try to explain the way you can change the header row font / style and get rid of the silver background and use your own custom format. My current header row format is as shown below:-

google.visualization.datatable - Default Header Style
 The silver shading at the back is actually a gif image title-bg.gif. We will now see how to change the header font to "Verdana". We will leave the background color to white and change the foreground to blue. To do this, define a style element inside your HEAD tag as shown below

.mystyle1 {
                background-color: #FFFFFF;
                color: #3366CC;
                font: 13px Verdana;
                font-weight: bold;   
                text-align: center; }

Now, the visualization.draw method needs to be modified in such a way that it takes the new style we have created and in turn reflects this in table header. We will convey this using the configuration option " cssClassNames" in draw method, but this cssClassNames accepts an Object as input. We define a Javascript variable for this as shown below

var mystyles = {headerRow: 'mystyle1'} ;

We then use this 'mystyles' variable to the draw method as shown below

visualization.draw(data,{allowHtml: true,height : 500,width: 728,cssClassNames: mystyles});

That is it..the "headerRow" style is now modified to use the style definition we created. The style of the table header gets changed as shown below

google.visualization.datatable Header Font Style Modified
Is it possible to specify a different image other than title-bg.gif in the header? Yes, it is. To do this, we add "background" property to the style as shown below

.mystyle {
    background: url("title.jpg") repeat-x scroll left bottom #FFFFFF;
    color: #FFFFFF;
   font: 13px Verdana;
   text-align: center;
    font-weight: bold;                           
                }

The title.jpg is a gradient image in blue color, much similar to the silver shade one. If you want to try this out, you can take the image as provided below
Title.Jpg Used in Table Header as Background
 When this style is used in "mystyles" variable, the "draw" method changes the header to the one as shown below:
Data Table with Changed Background Image for Header

 The complete HTML code is provided below:

<script type="text/javascript">
    function drawVisualization() {
      var data = new google.visualization.DataTable();          
      data.addColumn('string', 'Header Row'); 
      data.addRows(2);
      data.setCell(0, 0, '<font face=Verdana><a href="http://www.google.com">Sign up</a></font>');
      data.setCell(1, 0, '','Row 2',{style: 'font-family:"Verdana"'});                            
      visualization = new google.visualization.Table(document.getElementById('table'));
                  var mystyles = {headerRow: 'mystyle'} ;
      visualization.draw(data,{allowHtml: true,height : 500,width: 728,cssClassNames: mystyles});
                  //visualization.draw(data,{allowHtml: true,height : 500,width: 728});
    }
    google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="table"></div>
  </body>

You can use this in blogger also. The table can be easily customized and changing the header style is not that difficult to do. The style sheet definition is provided below.

<style type='text/css' >
    .mystyle {
    background: url("title.jpg") repeat-x scroll left bottom #FFFFFF;
    color: #FFFFFF;
    font: 13px Verdana;
    text-align: center;
    font-weight: bold;               
    }
    .mystyle1 {
    background-color: #3366CC;
    color: #FFFFFF;
    font: 13px Verdana;
    font-weight: bold;   
    text-align: center;
    }
</style>

No comments:

Post a Comment