Related
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.
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
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>
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/
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}}