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 |
.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 |
<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>
<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 >
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;
}
No comments:
Post a Comment