eyanje
commented
2 years ago Example code with missing annotations (non-material bar chart):
<!-- Adapted from the example at https://developers.google.com/chart/interactive/docs/quick_start -->
<!-- Adapted from the example at https://developers.google.com/chart/interactive/docs/quick_start -->
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// ------------------ Relevant code below ----------------------
// Empty column so that the pointer axes appear
data.addColumn('number', 'Pointers');
// Set chart options
var options = {
'title':'How Much Pizza I Ate Last Night',
'width':800,
'height':600,
'series': {
1: { targetAxisIndex: 1 }
},
'hAxes': {
0: {
viewWindow: {min: 0, max: 3},
},
1: {
viewWindow: {min: 0, max: 3},
// Add annotations as axis ticks
ticks: [
{v:0.4, f:'Annotation A'},
{v:1.4, f:'Annotation B'}
]
}
}
};
// Instantiate and draw our chart, passing in some options.
// BarChart because it should be horizontal, although the same problem
// exists with a horizontal ColumnChart.
// For a correct chart, replace `BarChart` with `ColumnChart` and
// `hAxes` for `vAxes` (in options)
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>Correct output with a ColumnChart
Horizontal BarChart output:
The annotation lines are there, but the labels are missing.
It doesn't seem like we can have dual-x bar graphs without using the material bar chart rather than the chart visualization one. The 2nd axis [which should be at the top] seems to completely vanish.
The problem with using a material bar chart is that it doesn't support many of the other methods like annotations or axis-formatting.
Here's a StackExchange post related to this: https://stackoverflow.com/questions/32059511/google-charts-dual-x-axis-different-ticks?answertab=active#tab-top