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 am using Oracle APEX 19.1.0.00.15 and I have a question regarding tooltips for a stacked bar chart. I have created a stacked bar chart that consists of three series, but I would only like for the tooltip to be rendered for two of the series. I see that there is an option in the chart's Attributes section to hide or show the tooltip for the chart as a whole, but not for individual series within the chart. I have tried to find the relevant JavaScript for the tooltip in the Oracle JavaScript Extension Toolkit API Reference http://https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojChart.html but I was not able to find anything useful. Does anyone have any advice for how to achieve this?
Thank you.
You need to set shortDesc attribute for each item of the series to an empty string.
You can do that in initialization phase using the following code:
function( options ){
options.dataFilter = function( data ) {
var l_items = data.series[ 0 ].items
for (var i=0; i<l_items.length; i++) {
l_items[i].shortDesc = "";
}
return data;
};
return options;
}
The above code will disable tooltip for the items of the first series.
I am creating a dashboard with Google Viz and am having trouble with the select event when the data is filtered. It works fine when the page loads and nothing is filtered. However, after filtering the data, it does not select the correct row from the dataTable on 'select' events. Here is my jsfiddle and my listener:
http://jsfiddle.net/5E7zX/1/
google.visualization.events.addListener(rBubbleChart, 'select', function() {
var selection = rBubbleChart.getChart().getSelection();
var item = selection[0];
var school = data.getValue(item.row, 1);
alert('school is: ' + school);
});
When it is unfiltered, the alert box displays the school that was selected. However, when it is filtered on a school, the alert box does not display the correct school (the exception is Air Base Elem because that is the first school in the list).
Any thoughts on how to get the correct row of data once the data is filtered? Thanks.
The selection indices refer to the data as seen by the chart, which is not necessarily the same as your base DataTable, so you need to check against the data used by the chart by calling the getDataTable method to fetch the chart's data, and then referencing that when getting a value:
google.visualization.events.addListener(rBubbleChart, 'select', function() {
var selection = rBubbleChart.getChart().getSelection();
// get the data used by the chart
var dt = rBubbleChart.getDataTable();
// test selection array length, since it can be zero when a user deselects a point!
if (selection.length) {
var item = selection[0];
var school = dt.getValue(item.row, 1);
alert('school is: ' + school);
}
});
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.
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.