Is it possible to put a trendline on a Google Barchart? - javascript

I am trying to put a trendline on a barchart. When I add the trendline to the options, no trendline appears. Is there a way make a trendline on a barchart like this?
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2014', 1000, 400],
['2015', 1170, 460],
['2016', 660, 1120],
['2017', 1030, 540]
]);
var options = {
trendlines: {
0: {
color: 'green',
visibleInLegend: true,
}
},
chart: {
title: 'Last 7 Days',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical',
vAxis: {format: 'decimal'},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>


1. trendlines.* are listed among the several options that don't work on Material charts
Material chart --> packages: ['bar'] -- google.charts.Bar
however, there is a way to make a trendline on a barchart, using...
Core chart --> packages: ['corechart'] -- google.visualization.ColumnChart
you can use the following config option to get the chart close to the look & feel of Material
theme: 'material'
2. for trendlines.* to work on a Core chart, it must be built on a Continuous axis
meaning the axis values cannot be strings
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
[new Date(2014, 0, 1), 1000, 400],
[new Date(2015, 0, 1), 1170, 460],
[new Date(2016, 0, 1), 660, 1120],
[new Date(2017, 0, 1), 1030, 540]
]);
var options = {
colors: ['#1b9e77', '#d95f02'],
hAxis: {
format: 'yyyy',
ticks: [new Date(2014, 0, 1), new Date(2015, 0, 1), new Date(2016, 0, 1), new Date(2017, 0, 1)]
},
height: 400,
theme: 'material',
title: 'Last 7 Days',
trendlines: {
0: {
color: 'green',
visibleInLegend: true
}
},
vAxis: {
format: 'decimal'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Related

Google Charts: Hiding vertical bars on points

I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>My Line Chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', {role: 'annotation'}, 'Expenses', {role: 'annotation'}],
['2014', 1000, '', 400, ''],
['2015', 1170, '', 460, ''],
['2016', 660, '', 1120, ''],
['2017', 1030, '$1030', 540, '$540']
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' },
pointSize:0,
annotations: {
alwaysOutside: false,
textStyle: {
fontSize: 12,
color: '#000',
auraColor: 'none'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Which displays the following chart
Do you see those vertical gray lines on points? How can I hide them?

for the missing annotation values, use null instead of a blank string ''
['2014', 1000, null, 400, null],
we can also control the color of the vertical line pointing to the annotation,
otherwise known as the stem...
stem: {
color: 'transparent'
},
add above option within the annotations option...
annotations: {
alwaysOutside: false,
stem: {
color: 'transparent'
},
textStyle: {
fontSize: 12,
color: '#000',
auraColor: 'none'
}
}
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', {role: 'annotation'}, 'Expenses', {role: 'annotation'}],
['2014', 1000, null, 400, null],
['2015', 1170, null, 460, null],
['2016', 660, null, 1120, null],
['2017', 1030, '$1030', 540, '$540']
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' },
pointSize:0,
annotations: {
alwaysOutside: false,
stem: {
color: 'transparent'
},
textStyle: {
fontSize: 12,
color: '#000',
auraColor: 'none'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Show the X-axis title in Google Chart

I want to show the x-axis heading of a column chart using google charts in Android web view.
I am trying to show the x-axis heading as Year in
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
But it is not showing heading.
Complete Code;
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
callback: function () {
drawChart();
window.addEventListener('resize', drawChart, false);
},
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
animation:{
duration: 1000,
easing: 'linear',
startup: true
},
height: 600,
theme: 'material',
title: 'Company Performance'
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>

i think the option you're looking for is --> hAxis.title
hAxis: {
title: 'Year'
},
see following working snippet...
google.charts.load('current', {
callback: function () {
drawChart();
window.addEventListener('resize', drawChart, false);
},
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
animation:{
duration: 1000,
easing: 'linear',
startup: true
},
height: 600,
hAxis: {
title: data.getColumnLabel(0)
},
theme: 'material',
title: 'Company Performance'
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>

How can I change X metric in Google Chart?

I use Visualization: Area Chart in my example.
The following code presents the function that does drawing chart:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
You can see, that axis X has values of date in years.
How can I chane this metric for example on months/days?
Assume that I have selected list with values: day/month/years and by selecting option I get is drawen chart correcponding selected value.
Is it easy in Google Chart?

use the data view class and the setColumns method to switch the x-axis column
see following working snippet...
google.charts.load('current', {
callback: function () {
document.getElementById('view-column').addEventListener('change', drawChart, false);
drawChart();
},
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Month', 'Day', 'Sales', 'Expenses'],
[2013, 9, 5, 1000, 400],
[2014, 10, 6, 1170, 460],
[2015, 11, 7, 660, 1120],
[2016, 12, 8, 1030, 540]
]);
var dimension = document.getElementById('view-column');
var view = new google.visualization.DataView(data);
view.setColumns([
parseInt(dimension.options[dimension.selectedIndex].value),
3, 4
]);
var options = {
title: 'Company Performance',
hAxis: {
title: dimension.options[dimension.selectedIndex].text,
titleTextStyle: {
color: '#333'
}
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<select id="view-column">
<option value="0" selected>Year</option>
<option value="1">Month</option>
<option value="2">Day</option>
</select>
<div id="chart_div"></div>

Not able to load all google charts on single web page; am I missing something?

I am using google charts api to display charts but, the last chart is not loading on the page, am I missing something.
Please provide me solution.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawcharts() {
var data1 = google.visualization.arrayToDataTable(
[
['Year', 'Derby', 'Bristol', 'Warrington', 'Indianapolis', 'Dahlewitz', 'Montreal'],
['2012', 143754.00 , 7607.59, 958.51, 6029.12 , 13605.12, 586.00],
['2013', 186065.32, 1674.50, 1823.93, 9574.24, 23935.14, 743.43],
['2014', 251238.53, 0, 0, 10154.41, 19926.63, 363.71],
['2015', 323134.57, 0, 0, 10400.66, 12002.84, 555.86],
['2016', 467058.18, 0, 0, 10529.27, 5844.90, 0] ,
['2017', 391209.43, 0, 0, 11072.43, 3603.65, 0] ,
['2018', 460257.40, 0, 0, 12031.69, 1833.52, 0] ,
['2019', 744114.34, 0, 0, 13012.83, 1517.89, 0] ,
['2020', 1484193.59, 0, 0, 14274.78, 1292.55, 0]
]);
var options1 = {
title:'Total CPU Hours Per Year By Site',
hAxis:{title:'Year', titleTextStyle:{color:'black'}},
vAxis:{title:'1000s CPU Hours', titleTextStyle:{color:'black'}}
};
var chartA = new google.visualization.AreaChart(document.getElementById('chart_div'));
chartA.draw(data1, options1);
}
google.setOnLoadCallback(drawcharts);
google.load("visualization", "1", {packages:["corechart"]});
</script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawcharts1() {
var data2 = google.visualization.arrayToDataTable(
[
['Year', 'Derby', 'Bristol', 'Warrington', 'RRC', 'RRD', 'Canada'],
['2012', 275.82, 1.145, 0, 2.71, 18.44, 0],
['2013', 398.29, 0.04, 0, 3.01, 29.38, 0],
['2014', 509.84, 0.04, 0 , 3.29, 26.05, 0],
['2015', 723.08, 0, 0, 3.54, 13.09, 0],
['2016', 951.38, 0, 0, 3.90, 7.59, 0] ,
['2017', 609.01, 0, 0, 4.32, 3.92, 0] ,
['2018', 1002.65, 0 , 0, 4.69, 1.70, 0] ,
['2019', 1133.86, 0, 0, 4.93, 1.31, 0] ,
['2020', 2127, 770 , 770, 5.31, 0.79, 0]
]);
var options2 = {
title:'Total CPU Hours Required For FE Code',
hAxis:{title:'Year', titleTextStyle:{color:'black'}},
vAxis:{title:'1000s CPU Hours', titleTextStyle:{color:'black'}}
};
var chartB = new google.visualization.AreaChart(document.getElementById('chart_divs'));
chartB.draw(data2, options2);
}
google.setOnLoadCallback(drawcharts1);
google.load("visualization", "1", {packages:["corechart"]});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- load Google AJAX API -->
<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([
['Day', 'Submitted', 'Published', 'Rejected','Created'],
['29-MAR-16', 100, 410, 230,40],
['30-MAR-16', 170, 346, 302,430],
['31-MAR-16', 60, 100, 130,40],
['1-APRIL-16', 302, 350, 520,40]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal', // Required for Material Bar Charts.
hAxis: {format: 'decimal'},
height: 500,
colors: ['#1b9e77', '#d95f02', '#7570b3', '#db7f0b']
};
var chart = new google.charts.Bar(document.getElementById('chart_div1'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart3);
function drawChart3() {
var data3 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options3 = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart3 = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart3.draw(data3, options3);
}
</script>
</head>
<body>
<div id="chart_div1" style="width: 900px; height: 500px;"></div>
<p></p>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<p></p>
<div id="chart_divs" style="width: 900px; height: 500px;"></div>
<p></p>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
<p></p>
</body>
</html>
div id="curve_chart" style="width: 900px; height: 500px" for this line its showing blank but if I use the same script separately it will show me the chart. What is the reason?

I would recommend calling all your "drawcharts" functions from one callback passed to google.setOnLoadCallback
Here's a working jsfiddle.
https://jsfiddle.net/oakley808/z5j9u2sw/
google.load("visualization", "1", {
packages: ["corechart", "bar"]
});
google.setOnLoadCallback(function(){
drawcharts()
drawcharts1()
drawChart()
drawChart3()
})
function drawcharts() {
var data1 = google.visualization.arrayToDataTable(
[
['Year', 'Derby', 'Bristol', 'Warrington', 'Indianapolis', 'Dahlewitz', 'Montreal'],
['2012', 143754.00, 7607.59, 958.51, 6029.12, 13605.12, 586.00],
['2013', 186065.32, 1674.50, 1823.93, 9574.24, 23935.14, 743.43],
['2014', 251238.53, 0, 0, 10154.41, 19926.63, 363.71],
['2015', 323134.57, 0, 0, 10400.66, 12002.84, 555.86],
['2016', 467058.18, 0, 0, 10529.27, 5844.90, 0],
['2017', 391209.43, 0, 0, 11072.43, 3603.65, 0],
['2018', 460257.40, 0, 0, 12031.69, 1833.52, 0],
['2019', 744114.34, 0, 0, 13012.83, 1517.89, 0],
['2020', 1484193.59, 0, 0, 14274.78, 1292.55, 0]
]);
var options1 = {
title: 'Total CPU Hours Per Year By Site',
hAxis: {
title: 'Year',
titleTextStyle: {
color: 'black'
}
},
vAxis: {
title: '1000s CPU Hours',
titleTextStyle: {
color: 'black'
}
}
};
var chartA = new google.visualization.AreaChart(document.getElementById('chart_div'));
chartA.draw(data1, options1);
}
function drawcharts1() {
var data2 = google.visualization.arrayToDataTable(
[
['Year', 'Derby', 'Bristol', 'Warrington', 'RRC', 'RRD', 'Canada'],
['2012', 275.82, 1.145, 0, 2.71, 18.44, 0],
['2013', 398.29, 0.04, 0, 3.01, 29.38, 0],
['2014', 509.84, 0.04, 0, 3.29, 26.05, 0],
['2015', 723.08, 0, 0, 3.54, 13.09, 0],
['2016', 951.38, 0, 0, 3.90, 7.59, 0],
['2017', 609.01, 0, 0, 4.32, 3.92, 0],
['2018', 1002.65, 0, 0, 4.69, 1.70, 0],
['2019', 1133.86, 0, 0, 4.93, 1.31, 0],
['2020', 2127, 770, 770, 5.31, 0.79, 0]
]);
var options2 = {
title: 'Total CPU Hours Required For FE Code',
hAxis: {
title: 'Year',
titleTextStyle: {
color: 'black'
}
},
vAxis: {
title: '1000s CPU Hours',
titleTextStyle: {
color: 'black'
}
}
};
var chartB = new google.visualization.AreaChart(document.getElementById('chart_divs'));
chartB.draw(data2, options2);
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Day', 'Submitted', 'Published', 'Rejected', 'Created'],
['29-MAR-16', 100, 410, 230, 40],
['30-MAR-16', 170, 346, 302, 430],
['31-MAR-16', 60, 100, 130, 40],
['1-APRIL-16', 302, 350, 520, 40]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal', // Required for Material Bar Charts.
hAxis: {
format: 'decimal'
},
height: 500,
colors: ['#1b9e77', '#d95f02', '#7570b3', '#db7f0b']
};
var chart = new google.charts.Bar(document.getElementById('chart_div1'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
function drawChart3() {
var data3 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options3 = {
title: 'Company Performance',
curveType: 'function',
legend: {
position: 'bottom'
}
};
var chart3 = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart3.draw(data3, options3);
}

Prevent rounding of datetime column in Google graphs X axis

I have a working google chart that shows data for the last 24 hours, one data set for each hour (ex 01:00 to 01:59...etc). Now I am trying to modify it to make it show data for the last 24 hours but in 60 minutes chuncks starting from the current time (ex 17:20 to 18:19... etc). This is the code I am working on (https://jsfiddle.net/70boo2ss/):
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Hours');
data.addColumn('number', 'Col 1');
data.addColumn('number', 'Col 2');
data.addColumn('number', 'Percentage');
data.addRows([
[new Date(1454963244*1000),329,35,10.64],
[new Date(1454959644*1000),17,1,5.88],
[new Date(1454956044*1000),60,24,40.00],
[new Date(1454952444*1000),60,24,40.00],
[new Date(1454948844*1000),60,24,40.00],
[new Date(1454945244*1000),60,24,40.00],
[new Date(1454941644*1000),60,24,40.00],
[new Date(1454938044*1000),60,24,40.00],
[new Date(1454934444*1000),60,24,40.00],
[new Date(1454930844*1000),60,24,40.00],
[new Date(1454927244*1000),60,24,40.00],
[new Date(1454923644*1000),60,24,40.00],
[new Date(1454920044*1000),60,24,40.00],
[new Date(1454916444*1000),60,24,40.00],
[new Date(1454912844*1000),60,24,40.00],
[new Date(1454909244*1000),60,24,40.00],
[new Date(1454905644*1000),60,24,40.00],
[new Date(1454902044*1000),60,24,40.00],
[new Date(1454898444*1000),60,24,40.00],
[new Date(1454894844*1000),60,24,40.00],
[new Date(1454891244*1000),60,24,40.00],
[new Date(1454887644*1000),60,24,40.00],
[new Date(1454884044*1000),60,24,40.00],
[new Date(1454880444*1000),60,24,40.00],
]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
suffix: '%'
});
formatter.format(data, 3);
var options = {
width: 1600,
height: 500,
backgroundColor: '#f1f1f1',
colors: ['#ff851b', '#03a9f4', '#8dc859'],
chartArea: {top:50, left:50, width: 1500},
hAxis: {format: 'h:mma', textStyle: { fontSize: '12' }, gridlines: { count: 24 }},
vAxes:[
{ },
{ gridlines: { color: 'transparent' }, minValue: 0, maxValue: 100, format: '#\'%\'', viewWindowMode : 'explicit', viewWindow:{
max:100,
min:0
}}],
series:[
{targetAxisIndex:0},
{targetAxisIndex:0},
{targetAxisIndex:1}
]
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
}
As you can see on jsfiddle, the graphical data gets offset to the correct datetime chunks of 60mins, but the horizontal axis starts at :00
How do I make the horizontal axis start the same as the graphical representation instead of :00?

You can set your own ticks and viewWindow: {min: lowest_date_in_data} for the hAxis.
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Hours');
data.addColumn('number', 'Col 1');
data.addColumn('number', 'Col 2');
data.addColumn('number', 'Percentage');
data.addRows([
[new Date(1454963244*1000),329,35,10.64],
[new Date(1454959644*1000),17,1,5.88],
[new Date(1454956044*1000),60,24,40.00],
[new Date(1454952444*1000),60,24,40.00],
[new Date(1454948844*1000),60,24,40.00],
[new Date(1454945244*1000),60,24,40.00],
[new Date(1454941644*1000),60,24,40.00],
[new Date(1454938044*1000),60,24,40.00],
[new Date(1454934444*1000),60,24,40.00],
[new Date(1454930844*1000),60,24,40.00],
[new Date(1454927244*1000),60,24,40.00],
[new Date(1454923644*1000),60,24,40.00],
[new Date(1454920044*1000),60,24,40.00],
[new Date(1454916444*1000),60,24,40.00],
[new Date(1454912844*1000),60,24,40.00],
[new Date(1454909244*1000),60,24,40.00],
[new Date(1454905644*1000),60,24,40.00],
[new Date(1454902044*1000),60,24,40.00],
[new Date(1454898444*1000),60,24,40.00],
[new Date(1454894844*1000),60,24,40.00],
[new Date(1454891244*1000),60,24,40.00],
[new Date(1454887644*1000),60,24,40.00],
[new Date(1454884044*1000),60,24,40.00],
[new Date(1454880444*1000),60,24,40.00],
]);
// build ticks
var ticks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
ticks.push(data.getValue(i, 0));
}
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
suffix: '%'
});
formatter.format(data, 3);
var options = {
width: 1600,
height: 500,
backgroundColor: '#f1f1f1',
colors: ['#ff851b', '#03a9f4', '#8dc859'],
chartArea: {top:50, left:50, width: 1500},
hAxis: {
format: 'h:mma',
textStyle: { fontSize: '12' },
gridlines: { count: 24 },
ticks: ticks, // set ticks
// set min window
viewWindow: {min: data.getValue(data.getNumberOfRows() - 1, 0)}},
vAxes:[
{ },
{ gridlines: { color: 'transparent' }, minValue: 0, maxValue: 100, format: '#\'%\'', viewWindowMode : 'explicit', viewWindow:{
max:100,
min:0
}}],
series:[
{targetAxisIndex:0},
{targetAxisIndex:0},
{targetAxisIndex:1}
]
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Categories