On Wednesday, March 13, 2019 at 2:06:21 PM UTC-5, Daniel LaLiberte wrote:
>
>
> You need to replace
>
> var chart = new google.charts.ColumnChart(document.getElementById('
> columnchart_material'));
>
> with
>
> var chart = new google.visualization.ColumnChart(
> document.getElementById('columnchart_material'));
>
> Also, with the 'corechart' charts, many options are different, and you
> should *not* call google.charts.Bar.convertOptions(). Maybe it would
> help to start with a full example (from the documentation page) that uses
> google.visualization.ColumnChart() with percent stacking, and then swap in
> your data, and add options incrementally.
>
>
>
Starting with a full working example and adding and swapping incrementally
is the only way I know how to work!! Unfortunately, there is no full
working option to start from on the documentation page that I can find
I have managed to get it working, however (I think) and will now start
tweaking it. Here is full working code (the colors will blind you, I will
change them, lol):
<script type="text/javascript">
google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Paid', 'Suspended', 'Offered'],
['2009', 144230, 59846, 55257],
['2010', 141380, 120048, 52770],
['2011', 147210, 151367, 52611],
['2012', 158349, 145365, 65960],
['2013', 140973, 168595, 67639],
['2014', 136563, 165492, 65777],
['2015', 128399, 160095, 59119],
['2016', 107057, 161546, 51908],
['2017', 121579, 104588, 63924],
['2018', 129517, 97546, 73942],
]);
var options = {
isStacked: 'percent',
title: 'Awards Paid, Suspended, and Offered',
subtitle: 'FY2009 - FY2018',
legend: { position: 'bottom', maxLines: 3 },
bar: { groupWidth: "61.8%" },
tooltip: {fontSize: 12},
colors:['green', 'red', 'blue'],
vAxis: {
format: 'decimal',
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
var chart = new
google.visualization.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
<div id="columnchart_material" style="width: 600px; height:
500px;"></div>
THANK YOU VERY MUCH FOR THE HELP AND STAYING WITH THIS THREAD!!!!
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/80b91537-4a32-45ab-8219-1f796975c353%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
