How can I disable the legend text on the right in a Google chart? It's circled in red here:
This is the chart I'm trying to use. Here is my current code:
<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([
['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);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
See the docs for the 'legend' options here: https://developers.google.com/chart/interactive/docs/gallery/linechart
You want to add
legend: { position: "none" }
to your options.
Related
I am rendering a geochart with the following:
<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
<%= geo_chart Company.group(:country).count, colors: ["#33C1FF", "#008ED6"] %>
This works great, but the text used on the map to specify the count for each country is 'Value'.
I am using the Google Charts API to do this, and looking at their documentation, they are able to use 'Popularity' instead of 'Value' by doing this:
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
I've tried to replicate this by adding it directly to geo_chart, and still 'Value' appeared. You can see my attempt below:
<%= geo_chart [['Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700]], colors: ["#33C1FF", "#008ED6"] %>
Any ideas?
Thanks
I checked the code on Chartkick and looks like this value was fixed. So instead I used the Google Geomap directly and was able to customise as required. Here's my code below:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["geomap"]});
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Data Feeds'],
<% Company.country_count.each do |key, value| %>
['<%= Company.country_name("#{key}") %>', <%= value%>],
<% end %>
]);
var options = {
colorAxis: {colors: ['#33C1FF', '#008ED6']},
backgroundColor: '#FFFFFF',
datalessRegionColor: '#F5F5F5',
defaultColor: '#f5f5f5',
legend: 'none',
};
var chart = new google.visualization.GeoChart(document.getElementById('datafeeds_geomap'));
chart.draw(data, options);
};
</script>
<div id="datafeeds_geomap" style="height: 300px; text-align: center; color: #999; line-height: 300px; font-size: 14px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;">Loading...</div>
I'm using Material Bar Charts. However, it turns out that whenever I use a 'base href' on my page, the chart will not function properly (if you hover over the bars they disappear). You can try this out with the code below. The base href does not affect inclusion of the required files at Google (but I imagine there is some CSS being included through the javascript that uses relative paths).
I really want to use a base href. Any idea how to make it function?
IMAGE (mouse is hovering over the first bar, which then disappears):
FUNCTIONAL (no base href):
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200]
]);
var options = {
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
NOT FUNCTIONAL (base href introduced):
<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://yahoo.com/" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200]
]);
var options = {
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
Hi I am new to google charts, here I have a Column Chart and a Table. What I am getting now is something like below
Here is the image
But I want the column chart to be displayed something like this :
Here is the image
Here is my code:
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization(){
var data = google.visualization.arrayToDataTable([
["Period","Type","Name","Unitssold","OrderCount","TotalSales"],
["7/1/2014 12:00:00 AM","Category One","iPod Touch 12Gb",2,2,0],
["7/2/2014 12:00:00 AM","Category One","iPod Touch 12Gb",1,1,800],
["7/2/2014 12:00:00 AM","Category One","iPod Nano 12Gb",1000,100,700],
["7/3/2014 12:00:00 AM","Category One","iPod Touch 12Gb",8,1,360]
]);
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control',
'options': {
'filterColumnLabel':'Period',
'ui': {
'allowTyping': false,
'allowMultiple': false,
'selectedValuesLayout': 'belowStacked',
'allowNone': false
}
}
});
var columnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart',
'view': {'columns':[2,5]},
'options':{'width':'800'}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table',
'options':{'width':'800'
}
});
new google.visualization.Dashboard(document.getElementById('dashboard')).
bind([categoryPicker], [columnChart, table]).
draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="dashboard">
<table>
<tr>
<td align="center">
<div id="control"></div>
</td>
</tr>
<tr>
<td align="center">
<div id="chart"></div>
<div id="table"></div>
</td>`
</tr>
</table>
</div>
</body></html>
Try 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([
["Name","TotalSales"],
["iPod Touch 12Gb",0],
["iPod Touch 12Gb",800],
["iPod Nano 12Gb",700],
["iPod Touch 12Gb",360]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Type', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Is there any possibility to generate Google pie chart on my project?
This code display a sum of cells from different id (single id for every year).
<dl>
<dt>2014:</dt>
<dd id="total2014"></dd>
</dl>
<dl>
<dt>2013:</dt>
<dd id="total2013"></dd>
</dl>
<dl>
<dt>2012:</dt>
<dd id="total2012"></dd>
</dl>
The content of id total2014 is still changing, so the best way would be, to generate the pie chart dynamical. I tried with <?php echo '<span id="total2014"></span>' ?> But it doesn't work, the chart disappear. Here's my code:
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Liters'],
['2014', 410], //Here I tried with <?php echo '<span id="total2014"></span>' ?>
['2013', 565],
['2012', 277]
]);
var options = {
title: 'Warki na przestrzeni lat',
pieSliceText: 'value'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<div id="piechart" style="width: 700px; height: 500px; background-color:none;"></div>
The pie chart works perfectly on all browsers except for IE 7 and 8, where all I see is a blank screen. I've looked around but I could not seem to find a solution that works.
Any help is appreciated
<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([
['Product', 'Amount'],
['Product 1', 31],
['Product 2', 28],
]);
var options = {
title: 'Pie Chart',
legend: {postion:'right', alignment: 'center'},
pieSliceText: 'value',
chartArea: {left: 10, width:"30%", height:"50%"},
height: 300
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
You have an errant comma at the end of your data array:
var data = google.visualization.arrayToDataTable([
['Product', 'Amount'],
['Product 1', 31],
['Product 2', 28], <-- this comma is the problem
]);
IE does not like commas after the last element in an array, and will kick and scream and throw a tantrum to rival a petulant two-year-old child when it sees one.