For unclear reasons, our code has stopped showing the text in the legend of our google line chart.
We have tried changing the width of the chart and the chart area as mentioned in other SO posts. We also tried changing the position of legend with no effect. We are not using any custom CSS as mentioned here either. There are no errors in the console.
Any idea how to fix this to show the legend text?
HEAD:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
BODY HTML:
<div id="volume_adjusted_visits_by_month_combined"></div>
SCRIPT:
<script>
google.charts.load('current', {packages: ["corechart"]});
google.charts.setOnLoadCallback(volume_adjusted_visits_by_month_combined);
function volume_adjusted_visits_by_month_combined()
{
var data = new google.visualization.DataTable();
data.addColumn({type:'number', id:'Month'});
data.addColumn({type:'number', id:'All_Visits'});
data.addColumn({type:'number', id:'KS'});
data.addRows([
[1,1.0,0.98],[2,1.0,0.95],[3,1.0,0.95],[4,1.0,0.98],[5,1.0,1.01],[6,1.0,1.05],[7,1.0,1.14],[8,1.0,1.12],[9,1.0,1.05],[10,1.0,0.91],[11,1.0,0.96],[12,1.0,0.9],
]);
var options =
{'colors': ['#D3D3D3', 'black'], 'pointSize': 10, 'width': 600, 'vAxis': {'title': 'Ratio'}, 'title': 'Volume Adjusted Monthly Pattern of KS', 'series': {'1': {'pointShape': 'square', 'pointSize': 10}, '0': {'pointShape': 'circle', 'lineDashStyle': [10, 4], 'pointSize': 7}}, 'height': 600, 'hAxis': {'title': 'Months', 'minValue': 0, 'gridlines': {'count': -1}}}
;
var plain = document.getElementById('plain_text_set') !== null
var chart = new google.visualization.LineChart(document.getElementById('volume_adjusted_visits_by_month_combined'));
if (plain) {
var chart_div = document.getElementById('volume_adjusted_visits_by_month_combined');
google.visualization.events.addListener(chart, 'ready', function () {
chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
console.log(chart_div.innerHTML);
});}
chart.draw(data, options);
}
</script>
You're missing the Labels in your columns:
data.addColumn({type:'number', id:'Month', label: 'Months'});
data.addColumn({type:'number', id:'All_Visits', label: 'Visits'});
data.addColumn({type:'number', id:'KS', label: 'KS'});
Related
I do have this on my website running:
<script type='text/javascript' src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
callback: drawVisualization,
packages:['geochart']
});
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Country','Link',],
['United States','https://proyectoviajero.com/destinos/america-del-norte/guia-viaje-estados-unidos/'],
['Japan','https://www.proyectoviajero.com'],
['Saint Lucia','https://www.proyectoviajero.com'],
['Peru','https://proyectoviajero.com/destinos/america-del-sur/guia-viaje-peru/'],
['Chile','https://proyectoviajero.com/destinos/america-del-sur/guia-viaje-chile/'],
['Argentina','https://proyectoviajero.com/destinos/america-del-sur/guia-viaje-argentina/'],
['Bolivia','https://proyectoviajero.com/destinos/america-del-sur/guia-viaje-bolivia/'],
['Brazil','https://proyectoviajero.com/destinos/america-del-sur/guia-viaje-brasil/'],
['Spain','https://proyectoviajero.com/destinos/europa/guia-viaje-espana/'],
['Portugal','https://www.proyectoviajero.com'],
['Italy','https://www.proyectoviajero.com'],
['Belgium','https://www.proyectoviajero.com'],
['France','https://www.proyectoviajero.com'],
['Germany','https://www.proyectoviajero.com'],
['United Kingdom','https://www.proyectoviajero.com'],
['Poland','https://www.proyectoviajero.com'],
['Ukraine','https://www.proyectoviajero.com'],
['Hungary','https://proyectoviajero.com/destinos/europa/guia-viaje-hungria/'],
['Czechia','https://www.proyectoviajero.com'],
['Turkey','https://www.proyectoviajero.com'],
['Morocco','https://proyectoviajero.com/destinos/africa/guia-viaje-marruecos/'],
['Western Sahara','https://proyectoviajero.com/destinos/africa/guia-viaje-marruecos/'],
['Tunisia','https://www.proyectoviajero.com'],
['Switzerland','https://www.proyectoviajero.com'],
['Finland','https://www.proyectoviajero.com'],
['Estonia','https://proyectoviajero.com/destinos/europa/guia-viaje-estonia/'],
['Iceland','https://proyectoviajero.com/destinos/europa/guia-viaje-islandia/'],
['Philippines','https://www.proyectoviajero.com'],
['Greece','https://www.proyectoviajero.com'],
['Bulgary','https://www.proyectoviajero.com'],
['Croatia','https://www.proyectoviajero.com'],
['Brunei','https://proyectoviajero.com/destinos/asia/guia-viaje-brunei/'],
['Qatar','https://proyectoviajero.com/destinos/asia/guia-viaje-qatar/'],
['United Arab Emirates','https://proyectoviajero.com/destinos/asia/guia-viaje-emiratos-arabes/'],
]);
var view = new google.visualization.DataView(data);
view.hideColumns([1]);
var options = {
backgroundColor: 'white',
datalessRegionColor: '#F5F5F5',
defaultColor: '#ffc17f',
displayMode: 'regions',
tooltip: {textStyle: {color: '#222222'}, trigger:'focus',isHtml: true},
legend: 'none',
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'select', myClickHandler);
chart.draw(view, options);
function myClickHandler(){
var selection = chart.getSelection();
if (selection.length > 0) {
var link = data.getValue(selection[0].row, 1);
window.open(link, '_blank');
}
}
}
</script>
I am trying to plot a country (i.e. Spain) with two markers (i.e Madrid and Barcelona as a red circle) with hyperlinks to an external webpage.
But I do not know how to modify it. Basically I am trying to reach the same result in THIS webpage.
Can anyone help me please? Thanks!
I'm making a dashboard in Google Spreadsheet and would like to use cell data. Now you need to hard code the data and the values for redFrom, redTo etc etc but I want them to be dynamic and dependant on a certain value in a cell. Same applies to the values shown by the gauge.
The dashboard will to track monthly income and the gauge will indicate if someone if in the green for that month based on the percentage relative to their target.
This is the standard example from google:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
setInterval(function() {
data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 13000);
setInterval(function() {
data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 5000);
setInterval(function() {
data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
chart.draw(data, options);
}, 26000);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 120px;"></div>
</body>
</html>
So I want it to be something like this:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['A1', A2],
['B1', B2],
['C1', C2]
]);
var options = {
width: 400, height: 120,
redFrom: D1, redTo: D2,
yellowFrom:D3, yellowTo: D4,
minorTicks: 5
};
Is this possible? Thanks!
if the charts will be running in an html page,
you can query the sheet using --> google.visualization.Query
following is an example, using a sample spreadsheet --> gauge data
columns A & B are used for the gauge chart data
columns D-I are for the from / to color values
the setQuery method is used to separate the two ranges into data tables
first, get the chart data, the options data, then draw the chart...
google.charts.load('current', {
packages: ['gauge']
}).then(function () {
// get chart data
var queryChart = new google.visualization.Query('https://docs.google.com/spreadsheets/d/16IeSOMvl4-B3qFr386kjZA-vSRIHTNvSIigqyracGj0/edit#gid=0');
queryChart.setQuery('select A,B');
queryChart.send(function (responseChart) {
var dataChart = responseChart.getDataTable();
// get options data
var queryOptions = new google.visualization.Query('https://docs.google.com/spreadsheets/d/16IeSOMvl4-B3qFr386kjZA-vSRIHTNvSIigqyracGj0/edit#gid=0');
queryOptions.setQuery('select D,E,F,G,H,I');
queryOptions.send(function (responseOptions) {
var dataOptions = responseOptions.getDataTable();
var options = {
minorTicks: 5
};
options.redFrom = dataOptions.getValue(0, 0);
options.redTo = dataOptions.getValue(0, 1);
options.yellowFrom = dataOptions.getValue(0, 2);
options.yellowTo = dataOptions.getValue(0, 3);
options.greenFrom = dataOptions.getValue(0, 4);
options.greenTo = dataOptions.getValue(0, 5);
var chart = new google.visualization.Gauge(document.getElementById('chart_div'))
chart.draw(dataChart, options);
});
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
When I try to create a column chart using the Google charts visualization javascript API the bar ends up a lot fatter than I expected.
Here's a comparison of two charts that demonstrates the problem. First, a chart with two data points where the resulting bars look normal, then a chart with a single data point where the resulting bar looks weird.
The only difference between the two snippets is:
// two bars
data.addRows([
[1, 1],
[2, 1],
]);
vs.
// one bar
data.addRows([
[1, 1]
]);
Two bars (looks normal)
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawAxisTickColors);
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
// two bars
data.addRows([
[1, 1],
[2, 1],
]);
var options = {
title: 'Tidy lil bars',
hAxis: {
minValue: 0,
maxValue: 4
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Single bar (looks weird)
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawAxisTickColors);
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
// one bar
data.addRows([
[1, 1],
]);
var options = {
title: 'Big ol bar',
hAxis: {
minValue: 0,
maxValue: 4
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
You can use bar.groupWidth to control the width of the columns
from the configuration options...
The width of a group of bars, specified in either of these formats:
Pixels (e.g. 50).
Percentage of the available width for each group (e.g. '20%'), where '100%' means that groups have no space between them.
Type: number or string
Default: The golden ratio, approximately '61.8%'.
i.e. --> bar: { groupWidth: 100 }, //100px
google.charts.load('current', {
callback: drawAxisTickColors,
packages: ['corechart', 'bar']
});
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
data.addRows([
[1, 1],
//[2, 1],
]);
var options = {
bar: { groupWidth: 100 }, //100px
title: 'Tidy lil bars',
hAxis: {
minValue: 0,
maxValue: 4
}
};
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>
I am triying to put two google charts of the same style, but when i try it, one is visible and one didnt appear.
So, here's the code.
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2014', 1000],
['2015', 1170],
['2016', 660],
['2017', 1030]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
What variables I need to change to make an other chart like this??
the script is looking for the id selector, in html the id is unique
so add a new div with antoher id and at the end of your script do
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
var chartOther = new google.charts.Bar(document.getElementById('columnchart_material_other'));
chart.draw(data, options);
chartOther.draw(data, options );
if you want to use a classname you could draw the same charts for all elements with class some like this:
var charts = document.getElementsByClassName("yourclass");
for (var i = 0; i < charts; i++) {
var chart = new google.charts.Bar(charts[i]);
chart.draw(data, options);
};
I am using google chart. I have created a column chart. In column chart I want to show the background image instead of background color in every column. Is it possible in google chart? How can I do this? Please share with me if any one have any idea.
My jsfiddle is here: http://jsfiddle.net/8fks1edf/
In image, I have marked where I want changes.
My Codes:
<div id="e_mcf" style="height: 400px; width: 600px;"></div>
<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 dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'ABCD');
dataTable.addColumn('number', 'Percentage');
dataTable.addColumn({type: 'string', role: 'annotation'});
dataTable.addColumn({type: 'string', role: 'style'});
dataTable.addRows([
['AB', 61, '61%','#FF8B00'],
['CD', 90,'90%', '#FF2D00'],
['EF', 70,'70%','#0C8E86'],
['GH', 85,'85%','#0779CF'],
['IJ', 70,'70%','#27486B']
]);
var options = {
vAxis: {gridlines: {color: 'transparent', count: 0}, minValue: 0},
legend: 'none',
backgroundColor: { fill:'transparent' },
isStacked: true,
annotations: {
textStyle: {
fontName: 'Lucida Fax',
fontSize: 10,
bold: true,
color: '#fff',
auraColor: 'transparent',
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('e_mcf'));
chart.draw(dataTable, options);
}
</script>
Creating image via svg pattern, appending it to the def and filling with it via fill attribute.
enableInteractivity must be set to false.
window.google.visualization.events.addListener(chart, 'ready', function () {
var rectan = $('g g:first-of-type g:nth-of-type(2) rect');
var patt = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
patt.setAttribute('id', 'img1');
patt.setAttribute('patternUnits', 'userSpaceOnUse');
patt.setAttribute('width', '20');
patt.setAttribute('height', '287');
var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '../Images/bar.png');
image.setAttribute('x', '0');
image.setAttribute('y', '0');
image.setAttribute('width', '20');
image.setAttribute('height', '287');
var defs = document.getElementsByTagName('defs')[0];
patt.appendChild(image);
defs.appendChild(patt);
for (var i = 0; i < rectan.length; i++) {
rectan[i].setAttribute("fill", "url(#img1)");
}}
rectan is a rect element inside the column chart. You just need to change fill attribute for all "pie slices" after first drawing of the chart.