Here is my code:
var chart = [[''],['']];
chart[0][1]='Spearmint';
chart[1][1]='3.95';
var data = google.visualization.arrayToDataTable(chartArr);
var options = {
title: questions[i].getAttribute("desc"),
is3D: true,
width:600 //with or without this parameter
};
chart = new google.visualization.ColumnChart(document.getElementById('questionchart_' + questions[i].getAttribute("num")));
chart.draw(data, options);
It seems to be cutting off the legend text. You only need to reference the first graph
Here is an image:
Graph Image
If you look closely, you'll see the legends display Sp..... This is inaccurate as it should display the full name of the location (Spearmint).
Here is my DOM Element its using:
<div id="questionchart_1" style="width:750px"></div>
I have no idea how to resolve this issue.
The size of the chartArea needs to be adjusted according to the placement of the legend and the size of the labels that need to be displayed.
Also need to consider the size of the title, axis labels, etc...
Here, I've added a background color to help demonstrate...
google.charts.load('current', {
packages: ['corechart'],
callback: drawChart
});
function drawChart() {
var chartArr = [[''],['']];
chartArr[0][1] = 'Spearmint';
chartArr[1][1] = 3.95;
var data = google.visualization.arrayToDataTable(chartArr);
var options = {
chartArea: {
backgroundColor: 'cyan',
height: 320,
left: 32,
top: 40,
width: 434
},
height: 400,
legend: {
position: 'right'
},
title: 'Flavors',
width: 600
};
var chart = new google.visualization.ColumnChart(document.getElementById('questionchart_0'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="questionchart_0"></div>
I am creating a column chart with Google Charts API->http://plnkr.co/edit/GTg6MfMephB8lR3Kp66S?p=preview
but for some reason an odd space is forming on top of the page.
This started happening after I changed the Material Chart library :
google.load("visualization", "1.1", {packages:["bar"]});
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
var data = new google.visualization.DataTable();
and used a classic chart instead (I need it since the Material Library is not complete and it doesn't allow custom Tooltips):
google.load('visualization', '1', {packages: ['corechart', 'bar']});
var chart = new google.visualization.BarChart(document.getElementById('columnchart_material'));
var data = google.visualization.arrayToDataTable([]);
This is the original Material Chart -> http://plnkr.co/edit/dMVKt3ISlMtyiYmVeN1K?p=preview
What's wrong?
Add settings for the chart area, for example:
chartArea: { width: '100%', height: '99%' },
or:
chartArea: { left: 0, top: 30, width: 1200, height: 5450 },
A bit of a hack but the below will "sort it"...
#columnchart_material{margin-top:-500px}
Can't quite work out why it's happening in the first place though?
I use a google maps ColumnChart to reprensent the elevation in a map.
I also use a mouseover to print info and show the correspondent position.
When a column in the chart is clicked, it popups an info balloon, like here:
http://4.bp.blogspot.com/-4I8oi3WqY5o/UIZnzbXql_I/AAAAAAAAAcE/GO4wl6I2-lM/s1600/Charts.png
This balloon is ok for desktops, but a pain for mobile (very hard to close, etc).
How can I completely disable it? It has to do with the second data column passed to the chart.
No balloons!
Thanks!
L.
EDIT
Code added by request:
var option = {
legend: 'none',
backgroundColor: 'transparent',
colors: ["#C9CFF5"],
titleColor: '#C9CFF5',
focusBorderColor: '#00AA00',
titleY: 'Elevation (m)',
tooltip: { trigger: 'none' },
bar: { groupWidth: '100%' }
}
// Build data
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation (m):');
for (var i = 0; i < trackmarks.length; i++) {
data.addRow(['', trackaltis[i]]);
}
// Draw the chart using the data within its DIV.
chart = new google.visualization.ColumnChart(document.getElementById('elevation_chart'));
chart.draw(data, option);
I want to change the color of each bar in my bar graph. Currently, I tried setting the colors option as specified in the documentation:
var options = {
'title' : results.title,
'width' : 400,
'height' : 300,
'is3D' : true,
'colors' : ["#194D86","#699A36", "#000000"],
'allowHtml' : true
}
But it does not work. Basically, I would want each bar in the following graph to be the same color: http://jsfiddle.net/etiennenoel/ZThMp/12/
Is there a way to do that or do I have to change my code structure to do so ?
[Edit - there is a better method outlined in edit below]
The Visualization API colors data by series (or column in the DataTable, if you prefer). The solution is to split the data into multiple series using a DataView:
// get a list of all the labels in column 0
var group = google.visualization.data.group(data, [0], []);
// build the columns for the view
var columns = [0];
for (var i = 0; i < group.getNumberOfRows(); i++) {
var label = group.getValue(i, 0);
// set the columns to use in the chart's view
// calculated columns put data belonging to each label in the proper column
columns.push({
type: 'number',
label: label,
calc: (function (name) {
return function (dt, row) {
return (dt.getValue(row, 0) == name) ? dt.getValue(row, 1) : null;
}
})(label)
});
}
// create the DataView
var view = new google.visualization.DataView(data);
view.setColumns(columns);
Set the "isStacked" option in the chart to "true" to fix the column spacing issues that result, and draw the chart using the view instead of the DataTable:
var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
chart.draw(view, {
// options
isStacked: true
});
See an example here.
[Edit: new (improved) method available with update to the Visualization API]
You can now use the new "style" column role to specify styles for your columns. It works like this:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'style'});
data.addRows([
['Foo', 5, 'color: #ac6598'],
['Bar', 7, 'color: #3fb0e9'],
['Baz', 3, 'color: #42c698']
]);
var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: 400,
width: 600,
legend: {
position: 'none'
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
see example here: http://jsfiddle.net/asgallant/gbzLB/
There is a solution for your problem.You need to add series in your options. I have already answered for the similar type of question. Refer my answer here. I hope this will help you.
How can I center the title in a Line Chart from Google Charts API (Not Google Chart Images)
I don't see any options like titlePosition: 'center'
Thanks!
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['xValues', 'yValues'],
[0, 34.92],
[389, 39.44],
[488, 52.11],
[652, 55.4]
]);
var options = {
curveType: 'none', // 'function'
title: 'Title',
titleTextStyle: {
color: '333333',
fontName: 'Arial',
fontSize: 10
},
legend: 'none',
enableInteractivity: false
};
var chart = new google.visualization.LineChart(document.getElementById('visualization'));
chart.draw(data, options);
}
This option is not provided by the API; you simply cannot do this.
I use:
titlePosition: 'none'
And insert a title with normal HTML
Another answer suggests something like the following:
$("text:contains(" + vencOptions.title + ")").attr({'x':'60', 'y':'20'})
Source: https://stackoverflow.com/a/16291236/364
$("text:contains(" + vencOptions.title + ")").attr({'x':'60', 'y':'20'})
//OR
$("#YOUR_GRAPH_WRAPPER svg text").first().attr("x", (($("#time-series-graph svg").width() - parseInt($("#YOUR_GRAPH_WRAPPER svg text").first().attr('x'),10)) / 2).toFixed(0));
After drawing the chart, call the event handler function:
google.visualization.events.addListener(chart, 'ready', Title_center);
And define the function as:
function Title_center(){
var title_chart=$("#payer_chart_div svg g").find('text').html();
$("#payer_chart_div svg").find('g:first').html('<text text-anchor="start" x="500" y="141" font-family="Arial" font-size="18" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">'+title_chart+'</text>');
}
Just insert the title of your chart and add the attributes X:500,y:141.
You can easily do this with the callback info from the chart after it has been drawn and a bit of math working on some text in a div.
Contain your chart in a position:relative div. Add a div under the chart and position both it and the chart absolute.
Then you can move the div's top & left positions with a little high-school math.
<https://jsfiddle.net/o6zmbLvk/2/>
$("#YOUR_GRAPH_WRAPPER svg text").first()
.attr("x", (($("#time-series-graph svg").width() - $("#YOUR_GRAPH_WRAPPER svg text").first().width()) / 2).toFixed(0));
See my explanation here
To show chart title in center of chart use below code snippet; it will dynamically set title in center of chart container.
Add ready event listener; google.visualization.events.addListener(myChart, 'ready', titleCenter); and add function titleCenter.
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawAxisTickColors);
var options = {
title: "Chart Title",
titleTextStyle: {
bold: true,
italic: true,
fontSize: 18,
},
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
};
function drawAxisTickColors() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
['2010', 10, 24, 20, 32, 18, 5, ''],
['2020', 16, 22, 23, 30, 16, 9, ''],
['2030', 28, 19, 29, 30, 12, 13, '']
]);
var myChart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
google.visualization.events.addListener(myChart, 'ready', titleCenter);
myChart.draw(data, options);
}
function titleCenter() {
var $container = $('#chart_div');
var svgWidth = $container.find('svg').width();
var $titleElem = $container.find("text:contains(" + options.title + ")");
var titleWidth = $titleElem.html().length * ($titleElem.attr('font-size')/2);
var xAxisAlign = (svgWidth - titleWidth)/2;
$titleElem.attr('x', xAxisAlign);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
function Title_center(total) {
var title_chart = $("#chart svg g").find('text').html();
var x = $("#chart svg g").find('rect').attr('width');
var y = $("#chart svg g").find('rect').attr('y');
alert(x);
$("#chart svg").find('g:first')
.html('<text text-anchor="start" x="'+x/2+'" y="'+y+'" font-family="Arial" font-size="12" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">' + total + '</text>');
}
Create this fuction in script, and call after chart draw like:
google.visualization.events.addListener(chart, 'ready', Title_center("Test success"));
As previous answer said, you can´t config a centered title. Just don´t set any "title" config. By defult it will not be displayed.
Then you can set a title with HTML, some code:
<div>
<div style="text-align: center;">Some Centered Title</div>
<div id="chart_container">
<!-- THE CHART GOES HERE -->
</div>
</div>
Center chart tile
Dynamically adjust to title length
Overlaps with title from google.visualization.LineChart (not tested with other types of charts)
All this in 1 CSS class and 4 lines of JavaScript.
Answered here
document.getElementById('divid').getElementsByTagName('text')[0].setAttribute('x', '350')
svg > g:first-of-type > text {
transform: translateX(calc(50% - 150px));
}