I just want to sort the column 0 descending. I am using this code:
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'chart_table_a',
options: {
sortColumn: 0,
sortAscending: false,
sort: 'enable'
}
});
I don't want to make the table sortable, but the code only works with sort: 'enable'.
Is there a way to just sort without make the table sortable?
Sort your DataTable:
// sort by column 0, descending
data.sort({column: 0, desc: true});
or use a sorted DataView:
var view = new google.visualization.DataView(data);
view.setRows(data.getSortedRows({column: 0, desc: true}));
table.draw(view, options);
Sorting the DataTable modifies the actual order of the data, and will affect other charts/tables that use the DataTable. This can be expensive in terms of CPU usage if the DataTable contains a large number of rows. Using a DataView preserves the data in the original DataTable (at the expense of a small increase in memory use), and is comparatively cheap in terms of CPU time, but if your DataTable isn't huge or you don't have any other charts that rely on it, you're probably safe just sorting the base DataTable.
Related
Good afternoon everyone,
I am implementing Google Charts API in my Django project. I would like to draw two different charts, a pie chart and a table chart. I am able to display the Pie chart without problems. However, I am having trouble with the table chart. I am passing a tuple to the data.setCell() method. When I do that the table chart does not render.
Hereunder is the code that I wrote:
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Company Name');
data.addColumn('number', '52 week high');
data.addColumn('number', '52 week low');
data.addRows(5);
{% for company in data_cell|safe %}
data.setCell(company);
{% endfor %}
// data.setCell(0, 0, 'John');
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, width: '50%', height: '50%'});
google.visualization.events.addListener(table, 'select', function() {
var row = table.getSelection()[0].row;
alert('You selected ' + data.getValue(row, 0));
});
}
data_cell is a variable that contains a list of tuples and it is part of the context dictionary in my views.py file. As follows you can find an example; ('Facebook', 384.33, 244.61)
I have tried looping through the list of tuples without the safe method and it does not work.
Any hints?
instead of using setCell, try the addRow method...
data.addRow(company);
setCell requires three arguments --> row index, column index, and value.
you cannot pass all in one variable.
I'm newbie in Ember.js framework, and I have a problem, I need a multiple selection of rows in a table. I'm using jQuery Datatables, with Ember-Data, and I need to have an ID of the selected rows, something like push to the array and I have no clue how to do this.
For multiple selection, make sure you initialize the table with the select option set to "multi":
this.$("#myDT").DataTable({
select: "multi"
});
When you want to get the list of all the rows selected, use a jQuery selector to get all the rows that have the selected class and get their data. In this example, the ID is the first column in the data, hence the [0]
var selectedRows = Ember.$('#myDT tbody tr.selected');
var selectedIDs = [];
Ember.$.each(selectedRows, function (i, element) {
selectedIDs.push(table.row(element).data()[0]);
});
You can read more about DataTables API (for things like getting row data using the row.data() method here: https://datatables.net/reference/api/
I am using geoChart to display following data in country Map
I have plotted the map using State cloumn and TotalSales($) as value Column
Now ,the tooltip displays like this : ID
TotalSales($_113607.00)
I have following summary data in datatable
this is my actual data
Now I have added more columns(City,Brandname) to break data from summary data from first table
The tooltip displays like this : VA
Totalsales($_:34943(City Fairfax(BrandName sony)))- this is wrong
But I want to display the tooltip like this : VA
Totalsales($_:7768(City Fairfax(BrandName sony))) - this is correct
this is my data to display tooltip
From these, what I got is , Geochart takes only last row for display tooltip,but I want to display particular brand's Totalsales i.e sony -7768$
How do I do this?
You can group the data in geo chart using the CategoryFilter Control. You can group data in this way.
var categoryPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'BrandName',
options: {
filterColumnIndex: 3, // filter by brand name
ui: {
caption: 'Choose a brand',
sortValues: true,
allowNone: true,
allowMultiple: false,
allowTyping: true
}
},
state:
{
selectedValues: ['Samsung']
}
});
Here is the working sample jqfaq.com. Hope this will help you.
Using the Google visualization api, is there an easy way to see if a DataView is empty?
https://developers.google.com/chart/interactive/docs/reference#DataView
I can see perhaps using dataView.getValue(0, 1) etc to check for nulls, but it also contains column headings.
I'm guessing it's tricky as the dataview could have many different formats, but is there a good generic way of checking for empty data views? I'm using the dataview for a pie chart.
If I remember right, this can be easily done this way
var predata = response.getDataTable();
var vals = new Array();
var rownum = predata.getNumberOfRows();
// Make sure our data isn't empty.
if (null==predata) // yoda was here
return;
Returns the data table as returned by the data source. Returns null if
the query execution failed and no data was returned.
From reading the documentation, it seems like dataView.getNumberOfRows() is what you're looking for. Before calling that, however, you need to get the filtered rows which are null and then hide them. Here is an example using the Google Code Playground where I am checking one column for null and then hiding the row if it is null. Replace Google Code's default JavaScript for that example with what's below:
function drawVisualization() {
var dataTable = google.visualization.arrayToDataTable([
['Name', 'Age', 'Instrument', 'Color'],
[null, null, null, null],
['Paul', 52, 'Sitar', 'Red'],
['George', 16, 'Guitar', 'Green'],
['Ringo', 72, 'Drums', 'White']
]);
var table = new google.visualization.Table(document.getElementById('table'));
table.draw(dataTable, null);
var dataView = new google.visualization.DataView(dataTable);
// Get rows where the 2nd column contains null
var filteredRows = dataView.getFilteredRows([{column: 1, value:null}]);
console.log(filteredRows);
dataView.setColumns([0, 1]);
// Hide the filtered rows returned
dataView.hideRows(filteredRows);
// Check the number of rows that now exist
console.log(dataView.getNumberOfRows());
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(dataView, {width: 400, height: 200});
}
getDistinctValues may help you with that. It works fine for line charts, when applied to columns which are visualized along Y-axis.
It doesn't seem quite right...
Perhaps I should replace null with 0 on the server-side before the client side even sees the data....
I've resorted to:
if (dataView.getValue(0, 1) === null || dataView.getValue(1, 1) === null || dataView.getValue(2, 1)) === null)
Where my dataview strucuture is:
Column Title 1 | Data
Column Title 2 | Data
Column Title 3 | Data
I am looking to create a Google charts API dashboard with filtering but I would like to chart the data based on grouped data. For example, I can create a datatable such as this:
salesman cust_age cust_sex quantity
Joe 21 Male 3
Joe 30 Female 10
Suzie 40 Female 2
Dave 15 Female 5
Dave 30 Male 10
I can appropriately create a dashboard that creates two controls (for cust_age and cust_sex) and any number of output graphs and tables all pulling from an external data source - this is pretty stock stuff, see http://code.google.com/apis/chart/interactive/docs/gallery/controls.html
The problem that I am having is how to show all charts by grouped values. Using a pie chart as an example, without any filters there are 5 slices of the pie (Joe, Joe, Suzie, Dave, Dave) - I would like to see only three (Joe, Suzie Dave). Of course, when a control is applied everything should update.
In other words, the filters should act on the original datatable, but the charts should be based on a grouped datatable.
I would guess that we could use the grouping function:
http://code.google.com/apis/ajax/playground/?type=visualization#group
however I cannot seem to bind the filters to the larger datatable, update the grouped table, and then draw the charts based on the grouped table.
Any thoughts?
I found a workaround, you should use the chartWrapper without the dashboard, so you can pass a dataTable as parameter:
var $pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'pie_chart',
'options': {
'width': 300,
'height': 300,
},
//group the data for the pie chart
'dataTable' : google.visualization.data.group($dataTable, [0],
[{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}])
});
$pieChart.draw();
$tableWrapper = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_data'
});
var $genderPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'gender_filter',
'options': {
'filterColumnIndex': '2',
'useFormattedValue' : true,
'ui': {
'allowTyping': false,
'allowMultiple': false,
'labelStacking': 'vertical'
}
}
});
new google.visualization.Dashboard(document.getElementById('table_dashboard')).
bind([$genderPicker], [ $tableWrapper]).
draw($dataTable);
Then, you should add a callback to your controls so whenever the control changes the charts outside of the dashboard will be updated, like a manual binding, let's assume that the control for cust_sex is $genderPicker and the ChartWrapper table object is $tableWrapper:
google.visualization.events.addListener($genderPicker, 'statechange',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
$pieChart.setDataTable( google.visualization.data.group(
// get the filtered results
$tableWrapper.getDataTable(),
[0],
[{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
));
// redraw the pie chart to reflect changes
$pieChart.draw();
});
The result: whenever you chose male, female or both the pie chart will reflect the filtered results grouped by name. Hope it helps someone and sorry for my broken english.
another way to do it, is to use the 'ready' event of the dashboard object, then create a chart or table in there based on a grouping done to the main table of the dashboard.
eg:
//create datatable, filter elements and chart elements for the the dashboard then:
dash=new google.visualization.Dashboard(document.getElementById(elId));
google.visualization.events.addListener(dash, 'ready', function() {
//redraw the barchart with grouped data
//console.log("redraw grouped");
var dt=mainTable.getDataTable();
var grouped_dt = google.visualization.data.group(
dt, [0],
[{'column': 7, 'aggregation': google.visualization.data.sum, 'type': 'number'}]);
var mainChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'barChart',
'options': {
'height':500,
'chartArea':{'left':200}
},
//view columns from the grouped datatable
'view': {'columns': [0, 1]},
'dataTable':grouped_dt
});
mainChart2.draw();
});
dash.bind(
[lots,of,filter,elements],
[lots,of,chart,elements]
);
dash.draw(data)
After a long R&D, I found the solution fot this problem. For the fix, I used two event listeners in which one is ready event and other is statechange event as,
google.visualization.events.addListener(subdivPicker, 'ready',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
columnChart1.setDataTable( google.visualization.data.group(
// get the filtered results
table.getDataTable(),
[0],
[{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
));
// redraw the pie chart to reflect changes
columnChart1.draw();
});
google.visualization.events.addListener(subdivPicker, 'statechange',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
columnChart1.setDataTable( google.visualization.data.group(
// get the filtered results
table.getDataTable(),
[0],
[{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
));
// redraw the pie chart to reflect changes
columnChart1.draw();
});
Find my initial (problematic) sample here and fixed (solved) sample here
Read this thread: How to not display the data table (read at least the first two posts - the rest are really only important if you are dealing with large data sets).
Basically, you have to use an intermediary chart (tables are a good choice, because they are relatively fast to write and render, with a lower memory footprint than most charts) that is completely hidden from the users. You bind the category picker to this chart in the dashboard. Then you set up an event handler for the picker's "statechange" event that takes the data, groups it into a new DataTable, and draws the PieChart based on the grouped data.