I have this data in a Google DataTable:
And I want to position the page buttons on top of the table. But it seems to me Google doesn't support to do this. Is there any best approach do you guys know?
HERE IS jsfiddle link what I am trying now.
jsfiddle.net/Kwangsub_Ahn/ohh8397h/7/
HTML
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>
JAVASCRIPT
google.load("visualization", "1.1", {
packages: ["table"]
});
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('string', 'Project');
data.addColumn('string', 'System');
data.addColumn('number', 'No');
data.addRows([
['7/31/2014', 'project1', 'system1', 5],
['5/2/2014', 'project2', 'system2', 2],
['5/2/2014', 'project1', 'system1', 5],
['1/31/2014', 'project3', 'system4', 1]
]);
var view = new google.visualization.DataView(data);
var id = document.getElementById('table_div');
var table = new google.visualization.Table(id);
table.draw(view, {
allowHtml: true,
width: '100%',
height: '100%',
page: 'enable',
pageSize: 10
});
}
1) there aren't any standard options you can set,
but you can move the button row manually,
when the chart's 'ready' and 'page' events fire
google.visualization.events.addListener(table, 'ready', moveButtons);
google.visualization.events.addListener(table, 'page', moveButtons);
function moveButtons() {
var content = id.children[0].children[1];
var parent = content.parentNode;
parent.insertBefore(content, parent.children[0]);
}
2) the chart will move the buttons back to the bottom after the 'sort' and 'page' events...
using moveButtons for the 'page' event works fine,
but need to handle 'sort' differently
if you don't want to allow sorting, simply set the following option, and don't attach an event...
sort: 'event'
if you want to allow sorting, you'll still need to set the above option,
but you'll also have to handle manually sorting the table
sort: 'event'
google.visualization.events.addListener(table, 'sort', sortTable);
function sortTable(sortOptions) {
data.sort([{
column: sortOptions.column,
desc: !sortOptions.ascending
}]);
options.sortColumn = sortOptions.column;
options.sortAscending = sortOptions.ascending;
table.draw(data, options);
}
see following working snippet...
google.charts.load('current', {
callback: drawTable,
packages: ['table']
});
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('string', 'Project');
data.addColumn('string', 'System');
data.addColumn('number', 'No');
data.addRows([
['7/31/2014', 'project1', 'system1', 5],
['5/2/2014', 'project2', 'system2', 2],
['5/2/2014', 'project1', 'system1', 5],
['1/31/2014', 'project3', 'system4', 1]
]);
var options = {
allowHtml: true,
width: '100%',
height: '100%',
page: 'enable',
pageSize: 2,
sort: 'event'
};
var id = document.getElementById('table_div');
var table = new google.visualization.Table(id);
google.visualization.events.addListener(table, 'ready', moveButtons);
google.visualization.events.addListener(table, 'page', moveButtons);
function moveButtons() {
var content = id.children[0].children[1];
var parent = content.parentNode;
parent.insertBefore(content, parent.children[0]);
}
google.visualization.events.addListener(table, 'sort', sortTable);
function sortTable(sortOptions) {
data.sort([{
column: sortOptions.column,
desc: !sortOptions.ascending
}]);
options.sortColumn = sortOptions.column;
options.sortAscending = sortOptions.ascending;
table.draw(data, options);
}
table.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>
note: recommend using the newer library loader.js (vs. jsapi), according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.
this will only change the load statement, see above snippet...
Related
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Male', 51],
['Female', 49],
]);
// Set options for Sarah's pie chart.
var options = {title:"",
width:600,
height:400,
is3D: true};
Above is my code. I'm looking to remove the value on the hover but keep the percentages in the pie chart. So on my chart it says Male: 51(51%) Female: 49(49%). It won't let me attach a picture since I'm fairly new so I apologize for that as well.
Just add one more configuration tooltip in options object:
var options = {
title:"",
width:600,
height:400,
tooltip: {
text: 'percentage'
},
is3D: true
};
Here is demo : https://jsfiddle.net/fs6tc5nq/1/
I want to populate data_results which is a DataTable from three data views most likely a serial manner. I do not know the syntax to do this.
I've tried using .addRow() and .addRows() but can't seem to get the syntax correct when trying the final append to data_results.
See my simplistic example below.
Some givens:
I would like to produce a data table called data_results.
It will have 3 columns (Final1, Final2, Final3).
I would like to know how to take rows from view_A, view_B, and view_C and append them to data_results.
As always, your expert assistance is appreciated!
This snippet has been edited per #WhiteHat's suggestions to producce the final solution.
google.charts.load('current', {
'packages': ['corechart', 'table', 'controls']
});
renderChart_onPageLoad();
function renderChart_onPageLoad() {
google.charts.setOnLoadCallback(function() {
drawTable();
}); //END setOnLoadCallback
} //END function renderChart_onEvent
function drawTable() {
var data_A = new google.visualization.DataTable();
data_A.addColumn('string', 'A1');
data_A.addColumn('string', 'A2');
data_A.addColumn('number', 'A3');
data_A.addRow(['X', 'Y', 1]);
var data_B = new google.visualization.DataTable();
data_B.addColumn('string', 'B1');
data_B.addColumn('string', 'B2');
data_B.addColumn('number', 'B3');
data_B.addRow(['XX', 'YY', 2]);
var data_C = new google.visualization.DataTable();
data_C.addColumn('string', 'C1');
data_C.addColumn('string', 'C2');
data_C.addColumn('number', 'C3');
data_C.addRow(['XXX', 'YYY', 3])
var view_A = new google.visualization.DataView(data_A);
var view_B = new google.visualization.DataView(data_B);
var view_C = new google.visualization.DataView(data_C);
var data_results_join1 = google.visualization.data.join(view_A, view_B, 'full',
[[0, 0],[1, 1],[2, 2]], '', '');
var data_results = google.visualization.data.join(data_results_join1, view_C, 'full',
[[0, 0],[1, 1],[2, 2]], '', '');
var dashboard = new google.visualization.Dashboard(document.getElementById('div_dashboard'));
var categoryPicker1 = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'div_categoryPicker1',
'matchType': 'any',
'options': {
'filterColumnIndex': 0, //Column used in control
'ui': {
//'label': 'Is exclude selection possible?',
//'labelSeparator': ':',
'labelStacking': 'vertical',
'selectedValuesLayout': 'belowWrapping',
'allowTyping': false,
'allowMultiple': false,
'allowNone': true
}
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'div_table',
options: {
allowHtml: true
}
});
dashboard.bind([categoryPicker1], [table]);
dashboard.draw(data_results);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id='div_dashboard'>
<div id='div_categoryPicker1'></div><br/>
<div id='div_table'></div>
</div>
When researching this task I also found this to work.
var data_results = new google.visualization.DataTable();
data_results.addColumn('string', 'FinalC1');
data_results.addColumn('string', 'FinalC2');
data_results.addColumn('number', 'FinalC3');
function addRowsToDataResult(sourceView, c1, c2, c3) {
for (var i = 0; i < sourceView.getNumberOfRows(); i++) {
var col1 = sourceView.getValue(i, sourceView.getColumnIndex(c1));
var col2 = sourceView.getValue(i, sourceView.getColumnIndex(c2));
var col3 = sourceView.getValue(i, sourceView.getColumnIndex(c3));
data_results.addRow([col1, col2, col3]);
}
}
addRowsToDataResult(view_A, 'A1', 'A2', 'A3');
addRowsToDataResult(view_B, 'B1', 'B2', 'B3');
addRowsToDataResult(view_C, 'C1', 'C2', 'C3');
Thank you to #WhiteHat! Cheers...
Comment:
need to use the join method -- two times -- first to join the first two tables, and again to join the third table to the result of the first join -- here is an example of how to use the join method – WhiteHat Oct 3 at 19:34
This was the answer. Original post modified to reflect the suggestion. Thank you #WhiteHat
I have a problem figuring out how to set the border-radius on elements in a google charts Timeline. I have looked through all the options but there doesn't seem to be one for that.
I have tried manually setting it but without any luck.
Does anyone have a solution to this problem?
thx in advance
the chart elements can be modified when the chart's 'ready' event fires
however, the chart will revert back to the original style on any interactivity
a MutationObserver can be used to know when the chart has been modified
in order to re-apply the custom style / border radius
the chart is drawn using svg, to change the border radius on a rect element,
set attributes 'rx' and 'ry'
see the following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['timeline']
});
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]
]);
var observer = new MutationObserver(setBorderRadius);
google.visualization.events.addListener(chart, 'ready', function () {
setBorderRadius();
observer.observe(container, {
childList: true,
subtree: true
});
});
function setBorderRadius() {
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function (rect) {
if (parseFloat(rect.getAttribute('x')) > 0) {
rect.setAttribute('rx', 20);
rect.setAttribute('ry', 20);
}
});
}
chart.draw(dataTable);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>
I am using the google charts api to display data from php. I am displaying this information in a material style bar chart (vertical).
I am trying to add annotations to show the values inside the bars however it isn't working.
JavaScript:
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawLastPackets);
function drawLastPackets() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Days');
data.addColumn('number', 'Packets Packed');
data.addColumn({type: 'string', role: 'annotation'});
data.addRows(<?php echo json_encode($chartLastPackets); ?>);
var toAdd = ["Day", "Packets Packed", {"role": "annotation"}];
var options = {
legend: {
position: 'none',
},
series: {
0: {color: '#d7a8a8'}
},
vAxis: {
title: 'Packets'
}
};
var chart = new google.charts.Bar(document.getElementById('lastPackets'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
The contents of the php array $chartLastPackets is:
[["Mon", 1, "1"], ["Tue", 3, "3"], ["Wed", 5, "5"], ["Thu", 2, "2"], ["Fri", 0, "0"]]
However all I can see is the chart itself without the annotation.
annotations.* are listed among the several options that don't work on Material charts
you can use the following option, to get the chart close to the look & feel of Material
theme: 'material'
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Days');
data.addColumn('number', 'Packets Packed');
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([["Mon", 1, "1"], ["Tue", 3, "3"], ["Wed", 5, "5"], ["Thu", 2, "2"], ["Fri", 0, "0"]]);
var options = {
legend: {
position: 'none',
},
series: {
0: {color: '#d7a8a8'}
},
theme: 'material',
vAxis: {
title: 'Packets'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('lastPackets'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="lastPackets"></div>
I have a google line chart I'm using and in many cases the numbers on the axis represent decimals point. Obviously since my data represents people it makes no sense to show the axis in decimal points. I would like for them to rounded up to whole numbers. So far I've been toiling with the format option in the xAxis like so.
var options = {
legend: 'none',
hAxis: {
title: 'Dogs',
format: 'long'
}
};
However, the points on the xAxis are represented as decimals. The jsfiddle can be found here. What's wrong and how can I fix this?
You could set custom format specifiers such as:
# (Digit placeholder)
0 (Zero placeholder)
Example
google.load('visualization', '1', { packages: ['corechart', 'line'] });
google.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0]
]);
var options = {
legend: 'none',
hAxis: {
title: 'Dogs',
format: '#'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
Another option is to specify hAxis.ticks:
Replaces the automatically generated X-axis ticks with the specified
array.
Example
google.load('visualization', '1', { packages: ['corechart', 'line'] });
google.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0]
]);
var options = {
legend: 'none',
hAxis: {
title: 'Dogs',
//format: '#'
ticks: [-1,0,1]
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>