Can you help
40 views
Skip to first unread message
Peter Johnson
Aug 31, 2022, 11:19:56 PM8/31/22
to Google Visualization API
I am trying to setup my google charts that have the columns in a different colo(u)r according to the value of a different field.
I am using FileMaker Pro to create the html code and can get it working but with only blue bars (default)
I am hoping to use three different colours according to a score a studne trecieves on a test.
HTML code below
Thanks in advance
data:text/html;charset=UTF-8,<html>
<head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart); function drawChart() {
var data = google.visualization.arrayToDataTable([ ['Grade', 'Stanine', { role: 'style' }], ['Yr1', 0, 'red'], ['Yr2', 0, 'red'], ['Yr3', 0, 'red'], ['Yr4', 0, 'red'], ['Yr5', 3, 'red'], ['Yr6', 3, 'red'] ]); var options = { title: 'My ACER Stanines over time', hAxis: {title: 'Grade', titleTextStyle: {color: 'black'}}, vAxis: {'viewWindow': {'min': 0, 'max': 9}, ticks: [1,2,3,4,5,6,7,8,9] }, legend: { position: 'none' } } ;
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options)); }
</script>
</head>
<body>
<div id="columnchart_material" style="width: 500px; height: 500px;"></div>
</body>
</html>
<head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart); function drawChart() {
var data = google.visualization.arrayToDataTable([ ['Grade', 'Stanine', { role: 'style' }], ['Yr1', 0, 'red'], ['Yr2', 0, 'red'], ['Yr3', 0, 'red'], ['Yr4', 0, 'red'], ['Yr5', 3, 'red'], ['Yr6', 3, 'red'] ]); var options = { title: 'My ACER Stanines over time', hAxis: {title: 'Grade', titleTextStyle: {color: 'black'}}, vAxis: {'viewWindow': {'min': 0, 'max': 9}, ticks: [1,2,3,4,5,6,7,8,9] }, legend: { position: 'none' } } ;
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options)); }
</script>
</head>
<body>
<div id="columnchart_material" style="width: 500px; height: 500px;"></div>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages