Google Charts axis title - google-visualization

is it possible to add axis title, on Google Charts (Line Chart), and not to change Tick marks?
Tnx in adv!

Yes you can. Here's a slightly modified example from:
http://code.google.com/apis/ajax/playground/?type=visualization#line_chart
The trick is to gets axis labels for two vertical axis (haven't figured out how to do that).
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
data.addColumn('number', 'Blanket 2');
data.addRow(["A", 1, 1, 0.5]);
data.addRow(["B", 2, 0.5, 1]);
data.addRow(["C", 4, 1, 0.5]);
data.addRow(["D", 8, 0.5, 1]);
data.addRow(["E", 7, 1, 0.5]);
data.addRow(["F", 7, 0.5, 1]);
data.addRow(["G", 8, 1, 0.5]);
data.addRow(["H", 4, 0.5, 1]);
data.addRow(["I", 2, 1, 0.5]);
data.addRow(["J", 3.5, 0.5, 1]);
data.addRow(["K", 3, 1, 0.5]);
data.addRow(["L", 3.5, 0.5, 1]);
data.addRow(["M", 1, 1, 0.5]);
data.addRow(["N", 1, 0.5, 1]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10, title: "my Axis"}}
);
}
google.setOnLoadCallback(drawVisualization);
</script>

Related

How to draw a Google line chart with vertical divider?

I have several google line charts (actually, combocharts with both linecharts and areacharts inside) that need to have a vertical "before&after" kind of marker, something like this:
how do I do this?
I see in the docs that I can customize a single point in line (like make it a big star) to serve as a marker, but if there's a way to do this with a vertical line, that would be much better.
Found this somewhere
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// example copied from Google Visualization API playground,
// modified for category axis annotations
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'});
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
data.addColumn('number', 'Blanket 2');
data.addRow(["A", null, null, 1, 1, 0.5]);
data.addRow(["B", null, null, 2, 0.5, 1]);
data.addRow(["C", null, null, 4, 1, 0.5]);
data.addRow(["D", null, null, 8, 0.5, 1]);
data.addRow(["E", null, null, 7, 1, 0.5]);
data.addRow(["F", null, null, 7, 0.5, 1]);
data.addRow(["G", 'Foo', 'Foo annotation', 8, 1, 0.5]);
data.addRow(["H", null, null, 4, 0.5, 1]);
data.addRow(["I", null, null, 2, 1, 0.5]);
data.addRow(["J", null, null, 3.5, 0.5, 1]);
data.addRow(["K", 'Bar', 'Bar annotation', 3, 1, 0.5]);
data.addRow(["L", null, null, 3.5, 0.5, 1]);
data.addRow(["M", null, null, 1, 1, 0.5]);
data.addRow(["N", null, null, 1, 0.5, 1]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {
curveType: 'function',
width: 500,
height: 400,
vAxis: {
maxValue: 10
},
annotations: {
style: 'line'
}
});
}
http://jsfiddle.net/NC37X/
This answers my question.

How to change selected column border color & width in Google Charts?

I am using Google Charts. I want to change border color & width of selected column. By default stroke color is white and width is 1. I want to change border color to black and width to 2.
Code :
var data = google.visualization.arrayToDataTable(mydata);
var options = {
width: 600,
height: 400,
legend: {position: 'top', maxLines: 4},
bar: {groupWidth: '50%'},
isStacked: true
};
var chart = new google.visualization.ColumnChart(document.getElementById('mydiv'));
chart.draw(data, options);
There is no build-in option to set this style, but you may ovveride these settings for stroke-color/width via CSS:
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Motivation Level');
data.addColumn('number', 'Energy Level');
data.addRows([
[{v: [8, 0, 0], f: '8 am'}, 1, .25],
[{v: [9, 0, 0], f: '9 am'}, 2, .5],
[{v: [10, 0, 0], f:'10 am'}, 3, 1],
[{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
[{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
[{v: [13, 0, 0], f: '1 pm'}, 6, 3],
[{v: [14, 0, 0], f: '2 pm'}, 7, 4],
[{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
[{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
[{v: [17, 0, 0], f: '5 pm'}, 10, 10],
]);
var options = {
legend: {position: 'top', maxLines: 4},
isStacked: true};
var chart = new google.visualization.ColumnChart(document.getElementById('mydiv'));
chart.draw(data, options);
}
#mydiv svg>g>g>g>g>rect[stroke="#ffffff"][stroke-width="1"] {
stroke: black !important;
stroke-width: 2px !important;
}
<div id="mydiv"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
You could set column style (border color & width) by applying Column styles on the selected column using select event as demonstrated below:
google.load("visualization", '1.1', { packages: ['corechart'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General','Western', 'Literature'],
['2010', 10, 24, 20, 32, 18, 5],
['2020', 16, 22, 23, 30, 16, 9],
['2030', 28, 19, 29, 30, 12, 13]
]);
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
};
var view = new google.visualization.DataView(data);
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_stacked'));
google.visualization.events.addListener(chart, 'select', function () {
highlightBar(chart,options,view);
});
chart.draw(data, options);
}
function highlightBar(chart,options,view) {
var selection = chart.getSelection();
if (selection.length) {
var row = selection[0].row;
var column = selection[0].column;
//1.insert style role column to highlight selected column
var styleRole = {
type: 'string',
role: 'style',
calc: function(dt, i) {
return (i == row) ? 'stroke-color: #000000; stroke-width: 2' : null;
}
};
var indexes = [0, 1, 2, 3, 4, 5, 6];
var styleColumn = findStyleRoleColumn(view)
if (styleColumn != -1 && column > styleColumn)
indexes.splice(column, 0, styleRole);
else
indexes.splice(column+1, 0, styleRole);
view.setColumns(indexes);
//2.redraw the chart
chart.draw(view, options);
}
}
function findStyleRoleColumn(view) {
for (var i = 0; i < view.getNumberOfColumns() ; i++) {
if (view.getColumnRole(i) == "style") {
return i;
}
}
return -1;
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="columnchart_stacked" style="width: 600px; height: 420px;"></div>
JSFiddle

Vertical scrollbar for customizing table in google chart

I am customizing table in google chart. All i need is fixing the header and footer of table and enabling an vertical scrollbar in the remaining rows of table.
Following is the code i have tried to use..
Please help me..Thanks in advance
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div style="width:1300px;" id="table"></div>
<script type="text/javascript">
var parent = document.getElementById("table");
google.load('visualization', '1', { packages: ['table'] });
function initialize() {
drawTable();
}
google.setOnLoadCallback(initialize);
function drawTable() {
var cssClassNames = {headerRow: 'bigAndBoldClass',selectedTableRow :'scrollClass'};
var options = {'showRowNumber': false, 'allowHtml': true, 'cssClassNames': cssClassNames, 'alternatingRowStyle': false,'height':300};
var data = new google.visualization.DataTable();
data.addColumn('string', 'Carrier');
data.addColumn('number', 'Chargeable Weight (Kg)');
data.addColumn('number', 'Spending (USD)');
data.addColumn('number', 'Transactions');
data.addRows(12);
data.setCell(0, 0, '112-CK - China Cargo Airlines Ltd. ');
data.setCell(0, 1, 10000, '1 9455.00');
data.setCell(0, 2, 10000, '5 8,982.25');
data.setCell(0, 3, 10000, '1');
data.setCell(1, 0, '607-EY - Etihad Airways ');
data.setCell(1, 1, 10000, '2 4081.00');
data.setCell(1, 2, 10000, '5 17,964.76');
data.setCell(1, 3, 10000, '4');
data.setCell(2, 0, '695-BR - EVA Airways Corporation. ');
data.setCell(2, 1, 10000, '3 1898.00');
data.setCell(2, 2, 10000, '56,681.50');
data.setCell(2, 3, 10000, '4');
data.setCell(3, 0, '172-CV - Cargolux Airlines International S.A ');
data.setCell(3, 1, 10000, '4 1361.00');
data.setCell(3, 2, 10000, '53,754.50');
data.setCell(3, 3, 10000, '2');
data.setCell(4, 0, '125-BA - British Airways P.I.C ');
data.setCell(4, 1, 10000, '5 1343.00');
data.setCell(4, 2, 10000, '57,483.45');
data.setCell(4, 3, 10000, '8');
data.setCell(5, 0, '999-CA - Air China Cargo ');
data.setCell(5, 1, 10000, '6 1225.00');
data.setCell(5, 2, 10000, '54,900.00');
data.setCell(5, 3, 10000, '1');
data.setCell(6, 0, '176-EK - Emirates Airlines ');
data.setCell(6, 1, 10000, '7 1108.00');
data.setCell(6, 2, 10000, '56,658.79');
data.setCell(6, 3, 10000, '8');
data.setCell(7, 0, '406-5X - UPS ');
data.setCell(7, 1, 10000, '8 724.00');
data.setCell(7, 2, 10000, '53,982.00');
data.setCell(7, 3, 10000, '1');
data.setCell(8, 0, '297-CI - China Airlines ');
data.setCell(8, 1, 10000, '9 521.08');
data.setCell(8, 2, 10000, '53,222.64');
data.setCell(8, 3, 10000, '4');
data.setCell(9, 0, '307-WE - Centurion Air Cargo, Inc ');
data.setCell(9, 1, 10000, '10 436.00');
data.setCell(9, 2, 10000, '52,045.00');
data.setCell(9, 3, 10000, '2');
data.setCell(10, 0, '160-CX - Cathay Pacific ');
data.setCell(10, 1, 10000, '11 270.00');
data.setCell(10, 2, 10000, '51,876.50');
data.setCell(10, 3, 10000, '1');
data.setCell(11, 0, '<span class="grand-total"> Grand Total</span>');
data.setCell(11, 1, 10000, '<span class="grand-total">104005.00 Kg</span>');
data.setCell(11, 2, 10000, '<span class="grand-total">USD 72,699.94</span>');
data.setCell(11, 3, 10000, '<span class="grand-total">45</span>');
var container = document.getElementById('table');
var table = new google.visualization.Table(container);
table.draw(data, options);
table.setSelection([{'row': 4}]);
}
</script>

Google Line Charts, place circle on annotation

i am new to google charts i want to make a graph for cricket rate rate and wicket that should look something like this
i have searched google and found out that i might do it with the help of annotations and i have written this 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(drawVisualization);
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Overs');
data.addColumn('number', 'Run-rate');
data.addColumn({type: 'string', role:'annotation'});
data.addColumn({type: 'string', role:'annotationText'});
data.addRows([
[1, 6, null, null],
[2, 6, null, null],
[10, 2, null, null],
[20, 3.2, null, 'Shoaib Malik'],
[21, 3, '2', 'Shahid Afridi'],
[30, 4, null, null],
[40, 5, 'B', 'This is Point B'],
[50, 6, null, null],
]);
var options = {
title: 'Run Rate',
pointSize:0,
hAxis: {
gridlines: {
color: 'transparent'
}
},
};
new google.visualization.LineChart(document.getElementById('chart_div')).
draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
and this is the output of the code:
now the problem is that i want to show circle like the first image instead of text 2,B
i cant do it using pointSize because i want circle where wicket falls, not where the over ends...
can any1 tell me how to do this ? either i can replace text with circle or any other way out
You can't replace the text if you want to use the annotation functionality (as the text is what is generated by the annotations). You could use an overlapping data series to show only certain points. Here's an example that shows an overlapping series (I removed the annotations for simplicity, but you can still use them if you want to):
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Overs');
data.addColumn('number', 'Run-rate');
data.addColumn('boolean', 'Wicket falls');
data.addRows([
[1, 6, false],
[2, 6, false],
[10, 2, true],
[20, 3.2, false],
[21, 3, true],
[30, 4, true],
[40, 5, false],
[50, 6, false]
]);
// create a DataView that duplicates points on the "Run Rate" series where "Wicket falls" is true
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'number',
label: data.getColumnLabel(2),
calc: function (dt, row) {
// return the value in column 1 when column 2 is true
return (dt.getValue(row, 2)) ? dt.getValue(row, 1) : null;
}
}]);
var options = {
title: 'Run Rate',
pointSize:0,
hAxis: {
gridlines: {
color: 'transparent'
}
},
series: {
0: {
// put any options pertaining to series 0 ("Run-rate") here
},
1: {
// put any options pertaining to series 1 ("Wicket Falls") here
pointSize: 6,
lineWidth: 0
}
}
};
new google.visualization.LineChart(document.getElementById('chart_div')).
// use the view instead of the DataTable to draw the chart
draw(view, options);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawVisualization});
See working example here: http://jsfiddle.net/asgallant/saTWj/

Google Visualization API : Line Chart - Hide negative values in Y-axis

I use Google Visualization API to plot Line Chart. Here are the codes:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawCharts);
function drawCharts() {
// Total Coupon View
var data_total_users = new google.visualization.DataTable();
data_total_users.addColumn('string', 'Total Users');
data_total_users.addColumn('number', 'User Count');
data_total_users.addRows(7);
data_total_users.setValue(0, 0, 'Sunday');
data_total_users.setValue(0, 1, 10);
data_total_users.setValue(1, 0, 'Monday');
data_total_users.setValue(1, 1, 4);
data_total_users.setValue(2, 0, 'Tuesday');
data_total_users.setValue(2, 1, 3);
data_total_users.setValue(3, 0, 'Wednesday');
data_total_users.setValue(3, 1, 7);
data_total_users.setValue(4, 0, 'Thursday');
data_total_users.setValue(4, 1, 8);
data_total_users.setValue(5, 0, 'Friday');
data_total_users.setValue(5, 1, 10);
data_total_users.setValue(6, 0, 'Saturday');
data_total_users.setValue(6, 1, 10);
var chart = new google.visualization.LineChart(document.getElementById('chart_users_total'));
chart.draw(data_total_users, {width: 1000, height: 400, title: '', hAxis: {title: ''}});
}
The result looks like this:
Question is: How can I remove the -0.5, -1.0 ? Also, I would like to have integers (e.g. 0, 1, 2, 3, ...) in Y-axis. Which parameter should I add?
In your chart.draw call, add:
vAxis:{viewWindow: {min: 0}}
if set options vAxis: {viewWindow: {min: 0}} did not work try to set vAxis:{viewWindow: {min: 0, max: 10}}