Formatting Data Labels

24 views
Skip to first unread message

Mojbel

unread,
Feb 5, 2017, 3:39:04 PM2/5/17
to Google Visualization API
Hello!

Is there a way to format the data labels in An Advanced Example to make:
  • President names to be centered. I tried with annotation and annotationText with no luck.
  • Increase the font of all texts and bar size. fontSize and timeline.barLabelStyle didn't work for me.
Thanks

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google
.charts.load("current", {packages:["timeline"]});
  google
.charts.setOnLoadCallback(drawChart);
 
function drawChart() {

   
var container = document.getElementById('example3.1');
   
var chart = new google.visualization.Timeline(container);
   
var dataTable = new google.visualization.DataTable();
    dataTable
.addColumn({ type: 'string', id: 'Position' });
    dataTable
.addColumn({ type: 'string', id: 'Name' });
    dataTable
.addColumn({ type: 'date', id: 'Start' });
    dataTable
.addColumn({ type: 'date', id: 'End' });
    dataTable
.addRows([
     
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
     
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
     
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
     
[ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
     
[ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
     
[ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
     
[ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
     
[ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
     
[ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)],
     
[ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)],
     
[ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)],
     
[ 'Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)],
     
[ 'Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)],
     
[ 'Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)],
     
[ 'Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]
   
]);

    chart
.draw(dataTable);
 
}
</script>

<div id="example3.1" style="height: 200px;"></div>

Reply all
Reply to author
Forward
0 new messages