The following code makes a horizontal stacked barchart that looks like this:
If I change the height attribute to 50 and the groupWidth to 40%, the legend disappears and the chart looks like this:
Question 1: How can I set the height of the bar and still show the legend?
Question 2: How can I get the horizontal and vertical axis to disappear?
What I am really trying to accomplish is a picture like this:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[' ', 'Sales', 'Expenses'],
[0 , 1000, 400],
]);
var options = {
isStacked: true,
width: 200,
height: 60,
vAxis: {gridlines: {count: 0}},
hAxis: {gridlines: {count: 0}},
bar: {groupWidth: "90%"},
legend: {position: 'top'}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" ></div>
</body>
</html>
Set the chartArea.top option to move the chart area down and give the legend room to draw:
chartArea: {
top: 15
}
jsfiddle
Related
Look at this simple google chart. I would like to get rid of the unnecessary padding space between the hr tag and the upper part of the graph.
(I guess it is for title but i'm not using titles.)
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
titleTextStyle : {
fontSize:1
},
title: null,
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<hr/>
EDIT
I've accepted wahab memon's answer because it addresses directly my original question.
However, solving my original problem introduces - or reveals, instead - another vertical spacing problem at the bottom.
Look at this very tall graph (tall graph makes sense eg. for bar charts with many independent values). The 'spacing' up and down to the horizontal axis title is unnecessarily big:
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
chartArea: {
width: '80%',
height: '80%',
top: 10
},
title: null,
hAxis: {
title: 'Year',
titleTextStyle: {
color: '#333'
}
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 1200px;"></div>
<hr/>
There should be a way to tell to Charts to apply these rules:
do not use title at all (omit the space as well)
use a sane horizontal axis labelling at the bottom (with the label's native size)
use all the remaining space for graph itself.
I wonder if it is possible in any way.
You can provide chartArea config in options which take height and width of chart. By using that the extra spacing will be utilized by your chart view.
Refer the code below or fiddle:
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
titleTextStyle: {
fontSize: 1
},
chartArea: {
width: '80%',
height: '80%',
top: 10
},
title: null,
hAxis: {
title: 'Year',
titleTextStyle: {
color: '#333'
}
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<hr/>
I want to draw a line in front of a candlesticks chart with google combo chart.
With this code, the line chart is drawn behind the candlesticks chart like the image below.
How can I change the z-axis of charts?
<html>
<head>
<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(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Month', 'Low', 'Open', 'Close', 'High', 'Line'],
['2004/05', 80, 100, 90, 120, 1.2],
['2004/06', 70, 120, 95, 150, 1.8],
['2004/07', 60, 110, 80, 140, 1.9],
['2004/08', 85, 130, 92, 190, 2.8],
]);
var options = {
title : 'Candlesticks with line chart',
hAxis: {title: 'Month'},
seriesType: 'candlesticks',
series: {
1: {type: 'line', targetAxisIndex: 1}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Good morning:
I want to display my bar charts tick mark labels at an angle. Is that possible? My code, using a simple chart from Google is included.
Thanks for your assistance,
Natalie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--Load the AJAX API-->
<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([
['Topping', 'Slices',],
['Mushrooms', 300],
['Onions', 100],
['Olives', 500],
['Zucchini', 200],
['Pepperoni', 100]
]);
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300,
'hAxis':{
ticks: [250, 300,],
gridlines: {color: 'blue'},
textStyle:{color: 'blue',}
},
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
just add slantedText: true to your configuration options
if you need a specific angle, use slantedTextAngle: number
see following example...
google.charts.load('current', {
callback: function () {
new google.visualization.BarChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Topping', 'Slices',],
['Mushrooms', 300],
['Onions', 100],
['Olives', 500],
['Zucchini', 200],
['Pepperoni', 100]
]),
{
title: 'How Much Pizza I Ate Last Night',
width: 400,
height: 300,
hAxis: {
ticks: [250, 300],
gridlines: {color: 'blue'},
// slant hAxis labels
slantedText: true,
slantedTextAngle: 33,
textStyle: {color: 'blue'}
}
}
);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I have a Google Diff Bar chart. I am trying to change the color of the exterior bar. By default it is a faded color. I am able to change the inner bar color with color parameter under options. Can someone guide me out please? Here is my code below.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1.1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var oldData = google.visualization.arrayToDataTable([
['Name', 'Popularity'],
['Cesar', 250],
['Rachel', 4200],
['Patrick', 2900],
['Eric', 8200]
]);
var newData = google.visualization.arrayToDataTable([
['Name', 'Popularity'],
['Cesar', 370],
['Rachel', 600],
['Patrick', 700],
['Eric', 3500]
]);
var colChartDiff = new google.visualization.ColumnChart(document.getElementById('colchart_diff'));
var options = {
diff: { newData: { widthFactor: 0.6 } },
legend: { position: 'top' } ,
colors: ['#f38eff', '#C0C0C0'],
backgroundColor: '#fffff5',
hAxis: {title: 'People'},
vAxis: {title: 'Numbers'}};
var diffData = colChartDiff.computeDiff(oldData, newData);
colChartDiff.draw(diffData, options);
}
</script>
You can set that in the diff object, e.g.,
var options = { ...
diff: {
oldData: { opacity: 1, color: '#e6693e' },
newData: { opacity: 1}
}...
}
I would like to customize values of vertical axis in google chart. In their documentation I've found property for this.It's placed between comments (// ---additionaly added..) in the code, but the graph is not being drawn. Does anyone knows what could be the problem?
<link rel="shortcut icon" href="images/superGear.ico">
<link rel="icon" type="image/png" href="images/superGear.png">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
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'}},
// ADDITIONALY ADDED--------------
vAxis: {
viewWindowMode:'explicit',
viewWindow:{ min:90, max :100 }
//---------------------------------
};
var chart = new google.visualization.AreaChart(document.getElementById('lastMonth'));
chart.draw(data, options);
}
</script>
And div placed into body for displaying the graph
<div id="lastMonth" style="height: 500px;"></div>
You are missing the closing } for the vAxis option:
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
min:90,
max: 100
}
}